Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (197028 => 197029)
--- trunk/Source/WebInspectorUI/ChangeLog 2016-02-24 14:17:48 UTC (rev 197028)
+++ trunk/Source/WebInspectorUI/ChangeLog 2016-02-24 17:06:50 UTC (rev 197029)
@@ -1,3 +1,53 @@
+2016-02-24 Nikita Vasilyev <nvasil...@apple.com>
+
+ Web Inspector: Dim selected items when docked Inspector window is inactive
+ https://bugs.webkit.org/show_bug.cgi?id=154526
+ <rdar://problem/24764365>
+
+ Abstract selected item and SVG glyph colors into CSS variables.
+
+ Reviewed by Timothy Hatcher.
+
+ * UserInterface/Views/BezierEditor.css:
+ (.bezier-editor > .bezier-preview > div):
+ * UserInterface/Views/ButtonNavigationItem.css:
+ (.navigation-bar .item.button > .glyph):
+ (.navigation-bar .item.button:not(.disabled):active > .glyph):
+ (.navigation-bar .item.button:not(.disabled):matches(:focus, .activate.activated, .radio.selected) > .glyph):
+ (.navigation-bar .item.button:not(.disabled):active:matches(:focus, .activate.activated, .radio.selected) > .glyph):
+ (.navigation-bar .item.button.disabled > .glyph):
+ * UserInterface/Views/ButtonToolbarItem.css:
+ (.toolbar .item.button:not(.disabled):matches(:focus, .activate.activated) > .glyph):
+ (.toolbar .item.button:not(.disabled):active:matches(:focus, .activate.activated) > .glyph):
+ * UserInterface/Views/CSSStyleDetailsSidebarPanel.css:
+ (.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle.selected):
+ (.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle:not(.selected):hover):
+ * UserInterface/Views/ConsoleMessageView.css:
+ (.console-user-command.special-user-log > .console-message-text):
+ * UserInterface/Views/DOMTreeOutline.css:
+ (.tree-outline.dom li.pseudo-class-enabled > .selection::before):
+ * UserInterface/Views/Main.css:
+ (input[type=range]::-webkit-slider-runnable-track::before):
+ * UserInterface/Views/RadioButtonNavigationItem.css:
+ (.navigation-bar .item.radio.button.text-only:hover):
+ (.navigation-bar .item.radio.button.text-only.selected):
+ (.navigation-bar .item.radio.button.text-only:active):
+ (.navigation-bar .item.radio.button.text-only.selected:active):
+ * UserInterface/Views/ScopeBar.css:
+ (.scope-bar > li.multiple:matches(.selected, :hover, :active) > .arrows):
+ (.scope-bar > li:hover):
+ (.scope-bar > li.selected):
+ (.scope-bar > li:active):
+ (.scope-bar > li.selected:active):
+ * UserInterface/Views/Variables.css:
+ (:root):
+ (body.window-inactive):
+ * UserInterface/Views/VisualStyleDetailsPanel.css:
+ (.sidebar > .panel.details.css-style .visual > .details-section .details-section.has-set-property > .header > span::after):
+ * UserInterface/Views/VisualStyleKeywordIconList.css:
+ (.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon:matches(.computed, .selected)):
+ (.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon.selected):
+
2016-02-23 Dan Bernstein <m...@apple.com>
[Xcode] Linker errors display mangled names, but no longer should
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css (197028 => 197029)
--- trunk/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css 2016-02-24 14:17:48 UTC (rev 197028)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css 2016-02-24 17:06:50 UTC (rev 197029)
@@ -38,7 +38,7 @@
.bezier-editor > .bezier-preview > div {
width: 20px;
height: 20px;
- background-color: hsl(212, 92%, 54%);
+ background-color: var(--selected-background-color);
border-radius: 50%;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css (197028 => 197029)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css 2016-02-24 14:17:48 UTC (rev 197028)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css 2016-02-24 17:06:50 UTC (rev 197029)
@@ -42,29 +42,21 @@
}
.navigation-bar .item.button > .glyph {
- color: hsl(0, 0%, 30%);
+ color: var(--glyph-color);
}
.navigation-bar .item.button:not(.disabled):active > .glyph {
- color: hsl(0, 0%, 15%);
+ color: var(--glyph-color-pressed);
}
.navigation-bar .item.button:not(.disabled):matches(:focus, .activate.activated, .radio.selected) > .glyph {
- color: hsl(212, 92%, 54%);
+ color: var(--glyph-color-active);
}
.navigation-bar .item.button:not(.disabled):active:matches(:focus, .activate.activated, .radio.selected) > .glyph {
- color: hsl(218, 85%, 52%);
+ color: var(--glyph-color-active-pressed);
}
-body.window-inactive .navigation-bar .item.button > .glyph {
- opacity: 0.65;
-}
-
.navigation-bar .item.button.disabled > .glyph {
- opacity: 0.55 !important;
+ color: var(--glyph-color-disabled);
}
-
-body.window-inactive .navigation-bar .item.button.disabled > .glyph {
- opacity: 0.35 !important;
-}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ButtonToolbarItem.css (197028 => 197029)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ButtonToolbarItem.css 2016-02-24 14:17:48 UTC (rev 197028)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ButtonToolbarItem.css 2016-02-24 17:06:50 UTC (rev 197029)
@@ -51,11 +51,11 @@
}
.toolbar .item.button:not(.disabled):matches(:focus, .activate.activated) > .glyph {
- color: hsl(212, 92%, 54%);
+ color: var(--selected-background-color);
}
.toolbar .item.button:not(.disabled):active:matches(:focus, .activate.activated) > .glyph {
- color: hsl(218, 85%, 52%);
+ color: var(--selected-background-color-active);
}
.toolbar.small-size .item.button > .glyph {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css (197028 => 197029)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css 2016-02-24 14:17:48 UTC (rev 197028)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css 2016-02-24 17:06:50 UTC (rev 197029)
@@ -107,13 +107,13 @@
}
.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle.selected {
- color: white;
- background-color: hsl(212, 92%, 54%);
+ color: var(--selected-foreground-color);
+ background-color: var(--selected-background-color);
}
.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle:not(.selected):hover {
- color: white;
- background-color: hsla(212, 92%, 54%, 0.5);
+ color: var(--selected-foreground-color);
+ background-color: var(--selected-background-color-hover);
}
.sidebar > .panel.details.css-style > .content:not(.supports-new-rule) ~ .options-container > .new-rule,
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.css (197028 => 197029)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.css 2016-02-24 14:17:48 UTC (rev 197028)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.css 2016-02-24 17:06:50 UTC (rev 197029)
@@ -33,8 +33,8 @@
padding: 0 6px 1px;
border-radius: 3px;
border: 1px solid transparent;
- background-color: hsl(212, 92%, 54%);
- color: white;
+ background-color: var(--selected-background-color);
+ color: var(--selected-foreground-color);
font: 10px -apple-system, sans-serif;
-webkit-user-select: none;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css (197028 => 197029)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css 2016-02-24 14:17:48 UTC (rev 197028)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css 2016-02-24 17:06:50 UTC (rev 197029)
@@ -102,7 +102,7 @@
width: 5px;
height: 5px;
content: "";
- background-color: hsl(212, 92%, 54%);
+ background-color: var(--selected-background-color);
border-radius: 50%;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Main.css (197028 => 197029)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Main.css 2016-02-24 14:17:48 UTC (rev 197028)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Main.css 2016-02-24 17:06:50 UTC (rev 197029)
@@ -112,7 +112,7 @@
input[type=range]::-webkit-slider-runnable-track::before {
content: "";
display: block;
- background: hsl(212, 92%, 54%);
+ background: var(--selected-background-color);
height: 1px;
margin: 8px 2px -8px 2px;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RadioButtonNavigationItem.css (197028 => 197029)
--- trunk/Source/WebInspectorUI/UserInterface/Views/RadioButtonNavigationItem.css 2016-02-24 14:17:48 UTC (rev 197028)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RadioButtonNavigationItem.css 2016-02-24 17:06:50 UTC (rev 197029)
@@ -32,20 +32,20 @@
}
.navigation-bar .item.radio.button.text-only:hover {
- color: white;
- background-color: hsla(212, 92%, 54%, 0.5);
+ color: var(--selected-foreground-color);
+ background-color: var(--selected-background-color-hover);
}
.navigation-bar .item.radio.button.text-only.selected {
- color: white;
- background-color: hsl(212, 92%, 54%);
+ color: var(--selected-foreground-color);
+ background-color: var(--selected-background-color);
}
.navigation-bar .item.radio.button.text-only:active {
- color: white;
+ color: var(--selected-foreground-color);
background-color: hsla(212, 92%, 54%, 0.55);
}
.navigation-bar .item.radio.button.text-only.selected:active {
- background-color: hsl(218, 85%, 52%);
+ background-color: var(--selected-background-color-active);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css (197028 => 197029)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css 2016-02-24 14:17:48 UTC (rev 197028)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css 2016-02-24 17:06:50 UTC (rev 197029)
@@ -72,7 +72,7 @@
}
.scope-bar > li.multiple:matches(.selected, :hover, :active) > .arrows {
- color: white;
+ color: var(--selected-foreground-color);
}
.scope-bar > li:matches(.selected, :active) {
@@ -80,20 +80,20 @@
}
.scope-bar > li:hover {
- color: white;
- background-color: hsla(212, 92%, 54%, 0.5);
+ color: var(--selected-foreground-color);
+ background-color: var(--selected-background-color-hover);
}
.scope-bar > li.selected {
- color: white;
- background-color: hsl(212, 92%, 54%);
+ color: var(--selected-foreground-color);
+ background-color: var(--selected-background-color);
}
.scope-bar > li:active {
- color: white;
+ color: var(--selected-foreground-color);
background-color: hsla(212, 92%, 54%, 0.55);
}
.scope-bar > li.selected:active {
- background-color: hsl(218, 85%, 52%);
+ background-color: var(--selected-background-color-active);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css (197028 => 197029)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2016-02-24 14:17:48 UTC (rev 197028)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2016-02-24 17:06:50 UTC (rev 197029)
@@ -32,6 +32,17 @@
--z-index-glass-pane-for-drag: 2048;
--z-index-uncaught-exception-sheet: 4096;
+ --selected-foreground-color: white;
+ --selected-background-color: hsl(212, 92%, 54%);
+ --selected-background-color-active: hsl(218, 85%, 52%);
+ --selected-background-color-hover: hsla(212, 92%, 54%, 0.5);
+
+ --glyph-color: hsl(0, 0%, 30%);
+ --glyph-color-pressed: hsl(0, 0%, 15%);
+ --glyph-color-disabled: hsla(0, 0%, 30%, 0.55);
+ --glyph-color-active: hsl(212, 92%, 54%);
+ --glyph-color-active-pressed: hsl(218, 85%, 52%);
+
--border-color: hsl(0, 0%, 70%);
--panel-background-color: hsl(0, 0%, 94%);
@@ -56,6 +67,15 @@
--memory-max-comparison-stroke-color: hsl(220, 10%, 55%);
}
+body.window-inactive {
+ /* FIXME: Use CSS4 color blend functions once they're available. */
+ --selected-background-color: hsla(212, 92%, 54%, 0.5);
+
+ --glyph-color-active: hsla(212, 92%, 54%, 0.5);
+ --glyph-color: hsla(0, 0%, 30%, 0.65);
+ --glyph-color-disabled: hsla(0, 0%, 30%, 0.35);
+}
+
body.window-inactive * {
--border-color: hsl(0, 0%, 85%);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.css (197028 => 197029)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.css 2016-02-24 14:17:48 UTC (rev 197028)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.css 2016-02-24 17:06:50 UTC (rev 197029)
@@ -51,7 +51,7 @@
height: 7px;
margin: 4px 6px;
border-radius: 50%;
- background-color: hsl(212, 92%, 54%);
+ background-color: var(--selected-background-color);
opacity: 0.5;
content: "";
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordIconList.css (197028 => 197029)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordIconList.css 2016-02-24 14:17:48 UTC (rev 197028)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordIconList.css 2016-02-24 17:06:50 UTC (rev 197029)
@@ -55,11 +55,11 @@
.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon:matches(.computed, .selected) {
width: 27px;
border-right: 1px solid;
- border-color: hsl(212, 92%, 54%);
+ border-color: var(--selected-background-color);
}
.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon.selected {
- background-color: hsl(212, 92%, 54%);
+ background-color: var(--selected-background-color);
color: hsl(0, 100%, 100%);
}
