Changeset 288702 in webkit


Ignore:
Timestamp:
Jan 27, 2022 2:18:26 PM (6 months ago)
Author:
Devin Rousso
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:
Location:
trunk/Source/WebInspectorUI
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r288692 r288702  
     12022-01-27  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Console: move Preserve Log checkbox navigation item to a gear-with-contextmenu to save space (and match the Network Tab)
     4        https://bugs.webkit.org/show_bug.cgi?id=235541
     5
     6        Reviewed by Patrick Angle.
     7
     8        Also collapse source scope bar into a single button for more space, and align it (and the
     9        filter bar and type scope bar) to the left to better match other tabs.
     10
     11        * UserInterface/Views/LogContentView.js:
     12        (WI.LogContentView):
     13        (WI.LogContentView.prototype.get navigationItems):
     14        (WI.LogContentView.prototype._updateOtherFiltersNavigationItemState): Added.
     15        (WI.LogContentView.prototype._handleOtherFiltersNavigationItemContextMenu): Added.
     16        (WI.LogContentView.prototype._handleClearLogOnNavigateSettingChanged):
     17        (WI.LogContentView.prototype._showHiddenMessagesBannerIfNeeded):
     18        Drive-by: Also reset the message source `WI.ScopeBar` when clearing filters.
     19
     20        * UserInterface/Views/LogContentView.css:
     21        (.console-find-banner): Added.
     22        (.message-channel-scope-bar.default-item-selected:not(:hover)): Added.
     23        (.message-channel-scope-bar.default-item-selected:hover): Added.
     24        (.log-scope-bar + .message-channel-scope-bar): Added.
     25        (.console-other-filters-button > .glyph): Added.
     26        (.console-other-filters-button:active > .glyph): Added.
     27        (.console-other-filters-button.active > .glyph): Added.
     28        (.console-other-filters-button.active:active > .glyph): Added.
     29
     30        * UserInterface/Views/ConsoleTabContentView.js:
     31        (WI.ConsoleTabContentView):
     32        Override the `flexibleNavigationItem` so that there's no expanding space before the filter.
     33
     34        * UserInterface/Views/ConsoleDrawer.js:
     35        (WI.ConsoleDrawer):
     36        Somehow this got overlooked when the constructor of `WI.ContentBrowser` was changed :(
     37
     38        * UserInterface/Views/FindBanner.css:
     39        (.find-banner):
     40        (.find-banner > input[type="search"]):
     41        Add `--find-banner-input-margin-start` so that this can be overridden by specific clients.
     42
     43        * Localizations/en.lproj/localizedStrings.js:
     44
    1452022-01-27  Elliott Williams  <emw@apple.com>
    246

  • trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

    r288580 r288702  
    151151/* Property value for `font-variant-capitals: all-small-caps`. */
    152152localizedStrings["All Small Capitals @ Font Details Sidebar Property Value"] = "All Small Capitals";
     153localizedStrings["All Sources"] = "All Sources";
    153154localizedStrings["All Storage"] = "All Storage";
    154155/* Break (pause) on all timeouts */
    … …  
    508509localizedStrings["Dismiss @ Banner View"] = "Dismiss";
    509510localizedStrings["Displayed Columns"] = "Displayed Columns";
    510 localizedStrings["Do not clear the console on new page loads"] = "Do not clear the console on new page loads";
    511511localizedStrings["Do not fade unexecuted code"] = "Do not fade unexecuted code";
    512512localizedStrings["Dock to bottom of window"] = "Dock to bottom of window";

  • trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleDrawer.js

    r270134 r288702  
    2929    {
    3030        const delegate = null;
    31         const disableBackForward = true;
    32         const disableFindBanner = false;
    33         super(element, delegate, disableBackForward, disableFindBanner);
     31        super(element, delegate, {
     32            hideBackForwardButtons: true,
     33            disableBackForwardNavigation: true,
     34            disableFindBanner: true,
     35            flexibleNavigationItem: new WI.NavigationItem,
     36        });
    3437
    3538        this.element.classList.add("console-drawer");

  • trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleTabContentView.js

    r282610 r288702  
    2828    constructor()
    2929    {
    30         super(ConsoleTabContentView.tabInfo(), {hideBackForwardButtons: true, disableBackForwardNavigation: true});
     30        super(ConsoleTabContentView.tabInfo(), {
     31            hideBackForwardButtons: true,
     32            disableBackForwardNavigation: true,
     33            flexibleNavigationItem: new WI.NavigationItem,
     34        });
    3135
    3236        this._wasShowingSplitConsole = false;

  • trunk/Source/WebInspectorUI/UserInterface/Views/FindBanner.css

    r269166 r288702  
    4545
    4646    --find-banner-outer-child-margin: 8px;
     47    --find-banner-input-margin-start: 6px;
    4748}
    4849
    … …  
    8283    margin-top: 1px;
    8384    margin-bottom: 1px;
    84     margin-inline: 6px -1px;
     85    margin-inline: var(--find-banner-input-margin-start) -1px;
    8586    vertical-align: top;
    8687    background-color: white;

  • trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.css

    r269166 r288702  
    2424 */
    2525
     26.console-find-banner {
     27    --find-banner-outer-child-margin: 0;
     28    --find-banner-input-margin-start: 0;
     29}
     30
     31.message-channel-scope-bar.default-item-selected:not(:hover) {
     32    --scope-bar-text-color-override: var(--text-color);
     33    --scope-bar-background-color-override: transparent;
     34    --scope-bar-border-color-override: transparent;
     35}
     36
     37.message-channel-scope-bar.default-item-selected:hover {
     38    --scope-bar-background-opacity-override: 0.5;
     39}
     40
     41.log-scope-bar + .message-channel-scope-bar {
     42    padding-inline-start: 0;
     43}
     44
     45.console-other-filters-button > .glyph {
     46    width: 16px;
     47    height: 16px;
     48    color: var(--glyph-color);
     49    opacity: var(--glyph-opacity);
     50}
     51
     52.console-other-filters-button:active > .glyph {
     53    color: var(--glyph-color-pressed);
     54}
     55
     56.console-other-filters-button.active > .glyph {
     57    color: var(--glyph-color-active);
     58}
     59
     60.console-other-filters-button.active:active > .glyph {
     61    color: var(--glyph-color-active-pressed);
     62}
     63
    2664.content-view.log {
    2765    display: flex;

  • trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.js

    r271373 r288702  
    7171        this._selectedSearchMatchIsValid = false;
    7272
    73         this._preserveLogNavigationItem = new WI.CheckboxNavigationItem("preserve-log", WI.UIString("Preserve Log"), !WI.settings.clearLogOnNavigate.value);
    74         this._preserveLogNavigationItem.tooltip = WI.UIString("Do not clear the console on new page loads");
    75         this._preserveLogNavigationItem.addEventListener(WI.CheckboxNavigationItem.Event.CheckedDidChange, function(event) {
    76             WI.settings.clearLogOnNavigate.value = !WI.settings.clearLogOnNavigate.value;
    77         }, this);
    78         WI.settings.clearLogOnNavigate.addEventListener(WI.Setting.Event.Changed, this._handleClearLogOnNavigateSettingChanged, this);
    79 
    80         let checkboxesNavigationItems = [this._preserveLogNavigationItem];
     73        this._otherFiltersNavigationItem = new WI.NavigationItem("console-other-filters-button", "button");
     74        this._otherFiltersNavigationItem.tooltip = WI.UIString("Other filter options\u2026");
     75        this._otherFiltersNavigationItem.visibilityPriority = WI.NavigationItem.VisibilityPriority.High;
     76        WI.addMouseDownContextMenuHandlers(this._otherFiltersNavigationItem.element, this._handleOtherFiltersNavigationItemContextMenu.bind(this));
     77        this._updateOtherFiltersNavigationItemState();
     78        this._otherFiltersNavigationItem.element.appendChild(WI.ImageUtilities.useSVGSymbol("Images/Filter.svg", "glyph"));
    8179
    8280        // COMPATIBILITY (iOS 13): `Runtime.evaluate` did not have a `emulateUserGesture` parameter yet.
    … …  
    8886            }, this);
    8987            WI.settings.emulateInUserGesture.addEventListener(WI.Setting.Event.Changed, this._handleEmulateInUserGestureSettingChanged, this);
    90             checkboxesNavigationItems.push(this._emulateUserGestureNavigationItem);
    91         }
    92 
    93         checkboxesNavigationItems.push(new WI.DividerNavigationItem);
    94         this._checkboxesNavigationItemGroup = new WI.GroupNavigationItem(checkboxesNavigationItems);
     88
     89            this._emulateUserGestureNavigationItemGroup = new WI.GroupNavigationItem([this._emulateUserGestureNavigationItem, new WI.DividerNavigationItem]);
     90        }
    9591
    9692        let scopeBarItems = [
    … …  
    110106        if (WI.ConsoleManager.supportsLogChannels()) {
    111107            let messageChannelBarItems = [
    112                 new WI.ScopeBarItem(WI.LogContentView.Scopes.AllChannels, WI.UIString("All"), {exclusive: true}),
     108                new WI.ScopeBarItem(WI.LogContentView.Scopes.AllChannels, WI.UIString("All Sources")),
    113109                new WI.ScopeBarItem(WI.LogContentView.Scopes.Media, WI.UIString("Media"), {className: "media"}),
    114110                new WI.ScopeBarItem(WI.LogContentView.Scopes.MediaSource, WI.UIString("MediaSource"), {className: "mediasource"}),
    … …  
    116112            ];
    117113
    118             this._messageSourceBar = new WI.ScopeBar("message-channel-scope-bar", messageChannelBarItems, messageChannelBarItems[0]);
     114            const shouldGroupNonExclusiveItems = true;
     115            this._messageSourceBar = new WI.ScopeBar("message-channel-scope-bar", messageChannelBarItems, messageChannelBarItems[0], shouldGroupNonExclusiveItems);
    119116            this._messageSourceBar.addEventListener(WI.ScopeBar.Event.SelectionChanged, this._messageSourceBarSelectionDidChange, this);
    120117        }
    … …  
    139136
    140137        WI.Frame.addEventListener(WI.Frame.Event.ProvisionalLoadStarted, this._provisionalLoadStarted, this);
     138
     139        WI.settings.clearLogOnNavigate.addEventListener(WI.Setting.Event.Changed, this._handleClearLogOnNavigateSettingChanged, this);
    141140    }
    142141
    … …  
    147146        let navigationItems = [
    148147            this._findBanner,
    149             this._checkboxesNavigationItemGroup,
    150             new WI.DividerNavigationItem,
    151148            this._scopeBar,
    152             new WI.DividerNavigationItem
    153149        ];
    154150
    155151        if (this._hasNonDefaultLogChannelMessage && this._messageSourceBar)
    156             navigationItems.push(this._messageSourceBar, new WI.DividerNavigationItem);
     152            navigationItems.push(new WI.DividerNavigationItem, this._messageSourceBar);
     153
     154        navigationItems.push(this._otherFiltersNavigationItem, new WI.FlexibleSpaceNavigationItem);
     155
     156        if (this._emulateUserGestureNavigationItemGroup)
     157            navigationItems.push(this._emulateUserGestureNavigationItemGroup);
    157158
    158159        if (InspectorBackend.hasCommand("Heap.gc"))
    … …  
    907908    }
    908909
     910    _updateOtherFiltersNavigationItemState()
     911    {
     912        this._otherFiltersNavigationItem.element.classList.toggle("active", !WI.settings.clearLogOnNavigate.value);
     913    }
     914
     915    _handleOtherFiltersNavigationItemContextMenu(contextMenu)
     916    {
     917        contextMenu.appendCheckboxItem(WI.UIString("Preserve Log"), () => {
     918            WI.settings.clearLogOnNavigate.value = !WI.settings.clearLogOnNavigate.value;
     919        }, !WI.settings.clearLogOnNavigate.value);
     920    }
     921
    909922    _handleClearLogOnNavigateSettingChanged()
    910923    {
    911         this._preserveLogNavigationItem.checked = !WI.settings.clearLogOnNavigate.value;
     924        this._updateOtherFiltersNavigationItemState();
    912925    }
    913926
    … …  
    12461259                this._findBanner.clearAndBlur();
    12471260                this._scopeBar.resetToDefault();
     1261                this._messageSourceBar?.resetToDefault();
    12481262                console.assert(!this._immediatelyHiddenMessages.size);
    12491263
Note: See TracChangeset for help on using the changeset viewer.