Changeset 285974 in webkit


Ignore:
Timestamp:
Nov 17, 2021, 7:28:23 PM (4 years ago)
Author:
Devin Rousso
Message:

Web Inspector: allow left docking when in LTR and right docking when in RTL
​https://bugs.webkit.org/show_bug.cgi?id=233294

Reviewed by Patrick Angle.

Some developers prefer docking to the left even when in LTR and/or docking to the right when
in RTL. There's no technical reason to disallow this, so let's make it possible.

  • UserInterface/Base/Main.js:

(WI.contentLoaded):
(WI.contentLoaded.addDockButton): Added.
(WI.contentLoaded.addDockLeftButton): Added.
(WI.contentLoaded.addDockRightButton): Added.
(WI._updateDockNavigationItems):
(WI._updateTabBarDividers):
(WI.setLayoutDirection):
Instead of having a single _dockToSideTabBarButton that looks at the layout direction to
decide its image, tooltip, and action, split it into two distinct _dockLeftTabBarButton
and _dockRightTabBarButton buttons that are both always visible (unless Web Inspector is
already in the corresponding docking state).

  • UserInterface/Images/DockBottom.svg:
  • UserInterface/Images/DockLeft.svg:
  • UserInterface/Images/DockRight.svg:

Fill in the area representing Web Inspector and make it a bit smaller so it's not as heavy.

  • Localizations/en.lproj/localizedStrings.js:
Location:
trunk/Source/WebInspectorUI
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r285896 r285974  
     12021-11-17  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: allow left docking when in LTR and right docking when in RTL
     4        https://bugs.webkit.org/show_bug.cgi?id=233294
     5
     6        Reviewed by Patrick Angle.
     7
     8        Some developers prefer docking to the left even when in LTR and/or docking to the right when
     9        in RTL. There's no technical reason to disallow this, so let's make it possible.
     10
     11        * UserInterface/Base/Main.js:
     12        (WI.contentLoaded):
     13        (WI.contentLoaded.addDockButton): Added.
     14        (WI.contentLoaded.addDockLeftButton): Added.
     15        (WI.contentLoaded.addDockRightButton): Added.
     16        (WI._updateDockNavigationItems):
     17        (WI._updateTabBarDividers):
     18        (WI.setLayoutDirection):
     19        Instead of having a single `_dockToSideTabBarButton` that looks at the layout direction to
     20        decide its image, tooltip, and action, split it into two distinct `_dockLeftTabBarButton`
     21        and `_dockRightTabBarButton` buttons that are both always visible (unless Web Inspector is
     22        already in the corresponding docking state).
     23
     24        * UserInterface/Images/DockBottom.svg:
     25        * UserInterface/Images/DockLeft.svg:
     26        * UserInterface/Images/DockRight.svg:
     27        Fill in the area representing Web Inspector and make it a bit smaller so it's not as heavy.
     28
     29        * Localizations/en.lproj/localizedStrings.js:
     30
    1312021-11-16  Nikita Vasilyev  <nvasilyev@apple.com>
    232

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

    r282905 r285974  
    499499localizedStrings["Do not fade unexecuted code"] = "Do not fade unexecuted code";
    500500localizedStrings["Dock to bottom of window"] = "Dock to bottom of window";
    501 localizedStrings["Dock to side of window"] = "Dock to side of window";
     501localizedStrings["Dock to left of window"] = "Dock to left of window";
     502localizedStrings["Dock to right of window"] = "Dock to right of window";
    502503localizedStrings["Document"] = "Document";
    503504localizedStrings["Document Fragment"] = "Document Fragment";

  • trunk/Source/WebInspectorUI/UserInterface/Base/Main.js

    r283921 r285974  
    354354    let supportsUndocked = InspectorFrontendHost.supportsDockSide(WI.DockConfiguration.Undocked);
    355355
    356     if (supportsDockRight || supportsDockLeft || supportsDockBottom) {
    357         WI._closeTabBarButton = new WI.ButtonNavigationItem("dock-close", WI.UIString("Close"), "Images/CloseLarge.svg");
    358         WI._closeTabBarButton.addEventListener(WI.ButtonNavigationItem.Event.Clicked, WI.close, WI);
    359         dockingConfigurationNavigationItems.push(WI._closeTabBarButton);
    360     }
    361 
    362     if ((supportsDockRight || supportsDockLeft) && (supportsDockBottom || supportsUndocked)) {
    363         WI._dockToSideTabBarButton = new WI.ButtonNavigationItem("dock-right", WI.UIString("Dock to side of window"), WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL ? "Images/DockLeft.svg" : "Images/DockRight.svg", 16, 16);
    364         WI._dockToSideTabBarButton.element.classList.add(WI.Popover.IgnoreAutoDismissClassName);
    365         WI._dockToSideTabBarButton.addEventListener(WI.ButtonNavigationItem.Event.Clicked, WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL ? WI._dockLeft : WI._dockRight, WI);
    366         dockingConfigurationNavigationItems.push(WI._dockToSideTabBarButton);
    367     }
    368 
    369     if (supportsDockBottom && (supportsDockRight || supportsDockLeft || supportsUndocked)) {
    370         WI._dockBottomTabBarButton = new WI.ButtonNavigationItem("dock-bottom", WI.UIString("Dock to bottom of window"), "Images/DockBottom.svg", 16, 16);
    371         WI._dockBottomTabBarButton.element.classList.add(WI.Popover.IgnoreAutoDismissClassName);
    372         WI._dockBottomTabBarButton.addEventListener(WI.ButtonNavigationItem.Event.Clicked, WI._dockBottom, WI);
    373         dockingConfigurationNavigationItems.push(WI._dockBottomTabBarButton);
    374     }
    375 
    376     if (supportsUndocked && (supportsDockRight || supportsDockLeft || supportsDockBottom)) {
    377         WI._undockTabBarButton = new WI.ButtonNavigationItem("undock", WI.UIString("Detach into separate window"), "Images/Undock.svg", 16, 16);
    378         WI._undockTabBarButton.element.classList.add(WI.Popover.IgnoreAutoDismissClassName);
    379         WI._undockTabBarButton.addEventListener(WI.ButtonNavigationItem.Event.Clicked, WI._undock, WI);
    380         dockingConfigurationNavigationItems.push(WI._undockTabBarButton);
    381     }
     356    function addDockButton(identifier, tooltip, image, handler) {
     357        let button = new WI.ButtonNavigationItem(identifier, tooltip, image);
     358        button.element.classList.add(WI.Popover.IgnoreAutoDismissClassName);
     359        button.addEventListener(WI.ButtonNavigationItem.Event.Clicked, handler, WI);
     360        dockingConfigurationNavigationItems.push(button);
     361        return button;
     362    }
     363
     364    function addDockLeftButton() {
     365        if (!supportsDockLeft || (!supportsDockRight && !supportsDockBottom && !supportsUndocked))
     366            return;
     367
     368        WI._dockLeftTabBarButton = addDockButton("dock-left", WI.UIString("Dock to left of window"), "Images/DockLeft.svg", WI._dockLeft);
     369    }
     370
     371    function addDockRightButton() {
     372        if (!supportsDockRight || (!supportsDockLeft && !supportsDockBottom && !supportsUndocked))
     373            return;
     374
     375        WI._dockRightTabBarButton = addDockButton("dock-right", WI.UIString("Dock to right of window"), "Images/DockRight.svg", WI._dockRight);
     376    }
     377
     378    if (supportsDockRight || supportsDockLeft || supportsDockBottom)
     379        WI._closeTabBarButton = addDockButton("dock-close", WI.UIString("Close"), "Images/CloseLarge.svg", WI.close);
     380
     381    if (WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL)
     382        addDockRightButton();
     383    else
     384        addDockLeftButton();
     385
     386    if (supportsDockBottom && (supportsDockRight || supportsDockLeft || supportsUndocked))
     387        WI._dockBottomTabBarButton = addDockButton("dock-bottom", WI.UIString("Dock to bottom of window"), "Images/DockBottom.svg", WI._dockBottom);
     388
     389    if (WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL)
     390        addDockLeftButton();
     391    else
     392        addDockRightButton();
     393
     394    if (supportsUndocked && (supportsDockRight || supportsDockLeft || supportsDockBottom))
     395        WI._undockTabBarButton = addDockButton("undock", WI.UIString("Detach into separate window"), "Images/Undock.svg", WI._undock);
    382396
    383397    let inspectedPageControlNavigationItems = [];
    … …  
    18971911        if (WI._closeTabBarButton)
    18981912            WI._closeTabBarButton.hidden = !docked;
    1899         if (WI._dockToSideTabBarButton)
    1900             WI._dockToSideTabBarButton.hidden = WI.dockConfiguration === WI.DockConfiguration.Right || WI.dockConfiguration === WI.DockConfiguration.Left;
     1913        if (WI._dockLeftTabBarButton)
     1914            WI._dockLeftTabBarButton.hidden = WI.dockConfiguration === WI.DockConfiguration.Left;
    19011915        if (WI._dockBottomTabBarButton)
    19021916            WI._dockBottomTabBarButton.hidden = WI.dockConfiguration === WI.DockConfiguration.Bottom;
     1917        if (WI._dockRightTabBarButton)
     1918            WI._dockRightTabBarButton.hidden = WI.dockConfiguration === WI.DockConfiguration.Right;
    19031919        if (WI._undockTabBarButton)
    19041920            WI._undockTabBarButton.hidden = WI.dockConfiguration === WI.DockConfiguration.Undocked;
    … …  
    19061922        if (WI._closeTabBarButton)
    19071923            WI._closeTabBarButton.hidden = true;
    1908         if (WI._dockToSideTabBarButton)
    1909             WI._dockToSideTabBarButton.hidden = true;
     1924        if (WI._dockLeftTabBarButton)
     1925            WI._dockLeftTabBarButton.hidden = true;
    19101926        if (WI._dockBottomTabBarButton)
    19111927            WI._dockBottomTabBarButton.hidden = true;
     1928        if (WI._dockRightTabBarButton)
     1929            WI._dockRightTabBarButton.hidden = true;
    19121930        if (WI._undockTabBarButton)
    19131931            WI._undockTabBarButton.hidden = true;
    … …  
    25032521
    25042522    let closeHidden = isHidden(WI._closeTabBarButton);
    2505     let dockToSideHidden = isHidden(WI._dockToSideTabBarButton);
     2523    let dockLeftHidden = isHidden(WI._dockLeftTabBarButton);
    25062524    let dockBottomHidden = isHidden(WI._dockBottomTabBarButton);
     2525    let dockRightHidden = isHidden(WI._dockRightTabBarButton);
    25072526    let undockHidden = isHidden(WI._undockTabBarButton);
    25082527
    … …  
    25162535
    25172536    // Hide the divider if everything to the left is hidden OR if everything to the right is hidden.
    2518     WI._consoleDividerNavigationItem.hidden = (closeHidden && dockToSideHidden && dockBottomHidden && undockHidden && inspectModeHidden && deviceSettingsHidden && reloadHidden && downloadHidden) || (warningsHidden && errorsHidden);
     2537    WI._consoleDividerNavigationItem.hidden = (closeHidden && dockLeftHidden && dockBottomHidden && dockRightHidden && undockHidden && inspectModeHidden && deviceSettingsHidden && reloadHidden && downloadHidden) || (warningsHidden && errorsHidden);
    25192538
    25202539    WI.tabBar.needsLayout();
    … …  
    29012920    WI.settings.debugLayoutDirection.value = value;
    29022921
    2903     if (WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL && WI.dockConfiguration === WI.DockConfiguration.Right)
    2904         WI._dockLeft();
    2905 
    2906     if (WI.resolvedLayoutDirection() === WI.LayoutDirection.LTR && WI.dockConfiguration === WI.DockConfiguration.Left)
    2907         WI._dockRight();
    2908 
    29092922    InspectorFrontendHost.reopen();
    29102923};

  • trunk/Source/WebInspectorUI/UserInterface/Images/DockBottom.svg

    r191693 r285974  
    11<?xml version="1.0" encoding="utf-8"?>
    2 <!-- Copyright © 2015 Apple Inc. All rights reserved. -->
     2<!-- Copyright © 2021 Apple Inc. All rights reserved. -->
    33<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
    4     <rect fill="none" stroke="currentColor" x="0.5" y="1.5" width="15" height="13"/>
    5     <path fill="none" stroke="currentColor" d="M 1 9.5 L 15 9.5 L 1 9.5 Z"/>
     4    <rect fill="none" stroke="currentColor" x="0.5" y="1.5" width="15" height="9"/>
     5    <rect fill="currentColor" stroke="currentColor" x="0.5" y="10.5" width="15" height="4"/>
    66</svg>

  • trunk/Source/WebInspectorUI/UserInterface/Images/DockLeft.svg

    r212597 r285974  
    11<?xml version="1.0" encoding="utf-8"?>
    2 <!-- Copyright © 2017 Apple Inc. All rights reserved. -->
     2<!-- Copyright © 2021 Apple Inc. All rights reserved. -->
    33<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
    4     <rect fill="none" stroke="currentColor" x="0.5" y="1.5" width="15" height="13"/>
    5     <path fill="none" stroke="currentColor" d="M 6.5 2 L 6.5 14 L 6.5 2 Z"/>
     4    <rect fill="currentColor" stroke="currentColor" x="0.5" y="1.5" width="4" height="13"/>
     5    <rect fill="none" stroke="currentColor" x="4.5" y="1.5" width="11" height="13"/>
    66</svg>

  • trunk/Source/WebInspectorUI/UserInterface/Images/DockRight.svg

    r191693 r285974  
    11<?xml version="1.0" encoding="utf-8"?>
    2 <!-- Copyright © 2015 Apple Inc. All rights reserved. -->
     2<!-- Copyright © 2021 Apple Inc. All rights reserved. -->
    33<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
    4     <rect fill="none" stroke="currentColor" x="0.5" y="1.5" width="15" height="13"/>
    5     <path fill="none" stroke="currentColor" d="M 9.5 2 L 9.5 14 L 9.5 2 Z"/>
     4    <rect fill="none" stroke="currentColor" x="0.5" y="1.5" width="11" height="13"/>
     5    <rect fill="currentColor" stroke="currentColor" x="11.5" y="1.5" width="4" height="13"/>
    66</svg>
Note: See TracChangeset for help on using the changeset viewer.