Web Inspector: Console: all navigation items should be shown in the split console
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 2 Aug 2019 21:07:07 +0000 (21:07 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 2 Aug 2019 21:07:07 +0000 (21:07 +0000)
https://bugs.webkit.org/show_bug.cgi?id=200280

Reviewed by Joseph Pecoraro.

* UserInterface/Views/LogContentView.js:
(WI.LogContentView):
(WI.LogContentView.prototype.get navigationItems):
Adjust the `visibilityPriority` of each `navigationItems` so that the filter/scope bars are
kept visible for longer than the "Preserve Log"/"Emulate User Gesture" toggles.

* UserInterface/Views/FindBanner.js:
(WI.FindBanner):
* UserInterface/Views/FindBanner.css:
(.find-banner.console-find-banner > input[type="search"]):
(.find-banner.console-find-banner > :matches(input[type="search"], button)):
(.find-banner.console-find-banner > input[type="search"]:focus, .find-banner.console-find-banner > input[type="search"]:focus ~ button, .find-banner.console-find-banner > input[type="search"]:not(:placeholder-shown), .find-banner.console-find-banner > input[type="search"]:not(:placeholder-shown) ~ button ): Added.
(.find-banner.console-find-banner > input[type="search"]::placeholder): Deleted.
(.find-banner.console-find-banner > input[type="search"]:focus): Deleted.
(.find-banner.console-find-banner > input[type="search"]:not(:placeholder-shown)): Deleted.
(@media (prefers-color-scheme: dark) .find-banner.console-find-banner > input[type=search]:not(:placeholder-shown)): Deleted.
Make the `WI.FindBanner` blend in with the surrounding content when it's not focused or has
no content.

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

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/FindBanner.css
Source/WebInspectorUI/UserInterface/Views/FindBanner.js
Source/WebInspectorUI/UserInterface/Views/LogContentView.js

index f51ccf5..cf96d14 100644 (file)
@@ -1,5 +1,31 @@
 2019-08-02  Devin Rousso  <drousso@apple.com>
 
+        Web Inspector: Console: all navigation items should be shown in the split console
+        https://bugs.webkit.org/show_bug.cgi?id=200280
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Views/LogContentView.js:
+        (WI.LogContentView):
+        (WI.LogContentView.prototype.get navigationItems):
+        Adjust the `visibilityPriority` of each `navigationItems` so that the filter/scope bars are
+        kept visible for longer than the "Preserve Log"/"Emulate User Gesture" toggles.
+
+        * UserInterface/Views/FindBanner.js:
+        (WI.FindBanner):
+        * UserInterface/Views/FindBanner.css:
+        (.find-banner.console-find-banner > input[type="search"]):
+        (.find-banner.console-find-banner > :matches(input[type="search"], button)):
+        (.find-banner.console-find-banner > input[type="search"]:focus, .find-banner.console-find-banner > input[type="search"]:focus ~ button, .find-banner.console-find-banner > input[type="search"]:not(:placeholder-shown), .find-banner.console-find-banner > input[type="search"]:not(:placeholder-shown) ~ button ): Added.
+        (.find-banner.console-find-banner > input[type="search"]::placeholder): Deleted.
+        (.find-banner.console-find-banner > input[type="search"]:focus): Deleted.
+        (.find-banner.console-find-banner > input[type="search"]:not(:placeholder-shown)): Deleted.
+        (@media (prefers-color-scheme: dark) .find-banner.console-find-banner > input[type=search]:not(:placeholder-shown)): Deleted.
+        Make the `WI.FindBanner` blend in with the surrounding content when it's not focused or has
+        no content.
+
+2019-08-02  Devin Rousso  <drousso@apple.com>
+
         Web Inspector: Storage: disable related agents when the tab is closed
         https://bugs.webkit.org/show_bug.cgi?id=200117
 
index f9fa894..4c9704f 100644 (file)
@@ -246,8 +246,6 @@ body .find-banner.console-find-banner {
     padding-top: 0;
     outline: none;
     border: 1px solid var(--border-color);
-    background-color: hsla(0, 0%, 100%, 0.2);
-    background-clip: padding-box;
 
     --console-find-banner-search-box-border-radius-start: 3px;
     --console-find-banner-search-box-border-radius-end: 0;
@@ -268,25 +266,19 @@ body[dir=rtl] .find-banner.console-find-banner > input[type="search"] {
 }
 
 .find-banner.console-find-banner > :matches(input[type="search"], button) {
+    background-color: inherit;
     height: 22px;
 }
 
-.find-banner.console-find-banner > input[type="search"]::placeholder {
-    color: hsla(0, 0%, 0%, 0.35);
-}
-
 .find-banner.console-find-banner > input[type="search"]::-webkit-textfield-decoration-container {
     -webkit-margin-start: 4px;
 }
 
-.find-banner.console-find-banner > input[type="search"]:focus {
-    background-color: white;
-}
-
-/* Make the search field's background white when it is not focused and has content.
-   Needs to be a separate rule. See http://webkit.org/b/118162 */
-.find-banner.console-find-banner > input[type="search"]:not(:placeholder-shown) {
-    background-color: white;
+.find-banner.console-find-banner > input[type="search"]:focus,
+.find-banner.console-find-banner > input[type="search"]:focus ~ button,
+.find-banner.console-find-banner > input[type="search"]:not(:placeholder-shown),
+.find-banner.console-find-banner > input[type="search"]:not(:placeholder-shown) ~ button {
+    background-color: var(--background-color);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -302,9 +294,4 @@ body[dir=rtl] .find-banner.console-find-banner > input[type="search"] {
         background-color: var(--background-color-alternate);
         border-color: var(--background-color-selected);
     }
-
-    .find-banner.console-find-banner > input[type=search]:not(:placeholder-shown) {
-        color: unset;
-        background-color: unset;
-    }
 }
index dc92c70..05783aa 100644 (file)
@@ -41,6 +41,7 @@ WI.FindBanner = class FindBanner extends WI.NavigationItem
 
         this._inputField = document.createElement("input");
         this._inputField.type = "search";
+        this._inputField.placeholder = " "; // This is necessary for :placeholder-shown.
         this._inputField.spellcheck = false;
         this._inputField.incremental = true;
         this._inputField.setAttribute("results", 5);
index 35924ae..80f82d7 100644 (file)
@@ -61,6 +61,7 @@ WI.LogContentView = class LogContentView extends WI.ContentView
 
         const fixed = true;
         this._findBanner = new WI.FindBanner(this, "console-find-banner", fixed);
+        this._findBanner.visibilityPriority = WI.NavigationItem.VisibilityPriority.High;
         this._findBanner.targetElement = this.element;
 
         this._currentSearchQuery = "";
@@ -69,6 +70,7 @@ WI.LogContentView = class LogContentView extends WI.ContentView
         this._selectedSearchMatchIsValid = false;
 
         this._preserveLogNavigationItem = new WI.CheckboxNavigationItem("preserve-log", WI.UIString("Preserve Log"), !WI.settings.clearLogOnNavigate.value);
+        this._preserveLogNavigationItem.visibilityPriority = WI.NavigationItem.VisibilityPriority.Low;
         this._preserveLogNavigationItem.tooltip = WI.UIString("Do not clear the console on new page loads");
         this._preserveLogNavigationItem.addEventListener(WI.CheckboxNavigationItem.Event.CheckedDidChange, () => {
             WI.settings.clearLogOnNavigate.value = !WI.settings.clearLogOnNavigate.value;
@@ -76,6 +78,7 @@ WI.LogContentView = class LogContentView extends WI.ContentView
         WI.settings.clearLogOnNavigate.addEventListener(WI.Setting.Event.Changed, this._handleClearLogOnNavigateSettingChanged, this);
 
         this._emulateInUserGestureNavigationItem = new WI.CheckboxNavigationItem("emulate-in-user-gesture", WI.UIString("Emulate User Gesture"), WI.settings.emulateInUserGesture.value);
+        this._emulateInUserGestureNavigationItem.visibilityPriority = WI.NavigationItem.VisibilityPriority.Low;
         this._emulateInUserGestureNavigationItem.tooltip = WI.UIString("Run console commands as if inside a user gesture");
         this._emulateInUserGestureNavigationItem.addEventListener(WI.CheckboxNavigationItem.Event.CheckedDidChange, () => {
             WI.settings.emulateInUserGesture.value = !WI.settings.emulateInUserGesture.value;
@@ -100,6 +103,7 @@ WI.LogContentView = class LogContentView extends WI.ContentView
         }
 
         this._scopeBar = new WI.ScopeBar("log-scope-bar", scopeBarItems, scopeBarItems[0]);
+        this._scopeBar.visibilityPriority = WI.NavigationItem.VisibilityPriority.High;
         this._scopeBar.addEventListener(WI.ScopeBar.Event.SelectionChanged, this._scopeBarSelectionDidChange, this);
 
         this._hasNonDefaultLogChannelMessage = false;
@@ -116,11 +120,9 @@ WI.LogContentView = class LogContentView extends WI.ContentView
         }
 
         this._garbageCollectNavigationItem = new WI.ButtonNavigationItem("garbage-collect", WI.UIString("Collect garbage"), "Images/NavigationItemGarbageCollect.svg", 16, 16);
-        this._garbageCollectNavigationItem.visibilityPriority = WI.NavigationItem.VisibilityPriority.Low;
         this._garbageCollectNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this._garbageCollect, this);
 
         this._clearLogNavigationItem = new WI.ButtonNavigationItem("clear-log", WI.UIString("Clear log (%s or %s)").format(WI.clearKeyboardShortcut.displayName, this._logViewController.messagesAlternateClearKeyboardShortcut.displayName), "Images/NavigationItemTrash.svg", 15, 15);
-        this._clearLogNavigationItem.visibilityPriority = WI.NavigationItem.VisibilityPriority.Low;
         this._clearLogNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this._clearLog, this);
 
         this._showConsoleTabNavigationItem = new WI.ButtonNavigationItem("show-tab", WI.UIString("Show Console tab"), "Images/SplitToggleUp.svg", 16, 16);
@@ -141,7 +143,13 @@ WI.LogContentView = class LogContentView extends WI.ContentView
 
     get navigationItems()
     {
-        let navigationItems = [this._scopeBar, new WI.DividerNavigationItem];
+        let navigationItems = [
+            this._findBanner,
+            this._checkboxesNavigationItemGroup,
+            new WI.DividerNavigationItem,
+            this._scopeBar,
+            new WI.DividerNavigationItem
+        ];
 
         if (this._hasNonDefaultLogChannelMessage && this._messageSourceBar)
             navigationItems.push(this._messageSourceBar, new WI.DividerNavigationItem);
@@ -153,8 +161,6 @@ WI.LogContentView = class LogContentView extends WI.ContentView
 
         if (WI.isShowingSplitConsole())
             navigationItems.push(new WI.DividerNavigationItem, this._showConsoleTabNavigationItem);
-        else if (WI.isShowingConsoleTab())
-            navigationItems.unshift(this._findBanner, this._checkboxesNavigationItemGroup);
 
         return navigationItems;
     }