[webkit-changes] [WebKit/WebKit] f51cad: Web Inspector: Show grid/flex overlays when in ele...

[Devin Rousso]

  Branch: refs/heads/main
  Home:   https://github.com/WebKit/WebKit
  Commit: f51cad26306748dfdef688967af230eed8484136
      https://github.com/WebKit/WebKit/commit/f51cad26306748dfdef688967af230eed8484136
  Author: Devin Rousso <hi at devinrousso.com>
  Date:   2023-02-07 (Tue, 07 Feb 2023)

  Changed paths:
    M LayoutTests/inspector/dom/showFlexOverlay.html
    M LayoutTests/inspector/dom/showGridOverlay.html
    M Source/JavaScriptCore/inspector/protocol/DOM.json
    M Source/JavaScriptCore/inspector/scripts/codegen/generator.py
    M Source/WebCore/inspector/InspectorOverlay.cpp
    M Source/WebCore/inspector/InspectorOverlay.h
    M Source/WebCore/inspector/agents/InspectorDOMAgent.cpp
    M Source/WebCore/inspector/agents/InspectorDOMAgent.h
    M Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
    M Source/WebInspectorUI/UserInterface/Base/Setting.js
    M Source/WebInspectorUI/UserInterface/Controllers/DOMManager.js
    M Source/WebInspectorUI/UserInterface/Models/DOMNode.js
    M Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js

  Log Message:
  -----------
  Web Inspector: Show grid/flex overlays when in element selection
https://bugs.webkit.org/show_bug.cgi?id=251737
<rdar://problem/105041619>

Reviewed by Patrick Angle.

This allows for developers to more easily visually identify the organization of a node's contents using element select mode (e.g. hovering over a `gap` area will now be more recognizable due to the hatching shown by the flex overlay).

* Source/JavaScriptCore/inspector/protocol/DOM.json:
Move all the configuration options for grid and flex overlays to bespoke protocol objects.

* Source/JavaScriptCore/inspector/scripts/codegen/generator.py:
Ensure that these protocol objects have helper constants for pulling values out of them.

* Source/WebCore/inspector/InspectorOverlay.h:
* Source/WebCore/inspector/InspectorOverlay.cpp:
(WebCore::InspectorOverlay::paint):
(WebCore::InspectorOverlay::getHighlight):
(WebCore::InspectorOverlay::shouldShowOverlay const):
(WebCore::InspectorOverlay::showHighlightGridOverlayForNode): Added.
(WebCore::InspectorOverlay::hideHighlightGridOverlay): Added.
(WebCore::InspectorOverlay::showHighlightFlexOverlayForNode): Added.
(WebCore::InspectorOverlay::hideHighlightFlexOverlay): Added.
In addition to the always-on grid/flex overlay data, have another member variable for a single grid/flex overlay that takes precedence (and is drawn on top) of all other grid/flex overlays.

* Source/WebCore/inspector/agents/InspectorDOMAgent.h:
* Source/WebCore/inspector/agents/InspectorDOMAgent.cpp:
(WebCore::parseRequiredConfigColor): Renamed from `parseConfigColor`.
(WebCore::parseOptionalConfigColor): Added.
(WebCore::InspectorDOMAgent::willDestroyFrontendAndBackend):
(WebCore::InspectorDOMAgent::handleTouchEvent):
(WebCore::InspectorDOMAgent::inspect):
(WebCore::InspectorDOMAgent::highlightMousedOverNode):
(WebCore::InspectorDOMAgent::setSearchingForNode):
(WebCore::InspectorDOMAgent::highlightConfigFromInspectorObject):
(WebCore::InspectorDOMAgent::gridOverlayConfigFromInspectorObject): Added.
(WebCore::InspectorDOMAgent::flexOverlayConfigFromInspectorObject): Added.
(WebCore::InspectorDOMAgent::setInspectModeEnabled):
(WebCore::InspectorDOMAgent::showGridOverlay):
(WebCore::InspectorDOMAgent::showFlexOverlay):
* Source/WebInspectorUI/UserInterface/Models/DOMNode.js:
(WI.DOMNode.get defaultLayoutOverlayColor): Added.
(WI.DOMNode.prototype.showLayoutOverlay):
Handle changes to `DOM.showGridOverlay` and `DOM.showFlexOverlay`.

* Source/WebInspectorUI/UserInterface/Controllers/DOMManager.js:
(WI.DOMManager.prototype.set inspectModeEnabled):
Pass along the current grid/flex overlay configuration when enabling element selection mode.

* Source/WebInspectorUI/UserInterface/Base/Setting.js:
* Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js:
(WI.SettingsTabContentView.prototype._createElementsSettingsView):
Add some on-by-default `WI.Setting` to control this behavior.

* Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js:

* LayoutTests/inspector/dom/showFlexOverlay.html:
* LayoutTests/inspector/dom/showGridOverlay.html:

Canonical link: https://commits.webkit.org/259989@main