Title: [288702] trunk/Source/WebInspectorUI
Revision
288702
Author
[email protected]
Date
2022-01-27 14:18:26 -0800 (Thu, 27 Jan 2022)

Log Message

Web Inspector: Console: move Preserve Log checkbox navigation item to a gear-with-contextmenu to save space (and match the Network Tab)
https://bugs.webkit.org/show_bug.cgi?id=235541

Reviewed by Patrick Angle.

Also collapse source scope bar into a single button for more space, and align it (and the
filter bar and type scope bar) to the left to better match other tabs.

* UserInterface/Views/LogContentView.js:
(WI.LogContentView):
(WI.LogContentView.prototype.get navigationItems):
(WI.LogContentView.prototype._updateOtherFiltersNavigationItemState): Added.
(WI.LogContentView.prototype._handleOtherFiltersNavigationItemContextMenu): Added.
(WI.LogContentView.prototype._handleClearLogOnNavigateSettingChanged):
(WI.LogContentView.prototype._showHiddenMessagesBannerIfNeeded):
Drive-by: Also reset the message source `WI.ScopeBar` when clearing filters.

* UserInterface/Views/LogContentView.css:
(.console-find-banner): Added.
(.message-channel-scope-bar.default-item-selected:not(:hover)): Added.
(.message-channel-scope-bar.default-item-selected:hover): Added.
(.log-scope-bar + .message-channel-scope-bar): Added.
(.console-other-filters-button > .glyph): Added.
(.console-other-filters-button:active > .glyph): Added.
(.console-other-filters-button.active > .glyph): Added.
(.console-other-filters-button.active:active > .glyph): Added.

* UserInterface/Views/ConsoleTabContentView.js:
(WI.ConsoleTabContentView):
Override the `flexibleNavigationItem` so that there's no expanding space before the filter.

* UserInterface/Views/ConsoleDrawer.js:
(WI.ConsoleDrawer):
Somehow this got overlooked when the constructor of `WI.ContentBrowser` was changed :(

* UserInterface/Views/FindBanner.css:
(.find-banner):
(.find-banner > input[type="search"]):
Add `--find-banner-input-margin-start` so that this can be overridden by specific clients.

* Localizations/en.lproj/localizedStrings.js:

Modified Paths

Diff

Modified: trunk/Source/WebInspectorUI/ChangeLog (288701 => 288702)


--- trunk/Source/WebInspectorUI/ChangeLog	2022-01-27 22:11:29 UTC (rev 288701)
+++ trunk/Source/WebInspectorUI/ChangeLog	2022-01-27 22:18:26 UTC (rev 288702)
@@ -1,3 +1,47 @@
+2022-01-27  Devin Rousso  <[email protected]>
+
+        Web Inspector: Console: move Preserve Log checkbox navigation item to a gear-with-contextmenu to save space (and match the Network Tab)
+        https://bugs.webkit.org/show_bug.cgi?id=235541
+
+        Reviewed by Patrick Angle.
+
+        Also collapse source scope bar into a single button for more space, and align it (and the
+        filter bar and type scope bar) to the left to better match other tabs.
+
+        * UserInterface/Views/LogContentView.js:
+        (WI.LogContentView):
+        (WI.LogContentView.prototype.get navigationItems):
+        (WI.LogContentView.prototype._updateOtherFiltersNavigationItemState): Added.
+        (WI.LogContentView.prototype._handleOtherFiltersNavigationItemContextMenu): Added.
+        (WI.LogContentView.prototype._handleClearLogOnNavigateSettingChanged):
+        (WI.LogContentView.prototype._showHiddenMessagesBannerIfNeeded):
+        Drive-by: Also reset the message source `WI.ScopeBar` when clearing filters.
+
+        * UserInterface/Views/LogContentView.css:
+        (.console-find-banner): Added.
+        (.message-channel-scope-bar.default-item-selected:not(:hover)): Added.
+        (.message-channel-scope-bar.default-item-selected:hover): Added.
+        (.log-scope-bar + .message-channel-scope-bar): Added.
+        (.console-other-filters-button > .glyph): Added.
+        (.console-other-filters-button:active > .glyph): Added.
+        (.console-other-filters-button.active > .glyph): Added.
+        (.console-other-filters-button.active:active > .glyph): Added.
+
+        * UserInterface/Views/ConsoleTabContentView.js:
+        (WI.ConsoleTabContentView):
+        Override the `flexibleNavigationItem` so that there's no expanding space before the filter.
+
+        * UserInterface/Views/ConsoleDrawer.js:
+        (WI.ConsoleDrawer):
+        Somehow this got overlooked when the constructor of `WI.ContentBrowser` was changed :(
+
+        * UserInterface/Views/FindBanner.css:
+        (.find-banner):
+        (.find-banner > input[type="search"]):
+        Add `--find-banner-input-margin-start` so that this can be overridden by specific clients.
+
+        * Localizations/en.lproj/localizedStrings.js:
+
 2022-01-27  Elliott Williams  <[email protected]>
 
         Generated xcfilelists contain symlinks when building for macOS

Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (288701 => 288702)


--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js	2022-01-27 22:11:29 UTC (rev 288701)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js	2022-01-27 22:18:26 UTC (rev 288702)
@@ -150,6 +150,7 @@
 localizedStrings["All Requests"] = "All Requests";
 /* Property value for `font-variant-capitals: all-small-caps`. */
 localizedStrings["All Small Capitals @ Font Details Sidebar Property Value"] = "All Small Capitals";
+localizedStrings["All Sources"] = "All Sources";
 localizedStrings["All Storage"] = "All Storage";
 /* Break (pause) on all timeouts */
 localizedStrings["All Timeouts @ Event Breakpoint"] = "All Timeouts";
@@ -507,7 +508,6 @@
 /* Tooltip for the dismiss button in banner views. */
 localizedStrings["Dismiss @ Banner View"] = "Dismiss";
 localizedStrings["Displayed Columns"] = "Displayed Columns";
-localizedStrings["Do not clear the console on new page loads"] = "Do not clear the console on new page loads";
 localizedStrings["Do not fade unexecuted code"] = "Do not fade unexecuted code";
 localizedStrings["Dock to bottom of window"] = "Dock to bottom of window";
 localizedStrings["Dock to left of window"] = "Dock to left of window";

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleDrawer.js (288701 => 288702)


--- trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleDrawer.js	2022-01-27 22:11:29 UTC (rev 288701)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleDrawer.js	2022-01-27 22:18:26 UTC (rev 288702)
@@ -28,9 +28,12 @@
     constructor(element)
     {
         const delegate = null;
-        const disableBackForward = true;
-        const disableFindBanner = false;
-        super(element, delegate, disableBackForward, disableFindBanner);
+        super(element, delegate, {
+            hideBackForwardButtons: true,
+            disableBackForwardNavigation: true,
+            disableFindBanner: true,
+            flexibleNavigationItem: new WI.NavigationItem,
+        });
 
         this.element.classList.add("console-drawer");
 

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleTabContentView.js (288701 => 288702)


--- trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleTabContentView.js	2022-01-27 22:11:29 UTC (rev 288701)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleTabContentView.js	2022-01-27 22:18:26 UTC (rev 288702)
@@ -27,7 +27,11 @@
 {
     constructor()
     {
-        super(ConsoleTabContentView.tabInfo(), {hideBackForwardButtons: true, disableBackForwardNavigation: true});
+        super(ConsoleTabContentView.tabInfo(), {
+            hideBackForwardButtons: true,
+            disableBackForwardNavigation: true,
+            flexibleNavigationItem: new WI.NavigationItem,
+        });
 
         this._wasShowingSplitConsole = false;
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/FindBanner.css (288701 => 288702)


--- trunk/Source/WebInspectorUI/UserInterface/Views/FindBanner.css	2022-01-27 22:11:29 UTC (rev 288701)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/FindBanner.css	2022-01-27 22:18:26 UTC (rev 288702)
@@ -44,6 +44,7 @@
     z-index: var(--z-index-header);
 
     --find-banner-outer-child-margin: 8px;
+    --find-banner-input-margin-start: 6px;
 }
 
 .find-banner.showing {
@@ -81,7 +82,7 @@
     height: 19px;
     margin-top: 1px;
     margin-bottom: 1px;
-    margin-inline: 6px -1px;
+    margin-inline: var(--find-banner-input-margin-start) -1px;
     vertical-align: top;
     background-color: white;
     border: 1px solid var(--border-color);

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.css (288701 => 288702)


--- trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.css	2022-01-27 22:11:29 UTC (rev 288701)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.css	2022-01-27 22:18:26 UTC (rev 288702)
@@ -23,6 +23,44 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+.console-find-banner {
+    --find-banner-outer-child-margin: 0;
+    --find-banner-input-margin-start: 0;
+}
+
+.message-channel-scope-bar.default-item-selected:not(:hover) {
+    --scope-bar-text-color-override: var(--text-color);
+    --scope-bar-background-color-override: transparent;
+    --scope-bar-border-color-override: transparent;
+}
+
+.message-channel-scope-bar.default-item-selected:hover {
+    --scope-bar-background-opacity-override: 0.5;
+}
+
+.log-scope-bar + .message-channel-scope-bar {
+    padding-inline-start: 0;
+}
+
+.console-other-filters-button > .glyph {
+    width: 16px;
+    height: 16px;
+    color: var(--glyph-color);
+    opacity: var(--glyph-opacity);
+}
+
+.console-other-filters-button:active > .glyph {
+    color: var(--glyph-color-pressed);
+}
+
+.console-other-filters-button.active > .glyph {
+    color: var(--glyph-color-active);
+}
+
+.console-other-filters-button.active:active > .glyph {
+    color: var(--glyph-color-active-pressed);
+}
+
 .content-view.log {
     display: flex;
     flex-direction: column;

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.js (288701 => 288702)


--- trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.js	2022-01-27 22:11:29 UTC (rev 288701)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.js	2022-01-27 22:18:26 UTC (rev 288702)
@@ -70,15 +70,13 @@
         this._selectedSearchMatch = null;
         this._selectedSearchMatchIsValid = false;
 
-        this._preserveLogNavigationItem = new WI.CheckboxNavigationItem("preserve-log", WI.UIString("Preserve Log"), !WI.settings.clearLogOnNavigate.value);
-        this._preserveLogNavigationItem.tooltip = WI.UIString("Do not clear the console on new page loads");
-        this._preserveLogNavigationItem.addEventListener(WI.CheckboxNavigationItem.Event.CheckedDidChange, function(event) {
-            WI.settings.clearLogOnNavigate.value = !WI.settings.clearLogOnNavigate.value;
-        }, this);
-        WI.settings.clearLogOnNavigate.addEventListener(WI.Setting.Event.Changed, this._handleClearLogOnNavigateSettingChanged, this);
+        this._otherFiltersNavigationItem = new WI.NavigationItem("console-other-filters-button", "button");
+        this._otherFiltersNavigationItem.tooltip = WI.UIString("Other filter options\u2026");
+        this._otherFiltersNavigationItem.visibilityPriority = WI.NavigationItem.VisibilityPriority.High;
+        WI.addMouseDownContextMenuHandlers(this._otherFiltersNavigationItem.element, this._handleOtherFiltersNavigationItemContextMenu.bind(this));
+        this._updateOtherFiltersNavigationItemState();
+        this._otherFiltersNavigationItem.element.appendChild(WI.ImageUtilities.useSVGSymbol("Images/Filter.svg", "glyph"));
 
-        let checkboxesNavigationItems = [this._preserveLogNavigationItem];
-
         // COMPATIBILITY (iOS 13): `Runtime.evaluate` did not have a `emulateUserGesture` parameter yet.
         if (WI.sharedApp.isWebDebuggable() && InspectorBackend.hasCommand("Runtime.evaluate", "emulateUserGesture")) {
             this._emulateUserGestureNavigationItem = new WI.CheckboxNavigationItem("emulate-in-user-gesture", WI.UIString("Emulate User Gesture", "Emulate User Gesture @ Console", "Checkbox shown in the Console to cause future evaluations as though they are in response to user interaction."), WI.settings.emulateInUserGesture.value);
@@ -87,12 +85,10 @@
                 WI.settings.emulateInUserGesture.value = !WI.settings.emulateInUserGesture.value;
             }, this);
             WI.settings.emulateInUserGesture.addEventListener(WI.Setting.Event.Changed, this._handleEmulateInUserGestureSettingChanged, this);
-            checkboxesNavigationItems.push(this._emulateUserGestureNavigationItem);
+
+            this._emulateUserGestureNavigationItemGroup = new WI.GroupNavigationItem([this._emulateUserGestureNavigationItem, new WI.DividerNavigationItem]);
         }
 
-        checkboxesNavigationItems.push(new WI.DividerNavigationItem);
-        this._checkboxesNavigationItemGroup = new WI.GroupNavigationItem(checkboxesNavigationItems);
-
         let scopeBarItems = [
             new WI.ScopeBarItem(WI.LogContentView.Scopes.All, WI.UIString("All"), {exclusive: true}),
             new WI.ScopeBarItem(WI.LogContentView.Scopes.Evaluations, WI.UIString("Evaluations"), {className: "evaluations"}),
@@ -109,13 +105,14 @@
         this._hasNonDefaultLogChannelMessage = false;
         if (WI.ConsoleManager.supportsLogChannels()) {
             let messageChannelBarItems = [
-                new WI.ScopeBarItem(WI.LogContentView.Scopes.AllChannels, WI.UIString("All"), {exclusive: true}),
+                new WI.ScopeBarItem(WI.LogContentView.Scopes.AllChannels, WI.UIString("All Sources")),
                 new WI.ScopeBarItem(WI.LogContentView.Scopes.Media, WI.UIString("Media"), {className: "media"}),
                 new WI.ScopeBarItem(WI.LogContentView.Scopes.MediaSource, WI.UIString("MediaSource"), {className: "mediasource"}),
                 new WI.ScopeBarItem(WI.LogContentView.Scopes.WebRTC, WI.UIString("WebRTC"), {className: "webrtc"}),
             ];
 
-            this._messageSourceBar = new WI.ScopeBar("message-channel-scope-bar", messageChannelBarItems, messageChannelBarItems[0]);
+            const shouldGroupNonExclusiveItems = true;
+            this._messageSourceBar = new WI.ScopeBar("message-channel-scope-bar", messageChannelBarItems, messageChannelBarItems[0], shouldGroupNonExclusiveItems);
             this._messageSourceBar.addEventListener(WI.ScopeBar.Event.SelectionChanged, this._messageSourceBarSelectionDidChange, this);
         }
 
@@ -138,6 +135,8 @@
         WI.consoleManager.addEventListener(WI.ConsoleManager.Event.Cleared, this._logCleared, this);
 
         WI.Frame.addEventListener(WI.Frame.Event.ProvisionalLoadStarted, this._provisionalLoadStarted, this);
+
+        WI.settings.clearLogOnNavigate.addEventListener(WI.Setting.Event.Changed, this._handleClearLogOnNavigateSettingChanged, this);
     }
 
     // Public
@@ -146,15 +145,17 @@
     {
         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);
+            navigationItems.push(new WI.DividerNavigationItem, this._messageSourceBar);
 
+        navigationItems.push(this._otherFiltersNavigationItem, new WI.FlexibleSpaceNavigationItem);
+
+        if (this._emulateUserGestureNavigationItemGroup)
+            navigationItems.push(this._emulateUserGestureNavigationItemGroup);
+
         if (InspectorBackend.hasCommand("Heap.gc"))
             navigationItems.push(this._garbageCollectNavigationItem);
 
@@ -906,9 +907,21 @@
         this.performSearch(this._currentSearchQuery);
     }
 
+    _updateOtherFiltersNavigationItemState()
+    {
+        this._otherFiltersNavigationItem.element.classList.toggle("active", !WI.settings.clearLogOnNavigate.value);
+    }
+
+    _handleOtherFiltersNavigationItemContextMenu(contextMenu)
+    {
+        contextMenu.appendCheckboxItem(WI.UIString("Preserve Log"), () => {
+            WI.settings.clearLogOnNavigate.value = !WI.settings.clearLogOnNavigate.value;
+        }, !WI.settings.clearLogOnNavigate.value);
+    }
+
     _handleClearLogOnNavigateSettingChanged()
     {
-        this._preserveLogNavigationItem.checked = !WI.settings.clearLogOnNavigate.value;
+        this._updateOtherFiltersNavigationItemState();
     }
 
     _handleEmulateInUserGestureSettingChanged()
@@ -1245,6 +1258,7 @@
             clearFiltersButtonElement.addEventListener("click", (event) => {
                 this._findBanner.clearAndBlur();
                 this._scopeBar.resetToDefault();
+                this._messageSourceBar?.resetToDefault();
                 console.assert(!this._immediatelyHiddenMessages.size);
 
                 this._hiddenMessagesBannerElement.remove();
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to