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.


Canonical link: https://commits.webkit.org/209511@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@242228 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog

@@ -1,3 +1,46 @@
+2019-02-28  Matt Baker  <mattbaker@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  <nvasilyev@apple.com>
 
         Web Inspector: Styles: Control-Space should force completion

Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.css

@@ -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 {

Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css

@@ -61,21 +61,28 @@ body[dir=rtl] .content-view.dom-tree .tree-outline.dom li .status-image {
 
 .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:not(.breakpoints-disabled) li .status-image.breakpoint.disabled {
+    fill: var(--breakpoint-color-disabled);
 }
 
-.content-view.dom-tree .tree-outline.dom li .status-image.breakpoint.disabled,
 .content-view.dom-tree .tree-outline.dom.breakpoints-disabled li .status-image.breakpoint {
     filter: grayscale();
 }
 
 .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 {

Source/WebInspectorUI/UserInterface/Views/TextEditor.css

@@ -59,20 +59,29 @@
 
     -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 {
     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 {

Source/WebInspectorUI/UserInterface/Views/Variables.css

@@ -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 @@ body.mac-platform:not(.sierra, .high-sierra) {
     --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;
 }