Title: [242228] trunk/Source/WebInspectorUI
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;
 }
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to