- Revision
- 242228
- Author
- mattba...@apple.com
- Date
- 2019-02-28 14:32:38 -0800 (Thu, 28 Feb 2019)
Log Message
Web Inspector: Debugger: disabled breakpoint color is too dark
https://bugs.webkit.org/show_bug.cgi?id=195103
<rdar://problem/48440678>
Reviewed by Devin Rousso.
Increase the disabled breakpoint contrast, as well as the contrast between
disabled and auto-continue breakpoints. Disabled breakpoints stand out by
being somewhat brighter and less saturated. Using the same strategy for
auto-continue breakpoints is too subtle to provide sufficient contrast.
We can adopt the technique used by Xcode, and overlay a white triangle
marker on the breakpoint arrow to indicate an auto-continue breakpoint.
* UserInterface/Views/BreakpointTreeElement.css:
(.item.breakpoint .status > .status-image):
(.item.breakpoint.selected .status > .status-image.resolved):
Add white outline to make selected breakpoint button stand out.
(.item.breakpoint .status > .status-image.auto-continue::after):
(.item.breakpoint .status > .status-image.disabled):
(.item.breakpoint .status > .status-image.auto-continue): Deleted.
* UserInterface/Views/DOMTreeContentView.css:
(.content-view.dom-tree .tree-outline.dom li .status-image.breakpoint):
(.content-view.dom-tree .tree-outline.dom li .status-image.breakpoint.disabled):
(.content-view.dom-tree .tree-outline.dom li .status-image.breakpoint.subtree):
(.content-view.dom-tree .tree-outline.dom li .status-image.breakpoint.disabled,): Deleted.
* UserInterface/Views/TextEditor.css:
(.text-editor > .CodeMirror .has-breakpoint .CodeMirror-linenumber::before):
(.text-editor > .CodeMirror .breakpoint-auto-continue:not(.execution-line.primary) .CodeMirror-linenumber::after):
(.text-editor > .CodeMirror .breakpoint-disabled .CodeMirror-linenumber::before):
(.text-editor > .CodeMirror .breakpoint-auto-continue:not(.breakpoint-disabled) .CodeMirror-linenumber::before): Deleted.
* UserInterface/Views/Variables.css:
(:root):
Add breakpoint color variables to use across all breakpoint controls.
Use system colors if available, otherwise fall back to hard-coded values
based on sampling the default (blue) accent color on Mojave.
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (242227 => 242228)
--- trunk/Source/WebInspectorUI/ChangeLog 2019-02-28 22:29:48 UTC (rev 242227)
+++ trunk/Source/WebInspectorUI/ChangeLog 2019-02-28 22:32:38 UTC (rev 242228)
@@ -1,3 +1,46 @@
+2019-02-28 Matt Baker <mattba...@apple.com>
+
+ Web Inspector: Debugger: disabled breakpoint color is too dark
+ https://bugs.webkit.org/show_bug.cgi?id=195103
+ <rdar://problem/48440678>
+
+ Reviewed by Devin Rousso.
+
+ Increase the disabled breakpoint contrast, as well as the contrast between
+ disabled and auto-continue breakpoints. Disabled breakpoints stand out by
+ being somewhat brighter and less saturated. Using the same strategy for
+ auto-continue breakpoints is too subtle to provide sufficient contrast.
+
+ We can adopt the technique used by Xcode, and overlay a white triangle
+ marker on the breakpoint arrow to indicate an auto-continue breakpoint.
+
+ * UserInterface/Views/BreakpointTreeElement.css:
+ (.item.breakpoint .status > .status-image):
+ (.item.breakpoint.selected .status > .status-image.resolved):
+ Add white outline to make selected breakpoint button stand out.
+ (.item.breakpoint .status > .status-image.auto-continue::after):
+ (.item.breakpoint .status > .status-image.disabled):
+ (.item.breakpoint .status > .status-image.auto-continue): Deleted.
+
+
+ * UserInterface/Views/DOMTreeContentView.css:
+ (.content-view.dom-tree .tree-outline.dom li .status-image.breakpoint):
+ (.content-view.dom-tree .tree-outline.dom li .status-image.breakpoint.disabled):
+ (.content-view.dom-tree .tree-outline.dom li .status-image.breakpoint.subtree):
+ (.content-view.dom-tree .tree-outline.dom li .status-image.breakpoint.disabled,): Deleted.
+
+ * UserInterface/Views/TextEditor.css:
+ (.text-editor > .CodeMirror .has-breakpoint .CodeMirror-linenumber::before):
+ (.text-editor > .CodeMirror .breakpoint-auto-continue:not(.execution-line.primary) .CodeMirror-linenumber::after):
+ (.text-editor > .CodeMirror .breakpoint-disabled .CodeMirror-linenumber::before):
+ (.text-editor > .CodeMirror .breakpoint-auto-continue:not(.breakpoint-disabled) .CodeMirror-linenumber::before): Deleted.
+
+ * UserInterface/Views/Variables.css:
+ (:root):
+ Add breakpoint color variables to use across all breakpoint controls.
+ Use system colors if available, otherwise fall back to hard-coded values
+ based on sampling the default (blue) accent color on Mojave.
+
2019-02-28 Nikita Vasilyev <nvasil...@apple.com>
Web Inspector: Styles: Control-Space should force completion
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.css (242227 => 242228)
--- trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.css 2019-02-28 22:29:48 UTC (rev 242227)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.css 2019-02-28 22:32:38 UTC (rev 242228)
@@ -28,7 +28,7 @@
height: 12px;
margin-top: 2px;
- fill: var(--glyph-color-active);
+ fill: var(--breakpoint-color);
stroke: hsla(0, 0%, 10%, 0.3);
filter: grayscale();
}
@@ -37,12 +37,22 @@
filter: none;
}
-.item.breakpoint .status > .status-image.auto-continue {
- opacity: 0.6;
+.tree-outline:focus .item.breakpoint.selected .status > .status-image.resolved {
+ stroke: var(--selected-foreground-color);
}
+.item.breakpoint .status > .status-image.auto-continue::after {
+ position: absolute;
+ right: 8px;
+ width: 3px;
+ height: 12px;
+ content: "";
+ -webkit-clip-path: polygon(0 20%, 100% 50%, 0 80%);
+ background-color: var(--selected-foreground-color);
+}
+
.item.breakpoint .status > .status-image.disabled {
- opacity: 0.35;
+ fill: var(--breakpoint-color-disabled);
}
.item.breakpoint .subtitle.formatted-location {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css (242227 => 242228)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css 2019-02-28 22:29:48 UTC (rev 242227)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css 2019-02-28 22:32:38 UTC (rev 242228)
@@ -61,14 +61,17 @@
.content-view.dom-tree .tree-outline.dom li .status-image.breakpoint {
width: 15px;
- fill: var(--glyph-color-active);
+ fill: var(--breakpoint-color);
}
-body:not(.window-inactive) .content-view.dom-tree .tree-outline.dom:focus li.selected .status-image.breakpoint {
- stroke: white;
+body:not(.window-inactive) .content-view.dom-tree .tree-outline.dom:focus li:matches(.selected, :hover) .status-image.breakpoint {
+ stroke: var(--selected-foreground-color);
}
-.content-view.dom-tree .tree-outline.dom li .status-image.breakpoint.disabled,
+.content-view.dom-tree .tree-outline.dom:not(.breakpoints-disabled) li .status-image.breakpoint.disabled {
+ fill: var(--breakpoint-color-disabled);
+}
+
.content-view.dom-tree .tree-outline.dom.breakpoints-disabled li .status-image.breakpoint {
filter: grayscale();
}
@@ -75,9 +78,13 @@
.content-view.dom-tree .tree-outline.dom li .status-image.breakpoint.subtree {
fill: none;
- stroke: var(--glyph-color-active);
+ stroke: var(--breakpoint-color);
}
+body:not(.window-inactive) .content-view.dom-tree .tree-outline.dom:focus li:matches(.selected, :hover) .status-image.breakpoint.subtree {
+ stroke: var(--selected-foreground-color);
+}
+
.content-view.dom-tree .tree-outline.dom li.expanded .status-image.breakpoint.subtree {
display: none;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TextEditor.css (242227 => 242228)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TextEditor.css 2019-02-28 22:29:48 UTC (rev 242227)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TextEditor.css 2019-02-28 22:32:38 UTC (rev 242228)
@@ -59,8 +59,8 @@
-webkit-clip-path: polygon(0% 50%, 5px 100%, 100% 100%, 100% 0, 5px 0);
transform: scaleX(-1);
- background-color: var(--glyph-color-active);
- filter: grayscale() brightness(1.2);
+ background-color: var(--breakpoint-color);
+ filter: grayscale();
}
.text-editor > .CodeMirror .breakpoint-resolved .CodeMirror-linenumber::before {
@@ -67,12 +67,21 @@
filter: none;
}
-.text-editor > .CodeMirror .breakpoint-auto-continue:not(.breakpoint-disabled) .CodeMirror-linenumber::before {
- opacity: 0.6;
+.text-editor > .CodeMirror .breakpoint-auto-continue:not(.execution-line.primary) .CodeMirror-linenumber::after {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: -7px;
+ content: "";
+ z-index: -1;
+ -webkit-clip-path: polygon(5px 20%, 5px 80%, 2px 50%);
+ background-color: var(--selected-foreground-color);
+ transform: scaleX(-1);
}
.text-editor > .CodeMirror .breakpoint-disabled .CodeMirror-linenumber::before {
- opacity: 0.35;
+ background-color: var(--breakpoint-color-disabled);
}
.text-editor > .CodeMirror .has-breakpoint.multiple-breakpoints .CodeMirror-linenumber::before {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css (242227 => 242228)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2019-02-28 22:29:48 UTC (rev 242227)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2019-02-28 22:32:38 UTC (rev 242228)
@@ -59,6 +59,9 @@
--selected-background-color-highlight: hsla(0, 0%, 100%, 0.3);
--selected-text-background-color: hsl(210, 98%, 93%);
+ --breakpoint-color: hsl(211, 100%, 50%);
+ --breakpoint-color-disabled: hsl(211, 82%, 82%);
+
--glyph-color: hsl(0, 0%, 30%);
--glyph-color-pressed: hsl(0, 0%, 15%);
--glyph-color-disabled: hsla(0, 0%, 30%, 0.55);
@@ -326,6 +329,9 @@
--selected-background-color: -apple-system-selected-content-background;
--selected-text-background-color: -apple-system-selected-text-background;
+ --breakpoint-color: -apple-system-control-accent;
+ --breakpoint-color-disabled: -apple-system-selected-text-background;
+
--glyph-color-active: -apple-system-control-accent;
--glyph-color-active-pressed: -apple-system-control-accent;
}