Changeset 273097 in webkit


Ignore:
Timestamp:
Feb 18, 2021 12:51:51 PM (17 months ago)
Author:
Nikita Vasilyev
Message:

Web Inspector: Elements: show badges for CSS Grid container elements
​https://bugs.webkit.org/show_bug.cgi?id=221370

Reviewed by BJ Burg.

Clicking "grid" CSS badge shows/hides the grid overlay for the corresponding element.

  • UserInterface/Base/Setting.js:
  • UserInterface/Controllers/OverlayManager.js:

(WI.OverlayManager.prototype.isGridOverlayVisible):
(WI.OverlayManager.prototype.toggleGridOverlay):

  • UserInterface/Main.html:
  • UserInterface/Views/DOMTreeElement.css: Added.

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

  • UserInterface/Views/DOMTreeElement.js:

(WI.DOMTreeElement):
(WI.DOMTreeElement.prototype.onattach):
(WI.DOMTreeElement.prototype.ondetach):
(WI.DOMTreeElement.prototype.updateTitle):
(WI.DOMTreeElement.prototype._updateGridBadge):
(WI.DOMTreeElement.prototype._gridBadgeClicked):
(WI.DOMTreeElement.prototype._gridBadgeDoubleClicked):
(WI.DOMTreeElement.prototype._updateGridBadgeStatus):
(WI.DOMTreeElement.prototype._handleLayoutContextTypeChanged):

  • UserInterface/Views/SettingsTabContentView.js:

(WI.SettingsTabContentView.prototype._createExperimentalSettingsView):

Location:
trunk/Source/WebInspectorUI
Files:
1 added
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r273096 r273097  
     12021-02-18  Nikita Vasilyev  <nvasilyev@apple.com>
     2
     3        Web Inspector: Elements: show badges for CSS Grid container elements
     4        https://bugs.webkit.org/show_bug.cgi?id=221370
     5
     6        Reviewed by BJ Burg.
     7
     8        Clicking "grid" CSS badge shows/hides the grid overlay for the corresponding element.
     9
     10        * UserInterface/Base/Setting.js:
     11        * UserInterface/Controllers/OverlayManager.js:
     12        (WI.OverlayManager.prototype.isGridOverlayVisible):
     13        (WI.OverlayManager.prototype.toggleGridOverlay):
     14
     15        * UserInterface/Main.html:
     16        * UserInterface/Views/DOMTreeElement.css: Added.
     17        (.tree-outline.dom .badge-css-grid):
     18        (.tree-outline.dom .badge-css-grid.activated):
     19        (.tree-outline.dom li.selected .badge-css-grid):
     20        (.tree-outline.dom li.selected .badge-css-grid.activated):
     21        (body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:focus-within li.selected .badge-css-grid):
     22        (body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:focus-within li.selected .badge-css-grid.activated):
     23        (@media (prefers-color-scheme: dark) .tree-outline.dom .badge-css-grid):
     24
     25        * UserInterface/Views/DOMTreeElement.js:
     26        (WI.DOMTreeElement):
     27        (WI.DOMTreeElement.prototype.onattach):
     28        (WI.DOMTreeElement.prototype.ondetach):
     29        (WI.DOMTreeElement.prototype.updateTitle):
     30        (WI.DOMTreeElement.prototype._updateGridBadge):
     31        (WI.DOMTreeElement.prototype._gridBadgeClicked):
     32        (WI.DOMTreeElement.prototype._gridBadgeDoubleClicked):
     33        (WI.DOMTreeElement.prototype._updateGridBadgeStatus):
     34        (WI.DOMTreeElement.prototype._handleLayoutContextTypeChanged):
     35
     36        * UserInterface/Views/SettingsTabContentView.js:
     37        (WI.SettingsTabContentView.prototype._createExperimentalSettingsView):
     38
    1392021-02-18  Razvan Caliman  <rcaliman@apple.com>
    240

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

    r272737 r273097  
    230230    experimentalEnableStylesJumpToVariableDeclaration: new WI.Setting("experimental-styles-jump-to-variable-declaration", false),
    231231    experimentalEnableLayoutPanel: new WI.Setting("experimental-enable-layout-panel", false),
     232    experimentalEnableGridBadges: new WI.Setting("experimental-enable-grid-badges", false),
    232233    experimentalCollapseBlackboxedCallFrames: new WI.Setting("experimental-collapse-blackboxed-call-frames", false),
    233234

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

    r272976 r273097  
    9696    }
    9797
     98    isGridOverlayVisible(domNode)
     99    {
     100        return this._gridOverlayForNodeMap.has(domNode);
     101    }
     102
     103    toggleGridOverlay(domNode)
     104    {
     105        if (this.isGridOverlayVisible(domNode))
     106            this.hideGridOverlay(domNode);
     107        else
     108            this.showGridOverlay(domNode);
     109    }
     110
    98111    // Private
    99112

  • trunk/Source/WebInspectorUI/UserInterface/Main.html

    r272670 r273097  
    9494    <link rel="stylesheet" href="Views/DOMStorageContentView.css">
    9595    <link rel="stylesheet" href="Views/DOMTreeContentView.css">
     96    <link rel="stylesheet" href="Views/DOMTreeElement.css">
    9697    <link rel="stylesheet" href="Views/DOMTreeOutline.css">
    9798    <link rel="stylesheet" href="Views/DataGrid.css">

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

    r269337 r273097  
    5252        this._recentlyModifiedAttributes = new Map;
    5353        this._closeTagTreeElement = null;
     54        this._gridBadgeElement = null;
    5455
    5556        node.addEventListener(WI.DOMNode.Event.EnabledPseudoClassesChanged, this._updatePseudoClassIndicator, this);
    … …  
    443444            this.listItemElement.addEventListener("dragstart", this);
    444445        }
     446
     447        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);
     461        }
     462        this.representedObject.removeEventListener(WI.DOMNode.Event.LayoutContextTypeChanged, this._handleLayoutContextTypeChanged, this);
    445463    }
    446464
    … …  
    13171335            this._highlightResult = undefined;
    13181336        }
     1337        this._updateGridBadge();
    13191338
    13201339        // Setting this.title will implicitly remove all children. Clear the
    … …  
    19912010        this._animatingHighlight = false;
    19922011    }
     2012
     2013    _updateGridBadge()
     2014    {
     2015        if (!WI.settings.experimentalEnableGridBadges.value)
     2016            return;
     2017
     2018        if (!this.listItemElement || this._elementCloseTag)
     2019            return;
     2020
     2021        if (this._gridBadgeElement) {
     2022            this._gridBadgeElement.remove();
     2023            this._gridBadgeElement = null;
     2024        }
     2025
     2026        if (this.representedObject.layoutContextType !== WI.DOMNode.LayoutContextType.Grid)
     2027            return;
     2028
     2029        this._gridBadgeElement = document.createElement("span");
     2030        this._gridBadgeElement.className = "badge-css-grid";
     2031        this._gridBadgeElement.textContent = WI.unlocalizedString("grid");
     2032        this._updateGridBadgeStatus();
     2033        this.title.append(this._gridBadgeElement);
     2034
     2035        this._gridBadgeElement.addEventListener("click", this._gridBadgeClicked.bind(this), true);
     2036        this._gridBadgeElement.addEventListener("dblclick", this._gridBadgeDoubleClicked, true);
     2037    }
     2038
     2039    _gridBadgeClicked(event)
     2040    {
     2041        if (event.button !== 0 || event.ctrlKey)
     2042            return;
     2043
     2044        // Don't expand or collapse a tree element when clicking on the grid badge.
     2045        event.stop();
     2046
     2047        WI.overlayManager.toggleGridOverlay(this.representedObject);
     2048    }
     2049
     2050    _gridBadgeDoubleClicked(event)
     2051    {
     2052        event.stop();
     2053    }
     2054
     2055    _updateGridBadgeStatus()
     2056    {
     2057        if (!this._gridBadgeElement)
     2058            return;
     2059
     2060        this._gridBadgeElement.classList.toggle("activated", WI.overlayManager.isGridOverlayVisible(this.representedObject));
     2061    }
     2062
     2063    _handleLayoutContextTypeChanged(event)
     2064    {
     2065        let domNode = event.target;
     2066        if (domNode.layoutContextType === WI.DOMNode.LayoutContextType.Grid) {
     2067            WI.overlayManager.addEventListener(WI.OverlayManager.Event.GridOverlayShown, this._updateGridBadgeStatus, this);
     2068            WI.overlayManager.addEventListener(WI.OverlayManager.Event.GridOverlayHidden, this._updateGridBadgeStatus, this);
     2069        } else {
     2070            WI.overlayManager.removeEventListener(WI.OverlayManager.Event.GridOverlayShown, this._updateGridBadgeStatus, this);
     2071            WI.overlayManager.removeEventListener(WI.OverlayManager.Event.GridOverlayHidden, this._updateGridBadgeStatus, this);
     2072        }
     2073
     2074        this._updateGridBadge();
     2075    }
    19932076};
    19942077

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

    r272371 r273097  
    400400            stylesGroup.addSetting(WI.settings.experimentalEnableStylesJumpToVariableDeclaration, WI.UIString("Show jump to variable declaration button"));
    401401            stylesGroup.addSetting(WI.settings.experimentalEnableLayoutPanel, WI.UIString("Show Layout panel"));
     402            stylesGroup.addSetting(WI.settings.experimentalEnableGridBadges, WI.unlocalizedString("Show \"grid\" badges"));
    402403
    403404            experimentalSettingsView.addSeparator();
    … …  
    430431        if (hasCSSDomain) {
    431432            listenForChange(WI.settings.experimentalEnableLayoutPanel);
     433            listenForChange(WI.settings.experimentalEnableGridBadges);
    432434            listenForChange(WI.settings.experimentalEnableStylesJumpToEffective);
    433435            listenForChange(WI.settings.experimentalEnableStylesJumpToVariableDeclaration);
Note: See TracChangeset for help on using the changeset viewer.