Web Inspector: Make Console's Execution Context picker stand out when it is non-default
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 16 Jan 2018 22:26:26 +0000 (22:26 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 16 Jan 2018 22:26:26 +0000 (22:26 +0000)
https://bugs.webkit.org/show_bug.cgi?id=181628
<rdar://problem/36492044>

Patch by Joseph Pecoraro <pecoraro@apple.com> on 2018-01-16
Reviewed by Matt Baker.

* UserInterface/Views/HierarchicalPathComponent.css:
(.hierarchical-path-component > .selector-arrows):
* UserInterface/Views/HierarchicalPathComponent.js:
(WI.HierarchicalPathComponent.prototype.set selectorArrows):
Switch to SVG element so we can style the arrows.

* UserInterface/Views/QuickConsole.css:
(.quick-console > .navigation-bar > .hierarchical-path .execution-context):
(.quick-console > .navigation-bar > .hierarchical-path .execution-context .separator):
(.quick-console > .navigation-bar > .hierarchical-path.non-default-execution-context .execution-context):
(.quick-console > .navigation-bar > .hierarchical-path.non-default-execution-context .execution-context .selector-arrows):
Styles for the execution context picker. We hide the unused separator
and instead use margin so that the selected background and border don't
have an extra 7px on the right/end side.

* UserInterface/Views/QuickConsole.js:
(WI.QuickConsole.prototype._activeExecutionContextChanged):
Toggle the non-default class name on the path.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@227003 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/HierarchicalPathComponent.css
Source/WebInspectorUI/UserInterface/Views/HierarchicalPathComponent.js
Source/WebInspectorUI/UserInterface/Views/QuickConsole.css
Source/WebInspectorUI/UserInterface/Views/QuickConsole.js

index 6cde89c157fcba8b28ffb2c2041910bb652df0d3..72c28c2476daf98cf340d26ec8d9cf534a490abd 100644 (file)
@@ -1,3 +1,30 @@
+2018-01-16  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Web Inspector: Make Console's Execution Context picker stand out when it is non-default
+        https://bugs.webkit.org/show_bug.cgi?id=181628
+        <rdar://problem/36492044>
+
+        Reviewed by Matt Baker.
+
+        * UserInterface/Views/HierarchicalPathComponent.css:
+        (.hierarchical-path-component > .selector-arrows):
+        * UserInterface/Views/HierarchicalPathComponent.js:
+        (WI.HierarchicalPathComponent.prototype.set selectorArrows):
+        Switch to SVG element so we can style the arrows.
+
+        * UserInterface/Views/QuickConsole.css:
+        (.quick-console > .navigation-bar > .hierarchical-path .execution-context):
+        (.quick-console > .navigation-bar > .hierarchical-path .execution-context .separator):
+        (.quick-console > .navigation-bar > .hierarchical-path.non-default-execution-context .execution-context):
+        (.quick-console > .navigation-bar > .hierarchical-path.non-default-execution-context .execution-context .selector-arrows):
+        Styles for the execution context picker. We hide the unused separator
+        and instead use margin so that the selected background and border don't
+        have an extra 7px on the right/end side.
+
+        * UserInterface/Views/QuickConsole.js:
+        (WI.QuickConsole.prototype._activeExecutionContextChanged):
+        Toggle the non-default class name on the path.
+
 2018-01-16  Nikita Vasilyev  <nvasilyev@apple.com>
 
         Web Inspector: Styles: pressing down key should select first item from completion list when focusing on empty value
index ad2e3fc851043fc26ea4860a4d2fc597d6d3cdb6..4c29eda8fb5e3a34eceebc685118465a1c34af54 100644 (file)
@@ -82,7 +82,6 @@ body[dir=rtl] .hierarchical-path-component > :matches(.icon, .selector-arrows) {
     width: 5px;
     height: 16px;
     opacity: 0.6;
-    content: url(../Images/UpDownArrows.svg);
 }
 
 .hierarchical-path-component > .title {
index fc108f3bf671f9d83e692e7beed55a356d34eb1a..92ae438e07de1539997f5d707501bb139a2f94af 100644 (file)
@@ -207,8 +207,7 @@ WI.HierarchicalPathComponent = class HierarchicalPathComponent extends WI.Object
         this._selectorArrows = flag;
 
         if (this._selectorArrows) {
-            this._selectorArrowsElement = document.createElement("img");
-            this._selectorArrowsElement.className = "selector-arrows";
+            this._selectorArrowsElement = WI.ImageUtilities.useSVGSymbol("Images/UpDownArrows.svg", "selector-arrows");
             this._element.insertBefore(this._selectorArrowsElement, this._separatorElement);
         } else if (this._selectorArrowsElement) {
             this._selectorArrowsElement.remove();
index bf02a00ebcb8ef5892148725f60147fb3523cba0..04d732edb8b5e67439f5878a6e2f9d56e5a88ec0 100644 (file)
 .quick-console .execution-context {
     margin-top: -1px;
 }
+
+.quick-console > .navigation-bar > .hierarchical-path .execution-context {
+    -webkit-margin-end: 7px;
+}
+
+.quick-console > .navigation-bar > .hierarchical-path .execution-context .separator {
+    display: none;
+}
+
+.quick-console > .navigation-bar > .hierarchical-path.non-default-execution-context .execution-context {
+    background: var(--selected-background-color);
+    border-radius: 3px;
+    color: var(--selected-foreground-color);
+}
+
+.quick-console > .navigation-bar > .hierarchical-path.non-default-execution-context .execution-context .selector-arrows {
+    color: var(--selected-foreground-color);
+    opacity: 1;
+}
index 1ac669f64d477cd92f91dde3ac7080be87924eba..689fca5e53b75bc0df669f9618447026a16be288 100644 (file)
@@ -191,6 +191,8 @@ WI.QuickConsole = class QuickConsole extends WI.View
     _activeExecutionContextChanged(event)
     {
         this._rebuildExecutionContextPathComponents();
+
+        this._executionContextSelectorItem.element.classList.toggle("non-default-execution-context", this.selectedExecutionContext !== WI.mainTarget.executionContext);
     }
 
     _createExecutionContextPathComponent(executionContext, preferredName)