Attachment 345978 Details for Bug 188119 – Patch

[patch] Patch

patch.txt (text/plain), 8.00 KB, created by Nikita Vasilyev on 2018-07-27 17:16:39 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Nikita Vasilyev

Created: 2018-07-27 17:16:39 PDT

Size: 8.00 KB

patch

obsolete

>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index db62e91f69d..f5b47c3f0f7 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,36 @@
>+2018-07-27  Nikita Vasilyev  <nvasilyev@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 NOBODY (OOPS!).
>+
>+        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):
>+        (.source-code.text-editor > .CodeMirror .issue-widget.inline.warning > .arrow): Deleted.
>+        (.source-code.text-editor > .CodeMirror .issue-widget.inline.error > .arrow): Deleted.
>+        * 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):
>+        (.source-code.text-editor > .CodeMirror .line-indicator-widget > .arrow): Deleted.
>+        (.source-code.text-editor > .CodeMirror .line-indicator-widget.inline > .arrow): Deleted.
>+        (.source-code.text-editor > .CodeMirror .issue-widget.inline.warning > .arrow): Deleted.
>+        (.source-code.text-editor > .CodeMirror .issue-widget.inline.error > .arrow): Deleted.
>+        (.source-code.text-editor > .CodeMirror .thread-widget.inline > .arrow): Deleted.
>+        * UserInterface/Views/SourceCodeTextEditor.js:
>+        (WI.SourceCodeTextEditor.prototype._updateThreadIndicatorWidget):
>+        (WI.SourceCodeTextEditor.prototype._updateIssueWidgetForIssues):
>+        * UserInterface/Views/Variables.css:
>+        (:root):
>+
> 2018-07-22  Nikita Vasilyev  <nvasilyev@apple.com>
> 
>         Web Inspector: Dark Mode: remove odd-looking top border
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DarkMode.css b/Source/WebInspectorUI/UserInterface/Views/DarkMode.css
>index dac6aec4bd4..d4885f10122 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/DarkMode.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/DarkMode.css
>@@ -233,7 +233,7 @@
> 
>     /* 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 {
>@@ -1034,18 +1034,10 @@
>         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 {
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.css b/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.css
>index 10728e49586..16c56caf493 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.css
>@@ -24,6 +24,7 @@
>  */
> 
> .source-code.text-editor .CodeMirror-linewidget {
>+    color: var(--text-color-active);
>     overflow: initial;
>     z-index: 3; /* overlap line content */
> }
>@@ -51,32 +52,9 @@
>     position: relative;
>     top: -13px;
>     height: 13px;
>-    padding: 0px 5px 0 3px;
>+    padding: 0 5px 0 8px;
>     border-bottom-left-radius: 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;
>-    }
>+    -webkit-clip-path: polygon(0% 50%, 8px 100%, 100% 100%, 100% 0, 8px 0);
> }
> 
> .source-code.text-editor > .CodeMirror .line-indicator-widget > .icon {
>@@ -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%);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js b/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js
>index e5b2c6bbc15..83d0ff1b590 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js
>@@ -776,9 +776,6 @@ WI.SourceCodeTextEditor = class SourceCodeTextEditor extends WI.TextEditor
>         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 @@ WI.SourceCodeTextEditor = class SourceCodeTextEditor extends WI.TextEditor
>         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";
> 
>diff --git a/Source/WebInspectorUI/UserInterface/Views/Variables.css b/Source/WebInspectorUI/UserInterface/Views/Variables.css
>index 94f380e2882..22fe7619e2b 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/Variables.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/Variables.css
>@@ -32,6 +32,9 @@
>     --z-index-glass-pane-for-drag: 2048;
>     --z-index-uncaught-exception-sheet: 4096;
> 
>+    --text-color: black;
>+    --text-color-active: black;
>+
>     --background-color-content: white;
> 
>     --selected-foreground-color: white;

Flags:

mattbaker: review-

Actions: View | Formatted Diff | Diff

Attachments on bug 188119: 345937 | 345978 | 345979 | 345991 | 346080 | 346228 | 346229 | 346242 | 346243 | 346252