Changeset 289610 in webkit


Ignore:
Timestamp:
Feb 11, 2022 12:44:23 AM (5 months ago)
Author:
Nikita Vasilyev
Message:

Web Inspector: [Flexbox] Show flex badge next to flex containers in DOM Tree
​https://bugs.webkit.org/show_bug.cgi?id=235924

Reviewed by Patrick Angle.

Elements with display: flex and display: inline-flex should include a "flex" badge.
Clicking the badge should toggle the overlay for the corresponding element.

  • UserInterface/Controllers/GridOverlayConfigurationDiagnosticEventRecorder.js:

(WI.GridOverlayConfigurationDiagnosticEventRecorder.prototype.setup):
(WI.GridOverlayConfigurationDiagnosticEventRecorder.prototype.teardown):
(WI.GridOverlayConfigurationDiagnosticEventRecorder.prototype._handleGridOverlayShown):

  • UserInterface/Controllers/GridOverlayDiagnosticEventRecorder.js:

(WI.GridOverlayDiagnosticEventRecorder.prototype.setup):
(WI.GridOverlayDiagnosticEventRecorder.prototype.teardown):
(WI.GridOverlayDiagnosticEventRecorder.prototype._handleGridOverlayShown):
(WI.GridOverlayDiagnosticEventRecorder):

  • UserInterface/Controllers/OverlayManager.js:

(WI.OverlayManager):
(WI.OverlayManager.prototype.showOverlay):
(WI.OverlayManager.prototype.hideOverlay):
(WI.OverlayManager.prototype.hasVisibleGridOverlays):
(WI.OverlayManager.prototype.hasVisibleOverlay):
(WI.OverlayManager.prototype.toggleOverlay):
(WI.OverlayManager.prototype.getColorForNode):
(WI.OverlayManager.prototype.setColorForNode):
(WI.OverlayManager.prototype._handleLayoutContextTypeChanged):
(WI.OverlayManager.prototype._handleGridSettingChanged):
(WI.OverlayManager.prototype._handleMainResourceDidChange):
(WI.OverlayManager.prototype.showGridOverlay): Deleted.
(WI.OverlayManager.prototype.hideGridOverlay): Deleted.
(WI.OverlayManager.prototype.isGridOverlayVisible): Deleted.
(WI.OverlayManager.prototype.toggleGridOverlay): Deleted.
(WI.OverlayManager.prototype.getGridColorForNode): Deleted.
(WI.OverlayManager.prototype.setGridColorForNode): Deleted.
Remove grid-specific methods (such as showGridOverlay) and introduce methods that work with
both Grid and Flexbox (such as showOverlay).

  • UserInterface/Views/CSSGridSection.js:

(WI.CSSGridSection.prototype.attached):
(WI.CSSGridSection.prototype.detached):
(WI.CSSGridSection.prototype._handleToggleAllCheckboxChanged):
(WI.CSSGridSection.prototype.layout):
(WI.CSSGridSection.prototype._handleGridOverlayStateChanged):
(WI.CSSGridSection.prototype._updateToggleAllCheckbox):
(WI.CSSGridSection):

  • UserInterface/Views/DOMTreeElement.css:

(.tree-outline.dom .layout-badge):
(.tree-outline.dom .layout-badge.activated):
(body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:focus-within li.selected .layout-badge):
(@media (prefers-color-scheme: dark) .tree-outline.dom .layout-badge):
(.tree-outline.dom .badge-css-grid): Deleted.
(.tree-outline.dom .badge-css-grid.activated): Deleted.
(body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:focus-within li.selected .badge-css-grid): Deleted.
(@media (prefers-color-scheme: dark) .tree-outline.dom .badge-css-grid): Deleted.

  • UserInterface/Views/DOMTreeElement.js:

(WI.DOMTreeElement):
(WI.DOMTreeElement.prototype.onattach):
(WI.DOMTreeElement.prototype.ondetach):
(WI.DOMTreeElement.prototype.updateTitle):
(WI.DOMTreeElement.prototype._updateLayoutBadge):
(WI.DOMTreeElement.prototype._layoutBadgeClicked):
(WI.DOMTreeElement.prototype._updateLayoutBadgeStatus):
(WI.DOMTreeElement.prototype._handleLayoutContextTypeChanged):
(WI.DOMTreeElement.prototype._updateGridBadge): Deleted.
(WI.DOMTreeElement.prototype._gridBadgeClicked): Deleted.
(WI.DOMTreeElement.prototype._gridBadgeDoubleClicked): Deleted.
(WI.DOMTreeElement.prototype._updateGridBadgeStatus): Deleted.
Renamed _gridBadgeElement to _layoutBadgeElement. We can't have both "flex" and "grid" badge on the same element,
so I called it "layoutBadge". I didn't call it simply "badge" because we may have other badges in the future.

Location:
trunk/Source/WebInspectorUI
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r289064 r289610  
     12022-02-11  Nikita Vasilyev  <nvasilyev@apple.com>
     2
     3        Web Inspector: [Flexbox] Show flex badge next to flex containers in DOM Tree
     4        https://bugs.webkit.org/show_bug.cgi?id=235924
     5
     6        Reviewed by Patrick Angle.
     7
     8        Elements with `display: flex` and `display: inline-flex` should include a "flex" badge.
     9        Clicking the badge should toggle the overlay for the corresponding element.
     10
     11        * UserInterface/Controllers/GridOverlayConfigurationDiagnosticEventRecorder.js:
     12        (WI.GridOverlayConfigurationDiagnosticEventRecorder.prototype.setup):
     13        (WI.GridOverlayConfigurationDiagnosticEventRecorder.prototype.teardown):
     14        (WI.GridOverlayConfigurationDiagnosticEventRecorder.prototype._handleGridOverlayShown):
     15        * UserInterface/Controllers/GridOverlayDiagnosticEventRecorder.js:
     16        (WI.GridOverlayDiagnosticEventRecorder.prototype.setup):
     17        (WI.GridOverlayDiagnosticEventRecorder.prototype.teardown):
     18        (WI.GridOverlayDiagnosticEventRecorder.prototype._handleGridOverlayShown):
     19        (WI.GridOverlayDiagnosticEventRecorder):
     20        * UserInterface/Controllers/OverlayManager.js:
     21        (WI.OverlayManager):
     22        (WI.OverlayManager.prototype.showOverlay):
     23        (WI.OverlayManager.prototype.hideOverlay):
     24        (WI.OverlayManager.prototype.hasVisibleGridOverlays):
     25        (WI.OverlayManager.prototype.hasVisibleOverlay):
     26        (WI.OverlayManager.prototype.toggleOverlay):
     27        (WI.OverlayManager.prototype.getColorForNode):
     28        (WI.OverlayManager.prototype.setColorForNode):
     29        (WI.OverlayManager.prototype._handleLayoutContextTypeChanged):
     30        (WI.OverlayManager.prototype._handleGridSettingChanged):
     31        (WI.OverlayManager.prototype._handleMainResourceDidChange):
     32        (WI.OverlayManager.prototype.showGridOverlay): Deleted.
     33        (WI.OverlayManager.prototype.hideGridOverlay): Deleted.
     34        (WI.OverlayManager.prototype.isGridOverlayVisible): Deleted.
     35        (WI.OverlayManager.prototype.toggleGridOverlay): Deleted.
     36        (WI.OverlayManager.prototype.getGridColorForNode): Deleted.
     37        (WI.OverlayManager.prototype.setGridColorForNode): Deleted.
     38        Remove grid-specific methods (such as showGridOverlay) and introduce methods that work with
     39        both Grid and Flexbox (such as showOverlay).
     40
     41        * UserInterface/Views/CSSGridSection.js:
     42        (WI.CSSGridSection.prototype.attached):
     43        (WI.CSSGridSection.prototype.detached):
     44        (WI.CSSGridSection.prototype._handleToggleAllCheckboxChanged):
     45        (WI.CSSGridSection.prototype.layout):
     46        (WI.CSSGridSection.prototype._handleGridOverlayStateChanged):
     47        (WI.CSSGridSection.prototype._updateToggleAllCheckbox):
     48        (WI.CSSGridSection):
     49        * UserInterface/Views/DOMTreeElement.css:
     50        (.tree-outline.dom .layout-badge):
     51        (.tree-outline.dom .layout-badge.activated):
     52        (body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:focus-within li.selected .layout-badge):
     53        (@media (prefers-color-scheme: dark) .tree-outline.dom .layout-badge):
     54        (.tree-outline.dom .badge-css-grid): Deleted.
     55        (.tree-outline.dom .badge-css-grid.activated): Deleted.
     56        (body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:focus-within li.selected .badge-css-grid): Deleted.
     57        (@media (prefers-color-scheme: dark) .tree-outline.dom .badge-css-grid): Deleted.
     58
     59        * UserInterface/Views/DOMTreeElement.js:
     60        (WI.DOMTreeElement):
     61        (WI.DOMTreeElement.prototype.onattach):
     62        (WI.DOMTreeElement.prototype.ondetach):
     63        (WI.DOMTreeElement.prototype.updateTitle):
     64        (WI.DOMTreeElement.prototype._updateLayoutBadge):
     65        (WI.DOMTreeElement.prototype._layoutBadgeClicked):
     66        (WI.DOMTreeElement.prototype._updateLayoutBadgeStatus):
     67        (WI.DOMTreeElement.prototype._handleLayoutContextTypeChanged):
     68        (WI.DOMTreeElement.prototype._updateGridBadge): Deleted.
     69        (WI.DOMTreeElement.prototype._gridBadgeClicked): Deleted.
     70        (WI.DOMTreeElement.prototype._gridBadgeDoubleClicked): Deleted.
     71        (WI.DOMTreeElement.prototype._updateGridBadgeStatus): Deleted.
     72        Renamed `_gridBadgeElement` to `_layoutBadgeElement`. We can't have both "flex" and "grid" badge on the same element,
     73        so I called it "layoutBadge". I didn't call it simply "badge" because we may have other badges in the future.
     74
    1752022-02-03  Nikita Vasilyev  <nvasilyev@apple.com>
    276

  • trunk/Source/WebInspectorUI/UserInterface/Controllers/GridOverlayConfigurationDiagnosticEventRecorder.js

    r285975 r289610  
    5252        window.addEventListener("keydown", this, options);
    5353        window.addEventListener("mousedown", this, options);
    54         WI.overlayManager.addEventListener(WI.OverlayManager.Event.GridOverlayShown, this._handleGridOverlayShown, this);
    55         WI.overlayManager.addEventListener(WI.OverlayManager.Event.GridOverlayHidden, this._handleGridOverlayHidden, this);
     54        WI.overlayManager.addEventListener(WI.OverlayManager.Event.OverlayShown, this._handleGridOverlayShown, this);
     55        WI.overlayManager.addEventListener(WI.OverlayManager.Event.OverlayHidden, this._handleGridOverlayHidden, this);
    5656    }
    5757
    … …  
    6565        window.removeEventListener("keydown", this, options);
    6666        window.removeEventListener("mousedown", this, options);
    67         WI.overlayManager.removeEventListener(WI.OverlayManager.Event.GridOverlayShown, this._handleGridOverlayShown, this);
    68         WI.overlayManager.removeEventListener(WI.OverlayManager.Event.GridOverlayHidden, this._handleGridOverlayHidden, this);
     67        WI.overlayManager.removeEventListener(WI.OverlayManager.Event.OverlayShown, this._handleGridOverlayShown, this);
     68        WI.overlayManager.removeEventListener(WI.OverlayManager.Event.OverlayHidden, this._handleGridOverlayHidden, this);
    6969
    7070        this._stopEventSamplingTimerIfNeeded();
    … …  
    7373    _handleGridOverlayShown(event)
    7474    {
     75        if (event.data.domNode.layoutContextType !== WI.DOMNode.LayoutContextType.Grid)
     76            return;
     77
    7578        this._overlayOptions.showTrackSizes = event.data.showTrackSizes;
    7679        this._overlayOptions.showLineNumbers = event.data.showLineNumbers;

  • trunk/Source/WebInspectorUI/UserInterface/Controllers/GridOverlayDiagnosticEventRecorder.js

    r274592 r289610  
    3737    setup()
    3838    {
    39         WI.overlayManager.addEventListener(WI.OverlayManager.Event.GridOverlayShown, this._handleGridOverlayShown, this);
     39        WI.overlayManager.addEventListener(WI.OverlayManager.Event.OverlayShown, this._handleGridOverlayShown, this);
    4040    }
    4141
    4242    teardown()
    4343    {
    44         WI.overlayManager.removeEventListener(WI.OverlayManager.Event.GridOverlayShown, this._handleGridOverlayShown, this);
     44        WI.overlayManager.removeEventListener(WI.OverlayManager.Event.OverlayShown, this._handleGridOverlayShown, this);
    4545    }
    4646
    … …  
    4949    _handleGridOverlayShown(event)
    5050    {
     51        if (event.data.domNode.layoutContextType !== WI.DOMNode.LayoutContextType.Grid)
     52            return;
     53
    5154        let initiator = event.data.initiator;
    5255        if (!initiator || !this._initiators.includes(initiator))

  • trunk/Source/WebInspectorUI/UserInterface/Controllers/OverlayManager.js

    r276714 r289610  
    3030        super();
    3131
    32         this._gridOverlayForNodeMap = new Map;
     32        this._overlayForNodeMap = new Map;
    3333        this._nextDefaultGridColorIndex = 0;
    34         this._gridColorForNodeMap = new WeakMap;
    35         this._gridColorSettingForNodeMap = new WeakMap;
     34        this._nextDefaultFlexColorIndex = 0;
     35        this._colorForNodeMap = new WeakMap;
     36        this._colorSettingForNodeMap = new WeakMap;
    3637
    3738        WI.settings.gridOverlayShowExtendedGridLines.addEventListener(WI.Setting.Event.Changed, this._handleGridSettingChanged, this);
    … …  
    4546    // Public
    4647
    47     showGridOverlay(domNode, {color, initiator} = {})
     48    showOverlay(domNode, {color, initiator} = {})
    4849    {
    4950        console.assert(!domNode.destroyed, domNode);
    … …  
    5354        console.assert(domNode instanceof WI.DOMNode, domNode);
    5455        console.assert(!color || color instanceof WI.Color, color);
    55         console.assert(domNode.layoutContextType === WI.DOMNode.LayoutContextType.Grid, domNode.layoutContextType);
    56 
    57         color ||= this.getGridColorForNode(domNode);
     56        console.assert(Object.values(WI.DOMNode.LayoutContextType).includes(domNode.layoutContextType), domNode);
     57
     58        color ||= this.getColorForNode(domNode);
    5859        let target = WI.assumingMainTarget();
    59         let commandArguments = {
    60             nodeId: domNode.id,
    61             gridColor: color.toProtocol(),
    62             showLineNames: WI.settings.gridOverlayShowLineNames.value,
    63             showLineNumbers: WI.settings.gridOverlayShowLineNumbers.value,
    64             showExtendedGridLines: WI.settings.gridOverlayShowExtendedGridLines.value,
    65             showTrackSizes: WI.settings.gridOverlayShowTrackSizes.value,
    66             showAreaNames: WI.settings.gridOverlayShowAreaNames.value,
    67         };
    68         target.DOMAgent.showGridOverlay.invoke(commandArguments);
     60        let commandArguments = {nodeId: domNode.id};
     61
     62        switch (domNode.layoutContextType) {
     63        case WI.DOMNode.LayoutContextType.Grid:
     64            commandArguments.gridColor = color.toProtocol();
     65            commandArguments.showLineNames = WI.settings.gridOverlayShowLineNames.value;
     66            commandArguments.showLineNumbers = WI.settings.gridOverlayShowLineNumbers.value;
     67            commandArguments.showExtendedGridLines = WI.settings.gridOverlayShowExtendedGridLines.value;
     68            commandArguments.showTrackSizes = WI.settings.gridOverlayShowTrackSizes.value;
     69            commandArguments.showAreaNames = WI.settings.gridOverlayShowAreaNames.value;
     70            target.DOMAgent.showGridOverlay.invoke(commandArguments);
     71            break;
     72
     73        case WI.DOMNode.LayoutContextType.Flex:
     74            commandArguments.flexColor = color.toProtocol();
     75            target.DOMAgent.showFlexOverlay.invoke(commandArguments);
     76            break;
     77        }
    6978
    7079        let overlay = {domNode, ...commandArguments, initiator};
    7180
    7281        // The method to show the overlay will be called repeatedly while updating the grid overlay color. Avoid adding duplicate event listeners
    73         if (!this._gridOverlayForNodeMap.has(domNode))
     82        if (!this._overlayForNodeMap.has(domNode))
    7483            domNode.addEventListener(WI.DOMNode.Event.LayoutContextTypeChanged, this._handleLayoutContextTypeChanged, this);
    7584
    76         this._gridOverlayForNodeMap.set(domNode, overlay);
    77 
    78         this.dispatchEventToListeners(WI.OverlayManager.Event.GridOverlayShown, overlay);
    79     }
    80 
    81     hideGridOverlay(domNode)
     85        this._overlayForNodeMap.set(domNode, overlay);
     86
     87        this.dispatchEventToListeners(WI.OverlayManager.Event.OverlayShown, overlay);
     88    }
     89
     90    hideOverlay(domNode)
    8291    {
    8392        console.assert(domNode instanceof WI.DOMNode, domNode);
    8493        console.assert(!domNode.destroyed, domNode);
    85         console.assert(domNode.layoutContextType === WI.DOMNode.LayoutContextType.Grid, domNode.layoutContextType);
     94        console.assert(Object.values(WI.DOMNode.LayoutContextType).includes(domNode.layoutContextType), domNode);
    8695        if (domNode.destroyed)
    8796            return;
    8897
    89         let overlay = this._gridOverlayForNodeMap.take(domNode);
     98        let overlay = this._overlayForNodeMap.take(domNode);
    9099        if (!overlay)
    91100            return;
    92101
    93102        let target = WI.assumingMainTarget();
    94         target.DOMAgent.hideGridOverlay(domNode.id);
     103
     104        switch (domNode.layoutContextType) {
     105        case WI.DOMNode.LayoutContextType.Grid:
     106            target.DOMAgent.hideGridOverlay(domNode.id);
     107            break;
     108
     109        case WI.DOMNode.LayoutContextType.Flex:
     110            target.DOMAgent.hideFlexOverlay(domNode.id);
     111            break;
     112        }
    95113
    96114        domNode.removeEventListener(WI.DOMNode.Event.LayoutContextTypeChanged, this._handleLayoutContextTypeChanged, this);
    97         this.dispatchEventToListeners(WI.OverlayManager.Event.GridOverlayHidden, overlay);
     115        this.dispatchEventToListeners(WI.OverlayManager.Event.OverlayHidden, overlay);
    98116    }
    99117
    100118    hasVisibleGridOverlays()
    101119    {
    102         return this._gridOverlayForNodeMap.size > 0;
    103     }
    104 
    105     isGridOverlayVisible(domNode)
    106     {
    107         return this._gridOverlayForNodeMap.has(domNode);
    108     }
    109 
    110     toggleGridOverlay(domNode, options)
    111     {
    112         if (this.isGridOverlayVisible(domNode))
    113             this.hideGridOverlay(domNode);
     120        for (let domNode of this._overlayForNodeMap.keys()) {
     121            if (domNode.layoutContextType === WI.DOMNode.LayoutContextType.Grid)
     122                return true;
     123        }
     124        return false;
     125    }
     126
     127    hasVisibleOverlay(domNode)
     128    {
     129        return this._overlayForNodeMap.has(domNode);
     130    }
     131
     132    toggleOverlay(domNode, options)
     133    {
     134        if (this.hasVisibleOverlay(domNode))
     135            this.hideOverlay(domNode);
    114136        else
    115             this.showGridOverlay(domNode, options);
    116     }
    117 
    118     getGridColorForNode(domNode)
    119     {
    120         let color = this._gridColorForNodeMap.get(domNode);
     137            this.showOverlay(domNode, options);
     138    }
     139
     140    getColorForNode(domNode)
     141    {
     142        let color = this._colorForNodeMap.get(domNode);
    121143        if (color)
    122144            return color;
    123145
    124         const defaultGridHSLColors = [
    125             [329, 91, 70],
    126             [207, 96, 69],
    127             [92, 90, 64],
    128             [291, 73, 68],
    129             [40, 97, 57],
    130         ];
    131 
    132         let colorSetting = this._gridColorSettingForNodeMap.get(domNode);
     146        let colorSetting = this._colorSettingForNodeMap.get(domNode);
    133147        if (!colorSetting) {
    134             let defaultColor = defaultGridHSLColors[this._nextDefaultGridColorIndex];
    135             this._nextDefaultGridColorIndex = (this._nextDefaultGridColorIndex + 1) % defaultGridHSLColors.length;
     148            let nextColorIndex;
     149            switch (domNode.layoutContextType) {
     150            case WI.DOMNode.LayoutContextType.Grid:
     151                nextColorIndex = this._nextDefaultGridColorIndex;
     152                this._nextDefaultGridColorIndex = (nextColorIndex + 1) % WI.OverlayManager._defaultHSLColors.length;
     153                break;
     154
     155            case WI.DOMNode.LayoutContextType.Flex:
     156                nextColorIndex = this._nextDefaultFlexColorIndex;
     157                this._nextDefaultFlexColorIndex = (nextColorIndex + 1) % WI.OverlayManager._defaultHSLColors.length;
     158                break;
     159            }
     160            let defaultColor = WI.OverlayManager._defaultHSLColors[nextColorIndex];
    136161
    137162            let url = domNode.ownerDocument.documentURL || WI.networkManager.mainFrame.url;
    138             colorSetting = new WI.Setting(`grid-overlay-color-${url.hash}-${domNode.path().hash}`, defaultColor);
    139             this._gridColorSettingForNodeMap.set(domNode, colorSetting);
     163            colorSetting = new WI.Setting(`overlay-color-${url.hash}-${domNode.path().hash}`, defaultColor);
     164            this._colorSettingForNodeMap.set(domNode, colorSetting);
    140165        }
    141166
    142167        color = new WI.Color(WI.Color.Format.HSL, colorSetting.value);
    143         this._gridColorForNodeMap.set(domNode, color);
     168        this._colorForNodeMap.set(domNode, color);
    144169
    145170        return color;
    146171    }
    147172
    148     setGridColorForNode(domNode, color)
     173    setColorForNode(domNode, color)
    149174    {
    150175        console.assert(domNode instanceof WI.DOMNode, domNode);
    151176        console.assert(color instanceof WI.Color, color);
    152177
    153         let colorSetting = this._gridColorSettingForNodeMap.get(domNode);
    154         console.assert(colorSetting, "There should already be a setting created form a previous call to getGridColorForNode()");
     178        let colorSetting = this._colorSettingForNodeMap.get(domNode);
     179        console.assert(colorSetting, "There should already be a setting created form a previous call to getColorForNode()");
    155180        colorSetting.value = color.hsl;
    156181
    157         this._gridColorForNodeMap.set(domNode, color);
     182        this._colorForNodeMap.set(domNode, color);
    158183    }
    159184
    … …  
    163188    {
    164189        let domNode = event.target;
    165         console.assert(domNode.layoutContextType !== WI.DOMNode.LayoutContextType.Grid, domNode);
    166190
    167191        domNode.removeEventListener(WI.DOMNode.Event.LayoutContextTypeChanged, this._handleLayoutContextTypeChanged, this);
    168192
    169         // When the context type changes, the overlay is automatically hidden on the backend. Here, we only update the map and notify listeners.
    170         let overlay = this._gridOverlayForNodeMap.take(domNode);
    171         this.dispatchEventToListeners(WI.OverlayManager.Event.GridOverlayHidden, overlay);
     193        // When the context type changes, the overlay is automatically hidden on the backend (even if it changes from Grid to Flex, or vice-versa).
     194        // Here, we only update the map and notify listeners.
     195        let overlay = this._overlayForNodeMap.take(domNode);
     196        this.dispatchEventToListeners(WI.OverlayManager.Event.OverlayHidden, overlay);
    172197    }
    173198
    174199    _handleGridSettingChanged(event)
    175200    {
    176         for (let [domNode, overlay] of this._gridOverlayForNodeMap) {
    177             // Refresh all shown overlays. Latest settings values will be used.
    178             this.showGridOverlay(domNode, {color: overlay.color, initiator: overlay.initiator});
     201        for (let [domNode, overlay] of this._overlayForNodeMap) {
     202            if (domNode.layoutContextType === WI.DOMNode.LayoutContextType.Grid)
     203                this.showOverlay(domNode, {color: overlay.color, initiator: overlay.initiator});
    179204        }
    180205    }
    … …  
    192217        // `domNode.id` is different for the same DOM element after page reload.
    193218        this._nextDefaultGridColorIndex = 0;
     219        this._nextDefaultFlexColorIndex = 0;
    194220    }
    195221};
    196222
     223WI.OverlayManager._defaultHSLColors = [
     224    [329, 91, 70],
     225    [207, 96, 69],
     226    [92, 90, 64],
     227    [291, 73, 68],
     228    [40, 97, 57],
     229];
     230
    197231WI.OverlayManager.Event = {
    198     GridOverlayShown: "overlay-manager-grid-overlay-shown",
    199     GridOverlayHidden: "overlay-manager-grid-overlay-hidden",
     232    OverlayShown: "overlay-manager-overlay-shown",
     233    OverlayHidden: "overlay-manager-overlay-hidden",
    200234};

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

    r277284 r289610  
    5454        super.attached();
    5555
    56         WI.overlayManager.addEventListener(WI.OverlayManager.Event.GridOverlayShown, this._handleGridOverlayStateChanged, this);
    57         WI.overlayManager.addEventListener(WI.OverlayManager.Event.GridOverlayHidden, this._handleGridOverlayStateChanged, this);
     56        WI.overlayManager.addEventListener(WI.OverlayManager.Event.OverlayShown, this._handleGridOverlayStateChanged, this);
     57        WI.overlayManager.addEventListener(WI.OverlayManager.Event.OverlayHidden, this._handleGridOverlayStateChanged, this);
    5858    }
    5959
    6060    detached()
    6161    {
    62         WI.overlayManager.removeEventListener(WI.OverlayManager.Event.GridOverlayShown, this._handleGridOverlayStateChanged, this);
    63         WI.overlayManager.removeEventListener(WI.OverlayManager.Event.GridOverlayHidden, this._handleGridOverlayStateChanged, this);
     62        WI.overlayManager.removeEventListener(WI.OverlayManager.Event.OverlayShown, this._handleGridOverlayStateChanged, this);
     63        WI.overlayManager.removeEventListener(WI.OverlayManager.Event.OverlayHidden, this._handleGridOverlayStateChanged, this);
    6464
    6565        super.detached();
    … …  
    100100        for (let domNode of this._gridNodeSet) {
    101101            if (isChecked)
    102                 WI.overlayManager.showGridOverlay(domNode, {initiator: WI.GridOverlayDiagnosticEventRecorder.Initiator.Panel});
     102                WI.overlayManager.showOverlay(domNode, {initiator: WI.GridOverlayDiagnosticEventRecorder.Initiator.Panel});
    103103            else
    104                 WI.overlayManager.hideGridOverlay(domNode);
     104                WI.overlayManager.hideOverlay(domNode);
    105105        }
    106106        this._suppressUpdateToggleAllCheckbox = false;
    … …  
    121121            let checkboxElement = labelElement.appendChild(document.createElement("input"));
    122122            checkboxElement.type = "checkbox";
    123             checkboxElement.checked = WI.overlayManager.isGridOverlayVisible(domNode);
     123            checkboxElement.checked = WI.overlayManager.hasVisibleOverlay(domNode);
    124124
    125125            const nodeDisplayName = labelElement.appendChild(document.createElement("span"));
    … …  
    131131            checkboxElement.addEventListener("change", (event) => {
    132132                if (checkboxElement.checked)
    133                     WI.overlayManager.showGridOverlay(domNode, {color: swatch.value, initiator: WI.GridOverlayDiagnosticEventRecorder.Initiator.Panel});
     133                    WI.overlayManager.showOverlay(domNode, {color: swatch.value, initiator: WI.GridOverlayDiagnosticEventRecorder.Initiator.Panel});
    134134                else
    135                     WI.overlayManager.hideGridOverlay(domNode);
     135                    WI.overlayManager.hideOverlay(domNode);
    136136            });
    137137
    138             let gridColor = WI.overlayManager.getGridColorForNode(domNode);
     138            let gridColor = WI.overlayManager.getColorForNode(domNode);
    139139            let swatch = new WI.InlineSwatch(WI.InlineSwatch.Type.Color, gridColor);
    140140            swatch.shiftClickColorEnabled = false;
    … …  
    145145                    // While changing the overlay color, WI.OverlayManager.Event.GridOverlayShown is dispatched with high frequency.
    146146                    // An initiator is not provided so as not to skew usage count of overlay options when logging diagnostics in WI.GridOverlayDiagnosticEventRecorder.
    147                     WI.overlayManager.showGridOverlay(domNode, {color: event.data.value});
     147                    WI.overlayManager.showOverlay(domNode, {color: event.data.value});
    148148            }, swatch);
    149149
    … …  
    153153
    154154                gridColor = event.target.value;
    155                 WI.overlayManager.setGridColorForNode(domNode, gridColor);
     155                WI.overlayManager.setColorForNode(domNode, gridColor);
    156156            }, swatch);
    157157
    … …  
    168168    _handleGridOverlayStateChanged(event)
    169169    {
     170        if (event.data.domNode.layoutContextType !== WI.DOMNode.LayoutContextType.Grid)
     171            return;
     172
    170173        let checkboxElement = this._checkboxElementByNodeMap.get(event.data.domNode);
    171174        if (!checkboxElement)
    172175            return;
    173176
    174         checkboxElement.checked = event.type === WI.OverlayManager.Event.GridOverlayShown;
     177        checkboxElement.checked = event.type === WI.OverlayManager.Event.OverlayShown;
    175178        this._updateToggleAllCheckbox();
    176179    }
    … …  
    184187        let hasHidden = false;
    185188        for (let domNode of this._gridNodeSet) {
    186             let isVisible = WI.overlayManager.isGridOverlayVisible(domNode);
     189            let isVisible = WI.overlayManager.hasVisibleOverlay(domNode);
    187190            if (isVisible)
    188191                hasVisible = true;

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

    r273992 r289610  
    2424 */
    2525
    26 .tree-outline.dom .badge-css-grid {
     26.tree-outline.dom .layout-badge {
    2727    /* Using sans-serif San Francisco font here creates a badge 1px taller than the selected
    2828    area. Use the same monospace font as the rest of the DOM tree outline. */
    … …  
    3939}
    4040
    41 .tree-outline.dom .badge-css-grid.activated {
     41.tree-outline.dom .layout-badge.activated {
    4242    background: var(--glyph-color-active);
    4343    color: white;
    4444}
    4545
    46 body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:focus-within li.selected .badge-css-grid {
     46body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:focus-within li.selected .layout-badge {
    4747    /* Override `li.selected * {color: inherited}` from DOMTreeOutline.css */
    4848    color: var(--text-color);
    … …  
    5151
    5252@media (prefers-color-scheme: dark) {
    53     .tree-outline.dom .badge-css-grid {
     53    .tree-outline.dom .layout-badge {
    5454        background: hsla(0, 0%, 30%, 0.8);
    5555        border-color: hsla(0, 0%, 100%, 0.1);

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

    r281258 r289610  
    5252        this._recentlyModifiedAttributes = new Map;
    5353        this._closeTagTreeElement = null;
    54         this._gridBadgeElement = null;
     54        this._layoutBadgeElement = null;
    5555
    5656        node.addEventListener(WI.DOMNode.Event.EnabledPseudoClassesChanged, this._updatePseudoClassIndicator, this);
    … …  
    445445        }
    446446
     447        if (this.representedObject.layoutContextType) {
     448            WI.overlayManager.addEventListener(WI.OverlayManager.Event.OverlayShown, this._updateLayoutBadgeStatus, this);
     449            WI.overlayManager.addEventListener(WI.OverlayManager.Event.OverlayHidden, this._updateLayoutBadgeStatus, this);
     450        }
     451        this.representedObject.addEventListener(WI.DOMNode.Event.LayoutContextTypeChanged, this._handleLayoutContextTypeChanged, this);
     452
     453        this._updateLayoutBadge();
     454    }
     455
     456    ondetach()
     457    {
    447458        if (this.representedObject.layoutContextType === WI.DOMNode.LayoutContextType.Grid) {
    448             WI.overlayManager.addEventListener(WI.OverlayManager.Event.GridOverlayShown, this._updateGridBadgeStatus, this);
    449             WI.overlayManager.addEventListener(WI.OverlayManager.Event.GridOverlayHidden, this._updateGridBadgeStatus, this);
    450         }
    451         this.representedObject.addEventListener(WI.DOMNode.Event.LayoutContextTypeChanged, this._handleLayoutContextTypeChanged, this);
    452 
    453         this._updateGridBadge();
    454     }
    455 
    456     ondetach()
    457     {
    458         if (this.representedObject.layoutContextType === WI.DOMNode.LayoutContextType.Grid) {
    459             WI.overlayManager.removeEventListener(WI.OverlayManager.Event.GridOverlayShown, this._updateGridBadgeStatus, this);
    460             WI.overlayManager.removeEventListener(WI.OverlayManager.Event.GridOverlayHidden, this._updateGridBadgeStatus, this);
     459            WI.overlayManager.removeEventListener(WI.OverlayManager.Event.OverlayShown, this._updateLayoutBadgeStatus, this);
     460            WI.overlayManager.removeEventListener(WI.OverlayManager.Event.OverlayHidden, this._updateLayoutBadgeStatus, this);
    461461        }
    462462        this.representedObject.removeEventListener(WI.DOMNode.Event.LayoutContextTypeChanged, this._handleLayoutContextTypeChanged, this);
    … …  
    13351335            this._highlightResult = undefined;
    13361336        }
    1337         this._updateGridBadge();
     1337        this._updateLayoutBadge();
    13381338
    13391339        // Setting this.title will implicitly remove all children. Clear the
    … …  
    20112011    }
    20122012
    2013     _updateGridBadge()
     2013    _updateLayoutBadge()
    20142014    {
    20152015        if (!this.listItemElement || this._elementCloseTag)
    20162016            return;
    20172017
    2018         if (this._gridBadgeElement) {
    2019             this._gridBadgeElement.remove();
    2020             this._gridBadgeElement = null;
    2021         }
    2022 
    2023         if (this.representedObject.layoutContextType !== WI.DOMNode.LayoutContextType.Grid)
    2024             return;
    2025 
    2026         this._gridBadgeElement = document.createElement("span");
    2027         this._gridBadgeElement.className = "badge-css-grid";
    2028         this._gridBadgeElement.textContent = WI.unlocalizedString("grid");
    2029         this._updateGridBadgeStatus();
    2030         this.title.append(this._gridBadgeElement);
    2031 
    2032         this._gridBadgeElement.addEventListener("click", this._gridBadgeClicked.bind(this), true);
    2033         this._gridBadgeElement.addEventListener("dblclick", this._gridBadgeDoubleClicked, true);
    2034     }
    2035 
    2036     _gridBadgeClicked(event)
     2018        if (this._layoutBadgeElement) {
     2019            this._layoutBadgeElement.remove();
     2020            this._layoutBadgeElement = null;
     2021        }
     2022
     2023        if (!this.representedObject.layoutContextType)
     2024            return;
     2025
     2026        if (this.representedObject.layoutContextType === WI.DOMNode.LayoutContextType.Flex && !WI.settings.engineeringEnableFlexboxInspector.value)
     2027            return;
     2028
     2029        this._layoutBadgeElement = this.title.appendChild(document.createElement("span"));
     2030        this._layoutBadgeElement.className = "layout-badge";
     2031
     2032        switch (this.representedObject.layoutContextType) {
     2033        case WI.DOMNode.LayoutContextType.Grid:
     2034            this._layoutBadgeElement.textContent = WI.unlocalizedString("grid");
     2035            break;
     2036
     2037        case WI.DOMNode.LayoutContextType.Flex:
     2038            this._layoutBadgeElement.textContent = WI.unlocalizedString("flex");
     2039            break;
     2040
     2041        default:
     2042            console.assert(false, this.representedObject.layoutContextType);
     2043            break;
     2044        }
     2045
     2046        this._updateLayoutBadgeStatus();
     2047
     2048        this._layoutBadgeElement.addEventListener("click", this._layoutBadgeClicked.bind(this), true);
     2049        this._layoutBadgeElement.addEventListener("dblclick", this._layoutBadgeDoubleClicked, true);
     2050    }
     2051
     2052    _layoutBadgeClicked(event)
    20372053    {
    20382054        if (event.button !== 0 || event.ctrlKey)
    … …  
    20422058        event.stop();
    20432059
    2044         WI.overlayManager.toggleGridOverlay(this.representedObject, {initiator: WI.GridOverlayDiagnosticEventRecorder.Initiator.Badge});
    2045     }
    2046 
    2047     _gridBadgeDoubleClicked(event)
     2060        WI.overlayManager.toggleOverlay(this.representedObject, {
     2061            initiator: this.representedObject.layoutContextType === WI.DOMNode.LayoutContextType.Grid ? WI.GridOverlayDiagnosticEventRecorder.Initiator.Badge : null,
     2062        });
     2063    }
     2064
     2065    _layoutBadgeDoubleClicked(event)
    20482066    {
    20492067        event.stop();
    20502068    }
    20512069
    2052     _updateGridBadgeStatus()
    2053     {
    2054         if (!this._gridBadgeElement)
    2055             return;
    2056 
    2057         let isGridVisible = WI.overlayManager.isGridOverlayVisible(this.representedObject);
    2058         this._gridBadgeElement.classList.toggle("activated", isGridVisible);
    2059 
    2060         if (isGridVisible) {
    2061             let color = WI.overlayManager.getGridColorForNode(this.representedObject);
     2070    _updateLayoutBadgeStatus()
     2071    {
     2072        if (!this._layoutBadgeElement)
     2073            return;
     2074
     2075        let hasVisibleOverlay = WI.overlayManager.hasVisibleOverlay(this.representedObject);
     2076        this._layoutBadgeElement.classList.toggle("activated", hasVisibleOverlay);
     2077
     2078        if (hasVisibleOverlay) {
     2079            let color = WI.overlayManager.getColorForNode(this.representedObject);
    20622080            let hue = color.hsl[0];
    2063             this._gridBadgeElement.style.borderColor = color.toString();
    2064             this._gridBadgeElement.style.backgroundColor = `hsl(${hue}, 90%, 95%)`;
    2065             this._gridBadgeElement.style.setProperty("color", `hsl(${hue}, 55%, 40%)`);
     2081            this._layoutBadgeElement.style.borderColor = color.toString();
     2082            this._layoutBadgeElement.style.backgroundColor = `hsl(${hue}, 90%, 95%)`;
     2083            this._layoutBadgeElement.style.setProperty("color", `hsl(${hue}, 55%, 40%)`);
    20662084        } else
    2067             this._gridBadgeElement.removeAttribute("style");
     2085            this._layoutBadgeElement.removeAttribute("style");
    20682086    }
    20692087
    … …  
    20712089    {
    20722090        let domNode = event.target;
    2073         if (domNode.layoutContextType === WI.DOMNode.LayoutContextType.Grid) {
    2074             WI.overlayManager.addEventListener(WI.OverlayManager.Event.GridOverlayShown, this._updateGridBadgeStatus, this);
    2075             WI.overlayManager.addEventListener(WI.OverlayManager.Event.GridOverlayHidden, this._updateGridBadgeStatus, this);
     2091        if (domNode.layoutContextType) {
     2092            WI.overlayManager.addEventListener(WI.OverlayManager.Event.OverlayShown, this._updateLayoutBadgeStatus, this);
     2093            WI.overlayManager.addEventListener(WI.OverlayManager.Event.OverlayHidden, this._updateLayoutBadgeStatus, this);
    20762094        } else {
    2077             WI.overlayManager.removeEventListener(WI.OverlayManager.Event.GridOverlayShown, this._updateGridBadgeStatus, this);
    2078             WI.overlayManager.removeEventListener(WI.OverlayManager.Event.GridOverlayHidden, this._updateGridBadgeStatus, this);
    2079         }
    2080 
    2081         this._updateGridBadge();
     2095            WI.overlayManager.removeEventListener(WI.OverlayManager.Event.OverlayShown, this._updateLayoutBadgeStatus, this);
     2096            WI.overlayManager.removeEventListener(WI.OverlayManager.Event.OverlayHidden, this._updateLayoutBadgeStatus, this);
     2097        }
     2098
     2099        this._updateLayoutBadge();
    20822100    }
    20832101};
Note: See TracChangeset for help on using the changeset viewer.