Skip to content
Permalink
Browse files
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
  • Loading branch information
LuckyKobold committed Feb 28, 2019
1 parent 3755232 commit 0097fcfed75e518fcd2ea4aa08e418ebb94502ef
Showing 5 changed files with 89 additions and 14 deletions.
@@ -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
@@ -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 {
@@ -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 {
@@ -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 {
@@ -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;
}

0 comments on commit 0097fcf

Please sign in to comment.