- Revision
- 234465
- Author
- nvasil...@apple.com
- Date
- 2018-08-01 11:12:17 -0700 (Wed, 01 Aug 2018)
Log Message
Web Inspector: Dark Mode: SourceCodeTextEditor thread indicator widget is too light
https://bugs.webkit.org/show_bug.cgi?id=188119
<rdar://problem/42670811>
Reviewed by Matt Baker.
Make the background of the thread indicator widget darker.
Reduce the number of HTML elements and simplify CSS by removing the HTML element that drew an arrow and using clip-path on inline widgets instead.
* UserInterface/Views/DarkMode.css:
(@media (prefers-dark-interface)):
(.text-editor > .CodeMirror .execution-line):
(.text-editor > .CodeMirror .execution-range-highlight:not(.CodeMirror-selectedtext),):
* UserInterface/Views/SourceCodeTextEditor.css:
(.source-code.text-editor .CodeMirror-linewidget):
(.source-code.text-editor > .CodeMirror .line-indicator-widget.inline):
(@media (prefers-dark-interface)):
(.source-code.text-editor > .CodeMirror .thread-widget.inline):
* UserInterface/Views/SourceCodeTextEditor.js:
(WI.SourceCodeTextEditor.prototype._updateThreadIndicatorWidget):
(WI.SourceCodeTextEditor.prototype._updateIssueWidgetForIssues):
* UserInterface/Views/TextEditor.css:
(@media (prefers-dark-interface)):
(.text-editor > .CodeMirror .execution-line.primary .CodeMirror-linenumber::after):
* UserInterface/Views/Variables.css:
(:root):
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (234464 => 234465)
--- trunk/Source/WebInspectorUI/ChangeLog 2018-08-01 18:09:38 UTC (rev 234464)
+++ trunk/Source/WebInspectorUI/ChangeLog 2018-08-01 18:12:17 UTC (rev 234465)
@@ -1,5 +1,35 @@
2018-08-01 Nikita Vasilyev <nvasil...@apple.com>
+ Web Inspector: Dark Mode: SourceCodeTextEditor thread indicator widget is too light
+ https://bugs.webkit.org/show_bug.cgi?id=188119
+ <rdar://problem/42670811>
+
+ Reviewed by Matt Baker.
+
+ Make the background of the thread indicator widget darker.
+
+ Reduce the number of HTML elements and simplify CSS by removing the HTML element that drew an arrow and using clip-path on inline widgets instead.
+
+ * UserInterface/Views/DarkMode.css:
+ (@media (prefers-dark-interface)):
+ (.text-editor > .CodeMirror .execution-line):
+ (.text-editor > .CodeMirror .execution-range-highlight:not(.CodeMirror-selectedtext),):
+ * UserInterface/Views/SourceCodeTextEditor.css:
+ (.source-code.text-editor .CodeMirror-linewidget):
+ (.source-code.text-editor > .CodeMirror .line-indicator-widget.inline):
+ (@media (prefers-dark-interface)):
+ (.source-code.text-editor > .CodeMirror .thread-widget.inline):
+ * UserInterface/Views/SourceCodeTextEditor.js:
+ (WI.SourceCodeTextEditor.prototype._updateThreadIndicatorWidget):
+ (WI.SourceCodeTextEditor.prototype._updateIssueWidgetForIssues):
+ * UserInterface/Views/TextEditor.css:
+ (@media (prefers-dark-interface)):
+ (.text-editor > .CodeMirror .execution-line.primary .CodeMirror-linenumber::after):
+ * UserInterface/Views/Variables.css:
+ (:root):
+
+2018-08-01 Nikita Vasilyev <nvasil...@apple.com>
+
Web Inspector: Dark Mode: disabled breakpoints banner is too light
https://bugs.webkit.org/show_bug.cgi?id=188120
<rdar://problem/42671348>
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DarkMode.css (234464 => 234465)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DarkMode.css 2018-08-01 18:09:38 UTC (rev 234464)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DarkMode.css 2018-08-01 18:12:17 UTC (rev 234465)
@@ -233,11 +233,11 @@
/* TextEditor.css */
.text-editor > .CodeMirror .execution-line {
- background-color: hsla(99, 100%, 51%, 0.3) !important;
+ background-color: hsla(89, 100%, 51%, 0.25) !important;
}
.text-editor > .CodeMirror .execution-range-highlight:not(.CodeMirror-selectedtext),
.text-editor > .CodeMirror .execution-range-highlight:not(.CodeMirror-selectedtext) + .CodeMirror-widget {
- background-color: hsl(99, 96%, 19%);
+ background-color: hsl(99, 85%, 30%);
}
@@ -1043,19 +1043,11 @@
background-color: var(--warning-background-color);
}
- .source-code.text-editor > .CodeMirror .issue-widget.inline.warning > .arrow {
- border-right-color: var(--warning-background-color);
- }
-
.source-code.text-editor > .CodeMirror .issue-widget.inline.error {
background-color: var(--error-background-color);
}
- .source-code.text-editor > .CodeMirror .issue-widget.inline.error > .arrow {
- border-right-color: var(--error-background-color);
- }
-
/* ConsoleMessageView.css */
.console-message .syntax-highlighted {
background-color: unset;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.css (234464 => 234465)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.css 2018-08-01 18:09:38 UTC (rev 234464)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.css 2018-08-01 18:12:17 UTC (rev 234465)
@@ -24,6 +24,7 @@
*/
.source-code.text-editor .CodeMirror-linewidget {
+ color: var(--text-color-active);
overflow: initial;
z-index: 3; /* overlap line content */
}
@@ -51,34 +52,11 @@
position: relative;
top: -13px;
height: 13px;
- padding: 0px 5px 0 3px;
+ padding: 0 5px 0 8px;
border-bottom-left-radius: 0;
+ -webkit-clip-path: polygon(0% 50%, 8px 100%, 100% 100%, 100% 0, 8px 0);
}
-.source-code.text-editor > .CodeMirror .line-indicator-widget > .arrow {
- display: none;
-}
-
-.source-code.text-editor > .CodeMirror .line-indicator-widget.inline > .arrow {
- position: absolute;
- left: -5px;
- display: block;
-
- top: 0px;
- width: 0px;
- height: 0px;
-
- border-top: 6.5px solid transparent;
- border-bottom: 6.5px solid transparent;
- border-right: 5.5px solid transparent;
-}
-
-@media (-webkit-min-device-pixel-ratio: 2) {
- .source-code.text-editor > .CodeMirror .line-indicator-widget.inline > .arrow {
- left: -5.5px;
- }
-}
-
.source-code.text-editor > .CodeMirror .line-indicator-widget > .icon {
height: 9px;
width: 9px;
@@ -117,10 +95,6 @@
background-color: hsl(43, 97%, 84%);
}
-.source-code.text-editor > .CodeMirror .issue-widget.inline.warning > .arrow {
- border-right-color: hsl(43, 97%, 84%);
-}
-
.source-code.text-editor > .CodeMirror .issue-widget.error {
background-color: hsl(15, 100%, 90%);
}
@@ -129,10 +103,6 @@
background-color: hsl(11, 100%, 80%);
}
-.source-code.text-editor > .CodeMirror .issue-widget.inline.error > .arrow {
- border-right-color: hsl(11, 100%, 80%);
-}
-
.source-code.text-editor > .CodeMirror .thread-widget {
background-color: hsl(90, 30%, 82%);
}
@@ -141,10 +111,6 @@
background-color: hsl(90, 30%, 82%);
}
-.source-code.text-editor > .CodeMirror .thread-widget.inline > .arrow {
- border-right-color: hsl(90, 30%, 82%);
-}
-
.popover .debugger-popover-content {
font-family: Menlo, monospace;
font-size: 11px;
@@ -216,3 +182,9 @@
border-width: 0.5px;
}
}
+
+@media (prefers-dark-interface) {
+ .source-code.text-editor > .CodeMirror .thread-widget.inline {
+ background-color: hsl(99, 85%, 34%);
+ }
+}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js (234464 => 234465)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js 2018-08-01 18:09:38 UTC (rev 234464)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js 2018-08-01 18:12:17 UTC (rev 234465)
@@ -776,9 +776,6 @@
widget[WI.SourceCodeTextEditor.WidgetContainsMultipleThreadsSymbol] = threads.length > 1;
if (widgetElement.classList.contains("inline") || threads.length === 1) {
- let arrowElement = widgetElement.appendChild(document.createElement("span"));
- arrowElement.className = "arrow";
-
let textElement = widgetElement.appendChild(document.createElement("span"));
textElement.className = "text";
textElement.textContent = threads.length === 1 ? threads[0].displayName : WI.UIString("%d Threads").format(threads.length);
@@ -1083,9 +1080,6 @@
widgetElement.removeChildren();
if (widgetElement.classList.contains("inline") || issues.length === 1) {
- var arrowElement = widgetElement.appendChild(document.createElement("span"));
- arrowElement.className = "arrow";
-
var iconElement = widgetElement.appendChild(document.createElement("span"));
iconElement.className = "icon";
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TextEditor.css (234464 => 234465)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TextEditor.css 2018-08-01 18:09:38 UTC (rev 234464)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TextEditor.css 2018-08-01 18:12:17 UTC (rev 234465)
@@ -129,3 +129,9 @@
from { background-color: highlight; }
to { background-color: hsla(0, 0%, 0%, 0.1); }
}
+
+@media (prefers-dark-interface) {
+ .text-editor > .CodeMirror .execution-line.primary .CodeMirror-linenumber::after {
+ filter: brightness(0.9) saturate(2.8);
+ }
+}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css (234464 => 234465)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2018-08-01 18:09:38 UTC (rev 234464)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2018-08-01 18:12:17 UTC (rev 234465)
@@ -32,6 +32,8 @@
--z-index-glass-pane-for-drag: 2048;
--z-index-uncaught-exception-sheet: 4096;
+ --text-color-active: black;
+
--background-color-content: white;
--selected-foreground-color: white;
