[GTK][WPE] Remote Web Inspector: replace deprecated CSS method 'match…

…es' with 'is'

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

Reviewed by Tim Nguyen.

The :matches() selector was renamed to :is() in:
w3c/csswg-drafts#3258

:matches() is no longer supported by some browsers (like Chromium and
Firefox) and breaks Web Inspector UI in such browsers when we connect
via HTTP.

In case GTK/WPE WebKit, we use HTTP version of the inspector and it
can be used from any browser.

* Source/WebInspectorUI/UserInterface/Views/AuditTreeElement.css:
(.tree-outline .item.audit:is(.test-case, .test-group):not(.unsupported, .manager-active):hover > .status > img):
(body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .item.audit:is(.test-case, .test-group):not(.unsupported, .manager-active).selected:hover > .status > img,):
(.tree-outline .item.audit.unsupported:not(.selected) > :is(.icon, .titles)):
(@media (prefers-color-scheme: dark) .tree-outline .item.audit:is(.test-case, .test-group):not(.unsupported, .manager-active):hover > .status > img):
(.tree-outline .item.audit:matches(.test-case, .test-group):not(.unsupported, .manager-active):hover > .status > img): Deleted.
(body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .item.audit:matches(.test-case, .test-group):not(.unsupported, .manager-active).selected:hover > .status > img,): Deleted.
(.tree-outline .item.audit.unsupported:not(.selected) > :matches(.icon, .titles)): Deleted.
(@media (prefers-color-scheme: dark) .tree-outline .item.audit:matches(.test-case, .test-group):not(.unsupported, .manager-active):hover > .status > img): Deleted.
* Source/WebInspectorUI/UserInterface/Views/BlackboxSettingsView.css:
(.settings-view.blackbox > :is(p, table)):
(.settings-view.blackbox > table :is(th, td).url):
(.settings-view.blackbox > table :is(th, td):is(.case-sensitive, .remove-blackbox)):
(.settings-view.blackbox > :matches(p, table)): Deleted.
(.settings-view.blackbox > table :matches(th, td).url): Deleted.
(.settings-view.blackbox > table :matches(th, td):matches(.case-sensitive, .remove-blackbox)): Deleted.
* Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.css:
(.details-section .row.box-model :is(.top, .right, .bottom, .left)):
(.details-section .row.box-model :is(.top, .right, .bottom, .left):not(.editing),):
(.details-section .row.box-model :is(.top-left, .top-right, .bottom-right, .bottom-left)):
(.details-section .row.box-model :is(.top-left, .top-right)):
(.details-section .row.box-model :is(.bottom-left, .bottom-right):not(.editing)):
(.details-section .row.box-model :is(.bottom-left, .bottom-right).editing):
(.details-section .row.box-model :is(.top-left, .bottom-left):not(.editing)):
(.details-section .row.box-model :is(.top-left, .bottom-left).editing):
(.details-section .row.box-model :is(.top-right, .bottom-right):not(.editing)):
(.details-section .row.box-model :is(.top-right, .bottom-right).editing):
(@media (prefers-color-scheme: dark) .details-section .row.box-model:not(.hovered) .box:is(.margin, .border, .padding, .content),):
(.details-section .row.box-model :matches(.top, .right, .bottom, .left)): Deleted.
(.details-section .row.box-model :matches(.top, .right, .bottom, .left):not(.editing),): Deleted.
(.details-section .row.box-model :matches(.top-left, .top-right, .bottom-right, .bottom-left)): Deleted.
(.details-section .row.box-model :matches(.top-left, .top-right)): Deleted.
(.details-section .row.box-model :matches(.bottom-left, .bottom-right):not(.editing)): Deleted.
(.details-section .row.box-model :matches(.bottom-left, .bottom-right).editing): Deleted.
(.details-section .row.box-model :matches(.top-left, .bottom-left):not(.editing)): Deleted.
(.details-section .row.box-model :matches(.top-left, .bottom-left).editing): Deleted.
(.details-section .row.box-model :matches(.top-right, .bottom-right):not(.editing)): Deleted.
(.details-section .row.box-model :matches(.top-right, .bottom-right).editing): Deleted.
(@media (prefers-color-scheme: dark) .details-section .row.box-model:not(.hovered) .box:matches(.margin, .border, .padding, .content),): Deleted.
* Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css:
(:is(.breakpoint-action-append-button, .breakpoint-action-remove-button)):
(:matches(.breakpoint-action-append-button, .breakpoint-action-remove-button)): Deleted.
* Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css:
(.navigation-bar .item.button:not(.disabled):is(.activate.activated, .radio.selected) > .glyph):
(.navigation-bar .item.button:not(.disabled):active:is(.activate.activated, .radio.selected) > .glyph):
(.navigation-bar .item.button:not(.disabled):matches(.activate.activated, .radio.selected) > .glyph): Deleted.
(.navigation-bar .item.button:not(.disabled):active:matches(.activate.activated, .radio.selected) > .glyph): Deleted.
* Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css:
(.timeline-view.cpu :is(.area-chart, .stacked-area-chart) svg > path):
(.timeline-view.cpu :is(.area-chart, .stacked-area-chart) .markers):
(.timeline-view.cpu :is(.area-chart, .stacked-area-chart) .markers > div):
(body[dir=rtl] .timeline-view.cpu :is(.area-chart, .stacked-area-chart) .markers > div):
(.timeline-view.cpu :is(.area-chart, .stacked-area-chart) .markers > div > .label):
(.timeline-view.cpu :is(.area-chart, .stacked-area-chart) circle):
(.timeline-view.cpu > .content > .overview > .chart > .container.stats > table :is(.filter, .filter-clear):hover):
(.timeline-view.cpu :matches(.area-chart, .stacked-area-chart) svg > path): Deleted.
(.timeline-view.cpu :matches(.area-chart, .stacked-area-chart) .markers): Deleted.
(.timeline-view.cpu :matches(.area-chart, .stacked-area-chart) .markers > div): Deleted.
(body[dir=rtl] .timeline-view.cpu :matches(.area-chart, .stacked-area-chart) .markers > div): Deleted.
(.timeline-view.cpu :matches(.area-chart, .stacked-area-chart) .markers > div > .label): Deleted.
(.timeline-view.cpu :matches(.area-chart, .stacked-area-chart) circle): Deleted.
(.timeline-view.cpu > .content > .overview > .chart > .container.stats > table :matches(.filter, .filter-clear):hover): Deleted.
* Source/WebInspectorUI/UserInterface/Views/CPUUsageCombinedView.css:
(.cpu-usage-combined-view > .graph,):
(.cpu-usage-combined-view > :is(.details, .legend) > .name):
(.cpu-usage-combined-view > :matches(.details, .legend) > .name): Deleted.
* Source/WebInspectorUI/UserInterface/Views/CanvasContentView.css:
(.content-view.canvas > :is(header, footer)):
(.content-view.canvas > :matches(header, footer)): Deleted.
* Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.css:
(.content-view.canvas-overview > .content-view.canvas > :is(header, footer)):
(.content-view.canvas-overview > .content-view.canvas > header > .titles > :is(.subtitle, .color-space),):
(.content-view.canvas-overview > .content-view.canvas:is(:hover, .recording-active) > header > .navigation-bar):
(.content-view.canvas-overview > .content-view.canvas > footer > .view-related-items > :is(.view-shader, .view-recording)):
(.content-view.canvas-overview > .content-view.canvas > :matches(header, footer)): Deleted.
(.content-view.canvas-overview > .content-view.canvas > header > .titles > :matches(.subtitle, .color-space),): Deleted.
(.content-view.canvas-overview > .content-view.canvas:matches(:hover, .recording-active) > header > .navigation-bar): Deleted.
(.content-view.canvas-overview > .content-view.canvas > footer > .view-related-items > :matches(.view-shader, .view-recording)): Deleted.
* Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.css:
(.sidebar > .panel.navigation.canvas > .content > .tree-outline .item.canvas:is(.canvas-2d, .bitmaprenderer) .icon):
(.sidebar > .panel.navigation.canvas > .content > .tree-outline .item.canvas:is(.webgl, .webgl2, .webgpu, .webmetal) .icon):
(.sidebar > .panel.navigation.canvas:not(.has-recordings) > .filter-bar,):
(.sidebar > .panel.navigation.canvas > .content > .tree-outline .item.canvas:matches(.canvas-2d, .bitmaprenderer) .icon): Deleted.
(.sidebar > .panel.navigation.canvas > .content > .tree-outline .item.canvas:matches(.webgl, .webgl2, .webgpu, .webmetal) .icon): Deleted.
* Source/WebInspectorUI/UserInterface/Views/CodeMirrorRegexMode.css:
(.cm-s-default :is(.cm-regex-escape, .cm-regex-escape-2, .cm-regex-escape-3)):
(.cm-s-default :is(.cm-regex-group, .cm-regex-lookahead)):
(.cm-s-default :is(.cm-regex-literal, .cm-regex-special, .cm-regex-backreference)):
(.cm-s-default :matches(.cm-regex-escape, .cm-regex-escape-2, .cm-regex-escape-3)): Deleted.
(.cm-s-default :matches(.cm-regex-group, .cm-regex-lookahead)): Deleted.
(.cm-s-default :matches(.cm-regex-literal, .cm-regex-special, .cm-regex-backreference)): Deleted.
* Source/WebInspectorUI/UserInterface/Views/ColorPicker.css:
(.color-picker :is(.color-square, .slider)):
(.color-picker :matches(.color-square, .slider)): Deleted.
* Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css:
(.sidebar > .panel.details.css-style > .content > .computed > .details-section:not(.collapsed) > :is(.header, .content)):
(.sidebar > .panel.details.css-style > .content > .computed > .details-section:not(.collapsed) > :matches(.header, .content)): Deleted.
* Source/WebInspectorUI/UserInterface/Views/ConsoleDrawer.css:
(.console-drawer > .navigation-bar > :is(.item.button, .log-scope-bar)):
(.console-drawer > .navigation-bar > :matches(.item.button, .log-scope-bar)): Deleted.
* Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.css:
(.console-message-body > span > :is(.console-message-enclosed, .console-message-preview, .console-message-preview-divider)):
(.console-image > .console-message-body > :is(hr, img)):
(.console-message.expandable.expanded :is(.console-message-preview, .console-message-preview-divider):not(.inline-lossless)):
(:is(.console-warning-level, .console-error-level, .console-log-level, .console-info-level, .console-debug-level).console-message):
(:is(.console-warning-level, .console-error-level, .console-log-level, .console-info-level, .console-debug-level)::before):
(.console-message-body > span > :matches(.console-message-enclosed, .console-message-preview, .console-message-preview-divider)): Deleted.
(.console-image > .console-message-body > :matches(hr, img)): Deleted.
(.console-message.expandable.expanded :matches(.console-message-preview, .console-message-preview-divider):not(.inline-lossless)): Deleted.
(:matches(.console-warning-level, .console-error-level, .console-log-level, .console-info-level, .console-debug-level).console-message): Deleted.
(:matches(.console-warning-level, .console-error-level, .console-log-level, .console-info-level, .console-debug-level)::before): Deleted.
* Source/WebInspectorUI/UserInterface/Views/CookiePopover.css:
(.popover .cookie-popover-content > table > tr > td > input:is([type="text"], [type="datetime-local"])):
(.popover .cookie-popover-content > table > tr > td > input:is([type="text"], [type="datetime-local"]):is(:invalid, .invalid)):
(.popover .cookie-popover-content > table > tr > td > input:matches([type="text"], [type="datetime-local"])): Deleted.
(.popover .cookie-popover-content > table > tr > td > input:matches([type="text"], [type="datetime-local"]):matches(:invalid, .invalid)): Deleted.
* Source/WebInspectorUI/UserInterface/Views/DOMEventsBreakdownView.css:
(.dom-events-breakdown tr > :is(th, td)):
(.dom-events-breakdown .graph > :is(img, .area)):
(.dom-events-breakdown tr > :matches(th, td)): Deleted.
(.dom-events-breakdown .graph > :matches(img, .area)): Deleted.
* Source/WebInspectorUI/UserInterface/Views/DOMStorageContentView.css:
(.content-view.dom-storage > .data-grid tr:is(.duplicate-key, .missing-key) td.key-column,):
(.content-view.dom-storage > .data-grid:focus tr.selected:is(.duplicate-key, .missing-key) td.key-column,):
(.content-view.dom-storage > .data-grid tr:matches(.duplicate-key, .missing-key) td.key-column,): Deleted.
(.content-view.dom-storage > .data-grid:focus tr.selected:matches(.duplicate-key, .missing-key) td.key-column,): Deleted.
* Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css:
(body:not(.window-inactive, .window-docked-inactive) .content-view.dom-tree .tree-outline.dom:focus-within li:is(.selected, .hovered) .status-image.breakpoint):
(body:not(.window-inactive, .window-docked-inactive) .content-view.dom-tree .tree-outline.dom:focus-within li:is(.selected, .hovered) .status-image.breakpoint.subtree):
(body:not(.window-inactive, .window-docked-inactive) .content-view.dom-tree .tree-outline.dom:focus-within li:matches(.selected, .hovered) .status-image.breakpoint): Deleted.
(body:not(.window-inactive, .window-docked-inactive) .content-view.dom-tree .tree-outline.dom:focus-within li:matches(.selected, .hovered) .status-image.breakpoint.subtree): Deleted.
* Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css:
(.tree-outline.dom li:is(.hovered, .selected) + ol.children.expanded):
(.tree-outline.dom li:matches(.hovered, .selected) + ol.children.expanded): Deleted.
* Source/WebInspectorUI/UserInterface/Views/DataGrid.css:
(.data-grid th:is(.sort-ascending, .sort-descending)):
(.data-grid :is(th, td) > div):
(.data-grid th:is(.sort-ascending, .sort-descending) > .header-cell-content:first-child):
(.data-grid th:is(.sort-ascending, .sort-descending) > .header-cell-content:first-child::after):
(.data-grid tr:is(.selected, :hover) .go-to-arrow):
(@media (prefers-color-scheme: dark) .data-grid th:is(.sort-ascending, .sort-descending) > .header-cell-content:first-child::after):
(.data-grid th:matches(.sort-ascending, .sort-descending)): Deleted.
(.data-grid :matches(th, td) > div): Deleted.
(.data-grid th:matches(.sort-ascending, .sort-descending) > .header-cell-content:first-child): Deleted.
(.data-grid th:matches(.sort-ascending, .sort-descending) > .header-cell-content:first-child::after): Deleted.
(.data-grid tr:matches(.selected, :hover) .go-to-arrow): Deleted.
(@media (prefers-color-scheme: dark) .data-grid th:matches(.sort-ascending, .sort-descending) > .header-cell-content:first-child::after): Deleted.
* Source/WebInspectorUI/UserInterface/Views/DatabaseContentView.css:
(:is(.database-user-query, .database-query-result)::before):
(:matches(.database-user-query, .database-query-result)::before): Deleted.
* Source/WebInspectorUI/UserInterface/Views/DetailsSection.css:
(.details-section > .content > .group > .row:is(.empty, .text)):
(.details-section > .content > .group > .row:matches(.empty, .text)): Deleted.
* Source/WebInspectorUI/UserInterface/Views/FilterBar.css:
(:is(.filter-bar, .search-bar) > input[type="search"]):
(:is(.filter-bar, .search-bar) > input[type="search"]:is(:focus, :not(:placeholder-shown))):
(:is(.filter-bar, .search-bar) > input[type="search"]::-webkit-search-decoration):
(:is(.filter-bar, .search-bar) > input[type="search"]::-webkit-search-results-button):
(:is(.filter-bar, .search-bar) > input[type="search"]::placeholder):
(:is(.filter-bar, .search-bar) > input[type="search"]:is(:not(:focus), :placeholder-shown)::-webkit-search-cancel-button):
(:is(.filter-bar, .search-bar) > .navigation-bar + input[type="search"]):
(:is(.filter-bar, .search-bar) > input[type="search"]:focus):
(:is(.filter-bar, .search-bar) > input[type="search"] + :empty):
(:is(.filter-bar, .search-bar) > input[type="search"]:focus ~ *):
(:is(.filter-bar, .search-bar) > input[type="search"] + .navigation-bar > .item.scope-bar:last-child):
(:is(.filter-bar, .search-bar).invalid > input[type="search"]):
(:matches(.filter-bar, .search-bar) > input[type="search"]): Deleted.
(:matches(.filter-bar, .search-bar) > input[type="search"]:matches(:focus, :not(:placeholder-shown))): Deleted.
(:matches(.filter-bar, .search-bar) > input[type="search"]::-webkit-search-decoration): Deleted.
(:matches(.filter-bar, .search-bar) > input[type="search"]::-webkit-search-results-button): Deleted.
(:matches(.filter-bar, .search-bar) > input[type="search"]::placeholder): Deleted.
(:matches(.filter-bar, .search-bar) > input[type="search"]:matches(:not(:focus), :placeholder-shown)::-webkit-search-cancel-button): Deleted.
(:matches(.filter-bar, .search-bar) > .navigation-bar + input[type="search"]): Deleted.
(:matches(.filter-bar, .search-bar) > input[type="search"]:focus): Deleted.
(:matches(.filter-bar, .search-bar) > input[type="search"] + :empty): Deleted.
(:matches(.filter-bar, .search-bar) > input[type="search"]:focus ~ *): Deleted.
(:matches(.filter-bar, .search-bar) > input[type="search"] + .navigation-bar > .item.scope-bar:last-child): Deleted.
(:matches(.filter-bar, .search-bar).invalid > input[type="search"]): Deleted.
* Source/WebInspectorUI/UserInterface/Views/FindBanner.css:
(.no-find-banner-transition:is(.find-banner, .supports-find-banner)):
(.find-banner.console-find-banner > :is(input[type="search"], button)):
(.no-find-banner-transition:matches(.find-banner, .supports-find-banner)): Deleted.
(.find-banner.console-find-banner > :matches(input[type="search"], button)): Deleted.
* Source/WebInspectorUI/UserInterface/Views/FontResourceContentView.css:
(.content-view.resource.font > :is(.local-resource-override-label-view, .local-resource-override-warning-view):not([hidden]) ~ .drop-zone):
(.content-view.resource.font > :matches(.local-resource-override-label-view, .local-resource-override-warning-view):not([hidden]) ~ .drop-zone): Deleted.
* Source/WebInspectorUI/UserInterface/Views/FormattedValue.css:
(:is(.formatted-array, .formatted-map, .formatted-set, .formatted-weakmap, .formatted-weakset) > .size):
(:matches(.formatted-array, .formatted-map, .formatted-set, .formatted-weakmap, .formatted-weakset) > .size): Deleted.
* Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css:
(.sidebar > .panel.details.css-style > .content ~ .class-list-container > *:is(.new-class, .class-toggle)):
(.sidebar > .panel.details.css-style > .content ~ .class-list-container > *:matches(.new-class, .class-toggle)): Deleted.
* Source/WebInspectorUI/UserInterface/Views/GradientSlider.css:
(.gradient-slider-knob > :is(img, div)):
(.gradient-slider-knob > :matches(img, div)): Deleted.
* Source/WebInspectorUI/UserInterface/Views/GraphicsTabContentView.css:
(.content-view.tab.graphics .navigation-bar > .item .canvas:is(.webgl, .webgl2, .webgpu, .webmetal) .icon):
(.content-view.tab.graphics .navigation-bar > .item .canvas:matches(.webgl, .webgl2, .webgpu, .webmetal) .icon): Deleted.
* Source/WebInspectorUI/UserInterface/Views/HeapSnapshotInstancesContentView.css:
(.heap-snapshot > .data-grid tr:is(.selected, :hover) td .go-to-arrow):
(.heap-snapshot > .data-grid tr:matches(.selected, :hover) td .go-to-arrow): Deleted.
* Source/WebInspectorUI/UserInterface/Views/HierarchicalPathComponent.css:
(.hierarchical-path-component > :is(.icon, .selector-arrows)):
(.hierarchical-path-component > :matches(.icon, .selector-arrows)): Deleted.
* Source/WebInspectorUI/UserInterface/Views/HoverMenu.css:
(.hover-menu > svg > :is(path, rect)):
(@media (prefers-color-scheme: dark) .hover-menu > svg > :is(path, rect)):
(.hover-menu > svg > :matches(path, rect)): Deleted.
(@media (prefers-color-scheme: dark) .hover-menu > svg > :matches(path, rect)): Deleted.
* Source/WebInspectorUI/UserInterface/Views/ImageResourceContentView.css:
(.content-view.resource.image > :is(.local-resource-override-label-view, .local-resource-override-warning-view):not([hidden]) ~ .drop-zone):
(.content-view.resource.image > :matches(.local-resource-override-label-view, .local-resource-override-warning-view):not([hidden]) ~ .drop-zone): Deleted.
* Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreContentView.css:
(.content-view.indexed-database-object-store > .data-grid .object-tree > :is(.title, .object-preview)::before):
(.content-view.indexed-database-object-store > .data-grid .object-tree > :matches(.title, .object-preview)::before): Deleted.
* Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css:
(.inline-swatch:not(.box-shadow),):
(.inline-swatch:is(.color, .gradient)):
(.inline-swatch:is(.bezier, .spring, .variable)):
(.inline-swatch:is(.bezier, .box-shadow, .spring, .variable)):
(.inline-swatch:not(.read-only):is(.bezier, .box-shadow, .spring, .variable, .alignment):hover):
(.inline-swatch:not(.read-only):is(.bezier, .box-shadow, .spring, .variable, .alignment):active):
(.inline-swatch:is(.bezier, .box-shadow, .spring, .variable) > span):
(.inline-swatch:matches(.color, .gradient)): Deleted.
(.inline-swatch:matches(.bezier, .spring, .variable)): Deleted.
(.inline-swatch:matches(.bezier, .box-shadow, .spring, .variable)): Deleted.
(.inline-swatch:not(.read-only):matches(.bezier, .box-shadow, .spring, .variable, .alignment):hover): Deleted.
(.inline-swatch:not(.read-only):matches(.bezier, .box-shadow, .spring, .variable, .alignment):active): Deleted.
(.inline-swatch:matches(.bezier, .box-shadow, .spring, .variable) > span): Deleted.
* Source/WebInspectorUI/UserInterface/Views/LayerDetailsSidebarPanel.css:
(.panel.details.layer .name-column :is(.pseudo-element, .reflection)):
(.panel.details.layer tr.selected .name-column :is(.pseudo-element, .reflection)):
(.panel.details.layer .name-column :matches(.pseudo-element, .reflection)): Deleted.
(.panel.details.layer tr.selected .name-column :matches(.pseudo-element, .reflection)): Deleted.
* Source/WebInspectorUI/UserInterface/Views/LayerTreeDetailsSidebarPanel.css:
(.panel.details.layer-tree .name-column :is(.pseudo-element, .reflection)):
(.panel.details.layer-tree tr.selected .name-column :is(.pseudo-element, .reflection)):
(.panel.details.layer-tree .name-column :matches(.pseudo-element, .reflection)): Deleted.
(.panel.details.layer-tree tr.selected .name-column :matches(.pseudo-element, .reflection)): Deleted.
* Source/WebInspectorUI/UserInterface/Views/LocalResourceOverridePopover.css:
(.popover .local-resource-override-popover-content label:is(.is-case-sensitive, .is-regex)):
(.popover .local-resource-override-popover-content .data-grid tr.header-content-type > :is(.name-column, .value-column)):
(.popover .local-resource-override-popover-content label:matches(.is-case-sensitive, .is-regex)): Deleted.
(.popover .local-resource-override-popover-content .data-grid tr.header-content-type > :matches(.name-column, .value-column)): Deleted.
* Source/WebInspectorUI/UserInterface/Views/Main.css:
(body.docked:is(.right, .left) #navigation-sidebar.collapsed > .resizer):
(:is(img, canvas).show-grid):
(.tab-bar > .navigation-bar :is(.console-warnings, .console-errors):not(.disabled).pulsing):
(@media (prefers-color-scheme: dark) :is(img, canvas).show-grid):
(body.docked:matches(.right, .left) #navigation-sidebar.collapsed > .resizer): Deleted.
(:matches(img, canvas).show-grid): Deleted.
(.tab-bar > .navigation-bar :matches(.console-warnings, .console-errors):not(.disabled).pulsing): Deleted.
(@media (prefers-color-scheme: dark) :matches(img, canvas).show-grid): Deleted.
* Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.css:
(.network-table > .table li:not(.selected) .cell:is(.cache-type, .multiple)):
(.network-table > .table .header .cell.waterfall:is(.sort-ascending, .sort-descending)):
(.waterfall.network .block:is(.mouse-tracking, .filler) + .block:not(.mouse-tracking, .filler),):
(.network-table > .table li:not(.selected) .cell:matches(.cache-type, .multiple)): Deleted.
(.network-table > .table .header .cell.waterfall:matches(.sort-ascending, .sort-descending)): Deleted.
(.waterfall.network .block:matches(.mouse-tracking, .filler) + .block:not(.mouse-tracking, .filler),): Deleted.
* Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.css:
(.object-tree-property :is(.getter, .setter)):
(.object-tree-property :is(.getter, .setter).disabled):
(.object-tree-property :matches(.getter, .setter)): Deleted.
(.object-tree-property :matches(.getter, .setter).disabled): Deleted.
* Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.css:
(.object-tree > :is(.title, .object-preview)::before):
(.object-tree:not(.lossless-preview) > :is(.title, .object-preview)):
(.object-tree.expanded > :is(.title, .object-preview)::before):
(.object-tree.properties-only > :is(.title, .object-preview)):
(.object-tree.lossless-preview > :is(.title, .object-preview)::before):
(.object-tree > :matches(.title, .object-preview)::before): Deleted.
(.object-tree:not(.lossless-preview) > :matches(.title, .object-preview)): Deleted.
(.object-tree.expanded > :matches(.title, .object-preview)::before): Deleted.
(.object-tree.properties-only > :matches(.title, .object-preview)): Deleted.
(.object-tree.lossless-preview > :matches(.title, .object-preview)::before): Deleted.
* Source/WebInspectorUI/UserInterface/Views/ProbeSetDataGrid.css:
(.details-section.probe-set .data-grid .object-tree > :is(.title, .object-preview)::before):
(.details-section.probe-set .data-grid .object-tree > :matches(.title, .object-preview)::before): Deleted.
* Source/WebInspectorUI/UserInterface/Views/ProfileView.css:
(.profile > .data-grid tr:is(.selected, :hover) .go-to-arrow):
(.profile > .data-grid tr:matches(.selected, :hover) .go-to-arrow): Deleted.
* Source/WebInspectorUI/UserInterface/Views/QuickConsole.css:
(@media (prefers-color-scheme: dark) .CodeMirror .jump-to-symbol-highlight,):
* Source/WebInspectorUI/UserInterface/Views/RadioButtonNavigationItem.css:
(.navigation-bar .item.radio.button.text-only:is(.selected, :hover)):
(.navigation-bar .item.radio.button.text-only:is(.selected, :hover)::before):
(.navigation-bar .item.radio.button.text-only:matches(.selected, :hover)): Deleted.
(.navigation-bar .item.radio.button.text-only:matches(.selected, :hover)::before): Deleted.
* Source/WebInspectorUI/UserInterface/Views/RecordingContentView.css:
(.content-view.recording :is(img, canvas)):
(.content-view.recording :matches(img, canvas)): Deleted.
* Source/WebInspectorUI/UserInterface/Views/ResourceHeadersContentView.css:
(body[dir] .resource-headers > section:is(.redirect, .headers) > .details):
(body[dir] .resource-headers > section:matches(.redirect, .headers) > .details): Deleted.
* Source/WebInspectorUI/UserInterface/Views/ResourceIcons.css:
(:is(.resource-icon.resource-type-style-sheet, .style-sheet-icon) .icon):
(:is(.resource-icon.resource-type-style-sheet.override, .style-sheet-icon.override) .icon):
(@media (prefers-color-scheme: dark) :is(.resource-icon.resource-type-style-sheet, .style-sheet-icon) .icon):
(@media (prefers-color-scheme: dark) :is(.resource-icon.resource-type-style-sheet.override, .style-sheet-icon.override) .icon):
(:matches(.resource-icon.resource-type-style-sheet, .style-sheet-icon) .icon): Deleted.
(:matches(.resource-icon.resource-type-style-sheet.override, .style-sheet-icon.override) .icon): Deleted.
(@media (prefers-color-scheme: dark) :matches(.resource-icon.resource-type-style-sheet, .style-sheet-icon) .icon): Deleted.
(@media (prefers-color-scheme: dark) :matches(.resource-icon.resource-type-style-sheet.override, .style-sheet-icon.override) .icon): Deleted.
* Source/WebInspectorUI/UserInterface/Views/ResourceSecurityContentView.css:
(body[dir] .resource-security > section:is(.connection, .certificate) > .details):
(@media (prefers-color-scheme: dark) body[dir] .resource-security > section:is(.connection, .certificate) > .details):
(body[dir] .resource-security > section:matches(.connection, .certificate) > .details): Deleted.
(@media (prefers-color-scheme: dark) body[dir] .resource-security > section:matches(.connection, .certificate) > .details): Deleted.
* Source/WebInspectorUI/UserInterface/Views/ResourceTreeElement.css:
(.item.resource.resource-type-websocket:not(.selected) .status .ready-state.open,):
(.item.resource.resource-type-websocket:not(.selected) .status .ready-state.connecting,):
* Source/WebInspectorUI/UserInterface/Views/ScopeBar.css:
(.scope-bar > li:is(.selected, :hover)):
(.scope-bar > li:matches(.selected, :hover)): Deleted.
* Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.css:
(.sidebar > .panel.navigation.search > :is(.content, .message-text-view)):
(.sidebar > .panel.navigation.search.changed > :is(.content, .message-text-view)):
(.sidebar > .panel.navigation.search > :matches(.content, .message-text-view)): Deleted.
(.sidebar > .panel.navigation.search.changed > :matches(.content, .message-text-view)): Deleted.
* Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.css:
(.sidebar > .panel.navigation.sources > .content > :is(.pause-reason-container, .call-stack-container, .breakpoints-container, .local-overrides-container, .console-snippets-container)):
(@media (min-height: 650px) .sidebar > .panel.navigation.sources > .content > :is(.call-stack-container, .breakpoints-container, .resources-container, .local-overrides-container, .console-snippets-container)):
(.sidebar > .panel.navigation.sources > .content > :matches(.pause-reason-container, .call-stack-container, .breakpoints-container, .local-overrides-container, .console-snippets-container)): Deleted.
(@media (min-height: 650px) .sidebar > .panel.navigation.sources > .content > :matches(.call-stack-container, .breakpoints-container, .resources-container, .local-overrides-container, .console-snippets-container)): Deleted.
* Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
(.spreadsheet-style-declaration-editor :is(.name, .value):not(.editing)):
(.spreadsheet-style-declaration-editor :is(.name, .value).editing):
(.spreadsheet-css-declaration:is(:hover, :focus) .property:not(:is(.invalid-name, .invalid-value)) .property-toggle,):
(.spreadsheet-style-declaration-editor > .property:is(.invalid-name, .other-vendor, .overridden):not(.disabled) > .content > *:not(.name, .value-container),):
(.spreadsheet-style-declaration-editor > .property.invalid-name:not(.disabled) > .content > *:not(.name, .value-container),):
(body:is(.window-docked-inactive, .window-inactive) .spreadsheet-style-declaration-editor .property.selected):
(.spreadsheet-style-declaration-editor .property:is(.implicit, .not-inherited) .content > *):
(body.meta-key-pressed .spreadsheet-css-declaration:not(.locked) > .spreadsheet-style-declaration-editor > .property > .content :is(.name, .value):not(.editing):hover):
(@media (prefers-color-scheme: dark) .spreadsheet-style-declaration-editor :is(.name, .value).editing):
(.spreadsheet-style-declaration-editor :matches(.name, .value):not(.editing)): Deleted.
(.spreadsheet-style-declaration-editor :matches(.name, .value).editing): Deleted.
(.spreadsheet-css-declaration:matches(:hover, :focus) .property:not(:matches(.invalid-name, .invalid-value)) .property-toggle,): Deleted.
(.spreadsheet-style-declaration-editor > .property:matches(.invalid-name, .other-vendor, .overridden):not(.disabled) > .content > *:not(.name, .value-container),): Deleted.
(body:matches(.window-docked-inactive, .window-inactive) .spreadsheet-style-declaration-editor .property.selected): Deleted.
(.spreadsheet-style-declaration-editor .property:matches(.implicit, .not-inherited) .content > *): Deleted.
(body.meta-key-pressed .spreadsheet-css-declaration:not(.locked) > .spreadsheet-style-declaration-editor > .property > .content :matches(.name, .value):not(.editing):hover): Deleted.
(@media (prefers-color-scheme: dark) .spreadsheet-style-declaration-editor :matches(.name, .value).editing): Deleted.
* Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css:
(.spreadsheet-css-declaration :is(.header, .header-groupings)):
(.spreadsheet-css-declaration :is(.header, .header-groupings):first-child):
(.spreadsheet-css-declaration :matches(.header, .header-groupings)): Deleted.
(.spreadsheet-css-declaration :matches(.header, .header-groupings):first-child): Deleted.
* Source/WebInspectorUI/UserInterface/Views/SpringEditor.css:
(.spring-editor > :is(.spring-preview, .spring-timing) > div):
(.spring-editor > .animate:is(.spring-preview, .spring-timing) > div):
(.spring-editor > :matches(.spring-preview, .spring-timing) > div): Deleted.
(.spring-editor > .animate:matches(.spring-preview, .spring-timing) > div): Deleted.
* Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css:
(.cm-s-default .cm-comment,):
(.cm-s-default :is(.cm-tag, .cm-bracket, .cm-atom, .cm-keyword, .cm-m-javascript.cm-builtin),):
(.cm-s-default :is(.cm-number, .cm-atom.cm-hex-color),):
(.cm-s-default :is(.cm-def, .cm-operator, .cm-variable, .cm-variable-2),):
(.cm-s-default .cm-string,):
(.cm-s-default .cm-m-xml.cm-meta,):
(.cm-s-default .basic-block-has-not-executed:is(.cm-tag, .cm-bracket, .cm-atom, .cm-keyword, .cm-m-javascript.cm-builtin),):
(.cm-s-default .basic-block-has-not-executed:is(.cm-number, .cm-atom.cm-hex-color)):
(.cm-s-default :matches(.cm-tag, .cm-bracket, .cm-atom, .cm-keyword, .cm-m-javascript.cm-builtin),): Deleted.
(.cm-s-default :matches(.cm-number, .cm-atom.cm-hex-color),): Deleted.
(.cm-s-default :matches(.cm-def, .cm-operator, .cm-variable, .cm-variable-2),): Deleted.
(.cm-s-default .basic-block-has-not-executed:matches(.cm-tag, .cm-bracket, .cm-atom, .cm-keyword, .cm-m-javascript.cm-builtin),): Deleted.
(.cm-s-default .basic-block-has-not-executed:matches(.cm-number, .cm-atom.cm-hex-color)): Deleted.
* Source/WebInspectorUI/UserInterface/Views/TabBar.css:
(.tab-bar > .tabs.static-layout > :is(.flexible-space, .item)):
(.tab-bar > .tabs.animating:is(.expanding-tabs, .inserting-tab) > .item):
(.tab-bar > .tabs.static-layout > :matches(.flexible-space, .item)): Deleted.
(.tab-bar > .tabs.animating:matches(.expanding-tabs, .inserting-tab) > .item): Deleted.
* Source/WebInspectorUI/UserInterface/Views/Table.css:
(.table > .header > :is(.sort-ascending, .sort-descending)):
(.table > .header > :is(.sort-ascending, .sort-descending)::after):
(@media (prefers-color-scheme: dark) .table > .header > :is(.sort-ascending, .sort-descending)::after):
(.table > .header > :matches(.sort-ascending, .sort-descending)): Deleted.
(.table > .header > :matches(.sort-ascending, .sort-descending)::after): Deleted.
(@media (prefers-color-scheme: dark) .table > .header > :matches(.sort-ascending, .sort-descending)::after): Deleted.
* Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css:
(.data-grid th.graph-column:is(.sort-ascending, .sort-descending)):
(.data-grid.timeline th:is(.sort-ascending, .sort-descending) > .header-cell-content.timeline-ruler:first-child::after):
(.data-grid th.graph-column:matches(.sort-ascending, .sort-descending)): Deleted.
(.data-grid.timeline th:matches(.sort-ascending, .sort-descending) > .header-cell-content.timeline-ruler:first-child::after): Deleted.
* Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css:
(.timeline-overview > :is(.navigation-bar.timelines, .tree-outline.timelines)):
(.timeline-overview:not(.frames) > :is(.scroll-container, .timeline-ruler, .graphs-container)):
(.navigation-bar.timelines .item.button.toggle-edit-instruments:not(.disabled):is(:focus, .activate.activated, .radio.selected)):
(.navigation-bar.timelines .item.button.toggle-edit-instruments:not(.disabled):active:is(:focus, .activate.activated, .radio.selected)):
(body:is(.window-inactive, .window-docked-inactive) .timeline-overview:not(.edit-instruments) > .tree-outline.timelines .item.selected + .item):
(.timeline-overview.frames > :is(.tree-outline.timelines, .navigation-bar.timelines)):
(.timeline-overview > :matches(.navigation-bar.timelines, .tree-outline.timelines)): Deleted.
(.timeline-overview:not(.frames) > :matches(.scroll-container, .timeline-ruler, .graphs-container)): Deleted.
(.navigation-bar.timelines .item.button.toggle-edit-instruments:not(.disabled):matches(:focus, .activate.activated, .radio.selected)): Deleted.
(.navigation-bar.timelines .item.button.toggle-edit-instruments:not(.disabled):active:matches(:focus, .activate.activated, .radio.selected)): Deleted.
(body:matches(.window-inactive, .window-docked-inactive) .timeline-overview:not(.edit-instruments) > .tree-outline.timelines .item.selected + .item): Deleted.
(.timeline-overview.frames > :matches(.tree-outline.timelines, .navigation-bar.timelines)): Deleted.
* Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.css:
(.timeline-record-bar > :is(img, .segment)):
(.timeline-record-bar.has-custom-children.timeline-record-type-media > .segment:is(.css-animation-delay, .media-element-paused)):
(.timeline-record-bar > :matches(img, .segment)): Deleted.
(.timeline-record-bar.has-custom-children.timeline-record-type-media > .segment:matches(.css-animation-delay, .media-element-paused)): Deleted.
* Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css:
(.content-view.timeline-recording > .content-browser :is(.recording-progress, .recording-imported)):
(.content-view.timeline-recording > .content-browser :is(.recording-progress, .recording-imported) > .status):
(.content-view.timeline-recording > .content-browser :matches(.recording-progress, .recording-imported)): Deleted.
(.content-view.timeline-recording > .content-browser :matches(.recording-progress, .recording-imported) > .status): Deleted.
* Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css:
(body[dir=ltr] .timeline-ruler > .header > .divider,):
(body[dir=rtl] .timeline-ruler > .header > .divider,):
(.timeline-ruler.selection-hidden > :is(.selection-drag, .selection-handle, .shaded-area)):
(.timeline-ruler.selection-hidden > :matches(.selection-drag, .selection-handle, .shaded-area)): Deleted.
* Source/WebInspectorUI/UserInterface/Views/TimelineTabContentView.css:
(.timeline.tab.content-view .navigation-bar > .item:is(.record-start-stop, .record-continue):hover):
(.timeline.tab.content-view .navigation-bar > .item:is(.record-start-stop, .record-continue):active):
(.timeline.tab.content-view .navigation-bar > .item:is(.record-start-stop, .record-continue) *):
(.timeline.tab.content-view .navigation-bar > .item:matches(.record-start-stop, .record-continue):hover): Deleted.
(.timeline.tab.content-view .navigation-bar > .item:matches(.record-start-stop, .record-continue):active): Deleted.
(.timeline.tab.content-view .navigation-bar > .item:matches(.record-start-stop, .record-continue) *): Deleted.
* Source/WebInspectorUI/UserInterface/Views/TreeOutline.css:
(body[dir=ltr] .tree-outline .item :is(.disclosure-button, .icon),):
(body[dir=rtl] .tree-outline .item :is(.disclosure-button, .icon)):
(body[dir=ltr] .tree-outline .item :matches(.disclosure-button, .icon),): Deleted.
(body[dir=rtl] .tree-outline .item :matches(.disclosure-button, .icon)): Deleted.

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

Source/WebInspectorUI/UserInterface/Views/AuditTreeElement.css

@@ -35,14 +35,14 @@
     height: 100%;
 }
 
-.tree-outline .item.audit:matches(.test-case, .test-group):not(.unsupported, .manager-active):hover > .status > img {
+.tree-outline .item.audit:is(.test-case, .test-group):not(.unsupported, .manager-active):hover > .status > img {
     width: 75%;
     height: 75%;
     margin: 0 auto;
     content: url(../Images/AuditStart.svg) !important;
 }
 
-body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .item.audit:matches(.test-case, .test-group):not(.unsupported, .manager-active).selected:hover > .status > img,
+body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .item.audit:is(.test-case, .test-group):not(.unsupported, .manager-active).selected:hover > .status > img,
 body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .item.audit.test-case.selected > .status > .indeterminate-progress-spinner,
 body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .item.audit.test-group.selected > .status > progress {
     filter: var(--filter-invert);
@@ -60,7 +60,7 @@ body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .
     display: none;
 }
 
-.tree-outline .item.audit.unsupported:not(.selected) > :matches(.icon, .titles) {
+.tree-outline .item.audit.unsupported:not(.selected) > :is(.icon, .titles) {
     opacity: 0.5;
 }
 
@@ -108,7 +108,7 @@ body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .
 }
 
 @media (prefers-color-scheme: dark) {
-    .tree-outline .item.audit:matches(.test-case, .test-group):not(.unsupported, .manager-active):hover > .status > img {
+    .tree-outline .item.audit:is(.test-case, .test-group):not(.unsupported, .manager-active):hover > .status > img {
         filter: var(--filter-invert) brightness(90%);
     }
 

Source/WebInspectorUI/UserInterface/Views/BlackboxSettingsView.css

@@ -23,7 +23,7 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-.settings-view.blackbox > :matches(p, table) {
+.settings-view.blackbox > :is(p, table) {
     width: 100%;
     max-width: calc(min(50em, 100% - 40px));
     margin: 1em auto 2em;
@@ -83,7 +83,7 @@
     border: 1px solid var(--border-color);
 }
 
-.settings-view.blackbox > table :matches(th, td).url {
+.settings-view.blackbox > table :is(th, td).url {
     text-align: start;
 }
 
@@ -97,7 +97,7 @@
     background-color: transparent;
 }
 
-.settings-view.blackbox > table :matches(th, td):matches(.case-sensitive, .remove-blackbox) {
+.settings-view.blackbox > table :is(th, td):is(.case-sensitive, .remove-blackbox) {
     width: 1px;
     white-space: nowrap;
     text-align: center;

Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.css

@@ -119,45 +119,45 @@
     z-index: 2;
 }
 
-.details-section .row.box-model :matches(.top, .right, .bottom, .left) {
+.details-section .row.box-model :is(.top, .right, .bottom, .left) {
     display: inline-block;
     vertical-align: middle;
 }
 
-.details-section .row.box-model :matches(.top, .right, .bottom, .left):not(.editing),
-.details-section .row.box-model :matches(.top-left, .top-right, .bottom-right, .bottom-left) {
+.details-section .row.box-model :is(.top, .right, .bottom, .left):not(.editing),
+.details-section .row.box-model :is(.top-left, .top-right, .bottom-right, .bottom-left) {
     margin: 0 0.25em;
 }
 
-.details-section .row.box-model :matches(.top-left, .top-right, .bottom-right, .bottom-left) {
+.details-section .row.box-model :is(.top-left, .top-right, .bottom-right, .bottom-left) {
     position: absolute;
 }
 
-.details-section .row.box-model :matches(.top-left, .top-right) {
+.details-section .row.box-model :is(.top-left, .top-right) {
     top: 4px;
 }
 
-.details-section .row.box-model :matches(.bottom-left, .bottom-right):not(.editing) {
+.details-section .row.box-model :is(.bottom-left, .bottom-right):not(.editing) {
     bottom: 3px;
 }
 
-.details-section .row.box-model :matches(.bottom-left, .bottom-right).editing {
+.details-section .row.box-model :is(.bottom-left, .bottom-right).editing {
     bottom: 2px;
 }
 
-.details-section .row.box-model :matches(.top-left, .bottom-left):not(.editing) {
+.details-section .row.box-model :is(.top-left, .bottom-left):not(.editing) {
     left: 3px;
 }
 
-.details-section .row.box-model :matches(.top-left, .bottom-left).editing {
+.details-section .row.box-model :is(.top-left, .bottom-left).editing {
     left: 1px;
 }
 
-.details-section .row.box-model :matches(.top-right, .bottom-right):not(.editing) {
+.details-section .row.box-model :is(.top-right, .bottom-right):not(.editing) {
     right: 3px;
 }
 
-.details-section .row.box-model :matches(.top-right, .bottom-right).editing {
+.details-section .row.box-model :is(.top-right, .bottom-right).editing {
     right: 1px;
 }
 
@@ -176,8 +176,8 @@
         color: var(--text-color);
     }
 
-    .details-section .row.box-model:not(.hovered) .box:matches(.margin, .border, .padding, .content),
-    .details-section .row.box-model .box.active:matches(.margin, .border, .padding, .content) {
+    .details-section .row.box-model:not(.hovered) .box:is(.margin, .border, .padding, .content),
+    .details-section .row.box-model .box.active:is(.margin, .border, .padding, .content) {
         color: black;
     }
 

Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css

@@ -35,7 +35,7 @@ body[dir=rtl] .breakpoint-action-button-container {
     float: left;
 }
 
-:matches(.breakpoint-action-append-button, .breakpoint-action-remove-button) {
+:is(.breakpoint-action-append-button, .breakpoint-action-remove-button) {
     background-origin: border-box;
     width: 13px;
     height: 13px;

Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css

@@ -78,11 +78,11 @@
     color: var(--glyph-color-pressed);
 }
 
-.navigation-bar .item.button:not(.disabled):matches(.activate.activated, .radio.selected) > .glyph {
+.navigation-bar .item.button:not(.disabled):is(.activate.activated, .radio.selected) > .glyph {
     color: var(--glyph-color-active);
 }
 
-.navigation-bar .item.button:not(.disabled):active:matches(.activate.activated, .radio.selected) > .glyph {
+.navigation-bar .item.button:not(.disabled):active:is(.activate.activated, .radio.selected) > .glyph {
     color: var(--glyph-color-active-pressed);
 }
 

Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css

@@ -177,7 +177,7 @@
     fill: var(--cpu-paint-fill-color);
 }
 
-.timeline-view.cpu :matches(.area-chart, .stacked-area-chart) svg > path {
+.timeline-view.cpu :is(.area-chart, .stacked-area-chart) svg > path {
     fill: var(--cpu-other-thread-fill-color);
     stroke: var(--cpu-other-thread-stroke-color);
 }
@@ -194,7 +194,7 @@
     stroke: var(--cpu-worker-thread-stroke-color);
 }
 
-.timeline-view.cpu :matches(.area-chart, .stacked-area-chart) .markers {
+.timeline-view.cpu :is(.area-chart, .stacked-area-chart) .markers {
     position: absolute;
     top: 0;
     left: 0;
@@ -203,7 +203,7 @@
     pointer-events: none;
 }
 
-.timeline-view.cpu :matches(.area-chart, .stacked-area-chart) .markers > div {
+.timeline-view.cpu :is(.area-chart, .stacked-area-chart) .markers > div {
     position: absolute;
     z-index: 10;
     width: 100%;
@@ -212,18 +212,18 @@
     background-color: var(--graph-line-color);
 }
 
-body[dir=rtl] .timeline-view.cpu :matches(.area-chart, .stacked-area-chart) .markers > div {
+body[dir=rtl] .timeline-view.cpu :is(.area-chart, .stacked-area-chart) .markers > div {
     transform: scaleX(-1);
 }
 
-.timeline-view.cpu :matches(.area-chart, .stacked-area-chart) .markers > div > .label {
+.timeline-view.cpu :is(.area-chart, .stacked-area-chart) .markers > div > .label {
     padding: 2px;
     font-size: 8px;
     color: var(--text-color-secondary);
     background-color: var(--background-color-content);
 }
 
-.timeline-view.cpu :matches(.area-chart, .stacked-area-chart) circle {
+.timeline-view.cpu :is(.area-chart, .stacked-area-chart) circle {
     r: 3;
     fill: var(--cpu-overlay-color);
 }
@@ -339,7 +339,7 @@ body[dir=rtl] .timeline-view.cpu :matches(.area-chart, .stacked-area-chart) .mar
     cursor: pointer;
 }
 
-.timeline-view.cpu > .content > .overview > .chart > .container.stats > table :matches(.filter, .filter-clear):hover {
+.timeline-view.cpu > .content > .overview > .chart > .container.stats > table :is(.filter, .filter-clear):hover {
     opacity: 0.7;
 }
 

Source/WebInspectorUI/UserInterface/Views/CPUUsageCombinedView.css

@@ -31,8 +31,8 @@
 }
 
 .cpu-usage-combined-view > .graph,
-.cpu-usage-combined-view > .graph > :matches(.stacked-area-chart, .range-chart),
-.cpu-usage-combined-view > .graph > :matches(.stacked-area-chart, .range-chart) > svg {
+.cpu-usage-combined-view > .graph > :is(.stacked-area-chart, .range-chart),
+.cpu-usage-combined-view > .graph > :is(.stacked-area-chart, .range-chart) > svg {
     width: 100%;
     height: 100%;
 }
@@ -63,7 +63,7 @@
     -webkit-user-select: text;
 }
 
-.cpu-usage-combined-view > :matches(.details, .legend) > .name {
+.cpu-usage-combined-view > :is(.details, .legend) > .name {
     color: var(--text-color);
     white-space: nowrap;
 }

Source/WebInspectorUI/UserInterface/Views/CanvasContentView.css

@@ -46,7 +46,7 @@
     max-height: 100%;
 }
 
-.content-view.canvas > :matches(header, footer) {
+.content-view.canvas > :is(header, footer) {
     display: none;
 }
 

Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.css

@@ -48,7 +48,7 @@
     border-color: red;
 }
 
-.content-view.canvas-overview > .content-view.canvas > :matches(header, footer) {
+.content-view.canvas-overview > .content-view.canvas > :is(header, footer) {
     display: flex;
     flex-direction: row;
     flex-shrink: 0;
@@ -76,7 +76,7 @@
     color: var(--text-color-gray-dark);
 }
 
-.content-view.canvas-overview > .content-view.canvas > header > .titles > :matches(.subtitle, .color-space),
+.content-view.canvas-overview > .content-view.canvas > header > .titles > :is(.subtitle, .color-space),
 .content-view.canvas-overview > .content-view.canvas > footer .memory-cost {
     color: var(--text-color-gray-medium);
 }
@@ -108,7 +108,7 @@
     transition: opacity 200ms ease-in-out;
 }
 
-.content-view.canvas-overview > .content-view.canvas:matches(:hover, .recording-active) > header > .navigation-bar {
+.content-view.canvas-overview > .content-view.canvas:is(:hover, .recording-active) > header > .navigation-bar {
     opacity: 1;
     transition: opacity 200ms ease-in-out;
 }
@@ -160,7 +160,7 @@
     align-items: center;
 }
 
-.content-view.canvas-overview > .content-view.canvas > footer > .view-related-items > :matches(.view-shader, .view-recording) {
+.content-view.canvas-overview > .content-view.canvas > footer > .view-related-items > :is(.view-shader, .view-recording) {
     width: 16px;
     height: 16px;
 }

Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.css

@@ -35,11 +35,11 @@
     opacity: 0.5;
 }
 
-.sidebar > .panel.navigation.canvas > .content > .tree-outline .item.canvas:matches(.canvas-2d, .bitmaprenderer) .icon {
+.sidebar > .panel.navigation.canvas > .content > .tree-outline .item.canvas:is(.canvas-2d, .bitmaprenderer) .icon {
     content: url(../Images/Canvas2D.svg);
 }
 
-.sidebar > .panel.navigation.canvas > .content > .tree-outline .item.canvas:matches(.webgl, .webgl2, .webgpu, .webmetal) .icon {
+.sidebar > .panel.navigation.canvas > .content > .tree-outline .item.canvas:is(.webgl, .webgl2, .webgpu, .webmetal) .icon {
     content: url(../Images/Canvas3D.svg);
 }
 
@@ -60,7 +60,7 @@
 }
 
 .sidebar > .panel.navigation.canvas:not(.has-recordings) > .filter-bar,
-.sidebar > .panel.navigation.canvas:not(.has-recordings) > .content > :matches(.navigation-bar, .recording-content) {
+.sidebar > .panel.navigation.canvas:not(.has-recordings) > .content > :is(.navigation-bar, .recording-content) {
     display: none;
 }
 

Source/WebInspectorUI/UserInterface/Views/CodeMirrorRegexMode.css

@@ -31,18 +31,18 @@
     color: var(--syntax-highlight-number-color);
 }
 
-.cm-s-default :matches(.cm-regex-escape, .cm-regex-escape-2, .cm-regex-escape-3) {
+.cm-s-default :is(.cm-regex-escape, .cm-regex-escape-2, .cm-regex-escape-3) {
     color: var(--syntax-highlight-symbol-color);
 }
 
-.cm-s-default :matches(.cm-regex-group, .cm-regex-lookahead) {
+.cm-s-default :is(.cm-regex-group, .cm-regex-lookahead) {
     color: var(--syntax-highlight-regex-group-color);
 }
 
 .cm-s-default .cm-regex-quantifier {
     color: var(--syntax-highlight-number-color);
 }
 
-.cm-s-default :matches(.cm-regex-literal, .cm-regex-special, .cm-regex-backreference) {
+.cm-s-default :is(.cm-regex-literal, .cm-regex-special, .cm-regex-backreference) {
     color: var(--syntax-highlight-boolean-color);
 }

Source/WebInspectorUI/UserInterface/Views/ColorPicker.css

@@ -37,7 +37,7 @@
     white-space: nowrap;
 }
 
-.color-picker :matches(.color-square, .slider) {
+.color-picker :is(.color-square, .slider) {
     display: inline-block;
 }
 

Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css

@@ -28,7 +28,7 @@
     --disclosure-button-size: 15px;
 }
 
-.sidebar > .panel.details.css-style > .content > .computed > .details-section:not(.collapsed) > :matches(.header, .content) {
+.sidebar > .panel.details.css-style > .content > .computed > .details-section:not(.collapsed) > :is(.header, .content) {
     background-color: var(--background-color);
 }
 

Source/WebInspectorUI/UserInterface/Views/ConsoleDrawer.css

@@ -40,7 +40,7 @@
     cursor: default;
 }
 
-.console-drawer > .navigation-bar > :matches(.item.button, .log-scope-bar) {
+.console-drawer > .navigation-bar > :is(.item.button, .log-scope-bar) {
     pointer-events: none;
 }
 

Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.css

@@ -67,7 +67,7 @@
     -webkit-user-select: text;
 }
 
-.console-message-body > span > :matches(.console-message-enclosed, .console-message-preview, .console-message-preview-divider) {
+.console-message-body > span > :is(.console-message-enclosed, .console-message-preview, .console-message-preview-divider) {
     -webkit-user-select: none;
 }
 
@@ -76,7 +76,7 @@
     --checkerboard-light-square: var(--background-color);
 }
 
-.console-image > .console-message-body > :matches(hr, img) {
+.console-image > .console-message-body > :is(hr, img) {
     display: block;
     margin: 4px 0;
 }
@@ -117,7 +117,7 @@
     background-image: url(../Images/DisclosureTriangles.svg#open-normal);
 }
 
-.console-message.expandable.expanded :matches(.console-message-preview, .console-message-preview-divider):not(.inline-lossless) {
+.console-message.expandable.expanded :is(.console-message-preview, .console-message-preview-divider):not(.inline-lossless) {
     display: none;
 }
 
@@ -226,12 +226,12 @@
     content: url(../Images/UserInputPromptPrevious.svg);
 }
 
-:matches(.console-warning-level, .console-error-level, .console-log-level, .console-info-level, .console-debug-level).console-message {
+:is(.console-warning-level, .console-error-level, .console-log-level, .console-info-level, .console-debug-level).console-message {
  /* Move non-monospace log/warning/error text up a bit. */
     padding: 3px 12px 3px 20px;
 }
 
-:matches(.console-warning-level, .console-error-level, .console-log-level, .console-info-level, .console-debug-level)::before {
+:is(.console-warning-level, .console-error-level, .console-log-level, .console-info-level, .console-debug-level)::before {
  /* Re-center log/warning/error icons. */
     padding-top: 1px;
 }