2021-09-23 Myles C. Maxfield <mmaxfield@apple.com>

Web Inspector support for font-palette

https://bugs.webkit.org/show_bug.cgi?id=230453

Reviewed by Devin Rousso.

Provide keyword completions.

* UserInterface/Models/CSSKeywordCompletions.js:

2021-09-22 Devin Rousso <drousso@apple.com>

Web Inspector: add a pinned [+] button to the tab bar to make it easier to re-open closed tabs

https://bugs.webkit.org/show_bug.cgi?id=230600

Reviewed by BJ Burg.

* UserInterface/Views/TabBar.js:

(WI.TabBar):

(WI.TabBar.prototype.selectTabBarItem):

(WI.TabBar.prototype.layout):

(WI.TabBar.prototype._pinnedButtons): Added.

(WI.TabBar.prototype._closedTabClasses): Added.

(WI.TabBar.prototype._handleTabContainerMouseDown):

(WI.TabBar.prototype._handleShowHiddenTabsTabBarItemMouseDown): Added.

(WI.TabBar.prototype._handleAddClosedTabsTabBarItemMouseDown): Added.

(WI.TabBar.prototype._handleTabContainerClick): Deleted.

Add a `_openClosedTabsTabBarItem` that's a `WI.PinnedTabBarItem` without a `representedObject`,

meaning that it's basically just a button and won't actually open a tab when clicked. This

suits our purposes perfectly as we only want to show a contextmenu on click, not to mention

that it will only be shown if there are closed tabs.

Drive-by: Rename `_tabPickerTabBarItem` to `_showHiddenTabsTabBarItem` to clarify purpose.

Drive-by: Remove `_handleTabContainerClick` as tabs can only be removed via the contextmenu.

* UserInterface/Images/Overflow.svg: Renamed from UserInterface/Images/TabPicker.svg.

Drive-by: Rename to clarify purpose.

* Localizations/en.lproj/localizedStrings.js:

2021-09-16 Patrick Angle <pangle@apple.com>

Web Inspector: Regression(r279613) Audit result scope toggles are missing

https://bugs.webkit.org/show_bug.cgi?id=230322

Reviewed by Devin Rousso.

The sizing calculations modified in r279613 were erroneously applied to both the minimum space calculation as

well as the navigation item hiding calculations, despite hiding navigation items never being done for non-sidebar

navigation bars. The logic in `WI.NavigationBar.prototype._calculateMinimumWidth` remains unchanged, as we still

need sidebars to provide a minimum width that can accommodate all items in a flex layout in order to avoid

flowing navigation items on to another row. The navigation bar in a sidebar is unique in this respect, as other

navigation bars will gracefully hide components if they truly don't have enough space, but a sidebar relies on

getting a minimum size that can actually accommodate all items in a single row.

* UserInterface/Views/NavigationBar.js:

(WI.NavigationBar.prototype.layout.calculateVisibleItemWidth):

(WI.NavigationBar.prototype.layout):

2021-09-16 Patrick Angle <pangle@apple.com>

Web Inspector: Don't maintain a back-forward stack for `ContentBrowser`/`ContentViewContainer` when not necessary

https://bugs.webkit.org/show_bug.cgi?id=230286

Reviewed by Devin Rousso.

We currently maintain a back/forward stack for all ContentViewContainers, even if other history entries won't be

used. Instead, subclasses of ContentBrowserTabContentView should be able to disable the history stack, which

helps us ensure that outdated content views are not kept around for these subclasses and their views.

This does not line up one-to-one with views that hide the back/forward buttons, as the back/forward stack is

used in some places to provide a memory of selection across different views, like in the Graphics tab.

* UserInterface/Views/AuditTabContentView.js:

(WI.AuditTabContentView):

* UserInterface/Views/ConsoleTabContentView.js:

(WI.ConsoleTabContentView):

* UserInterface/Views/ContentBrowser.js:

* UserInterface/Views/ContentBrowserTabContentView.js:

* UserInterface/Views/ContentViewContainer.js:

(WI.ContentViewContainer.prototype.showContentView):

(WI.ContentViewContainer.prototype.replaceContentView):

* UserInterface/Views/ElementsTabContentView.js:

(WI.ElementsTabContentView):

* UserInterface/Views/GraphicsTabContentView.js:

(WI.GraphicsTabContentView):

* UserInterface/Views/LayersTabContentView.js:

(WI.LayersTabContentView):

* UserInterface/Views/NetworkDetailView.js:

(WI.NetworkDetailView.prototype.initialLayout):

* UserInterface/Views/NetworkTabContentView.js:

(WI.NetworkTabContentView):

* UserInterface/Views/TimelineRecordingContentView.js:

(WI.TimelineRecordingContentView):

2021-09-16 Patrick Angle <pangle@apple.com>

Web Inspector: `FrameDOMTreeContentView` may update after it has `closed` called, causing hangs on some webpages on reload

https://bugs.webkit.org/show_bug.cgi?id=230186

Reviewed by Devin Rousso.

`FrameDOMTreeContentView` may be `closed` between a call to `_requestRootDOMNode` and the response being

provided to `_rootDOMNodeAvailable`. This can result in an attempt to select a DOM node in an old and detached

DOM tree. To combat this, add a flag to `ContentView` to mark a closed `ContentView` as such, and then return

early from `_rootDOMNodeAvailable` if the `ContentView` is already closed.

* UserInterface/Views/ContentView.js:

(WI.ContentView):

(WI.ContentView.prototype.closed):

(WI.ContentView.prototype.get isClosed):

* UserInterface/Views/FrameDOMTreeContentView.js:

(WI.FrameDOMTreeContentView.prototype._rootDOMNodeAvailable):

2021-09-15 Patrick Angle <pangle@apple.com>

Web Inspector: `TreeOutline` should return early when failing to find an ancestor while populating the tree

https://bugs.webkit.org/show_bug.cgi?id=230287

Reviewed by Devin Rousso.

When an ancestor can not be found, we should return to prevent additional work (which will fail) from being done.

* UserInterface/Views/TreeOutline.js:

(WI.TreeOutline.prototype.findTreeElement):

2021-09-15 Patrick Angle <pangle@apple.com>

Web Inspector: `DOMTreeUpdater` doesn't complete deferred updating/clear updated lists when a node isn't found in the tree

https://bugs.webkit.org/show_bug.cgi?id=230289

Reviewed by Devin Rousso.

Instead of an early return when a tree element can't be found, we should continue on to the next updated node

and finish out by clearing the collections of updated nodes, otherwise a node that will never be findable again

will cause extra work to be done on every update.

* UserInterface/Views/DOMTreeUpdater.js:

(WI.DOMTreeUpdater.prototype._updateModifiedNodes):

2021-09-13 Razvan Caliman <rcaliman@apple.com>

Web Inspector: Update naming of WI.CSSCompletions callback used for collecting supported CSS properties from the target

https://bugs.webkit.org/show_bug.cgi?id=230153

Reviewed by Devin Rousso.

Rename `WI.CSSCompletions.initializeCSSCompletions.propertyNamesCallback(names)` to `propertiesCallback(properties)`

to remove confusion about what the payload actually contains: not a list of property names, but a list of objects with

CSS property names, values, aliases, longhands, etc.

The constructor of `WI.CSSCompletions` expects and handles this payload.

* UserInterface/Models/CSSCompletions.js:

(WI.CSSCompletions.initializeCSSCompletions):

(WI.CSSCompletions.initializeCSSCompletions.propertyNamesCallback): Deleted.

2021-08-27 Russell Epstein <repstein@apple.com>

Land Windows build fixes from safari-612.1.29.14-branch.

https://bugs.webkit.org/show_bug.cgi?id=229627

Reviewed by Per Arne Vollan.

* WebInspectorUI.vcxproj/WebInspectorUI.make:

* WebInspectorUI.vcxproj/WebInspectorUI.proj:

2021-08-26 Patrick Angle <pangle@apple.com>

Web Inspector: Rename `ContextualDocumentation*` to `CSSDocumentation` to reduce path length and improve code readability

https://bugs.webkit.org/show_bug.cgi?id=229525

Reviewed by Devin Rousso.

Reduce the length and complexity of naming around the documentation that was added for CSS properties by

using `CSSDocumentation` to refer to the feature instead of `ContextualDocumentation`.

* Localizations/en.lproj/localizedStrings.js:

* Scripts/copy-user-interface-resources.pl:

* UserInterface/External/CSSDocumentation/CSSDocumentation.js: Renamed from Source/WebInspectorUI/UserInterface/External/ContextualDocumentationDatabase/ContextualDocumentationDatabase.js.

* UserInterface/External/CSSDocumentation/LICENSE: Renamed from Source/WebInspectorUI/UserInterface/External/ContextualDocumentationDatabase/LICENSE.

* UserInterface/Main.html:

* UserInterface/Views/CSSDocumentationPopover.css: Renamed from Source/WebInspectorUI/UserInterface/Views/ContextualDocumentationPopover.css.

* UserInterface/Views/CSSDocumentationPopover.js: Renamed from Source/WebInspectorUI/UserInterface/Views/ContextualDocumentationPopover.js.

(WI.CSSDocumentationPopover.prototype._getDocumentationDetails):

* UserInterface/Views/ComputedStyleSection.css:

(.computed-style-section .property-trace-item .property :is(.name, .colon, .semicolon, .css-documentation-button)):

(.sidebar > .panel.details.css-style > .content > .computed .computed-property-item > .property > .content > .css-documentation-button):

(.sidebar > .panel.details.css-style > .content > .computed .computed-property-item:not(:hover) > .property > .content > .css-documentation-button):

(.computed-style-section .property-trace-item .property :is(.name, .colon, .semicolon, .contextual-documentation-button)): Deleted.

(.sidebar > .panel.details.css-style > .content > .computed .computed-property-item > .property > .content > .contextual-documentation-button): Deleted.

(.sidebar > .panel.details.css-style > .content > .computed .computed-property-item:not(:hover) > .property > .content > .contextual-documentation-button): Deleted.

* UserInterface/Views/Main.css:

(.css-documentation-button):

(.css-documentation-button:active):

(@media (prefers-color-scheme: dark) .css-documentation-button):

(.contextual-documentation-button): Deleted.

(.contextual-documentation-button:active): Deleted.

(@media (prefers-color-scheme: dark) .contextual-documentation-button): Deleted.

* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:

(.spreadsheet-style-declaration-editor > .property:not(:hover) > .content > .css-documentation-button,):

(.spreadsheet-style-declaration-editor > .property:not(:hover) > .content > .contextual-documentation-button,): Deleted.

* UserInterface/Views/SpreadsheetStyleProperty.js:

(WI.SpreadsheetStyleProperty.prototype.update):

(WI.SpreadsheetStyleProperty.prototype.spreadsheetTextFieldDidCommit):

(WI.SpreadsheetStyleProperty.prototype.spreadsheetTextFieldDidBlur):

(WI.SpreadsheetStyleProperty.prototype.willDismissPopover):

(WI.SpreadsheetStyleProperty.prototype._addCSSDocumentationButton):

(WI.SpreadsheetStyleProperty.prototype._handleCSSDocumentationButtonClicked):

(WI.SpreadsheetStyleProperty.prototype._presentCSSDocumentation):

(WI.SpreadsheetStyleProperty.prototype._addContextualDocumentationButton): Deleted.

(WI.SpreadsheetStyleProperty.prototype._handleContextualDocumentationButtonClicked): Deleted.

(WI.SpreadsheetStyleProperty.prototype._presentContextualDocumentation): Deleted.

2021-08-23 Razvan Caliman <rcaliman@apple.com>

Web Inspector: CSS Changes: changes are not updated live

https://bugs.webkit.org/show_bug.cgi?id=229153

<rdar://problem/81989328>

Reviewed by Devin Rousso.

Dispatch an event whenever the list of modified styles changes.

Re-layout the Changes details sidebar panel in response to this event

to reflect the latest state of the modified styles.

* UserInterface/Controllers/CSSManager.js:

(WI.CSSManager.prototype.addModifiedStyle):

(WI.CSSManager.prototype.removeModifiedStyle):

* UserInterface/Views/ChangesDetailsSidebarPanel.js:

(WI.ChangesDetailsSidebarPanel.prototype.attached):

(WI.ChangesDetailsSidebarPanel.prototype.detached):

2021-08-19 Alex Christensen <achristensen@webkit.org>

Remove more non-inclusive language from Source

https://bugs.webkit.org/show_bug.cgi?id=229230

Reviewed by Myles C. Maxfield.

* UserInterface/External/three.js/three.js:

(return.parseTrackName):

(parseTrackName):

* UserInterface/Views/ConsoleMessageView.js:

(WI.ConsoleMessageView.prototype._formatWithSubstitutionString.styleFormatter):

(WI.ConsoleMessageView.prototype._formatWithSubstitutionString.isAllowedProperty):

(WI.ConsoleMessageView.prototype._formatWithSubstitutionString.isWhitelistedProperty): Deleted.

* UserInterface/Views/DOMTreeElement.js:

(WI.DOMTreeElement.prototype.populateDOMNodeContextMenu):

2021-08-19 Tim Nguyen <ntim@apple.com>

Implement ::backdrop pseudo element

https://bugs.webkit.org/show_bug.cgi?id=227801

Reviewed by Antti Koivisto.

This adds UA styles, RenderTreeBuilder support and WebInspector support for ::backdrop.

Some imported blink tests now start passing, some still need proper top layer support.

* UserInterface/Controllers/CSSManager.js:

(WI.CSSManager.displayNameForPseudoId):

2021-08-17 Devin Rousso <drousso@apple.com>

Web Inspector: match the undocked tab bar style when docked bottom/side

https://bugs.webkit.org/show_bug.cgi?id=212398

Reviewed by Timothy Hatcher.

This will avoid confusion when switching from docked to undocked (and vice versa) as the tab

bar UI will no longer be significantly different.

* UserInterface/Views/TabBar.js:

(WI.TabBar):

(WI.TabBar.prototype.layout):

(WI.TabBar.prototype.layout.measureWidth):

(WI.TabBar.prototype._recordTabBarItemSizesAndPositions):

(WI.TabBar.prototype._applyTabBarItemSizesAndPositions):

(WI.TabBar.prototype._clearTabBarItemSizesAndPositions):

(WI.TabBar.prototype._handleMouseDown):

(WI.TabBar.prototype._handleMouseMoved):

(WI.TabBar.get horizontalPadding): Deleted.

(WI.TabBar.prototype._recordTabBarItemSizesAndPositions.add): Deleted.

* UserInterface/Views/TabBar.css:

(.tab-bar):

(body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar): Added.

(body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar): Added.

(body:is(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar, body:not(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar): Added.

(.tab-bar > .tabs > .item):

(body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item): Added.

(body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item): Added.

(.tab-bar > .tabs:not(.calculate-width) > .item:not(.pinned)):

(.tab-bar > .tabs > .item:nth-child(n + 2 of :not(.hidden)), .tab-bar > .tabs:not(.hide-border-start) > .item:nth-child(1 of :not(.hidden)), .tab-bar > .tabs.dragging-tab > .item.selected):

(.tab-bar > .tabs:not(.hide-border-end) > .item:nth-last-child(1 of :not(.hidden))):

(body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item:not(.disabled).selected): Added.

(body:is(.mac-platform.monterey, .mac-platform.big-sur):not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected): Added.

(body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item:not(.disabled).selected): Added.

(body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Added.

(body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Added.

(.tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover, .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover + .item):

(.tab-bar > .tabs:not(.animating) > .item:last-child:not(.selected, .disabled):hover):

(body:is(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar > .tabs > .item, body:not(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar > .tabs > .item): Added.

(body.window-inactive .tab-bar > .tabs > .item):

(body.window-inactive .tab-bar > .tabs > .item:not(.disabled).selected):

(.tab-bar > .tabs.dragging-tab > .item:not(.disabled).selected, .tab-bar > .tabs.static-layout:not(.animating.inserting-tab):not(.dragging-tab) > .item:nth-last-child(1 of :not(.pinned)), .tab-bar > .tabs.animating.closing-tab > .item:not(.disabled).selected):

(body.window-inactive .tab-bar > .tabs.dragging-tab > .item:not(.disabled).selected, body.window-inactive .tab-bar > .tabs.static-layout:not(.animating.inserting-tab):not(.dragging-tab) > .item:nth-last-child(1 of :not(.pinned)), body.window-inactive .tab-bar > .tabs.animating.closing-tab > .item:not(.disabled).selected):

(@media (prefers-color-scheme: dark) body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar, body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar): Added.

(@media (prefers-color-scheme: dark) body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar): Added.

(@media (prefers-color-scheme: dark) body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar): Added.

(@media (prefers-color-scheme: dark) body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item): Added.

(@media (prefers-color-scheme: dark) body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item:not(.disabled).selected): Added.

(@media (prefers-color-scheme: dark) body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs > .item:not(.disabled).selected): Added.

(@media (prefers-color-scheme: dark) body:is(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Added.

(@media (prefers-color-scheme: dark) body:not(.mac-platform.monterey, .mac-platform.big-sur) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Added.

(@media (prefers-color-scheme: dark) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover > .icon):

(@media (prefers-color-scheme: dark) body:is(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar, body:not(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar): Added.

(@media (prefers-color-scheme: dark) body:is(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar > .tabs > .item): Added.

(@media (prefers-color-scheme: dark) body:not(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar > .tabs > .item): Added.

(@media (prefers-color-scheme: dark) body:is(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected): Added.

(@media (prefers-color-scheme: dark) body:not(.mac-platform.monterey, .mac-platform.big-sur).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected): Added.

(body.big-sur .tab-bar): Deleted.

(body:not(.docked) .tab-bar): Deleted.

(body.big-sur:not(.docked) .tab-bar): Deleted.

(body:not(.big-sur):not(.docked) .tab-bar): Deleted.

(body.big-sur:not(.docked).window-inactive .tab-bar, body:not(.big-sur):not(.docked).window-inactive .tab-bar): Deleted.

(body.docked.window-inactive .tab-bar): Deleted.

(body.docked.bottom .tab-bar > .border.top): Deleted.

(body.big-sur.docked .tab-bar > .border.bottom): Deleted.

(body.docked .tab-bar .tabs): Deleted.

(body.docked .tab-bar > .tabs > .flexible-space): Deleted.

(body.docked.bottom .tab-bar > .tabs > .flexible-space): Deleted.

(body:not(.docked) .tab-bar > .tabs > .item): Deleted.

(body.big-sur:not(.docked) .tab-bar > .tabs > .item): Deleted.

(body:not(.big-sur):not(.docked) .tab-bar > .tabs > .item): Deleted.

(body:not(.docked) .tab-bar > .tabs:not(.calculate-width) > .item:not(.pinned)): Deleted.

(body.docked .tab-bar > .tabs > .item): Deleted.

(body:not(.docked) .tab-bar > .tabs > .item:nth-child(n + 3 of :not(.hidden)), body:not(.docked) .tab-bar > .tabs:not(.hide-border-start) > .item:nth-child(2 of :not(.hidden)), .tab-bar > .tabs.dragging-tab > .item.selected): Deleted.

(body:not(.docked) .tab-bar > .tabs:not(.hide-border-end) > .item:nth-last-child(1 of :not(.hidden))): Deleted.

(body.docked .tab-bar > .tabs > .item.pinned): Deleted.

(body.big-sur:not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.

(body:not(.big-sur):not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.

(body.docked .tab-bar > .tabs > .item:not(.disabled):matches(.selected, :hover)): Deleted.

(body.docked .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.

(body.big-sur:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Deleted.

(body:not(.big-sur):not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Deleted.

(body.docked .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Deleted.

(body:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover, body:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover + .item): Deleted.

(body:not(.docked) .tab-bar > .tabs:not(.animating) > .item:last-child:not(.selected, .disabled):hover): Deleted.

(body:not(.docked).window-inactive .tab-bar > .tabs > .item): Deleted.

(body.big-sur:not(.docked).window-inactive .tab-bar > .tabs > .item, body:not(.big-sur):not(.docked).window-inactive .tab-bar > .tabs > .item): Deleted.

(body:not(.docked).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.

(body.docked.window-inactive .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.

(body:not(.docked) .tab-bar > .tabs.dragging-tab > .item:not(.disabled).selected, body:not(.docked) .tab-bar > .tabs.static-layout:not(.animating.inserting-tab):not(.dragging-tab) > .item:nth-last-child(1 of :not(.pinned)), body:not(.docked) .tab-bar > .tabs.animating.closing-tab > .item:not(.disabled).selected): Deleted.

(body:not(.docked).window-inactive .tab-bar > .tabs.dragging-tab > .item:not(.disabled).selected, body:not(.docked).window-inactive .tab-bar > .tabs.static-layout:not(.animating.inserting-tab):not(.dragging-tab) > .item:nth-last-child(1 of :not(.pinned)), body:not(.docked).window-inactive .tab-bar > .tabs.animating.closing-tab > .item:not(.disabled).selected): Deleted.

(@media (prefers-color-scheme: dark) body.big-sur .tab-bar, body:not(.big-sur) .tab-bar): Deleted.

(@media (prefers-color-scheme: dark) body.big-sur:not(.docked) .tab-bar): Deleted.

(@media (prefers-color-scheme: dark) body:not(.big-sur):not(.docked) .tab-bar): Deleted.

(@media (prefers-color-scheme: dark) body.docked .tab-bar): Deleted.

(@media (prefers-color-scheme: dark) body.docked.bottom .tab-bar > .border.top): Deleted.

(@media (prefers-color-scheme: dark) body:not(.big-sur):not(.docked) .tab-bar > .tabs > .item): Deleted.

(@media (prefers-color-scheme: dark) body.big-sur:not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.

(@media (prefers-color-scheme: dark) body:not(.big-sur):not(.docked) .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.

(@media (prefers-color-scheme: dark) body.big-sur:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Deleted.

(@media (prefers-color-scheme: dark) body:not(.big-sur):not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Deleted.

(@media (prefers-color-scheme: dark) body.docked .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover): Deleted.

(@media (prefers-color-scheme: dark) body.docked .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.

(@media (prefers-color-scheme: dark) body.docked.window-inactive .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.

(@media (prefers-color-scheme: dark) body:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover > .icon): Deleted.

(@media (prefers-color-scheme: dark) body:not(.docked).window-inactive .tab-bar): Deleted.

(@media (prefers-color-scheme: dark) body.big-sur:not(.docked).window-inactive .tab-bar, body:not(.big-sur):not(.docked).window-inactive .tab-bar): Deleted.

(@media (prefers-color-scheme: dark) body.big-sur:not(.docked).window-inactive .tab-bar > .tabs > .item): Deleted.

(@media (prefers-color-scheme: dark) body:not(.big-sur):not(.docked).window-inactive .tab-bar > .tabs > .item): Deleted.

(@media (prefers-color-scheme: dark) body.big-sur:not(.docked).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.

(@media (prefers-color-scheme: dark) body:not(.big-sur):not(.docked).window-inactive .tab-bar > .tabs > .item:not(.disabled).selected): Deleted.

* UserInterface/Views/TabBarItem.js:

(WI.TabBarItem.get horizontalMargin): Deleted.

- remove the flexible space filler elements (and associated CSS) before and after the tabs

- remove any `.docked` CSS

- remove the (now unnecessary) `:not(.docked)` from all CSS related to the `WI.TabBar`

- replace `.big-sur` with `.mac-platform.big-sur` for clarity

- add `.mac-platform.monterey` alongside any `.mac-platform.big-sur`

* UserInterface/Base/Main.js:

(WI.undockedTitleAreaHeight):

* UserInterface/Views/Main.css:

(body:is(.mac-platform.monterey, .mac-platform.big-sur) #undocked-title-area): Added.

(body:not(.mac-platform.monterey, .mac-platform.big-sur) #undocked-title-area): Added.

(@media (prefers-color-scheme: dark) body:is(.mac-platform.monterey, .mac-platform.big-sur) #undocked-title-area): Added.

(@media (prefers-color-scheme: dark) body:not(.mac-platform.monterey, .mac-platform.big-sur) #undocked-title-area): Added.

(@media (prefers-color-scheme: dark) body:is(.mac-platform.monterey, .mac-platform.big-sur).window-inactive #undocked-title-area): Added.

(@media (prefers-color-scheme: dark) body:not(.mac-platform.monterey, .mac-platform.big-sur).window-inactive #undocked-title-area): Added.

(body.big-sur #undocked-title-area): Deleted.

(body:not(.big-sur) #undocked-title-area): Deleted.

(@media (prefers-color-scheme: dark) body.big-sur #undocked-title-area): Deleted.

(@media (prefers-color-scheme: dark) body:not(.big-sur) #undocked-title-area): Deleted.

(@media (prefers-color-scheme: dark) body.big-sur.window-inactive #undocked-title-area): Deleted.

(@media (prefers-color-scheme: dark) body:not(.big-sur).window-inactive #undocked-title-area): Deleted.

* UserInterface/Views/Variables.css:

(body:is(.mac-platform.monterey, .mac-platform.big-sur)): Added.

(body:not(.mac-platform.monterey, .mac-platform.big-sur):not(.docked)): Added.

(body:is(.mac-platform.monterey, .mac-platform.big-sur):not(.docked)): Added.

(@media (prefers-color-scheme: dark) body:is(.mac-platform.monterey, .mac-platform.big-sur)): Added.

(body.big-sur): Deleted.

(body.mac-platform:not(.big-sur):not(.docked)): Deleted.

(body.mac-platform.big-sur:not(.docked)): Deleted.

(@media (prefers-color-scheme: dark) body.big-sur): Deleted.

Add support for macOS Monterey.

2021-08-17 Razvan Caliman <rcaliman@apple.com>

Web Inspector: Do not show contextual documentation popup in the Changes panel

https://bugs.webkit.org/show_bug.cgi?id=229001

<rdar://problem/81792379>

Reviewed by Devin Rousso.

Add config option to WI.SpreadsheetStyleProperty to prevent showing a contextual documentation button.

* UserInterface/Views/ChangesDetailsSidebarPanel.js:

(WI.ChangesDetailsSidebarPanel.prototype._createRuleElement.onEach):

* UserInterface/Views/SpreadsheetStyleProperty.js:

(WI.SpreadsheetStyleProperty.prototype._addContextualDocumentationButton):

2021-08-12 Patrick Angle <pangle@apple.com>

Web Inspector: Adding execution contexts after page load doesn't show a hidden execution selector

https://bugs.webkit.org/show_bug.cgi?id=229053

Reviewed by Devin Rousso.

Add a handler for execution contexts being added to update the display of the execution context list, as when

there is only a single context at page load the dropdown will be hidden and thus needs to be shown when an

execution context is added after page load.

* UserInterface/Views/QuickConsole.js:

(WI.QuickConsole):

(WI.QuickConsole.prototype._handleFrameExecutionContextAdded):

2021-08-12 Nikita Vasilyev <nvasilyev@apple.com>

REGRESSION (r271348): Web Inspector: Table headers have vertical scrollbar

https://bugs.webkit.org/show_bug.cgi?id=228671

<rdar://problem/81638278>

Reviewed by Devin Rousso.

* UserInterface/Views/Table.css:

(.table > .header):

Set overflow hidden for the y axis, not just x axis.

2021-08-03 Sonia Singla <soniasingla.1812@gmail.com>

Web Inspector: Add standard logical properties to CSS keyword completion

https://bugs.webkit.org/show_bug.cgi?id=228548

Reviewed by Devin Rousso.

* UserInterface/Models/CSSKeywordCompletions.js:

2021-08-02 Patrick Angle <pangle@apple.com>

Web Inspector: [AppleWin] Speculative internal build fix for copying `InspectorBackendCommands.js`

https://bugs.webkit.org/show_bug.cgi?id=228716

Reviewed by Maciej Stachowiak.

Speculative fix for AppleWin port internal build by using the correct directory for JSC headers. Also update the

logging message to reflect that the file will by copied later in the build.

* WebInspectorUI.vcxproj/WebInspectorUI.make:

* WebInspectorUI.vcxproj/build-webinspectorui.pl:

2021-08-02 Nikita Vasilyev <nvasilyev@apple.com>

Web Inspector: Network: sorting of transfer size for failed requests is causing the ordering to change every layout

https://bugs.webkit.org/show_bug.cgi?id=228712

Reviewed by Devin Rousso.

* UserInterface/Views/NetworkTableContentView.js:

(WI.NetworkTableContentView.prototype._generateSortComparator):

Don't change the item order when both values are NaN.

2021-07-26 Qiaosong Zhou <qiaosong_zhou@apple.com>

FormDataEvent added.

https://bugs.webkit.org/show_bug.cgi?id=227718

Reviewed by Chris Dumez.

* UserInterface/Models/ScriptTimelineRecord.js:

(WI.ScriptTimelineRecord.EventType.displayName):

2021-07-19 Nikita Vasilyev <nvasilyev@apple.com>

Web Inspector: REGRESSION(?): alpha slider doesn't match alpha input for `transparent` in color picker

https://bugs.webkit.org/show_bug.cgi?id=227941

<rdar://problem/80557438>

Reviewed by Devin Rousso.

* UserInterface/Views/Slider.js:

(WI.Slider.prototype.set value):

When the initial value was set to 0, `set value` was exiting early when the passed value was 0.

2021-07-19 Patrick Angle <pangle@apple.com>

Web Inspector: Elements: selecting a sibling node in the breadcrumb navigation doesn't do anything

https://bugs.webkit.org/show_bug.cgi?id=227893

Reviewed by Devin Rousso.

The `WI.HierarchicalPathComponent.Event.Clicked` event is only fired when there are no sibling path components

to select, therefor we must also listen for the `WI.HierarchicalPathComponent.Event.SiblingWasSelected` event to

be able to then reveal and highlight the correct DOM node in the tree.

* UserInterface/Views/DOMTreeContentView.js:

(WI.DOMTreeContentView.prototype.get selectionPathComponents):

(WI.DOMTreeContentView.prototype._handlePathComponentSelected):

Drive-by to match our style of `_handle*` event handler naming.

2021-07-19 Patrick Angle <pangle@apple.com>

Web Inspector: Add another Protocol Version (iOS 15.0)

https://bugs.webkit.org/show_bug.cgi?id=228079

Reviewed by Devin Rousso.

* UserInterface/Protocol/Legacy/15.0/InspectorBackendCommands.js: Added.

* Versions/Inspector-iOS-15.0.json: Added.

2021-07-15 Razvan Caliman <rcaliman@apple.com>

Web Inspector: Regression (r278607) Jump to CSS variable declaration from Computed panel not working

https://bugs.webkit.org/show_bug.cgi?id=227811

<rdar://problem/80339360>

Reviewed by Devin Rousso.

When attempting to highlight a hidden unused CSS variable, use the same method to identify a corresponding WI.CSSProperty

as used with other CSS property types. The method checks the canonical property name instead of strict object equality.

When a CSS variable is shown in the Computed panel, its corresponding WI.CSSProperty instance has slightly different

properties than the WI.CSSProperty used in the Styles panel. The instances are generated by different calls to

WI.DOMNodeStyles._parseStylePropertyPayload(), one for the payload of matching styles and another for computed styles.

* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:

(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.highlightProperty.propertiesMatch):

(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.highlightProperty.hasMatchingLonghandProperty):

(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.highlightProperty):

2021-07-14 Devin Rousso <drousso@apple.com>

Implement Array.prototype.findLast and Array.prototype.findLastIndex

https://bugs.webkit.org/show_bug.cgi?id=227939

Reviewed by Yusuke Suzuki.

* UserInterface/Models/NativeFunctionParameters.js:

2021-07-12 Patrick Angle <pangle@apple.com>

Web Inspector: REGRESSION(r279510): Elements: Computed: an (i) button is shown for computed property traces

https://bugs.webkit.org/show_bug.cgi?id=227892

Reviewed by Devin Rousso.

Property traces need to opt out of displaying the (i) button as they do for things like the colon and semicolon.

* UserInterface/Views/ComputedStyleSection.css:

(.computed-style-section .property-trace-item .property .name,):

2021-07-12 Commit Queue <commit-queue@webkit.org>

Unreviewed, reverting r279493.

https://bugs.webkit.org/show_bug.cgi?id=227878

Web Inspector: Can't reveal local overrides in the sidebar if

lots of scripts are visible

Reverted changeset:

"Web Inspector: [Regression: r279271] Sources: Breakpoints

section in navigation sidebar disappears when Web Inspector

becomes taller than 650px"

https://bugs.webkit.org/show_bug.cgi?id=227597

https://commits.webkit.org/r279493

2021-07-09 Patrick Angle <pangle@apple.com>

Web Inspector: Perform sidebar panel and navigation bar layout asynchronously during resize

https://bugs.webkit.org/show_bug.cgi?id=227716

Reviewed by Devin Rousso.

Perform layout updates to the navigation bar and selected panel asynchronously so that they can be batched

together, instead of blocking on layout for each resize (of which there will be many during a dragging resize).

* UserInterface/Views/SingleSidebar.js:

(WI.SingleSidebar.prototype._recalculateWidth):

2021-07-06 Patrick Angle <pangle@apple.com>

Web Inspector: Elements Tab Details Sidebar navigation items sometime wrap to a second line

https://bugs.webkit.org/show_bug.cgi?id=227707

Reviewed by Devin Rousso.

When resizing a sidebar, it was possible that the cumulative widths of each navigation item could add up to just

less than the actual amount of space necessary to lay out each item in a single row, leading to wrapping items

to the next line. This resolves that issue by taking the ceiling of each item's width when calculating the

total amount of space needed to display all the items. Additionally, every time a panel is added or removed from

the sidebar, we need to recalculate the width of the sidebar to make sure the new navigation item, or the

removal thereof, is accommodated.

* UserInterface/Views/NavigationBar.js:

(WI.NavigationBar.prototype.layout.calculateVisibleItemWidth):

(WI.NavigationBar.prototype._calculateMinimumWidth):

* UserInterface/Views/SingleSidebar.js:

(WI.SingleSidebar.prototype.didInsertSidebarPanel):

(WI.SingleSidebar.prototype.didRemoveSidebarPanel):

2021-07-02 Harshil Ratnu <hratnu@apple.com>

Web Inspector: add contextual documentation for CSS properties

https://bugs.webkit.org/show_bug.cgi?id=226883

Reviewed by Devin Rousso.

Overview: Add contextual documentation for all supported CSS properties in Styles and Computed panel within Web

Inspector.

Details: Add an info button which appears next to the property field on Hover. Clicking on the info button shows

a popover with the documentation for the property. Tabbing out or clicking anywhere other than the value field

dismisses the popover.

Architecture: Add a ContextualDocumentationButton in SpreadsheetStyleProperty and append that to the end of the

property content. This Button, when clicked, creates an instance of the ContextualDocumentation.js which will

search the ContextualDocumentationDB to find the related property and it's relevant details. Embed these details

in an instance of Popover.js and present next to the associated propertyName.

* Localizations/en.lproj/localizedStrings.js:

* Scripts/copy-user-interface-resources.pl:

Add details for the ContextualDocumentationDatabase from External Folder to build properly.

* UserInterface/Base/Setting.js:

Add setting to show syntax in documentation popover and define default state as false.

* UserInterface/External/ContextualDocumentationDatabase/ContextualDocumentationDatabase.js: Added.

* UserInterface/External/ContextualDocumentationDatabase/LICENSE: Added.

* UserInterface/Images/InfoIcon.svg: Added.

* UserInterface/Main.html:

Add and link new files.

* UserInterface/Views/ComputedStyleDetailsPanel.css:

(.sidebar > .panel.details.css-style > .content > .computed > .details-section.computed-style-variables .property .go-to-arrow):

(.sidebar > .panel.details.css-style > .content > .computed > .details-section.computed-style-variables .property:not(:hover) .go-to-arrow):

Remove absolute positioning from go-to-arrow button to align it with rest of the text in line and style it

similar to contextual-documentation-button.

(.sidebar > .panel.details.css-style > .content > .computed .property .go-to-arrow): Deleted.

(.sidebar > .panel.details.css-style > .content > .computed .property:not(:hover) .go-to-arrow): Deleted.

Change hover area to include white space on the side of computed variables.

* UserInterface/Views/ComputedStyleSection.css:

(.sidebar > .panel.details.css-style > .content > .computed .computed-property-item > .property .go-to-arrow):

(.sidebar > .panel.details.css-style > .content > .computed .computed-property-item:not(:hover) > .property .go-to-arrow):

(.sidebar > .panel.details.css-style > .content > .computed .computed-property-item > .property > .content > .contextual-documentation-button):

(.sidebar > .panel.details.css-style > .content > .computed .computed-property-item:not(:hover) > .property > .content > .contextual-documentation-button):

Add unifrom styling for go-to-arrow button and contextual-documentation-button for computed properties.

* UserInterface/Views/ContextualDocumentationPopover.css: Added.

(.popover .documentation-popover-content):

(.popover .documentation-popover-content > p):

(.popover .documentation-popover-content > .name-header):

(.popover .documentation-popover-content > .syntax):

(.popover .documentation-popover-content > .syntax > .syntax-title):

(.popover .documentation-popover-content > .reference-link):

* UserInterface/Views/ContextualDocumentationPopover.js: Added.

(WI.ContextualDocumentationPopover):

(WI.ContextualDocumentationPopover.prototype.show):

(WI.ContextualDocumentationPopover.prototype._presentOverTargetElement):

(WI.ContextualDocumentationPopover.prototype._getDocumentationDetails):

(WI.ContextualDocumentationPopover.prototype._createDocumentationElement):

Add new class that extends Popover.js and handles fetching the values from VS Code documentation, puts relevant

information in the popover and presents the popover when the documentation-button is clicked.

* UserInterface/Views/Main.css:

(.contextual-documentation-button):

(.contextual-documentation-button:active):

(@media (prefers-color-scheme: dark) .contextual-documentation-button):

Add general styling for contextualDocumentationButton.

* UserInterface/Views/SettingsTabContentView.js:

(WI.SettingsTabContentView.prototype._createElementsSettingsView):

Add a new setting in Elements Tab to show syntax.

* UserInterface/Views/SpreadsheetStyleProperty.js:

(WI.SpreadsheetStyleProperty.prototype.willDismissPopover):

Add a method - willDismissPopover to handle changes when the documentation popover is about to dismiss.

(WI.SpreadsheetStyleProperty.prototype.update):

(WI.SpreadsheetStyleProperty.prototype.spreadsheetTextFieldDidCommit):

(WI.SpreadsheetStyleProperty.prototype.spreadsheetTextFieldDidBlur):

(WI.SpreadsheetStyleProperty.prototype._addContextualDocumentationButton):

Add a method which gets called for all property fields and also gets called when property name is changed and

updated by clicking out of the property name field or tabbing into the next value field and is responsible for

adding the info button add the end of the property.

(WI.SpreadsheetStyleProperty.prototype._handleContextualDocumentationButtonClicked):

(WI.SpreadsheetStyleProperty.prototype._presentContextualDocumentation):

Add a method which creates an instance of the ContextualDocumentationPopover.js class and shows it.

2021-07-02 Razvan Caliman <rcaliman@apple.com>

Web Inspector: Styles: should autocomplete `var()` and `attr()` values

https://bugs.webkit.org/show_bug.cgi?id=227098

<rdar://problem/79418247>

Reviewed by Devin Rousso.

Add support for completion suggestions in the Styles details sidebar panel

for CSS Variables for use with var() and DOM node attributes for use with attr().

* UserInterface/Models/CSSCompletions.js:

(WI.CSSCompletions.prototype.addValues):

* UserInterface/Models/CSSKeywordCompletions.js:

* UserInterface/Models/DOMNodeStyles.js:

(WI.DOMNodeStyles):

(WI.DOMNodeStyles.prototype.get allCSSVariables):

(WI.DOMNodeStyles.prototype._updateStyleCascade):

(WI.DOMNodeStyles.prototype._collectCSSVariables):

* UserInterface/Views/SpreadsheetStyleProperty.js:

(WI.SpreadsheetStyleProperty.prototype.getFunctionValueCompletions):

(WI.SpreadsheetStyleProperty.prototype._valueCompletionDataProvider):

2021-07-01 Patrick Angle <pangle@apple.com>

Web Inspector: [Regression: r279271] Sources: Breakpoints section in navigation sidebar disappears when Web Inspector becomes taller than 650px

https://bugs.webkit.org/show_bug.cgi?id=227597

Reviewed by Devin Rousso.

As of r279271, flex base size is no longer clamped by max-height. As a result the non-clamped element

(`resources-container`) was sized to the full height of the container, leaving no space for the other sections

to be shown. Removing the `height: 100%;` declaration resolves this by allowing the flex container to lay out

its children as needed. Because the resources container has no maximum height constraint, it still occupies the

remaining height of the container. Each container will also continue to shrink/grow at their prescribed ratio

just as they did before r279271.

* UserInterface/Views/SourcesNavigationSidebarPanel.css:

(@media (min-height: 650px) .sidebar > .panel.navigation.sources > .content > :matches(.call-stack-container, .breakpoints-container, .resources-container, .local-overrides-container)):

2021-06-30 Patrick Angle <pangle@apple.com>

Web Inspector: Styles: Autocomplete should support function completions

https://bugs.webkit.org/show_bug.cgi?id=227097

Reviewed by Devin Rousso.

Covered by new test:

- inspector/unit-tests/css-keyword-completions.html

Add support for completing autocompleting values as part of a CSS function in the Styles sidebar panel.

* UserInterface/Models/CSSKeywordCompletions.js:

(WI.CSSKeywordCompletions.forPartialPropertyName):

(WI.CSSKeywordCompletions.forPartialPropertyValue):

Tokenize the provided partial value text to correct provide completion for functions, like `env(`.

* UserInterface/Views/SpreadsheetStyleProperty.js:

(WI.SpreadsheetStyleProperty.prototype._nameCompletionDataProvider):

(WI.SpreadsheetStyleProperty.prototype._valueCompletionDataProvider):

Moved logic to `WI.CSSKeywordCompletions`.

2021-06-25 Patrick Angle <pangle@apple.com>

Web Inspector: Sources: Scope Chain sidebar panel is stripping repeating whitespace from strings

https://bugs.webkit.org/show_bug.cgi?id=227234

Reviewed by Devin Rousso.

String and Regular Expression values in Object Trees were having `white-space: nowrap;` applied to them, which

was redundant because `white-space: pre;` was already defined for `.formatted-string` and `.formatted-regexp`,

which makes sure that the text does not wrap unless it contains a newline, and these previews have newlines

replaced with a Unicode symbol to visually represent a newline without breaking to a new line.

* UserInterface/Views/ObjectTreeView.css:

(.object-tree-property :matches(.formatted-string, .formatted-regexp)): Deleted.

2021-06-14 Patrick Angle <pangle@apple.com>

[REGRESSION: r276616] Uncaught Exception: TypeError: undefined is not an object (evaluating 'this._setupCodeMirror.getValue')

https://bugs.webkit.org/show_bug.cgi?id=226995

Reviewed by Devin Rousso.

Audit test groups share a single setup editor for all their test cases, leaving individual test cases without

their own setup editor. In this case, we should not attempt to save the setup script for every test, and instead

allow the instance of `AuditTestGroupContentView` that does have a setup editor to save the script.

* UserInterface/Views/AuditTestContentView.js:

(WI.AuditTestContentView.prototype.saveEditedData):

2021-06-11 Patrick Angle <pangle@apple.com>

Web Inspector: Add instrumentation to node destruction for InspectorDOMAgent

https://bugs.webkit.org/show_bug.cgi?id=226624

Reviewed by Devin Rousso.

Listen for the new `DOM.willDestroyDOMNode` event in order to cleanup and remaining references to that Node.

This work serves as a prelude to <https://webkit.org/b/189687> (Web Inspector: preserve DOM.NodeId if a node is

removed and re-added) to eventually only forget about nodes upon destruction, instead of removal from the DOM

tree.

* UserInterface/Controllers/DOMManager.js:

(WI.DOMManager.prototype.willDestroyDOMNode):

* UserInterface/Protocol/DOMObserver.js:

(WI.DOMObserver.prototype.willDestroyDOMNode):

* UserInterface/Views/DOMTreeUpdater.js:

(WI.DOMTreeUpdater.prototype._nodeRemoved):

2021-06-08 Razvan Caliman <rcaliman@apple.com>

Web Inspector: Styles panel slow to render when inspecting node with many inherited CSS variables

https://bugs.webkit.org/show_bug.cgi?id=225972

<rdar://problem/78211185>

Reviewed by Devin Rousso.

Do not show unused inherited CSS variables in the Styles details sidebar.

When aggregating styles for the selected node in `WI.DOMNodeStyles`, collect a list of names of CSS variables used in CSS property values.

In the Styles details sidebar, skip rendering declarations of inherited CSS variables that are not found in this list.

Always show inherited variables that are used, either directly inherited or via reference (variables using other variables in their value).

Always show inherited variables used as values of inheritable properties like color, font-size, etc.

When a CSS rule contains hidden inherited variables, offer a button to request disclosing them for that rule.

Option-click to show unused inherited variables in all matching rules.

Clicking the "Go to variable" button automatically renders all the unused variables in the CSS rule where the target variable is declared.

* Localizations/en.lproj/localizedStrings.js:

* UserInterface/Models/CSSProperty.js:

(WI.CSSProperty.findVariableNames):

* UserInterface/Models/DOMNodeStyles.js:

(WI.DOMNodeStyles):

(WI.DOMNodeStyles.prototype.get usedCSSVariables):

(WI.DOMNodeStyles.prototype._updateStyleCascade):

(WI.DOMNodeStyles.prototype._collectUsedCSSVariables):

* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:

(.spreadsheet-style-declaration-editor .property):

(.spreadsheet-style-declaration-editor > .hidden-variables-button):

* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:

(WI.SpreadsheetCSSStyleDeclarationEditor):

(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.layout):

(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.get propertiesToRender):

(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.highlightProperty):

* UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:

(WI.SpreadsheetCSSStyleDeclarationSection.prototype.set propertyVisibilityMode):

(WI.SpreadsheetCSSStyleDeclarationSection.prototype.spreadsheetCSSStyleDeclarationEditorSetAllPropertyVisibilityMode):

* UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js:

(WI.SpreadsheetRulesStyleDetailsPanel.prototype.spreadsheetCSSStyleDeclarationSectionSetAllPropertyVisibilityMode):

2021-06-04 Devin Rousso <drousso@apple.com>

Web Inspector: cannot see experimental settings when inspecting `ServiceWorker`

https://bugs.webkit.org/show_bug.cgi?id=226666

Reviewed by Joseph Pecoraro.

* UserInterface/Views/SettingsTabContentView.js:

(WI.SettingsTabContentView.prototype._createExperimentalSettingsView):

There are experimental settings that have nothing to do with preview features or CSS. Don't

limit the Experimental pane to only if those things exist.

2021-06-04 Devin Rousso <drousso@apple.com>

Web Inspector: Uncaught Exception: undefined is not an object (evaluating 'InspectorBackend.Enum.Page.ResourceType')

https://bugs.webkit.org/show_bug.cgi?id=226664

Reviewed by Joseph Pecoraro.

* UserInterface/Protocol/InspectorBackend.js:

(InspectorBackendClass.prototype.get Enum):

Use the list of all registered domains, not just the active domains, as only commands/events

are able to be filtered by target type.

2021-05-15 Said Abou-Hallawa <said@apple.com>

Implement CanvasRenderingContext2D.createConicGradient

https://bugs.webkit.org/show_bug.cgi?id=225539

Reviewed by Sam Weinig.

* UserInterface/Models/NativeFunctionParameters.js:

* UserInterface/Models/Recording.js:

(WI.Recording.prototype.async swizzle):

* UserInterface/Views/RecordingActionTreeElement.js:

(WI.RecordingActionTreeElement._classNameForAction):

2021-05-10 Devin Rousso <drousso@apple.com>

Web Inspector: Network: rename "XHR" to "XHR/Fetch"

https://bugs.webkit.org/show_bug.cgi?id=224900

Reviewed by Timothy Hatcher.

* UserInterface/Views/NetworkTableContentView.js:

(WI.NetworkTableContentView):

(WI.NetworkTableContentView.addScopeBarItem): Added.

(WI.NetworkTableContentView.displayNameForResource):

(WI.NetworkTableContentView.shortDisplayNameForResourceType): Deleted.

* Localizations/en.lproj/localizedStrings.js:

2021-05-10 Nikita Vasilyev <nvasilyev@apple.com>

Web Inspector: Layout panel "Grid Overlays" main checkbox has dead space (no interaction) between checkbox and label text

https://bugs.webkit.org/show_bug.cgi?id=225433

<rdar://problem/77590883>

Reviewed by Devin Rousso.

Make the empty space between the checkbox and the label text clickable in:

- Everywhere in Settings tab

- Layout panel, Page Overlay Options

- Grid Overlay header

* UserInterface/Main.html:

* UserInterface/Views/CSSGridSection.css:

(.css-grid-section .node-display-name):

(.css-grid-section .toggle-all):

(.css-grid-section :is(.setting-editor, .node-overlay-list-item-container, .heading) input[type="checkbox"]):

(.css-grid-section .setting-editor > input[type="checkbox"]):

(.css-grid-section .node-display-name,): Deleted.

Make all checkbox labels in the Grid section align vertically.

* UserInterface/Views/CSSGridSection.js:

(WI.CSSGridSection.prototype.initialLayout):

* UserInterface/Views/SettingEditor.css: Copied from Source/WebInspectorUI/UserInterface/Views/CSSGridSection.css.

(.setting-editor input):

(.setting-editor > input[type="checkbox"]):

(.setting-editor > label):

* UserInterface/Views/SettingEditor.js:

(WI.SettingEditor):

* UserInterface/Views/SettingsTabContentView.css:

(.content-view.tab.settings > .settings-view > .container > .editor-group > .setting-editor):

(.content-view.tab.settings > .settings-view > .container > .editor-group > .setting-editor:first-child > *):

(.content-view.tab.settings > .settings-view > .container > .editor-group > .setting-editor input[type="checkbox"]):

(.content-view.tab.settings > .settings-view > .container > .editor-group > .setting-editor select):

(.content-view.tab.settings > .settings-view > .container > .editor-group > .setting-editor input[type="number"]):

(.content-view.tab.settings > .settings-view > .container > .editor-group > .setting-editor input[type="text"]):

(.content-view.tab.settings > .settings-view > .container > .editor-group > .editor): Deleted.

(.content-view.tab.settings > .settings-view > .container > .editor-group > .editor:first-child > *): Deleted.

(.content-view.tab.settings > .settings-view > .container > .editor-group > .editor input): Deleted.

(.content-view.tab.settings > .settings-view > .container > .editor-group > .editor input[type="checkbox"]): Deleted.

(.content-view.tab.settings > .settings-view > .container > .editor-group > .editor select): Deleted.

(.content-view.tab.settings > .settings-view > .container > .editor-group > .editor input[type="number"]): Deleted.

(.content-view.tab.settings > .settings-view > .container > .editor-group > .editor input[type="text"]): Deleted.

Rename ".editor" to ".setting-editor" so it matches SettingEditor.css.

2021-05-10 Devin Rousso <drousso@apple.com>

Web Inspector: add support for panning/zooming on images

https://bugs.webkit.org/show_bug.cgi?id=224655

Reviewed by Timothy Hatcher.

* UserInterface/Controllers/GestureController.js: Added.

(WI.GestureController):

(WI.GestureController.prototype.get scale):

(WI.GestureController.prototype.set scale):

(WI.GestureController.prototype.get translate):

(WI.GestureController.prototype.set translate):

(WI.GestureController.prototype.reset):

(WI.GestureController.prototype._startScaleInteraction):

(WI.GestureController.prototype._updateScaleInteraction):

(WI.GestureController.prototype._endScaleInteraction):

(WI.GestureController.prototype._handleWheel):

(WI.GestureController.prototype._handleGestureStart):

(WI.GestureController.prototype._handleGestureChange):

(WI.GestureController.prototype._handleGestureEnd):

(WI.GestureController.prototype._handleMouseDown):

(WI.GestureController.prototype._handleMouseMove):

(WI.GestureController.prototype._handleMouseUp):

Add a general controller class that takes a `target` (and optionally a `container`) and adds

event listeners to handle various gestures:

- scale (both via trackpad and mouse wheel)

- transform (mouse click and drag)

* UserInterface/Views/ImageResourceContentView.js:

(WI.ImageResourceContentView):

(WI.ImageResourceContentView.prototype.get navigationItems):

(WI.ImageResourceContentView.prototype.contentAvailable):

(WI.ImageResourceContentView.prototype.gestureControllerDidScale): Added.

(WI.ImageResourceContentView.prototype.gestureControllerDidTranslate): Added.

(WI.ImageResourceContentView.prototype._updateResetGestureButtonNavigationItemLabel): Added.

(WI.ImageResourceContentView.prototype._handleResetGestureButtonNavitationItemClicked): Added.

(WI.ImageResourceContentView.prototype._handleZoomOutGestureButtonNavitationItemClicked): Added.

(WI.ImageResourceContentView.prototype._handleZoomInGestureButtonNavitationItemClicked): Added.