chrome-devtools-frontend 1.0.955630 → 1.0.956060

package/AUTHORS

@@ -13,6 +13,7 @@
 # BEGIN individuals section.
 Ajay Panthagani <ajaypanthagani321@gmail.com>
 Alexander Stammbach <alexander@stammbach.io>
+Alexey Rodionov <fluorescent.hallucinogen@gmail.com>
 Ankit Mishra <ankit.mishra131990@gmail.com>
 Anna Agoha <annaagoha@gmail.com>
 Anthony Xie <anthonyxie64@gmail.com>

package/front_end/.eslintrc.js

@@ -116,17 +116,7 @@ module.exports = {
             'format': ['camelCase'],
             'leadingUnderscore': 'allow',
           }
-        ],
-        'no-restricted-syntax': [
-          'warn', {
-            // Matches the common pattern of `.registerRequiredCSS('path\to\module-styles.css');`.
-            'selector':
-                'CallExpression[callee.property.name="registerRequiredCSS"][arguments.length=1]:has(Literal[value=/css$/])',
-            'message': 'Styles should be imported using `import styles from \'[file name].css(.legacy).js\';` and' +
-                // Intentional double periods.. since trailing period is stripped from output.
-                ' registered using `.registerCSSFiles([styles]);` or `.registerRequiredCSS(legacyStyles);` syntax..',
-          }
-        ],
+        ]
       }
     },
     {

package/front_end/generated/protocol.d.ts

@@ -1047,6 +1047,7 @@ declare namespace Protocol {
        * https://www.chromestatus.com/feature/5684870116278272 for more details."
        */
       message?: string;
+      deprecationType: string;
     }
 
     export const enum ClientHintIssueReason {

package/front_end/global_typings/global_defs.d.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 /// <reference path="./request_idle_callback.d.ts" />
-/// <reference path="./intl_display_names.d.ts" />
 
 interface CSSStyleSheet {
   replaceSync(content: string): void;

package/front_end/models/issues_manager/DeprecationIssue.ts

@@ -3,20 +3,20 @@
 // found in the LICENSE file.
 
 import type * as SDK from '../../core/sdk/sdk.js';
-import type * as Protocol from '../../generated/protocol.js';
+import * as Protocol from '../../generated/protocol.js';
 
 import {Issue, IssueCategory, IssueKind} from './Issue.js';
 import type {MarkdownIssueDescription} from './MarkdownIssueDescription.js';
 
-export const enum IssueCode {
-  DeprecationIssue = 'DeprecationIssue',
-}
-
-export class DeprecationIssue extends Issue<IssueCode> {
+export class DeprecationIssue extends Issue {
   #issueDetails: Protocol.Audits.DeprecationIssueDetails;
 
   constructor(issueDetails: Protocol.Audits.DeprecationIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel) {
-    super(IssueCode.DeprecationIssue, issuesModel);
+    const issueCode = [
+      Protocol.Audits.InspectorIssueCode.DeprecationIssue,
+      issueDetails.deprecationType,
+    ].join('::');
+    super({code: issueCode, umaCode: 'DeprecationIssue'}, issuesModel);
     this.#issueDetails = issueDetails;
   }
 

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -237,13 +237,14 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   private searchHighlightsVisible?: boolean;
   selectionElement?: HTMLDivElement;
   private hintElement?: HTMLElement;
+  private contentElement: HTMLElement;
 
   constructor(node: SDK.DOMModel.DOMNode, isClosingTag?: boolean) {
     // The title will be updated in onattach.
     super();
     this.nodeInternal = node;
     this.treeOutline = null;
-
+    this.contentElement = this.listItemElement.createChild('div');
     this.gutterContainer = this.contentElement.createChild('div', 'gutter-container');
     this.gutterContainer.addEventListener('click', this.showContextMenu.bind(this));
     const gutterMenuIcon = UI.Icon.Icon.create('largeicon-menu', 'gutter-menu-icon');
@@ -1303,11 +1304,11 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           this.childrenListElement.classList.add('shadow-root-depth-' + depth);
         }
       }
-      const highlightElement = document.createElement('span');
-      highlightElement.className = 'highlight';
+      this.contentElement.removeChildren();
+      const highlightElement = this.contentElement.createChild('span', 'highlight');
       highlightElement.append(nodeInfo);
       // fixme: make it clear that `this.title = x` is a setter with significant side effects
-      this.title = highlightElement;
+      this.title = this.contentElement;
       this.updateDecorations();
       this.contentElement.prepend(this.gutterContainer);
       if (!this.isClosingTagInternal && this.adornerContainer) {

package/front_end/panels/sources/SourcesPanel.ts

@@ -566,7 +566,7 @@ export class SourcesPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi
     const enabled = Common.Settings.Settings.instance().moduleSetting('pauseOnExceptionEnabled').get();
     const button = (this.pauseOnExceptionButton as UI.Toolbar.ToolbarToggle);
     button.setToggled(enabled);
-    button.setTitle(enabled ? i18nString(UIStrings.pauseOnExceptions) : i18nString(UIStrings.dontPauseOnExceptions));
+    button.setTitle(enabled ? i18nString(UIStrings.dontPauseOnExceptions) : i18nString(UIStrings.pauseOnExceptions));
     this.debugToolbarDrawer.classList.toggle('expanded', enabled);
   }
 

package/front_end/ui/legacy/GlassPane.ts

@@ -56,7 +56,6 @@ export class GlassPane {
   }
 
   registerRequiredCSS(cssFile: {cssContent: string}): void {
-    // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
     this.widgetInternal.registerRequiredCSS(cssFile);
   }
 

package/front_end/ui/legacy/Treeoutline.ts

@@ -432,7 +432,6 @@ export class TreeElement {
   private readonly boundOnFocus: () => void;
   private readonly boundOnBlur: () => void;
   readonly listItemNode: HTMLLIElement;
-  readonly contentNode: HTMLElement;
   titleElement: Node;
   titleInternal: string|Node;
   private childrenInternal: TreeElement[]|null;
@@ -459,10 +458,8 @@ export class TreeElement {
     this.boundOnFocus = this.onFocus.bind(this);
     this.boundOnBlur = this.onBlur.bind(this);
     this.listItemNode = document.createElement('li');
-    this.contentNode = this.listItemElement.createChild('div');
-    this.contentNode.classList.add('tree-element-content');
 
-    this.titleElement = this.contentNode.createChild('span', 'tree-element-title');
+    this.titleElement = this.listItemNode.createChild('span', 'tree-element-title');
     treeElementBylistItemNode.set(this.listItemNode, this);
     this.titleInternal = '';
     if (title) {
@@ -732,10 +729,6 @@ export class TreeElement {
     return this.listItemNode;
   }
 
-  get contentElement(): HTMLElement {
-    return this.contentNode;
-  }
-
   get childrenListElement(): HTMLOListElement {
     return this.childrenListNode;
   }
@@ -758,13 +751,13 @@ export class TreeElement {
       this.tooltip = '';
     }
 
-    this.contentNode.removeChildren();
+    this.listItemNode.removeChildren();
     if (this.leadingIconsElement) {
-      this.contentNode.appendChild(this.leadingIconsElement);
+      this.listItemNode.appendChild(this.leadingIconsElement);
     }
-    this.contentNode.appendChild(this.titleElement);
+    this.listItemNode.appendChild(this.titleElement);
     if (this.trailingIconsElement) {
-      this.contentNode.appendChild(this.trailingIconsElement);
+      this.listItemNode.appendChild(this.trailingIconsElement);
     }
     this.ensureSelection();
   }
@@ -794,7 +787,7 @@ export class TreeElement {
       this.leadingIconsElement = document.createElement('div');
       this.leadingIconsElement.classList.add('leading-icons');
       this.leadingIconsElement.classList.add('icons-container');
-      this.contentNode.insertBefore(this.leadingIconsElement, this.titleElement);
+      this.listItemNode.insertBefore(this.leadingIconsElement, this.titleElement);
       this.ensureSelection();
     }
     this.leadingIconsElement.removeChildren();
@@ -811,7 +804,7 @@ export class TreeElement {
       this.trailingIconsElement = document.createElement('div');
       this.trailingIconsElement.classList.add('trailing-icons');
       this.trailingIconsElement.classList.add('icons-container');
-      this.contentNode.appendChild(this.trailingIconsElement);
+      this.listItemNode.appendChild(this.trailingIconsElement);
       this.ensureSelection();
     }
     this.trailingIconsElement.removeChildren();

package/front_end/ui/legacy/UIUtils.ts

@@ -141,9 +141,9 @@ export function installDragHandle(
   }
 
   let startTimer: number|null;
-  element.addEventListener('mousedown', onMouseDown, false);
+  element.addEventListener('pointerdown', onMouseDown, false);
   if (startDelay) {
-    element.addEventListener('mouseup', onMouseUp, false);
+    element.addEventListener('pointerup', onMouseUp, false);
   }
   if (hoverCursor !== null) {
     (element as HTMLElement).style.cursor = hoverCursor || cursor || '';
@@ -233,12 +233,12 @@ class DragHandler {
       this.dragEventsTargetDocumentTop = this.dragEventsTargetDocument;
     }
 
-    targetDocument.addEventListener('mousemove', this.elementDragMove, true);
-    targetDocument.addEventListener('mouseup', this.elementDragEnd, true);
+    targetDocument.addEventListener('pointermove', this.elementDragMove, true);
+    targetDocument.addEventListener('pointerup', this.elementDragEnd, true);
     DragHandler.rootForMouseOut &&
-        DragHandler.rootForMouseOut.addEventListener('mouseout', this.mouseOutWhileDragging, {capture: true});
+        DragHandler.rootForMouseOut.addEventListener('pointerout', this.mouseOutWhileDragging, {capture: true});
     if (this.dragEventsTargetDocumentTop && targetDocument !== this.dragEventsTargetDocumentTop) {
-      this.dragEventsTargetDocumentTop.addEventListener('mouseup', this.elementDragEnd, true);
+      this.dragEventsTargetDocumentTop.addEventListener('pointerup', this.elementDragEnd, true);
     }
 
     const targetHtmlElement = (targetElement as HTMLElement);
@@ -264,17 +264,17 @@ class DragHandler {
     if (!DragHandler.rootForMouseOut) {
       return;
     }
-    DragHandler.rootForMouseOut.removeEventListener('mouseout', this.mouseOutWhileDragging, {capture: true});
+    DragHandler.rootForMouseOut.removeEventListener('pointerout', this.mouseOutWhileDragging, {capture: true});
   }
 
   private unregisterDragEvents(): void {
     if (!this.dragEventsTargetDocument) {
       return;
     }
-    this.dragEventsTargetDocument.removeEventListener('mousemove', this.elementDragMove, true);
-    this.dragEventsTargetDocument.removeEventListener('mouseup', this.elementDragEnd, true);
+    this.dragEventsTargetDocument.removeEventListener('pointermove', this.elementDragMove, true);
+    this.dragEventsTargetDocument.removeEventListener('pointerup', this.elementDragEnd, true);
     if (this.dragEventsTargetDocumentTop && this.dragEventsTargetDocument !== this.dragEventsTargetDocumentTop) {
-      this.dragEventsTargetDocumentTop.removeEventListener('mouseup', this.elementDragEnd, true);
+      this.dragEventsTargetDocumentTop.removeEventListener('pointerup', this.elementDragEnd, true);
     }
     delete this.dragEventsTargetDocument;
     delete this.dragEventsTargetDocumentTop;
@@ -993,9 +993,9 @@ export class LongClickController {
 
     this.element.addEventListener('keydown', boundKeyDown, false);
     this.element.addEventListener('keyup', boundKeyUp, false);
-    this.element.addEventListener('mousedown', boundMouseDown, false);
-    this.element.addEventListener('mouseout', boundReset, false);
-    this.element.addEventListener('mouseup', boundMouseUp, false);
+    this.element.addEventListener('pointerdown', boundMouseDown, false);
+    this.element.addEventListener('pointerout', boundReset, false);
+    this.element.addEventListener('pointerup', boundMouseUp, false);
     this.element.addEventListener('click', boundReset, true);
 
     this.longClickData = {mouseUp: boundMouseUp, mouseDown: boundMouseDown, reset: boundReset};
@@ -1033,9 +1033,9 @@ export class LongClickController {
     if (!this.longClickData) {
       return;
     }
-    this.element.removeEventListener('mousedown', this.longClickData.mouseDown, false);
-    this.element.removeEventListener('mouseout', this.longClickData.reset, false);
-    this.element.removeEventListener('mouseup', this.longClickData.mouseUp, false);
+    this.element.removeEventListener('poinerdown', this.longClickData.mouseDown, false);
+    this.element.removeEventListener('pointerout', this.longClickData.reset, false);
+    this.element.removeEventListener('pointerup', this.longClickData.mouseUp, false);
     this.element.addEventListener('click', this.longClickData.reset, true);
     delete this.longClickData;
   }

package/front_end/ui/legacy/components/color_picker/Spectrum.ts

@@ -267,14 +267,14 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
     UI.ARIAUtils.markAsButton(displaySwitcher);
 
     UI.UIUtils.installDragHandle(
-        this.hueElement, this.dragStart.bind(this, positionHue.bind(this)), positionHue.bind(this), null, 'pointer',
-        'default');
+        this.hueElement, this.dragStart.bind(this, positionHue.bind(this)), positionHue.bind(this), null, 'ew-resize',
+        'crosshair');
     UI.UIUtils.installDragHandle(
         this.alphaElement, this.dragStart.bind(this, positionAlpha.bind(this)), positionAlpha.bind(this), null,
-        'pointer', 'default');
+        'ew-resize', 'crosshair');
     UI.UIUtils.installDragHandle(
-        this.colorElement, this.dragStart.bind(this, positionColor.bind(this)), positionColor.bind(this), null,
-        'pointer', 'default');
+        this.colorElement, this.dragStart.bind(this, positionColor.bind(this)), positionColor.bind(this), null, 'move',
+        'crosshair');
 
     // Color contrast business.
     if (contrastInfo) {

package/front_end/ui/legacy/components/color_picker/spectrum.css

@@ -25,6 +25,7 @@
   border-radius: 2px 2px 0 0;
   overflow: hidden;
   flex: none;
+  touch-action: none;
 }
 
 .spectrum-dragger,
@@ -37,7 +38,8 @@
   height: 12px;
   width: 12px;
   border: 1px solid var(--color-background);
-  cursor: pointer;
+  cursor: move;
+  z-index: 1;
   position: absolute;
   top: 0;
   left: 0;
@@ -48,7 +50,7 @@
 .spectrum-slider {
   position: absolute;
   top: -1px;
-  cursor: pointer;
+  cursor: ew-resize;
   width: 13px;
   height: 13px;
   border-radius: 13px;
@@ -90,6 +92,7 @@
   width: 130px;
   height: 11px;
   border-radius: 2px;
+  touch-action: none;
 }
 
 .spectrum-hue:focus-visible .spectrum-slider,

package/front_end/ui/legacy/components/perf_ui/FlameChart.ts

@@ -126,8 +126,6 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
   private lastMouseOffsetX: number;
   private selectedGroup: number;
   private keyboardFocusedGroup: number;
-  private selectedGroupBackroundColor: string;
-  private selectedGroupBorderColor: string;
   private offsetWidth!: number;
   private offsetHeight!: number;
   private dragStartX!: number;
@@ -229,11 +227,6 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
 
     // Keyboard focused group is used to navigate groups irrespective of whether they are selectable or not
     this.keyboardFocusedGroup = -1;
-
-    this.selectedGroupBackroundColor = ThemeSupport.ThemeSupport.instance().patchColorText(
-        Colors.SelectedGroupBackground, ThemeSupport.ThemeSupport.ColorUsage.Background);
-    this.selectedGroupBorderColor = ThemeSupport.ThemeSupport.instance().patchColorText(
-        Colors.SelectedGroupBorder, ThemeSupport.ThemeSupport.ColorUsage.Background);
   }
 
   willHide(): void {
@@ -1140,7 +1133,8 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
       context.save();
       this.forEachGroupInViewport((offset, index, group, isFirst, groupHeight) => {
         if (this.isGroupFocused(index)) {
-          context.fillStyle = this.selectedGroupBackroundColor;
+          context.fillStyle =
+              ThemeSupport.ThemeSupport.instance().getComputedValue('--custom-val-test', this.contentElement);
           context.fillRect(0, offset, width, groupHeight - group.style.padding);
         }
       });
@@ -1563,7 +1557,6 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
       return;
     }
     const lastGroupOffset = groupOffsets[groupOffsets.length - 1];
-    const colorUsage = ThemeSupport.ThemeSupport.ColorUsage;
 
     context.save();
     context.scale(ratio, ratio);
@@ -1571,7 +1564,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     const defaultFont = '11px ' + Host.Platform.fontFamily();
     context.font = defaultFont;
 
-    context.fillStyle = ThemeSupport.ThemeSupport.instance().patchColorText('#fff', colorUsage.Background);
+    context.fillStyle = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-background');
     this.forEachGroupInViewport((offset, index, group) => {
       const paddingHeight = group.style.padding;
       if (paddingHeight < 5) {
@@ -1583,7 +1576,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
       context.fillRect(0, lastGroupOffset + 2, width, top + height - lastGroupOffset);
     }
 
-    context.strokeStyle = ThemeSupport.ThemeSupport.instance().patchColorText('#eee', colorUsage.Background);
+    context.strokeStyle = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-background-elevation-1');
     context.beginPath();
     this.forEachGroupInViewport((offset, index, group, isFirst) => {
       if (isFirst || group.style.padding < 4) {
@@ -1622,7 +1615,8 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
       if (this.isGroupCollapsible(index) && !group.expanded || group.style.shareHeaderLine) {
         const width = this.labelWidthForGroup(context, group) + 2;
         if (this.isGroupFocused(index)) {
-          context.fillStyle = this.selectedGroupBackroundColor;
+          context.fillStyle =
+              ThemeSupport.ThemeSupport.instance().getComputedValue('--selected-group-background', this.contentElement);
         } else {
           const parsedColor = Common.Color.Color.parse(group.style.backgroundColor);
           if (parsedColor) {
@@ -1641,7 +1635,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     });
     context.restore();
 
-    context.fillStyle = ThemeSupport.ThemeSupport.instance().patchColorText('#6e6e6e', colorUsage.Foreground);
+    context.fillStyle = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-text-secondary');
     context.beginPath();
     this.forEachGroupInViewport((offset, index, group) => {
       if (this.isGroupCollapsible(index)) {
@@ -1652,7 +1646,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     });
     context.fill();
 
-    context.strokeStyle = ThemeSupport.ThemeSupport.instance().patchColorText('#ddd', colorUsage.Background);
+    context.strokeStyle = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-details-hairline-light');
     context.beginPath();
     context.stroke();
 
@@ -1660,7 +1654,8 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
       if (this.isGroupFocused(index)) {
         const lineWidth = 2;
         const bracketLength = 10;
-        context.fillStyle = this.selectedGroupBorderColor;
+        context.fillStyle =
+            ThemeSupport.ThemeSupport.instance().getComputedValue('--selected-group-border', this.contentElement);
         context.fillRect(0, offset - lineWidth, lineWidth, groupHeight - group.style.padding + 2 * lineWidth);
         context.fillRect(0, offset - lineWidth, bracketLength, lineWidth);
         context.fillRect(0, offset + groupHeight - group.style.padding, bracketLength, lineWidth);
@@ -2326,10 +2321,6 @@ export type EventTypes = {
   [Events.EntryHighlighted]: number,
 };
 
-export const Colors = {
-  SelectedGroupBackground: 'hsl(215, 85%, 98%)',
-  SelectedGroupBorder: 'hsl(216, 68%, 54%)',
-};
 export interface Group {
   name: Common.UIString.LocalizedString;
   startLevel: number;

package/front_end/ui/legacy/components/perf_ui/flameChart.css

@@ -6,6 +6,14 @@
 
 .flame-chart-main-pane {
   overflow: hidden;
+
+  --selected-group-background: hsl(215deg 85% 98%);
+  --selected-group-border: hsl(216deg 68% 54%);
+}
+
+:host-context(.-theme-with-dark-background) .flame-chart-main-pane {
+  --selected-group-background: hsl(215deg 85% 15%);
+  --selected-group-border: hsl(216deg 68% 46%);
 }
 
 .flame-chart-marker-highlight-element {

package/front_end/ui/legacy/components/source_frame/FontView.ts

@@ -61,7 +61,6 @@ export class FontView extends UI.View.SimpleView {
   private inResize!: boolean|null;
   constructor(mimeType: string, contentProvider: TextUtils.ContentProvider.ContentProvider) {
     super(i18nString(UIStrings.font));
-    // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
     this.registerRequiredCSS(fontViewStyles);
     this.element.classList.add('font-view');
     this.url = contentProvider.contentURL();

package/front_end/ui/legacy/components/source_frame/ImageView.ts

@@ -98,7 +98,6 @@ export class ImageView extends UI.View.SimpleView {
   private cachedContent?: string|null;
   constructor(mimeType: string, contentProvider: TextUtils.ContentProvider.ContentProvider) {
     super(i18nString(UIStrings.image));
-    // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
     this.registerRequiredCSS(imageViewStyles);
     this.element.tabIndex = -1;
     this.element.classList.add('image-view');

package/front_end/ui/legacy/components/source_frame/JSONView.ts

@@ -56,7 +56,6 @@ export class JSONView extends UI.Widget.VBox implements UI.SearchableView.Search
   constructor(parsedJSON: ParsedJSON, startCollapsed?: boolean) {
     super();
     this.initialized = false;
-    // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
     this.registerRequiredCSS(jsonViewStyles);
     this.parsedJSON = parsedJSON;
     this.startCollapsed = Boolean(startCollapsed);

package/front_end/ui/legacy/components/source_frame/ResourceSourceFrame.ts

@@ -84,7 +84,6 @@ export class SearchableContainer extends UI.Widget.VBox {
 
   constructor(resource: TextUtils.ContentProvider.ContentProvider, contentType: string, autoPrettyPrint?: boolean) {
     super(true);
-    // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
     this.registerRequiredCSS(resourceSourceFrameStyles);
     const sourceFrame = new ResourceSourceFrame(resource, contentType);
     this.sourceFrame = sourceFrame;

package/front_end/ui/legacy/components/source_frame/XMLView.ts

@@ -28,11 +28,9 @@ export class XMLView extends UI.Widget.Widget implements UI.SearchableView.Searc
 
   constructor(parsedXML: Document) {
     super(true);
-    // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
     this.registerRequiredCSS(xmlViewStyles);
     this.contentElement.classList.add('shadow-xml-view', 'source-code');
     this.treeOutline = new UI.TreeOutline.TreeOutlineInShadow();
-    // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
     this.treeOutline.registerRequiredCSS(xmlTreeStyles);
     this.contentElement.appendChild(this.treeOutline.element);
     this.currentSearchFocusIndex = 0;

package/front_end/ui/legacy/tabbedPane.css

@@ -236,6 +236,7 @@
   flex: 0 0 auto;
   flex-direction: column;
   padding-top: 10px;
+  padding-right: 8px;
   overflow: hidden;
 }
 

package/front_end/ui/legacy/theme_support/theme_support_impl.ts

@@ -34,7 +34,6 @@
  */
 
 import * as Common from '../../../core/common/common.js';
-import * as Platform from '../../../core/platform/platform.js';
 
 import inspectorSyntaxHighlightStyles from '../inspectorSyntaxHighlight.css.legacy.js';
 import inspectorSyntaxHighlightDarkStyles from '../inspectorSyntaxHighlightDark.css.legacy.js';
@@ -45,33 +44,13 @@ const themeValuesCache = new Map<CSSStyleDeclaration, Map<string, string>>();
 
 export class ThemeSupport {
   private readonly themeNameInternal: string;
-  private themableProperties: Set<string>;
-  private readonly cachedThemePatches: Map<string, string>;
-  private readonly setting: Common.Settings.Setting<string>;
   private readonly customSheets: Set<string>;
   private readonly computedRoot: () => symbol | CSSStyleDeclaration;
-  private injectingStyleSheet?: boolean;
 
   private constructor(setting: Common.Settings.Setting<string>) {
     const systemPreferredTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default';
     this.themeNameInternal = setting.get() === 'systemPreferred' ? systemPreferredTheme : setting.get();
-    this.themableProperties = new Set([
-      'color',
-      'box-shadow',
-      'text-shadow',
-      'outline-color',
-      'background-image',
-      'background-color',
-      'border-left-color',
-      'border-right-color',
-      'border-top-color',
-      'border-bottom-color',
-      '-webkit-border-image',
-      'fill',
-      'stroke',
-    ]);
-    this.cachedThemePatches = new Map();
-    this.setting = setting;
+
     this.customSheets = new Set();
     this.computedRoot = Common.Lazy.lazy(() => window.getComputedStyle(document.documentElement));
   }
@@ -139,12 +118,10 @@ export class ThemeSupport {
   }
 
   injectHighlightStyleSheets(element: Element|ShadowRoot): void {
-    this.injectingStyleSheet = true;
     this.appendStyle(element, inspectorSyntaxHighlightStyles);
     if (this.themeNameInternal === 'dark') {
       this.appendStyle(element, inspectorSyntaxHighlightDarkStyles);
     }
-    this.injectingStyleSheet = false;
   }
 
   /**
@@ -174,195 +151,11 @@ export class ThemeSupport {
   }
 
   applyTheme(document: Document): void {
-    if (!this.hasTheme() || this.isForcedColorsMode()) {
-      return;
-    }
-
-    if (this.themeNameInternal === 'dark') {
-      document.documentElement.classList.add('-theme-with-dark-background');
-    }
-
-    const styleSheets = document.styleSheets;
-    const result = [];
-    for (let i = 0; i < styleSheets.length; ++i) {
-      const href = styleSheets[i].href;
-      if (!href) {
-        continue;
-      }
-      result.push(this.patchForTheme(href, (styleSheets[i] as CSSStyleSheet)));
-    }
-    result.push('/*# sourceURL=inspector.css.theme */');
-
-    const styleElement = document.createElement('style');
-    styleElement.textContent = result.join('\n');
-    document.head.appendChild(styleElement);
-  }
-
-  themeStyleSheet(id: string, text: string): string {
-    if (!this.hasTheme() || this.injectingStyleSheet || this.isForcedColorsMode()) {
-      return '';
-    }
-
-    let patch = this.cachedThemePatches.get(id);
-    if (!patch) {
-      const styleElement = document.createElement('style');
-      styleElement.textContent = text;
-      document.body.appendChild(styleElement);
-
-      const {sheet} = styleElement;
-      if (!sheet) {
-        throw new Error('No sheet in stylesheet object');
-      }
-      patch = this.patchForTheme(id, sheet);
-      document.body.removeChild(styleElement);
-    }
-    return patch;
-  }
-
-  private patchForTheme(id: string, styleSheet: CSSStyleSheet): string {
-    const cached = this.cachedThemePatches.get(id);
-    if (cached) {
-      return cached;
-    }
-
-    try {
-      const rules = styleSheet.cssRules;
-      const result = [];
-      for (let j = 0; j < rules.length; ++j) {
-        const rule = rules[j];
-        if (rule instanceof CSSImportRule) {
-          result.push(this.patchForTheme(rule.styleSheet.href || '', rule.styleSheet));
-          continue;
-        }
-
-        if (!(rule instanceof CSSStyleRule)) {
-          continue;
-        }
-
-        const output: string[] = [];
-        const style = rule.style;
-        const selectorText = rule.selectorText;
-        for (let i = 0; style && i < style.length; ++i) {
-          this.patchProperty(selectorText, style, style[i], output);
-        }
-        if (output.length) {
-          result.push(rule.selectorText + '{' + output.join('') + '}');
-        }
-      }
-
-      const fullText = result.join('\n');
-      this.cachedThemePatches.set(id, fullText);
-      return fullText;
-    } catch (e) {
-      this.setting.set('default');
-      return '';
-    }
-  }
-
-  /**
-   * Theming API is primarily targeted at making dark theme look good.
-   * - If rule has ".-theme-preserve" in selector, it won't be affected.
-   * - One can create specializations for dark themes via body.-theme-with-dark-background selector in host context.
-   */
-  private patchProperty(selectorText: string, style: CSSStyleDeclaration, name: string, output: string[]): void {
-    if (!this.themableProperties.has(name)) {
-      return;
-    }
-
-    const value = style.getPropertyValue(name);
-    if (!value || value === 'none' || value === 'inherit' || value === 'initial' || value === 'transparent') {
-      return;
-    }
-    if (name === 'background-image' && value.indexOf('gradient') === -1) {
-      return;
-    }
-
-    if (selectorText.indexOf('-theme-') !== -1) {
+    if (!this.hasTheme() || this.isForcedColorsMode() || this.themeNameInternal !== 'dark') {
       return;
     }
 
-    let colorUsage = ThemeSupport.ColorUsage.Unknown;
-    if (name.indexOf('background') === 0 || name.indexOf('border') === 0) {
-      colorUsage |= ThemeSupport.ColorUsage.Background;
-    }
-    if (name.indexOf('background') === -1) {
-      colorUsage |= ThemeSupport.ColorUsage.Foreground;
-    }
-
-    output.push(name);
-    output.push(':');
-    if (/^var\(.*\)$/.test(value)) {
-      // Don't translate CSS variables.
-      output.push(value);
-    } else {
-      const items = value.replace(Common.Color.Regex, '\0$1\0').split('\0');
-      for (const item of items) {
-        output.push(this.patchColorText(item, (colorUsage as number)));
-      }
-    }
-    if (style.getPropertyPriority(name)) {
-      output.push(' !important');
-    }
-    output.push(';');
-  }
-
-  /**
-   * This legacy function has been supeseded by CSS custom properties. Wherever possible, please use
-   * the values declared in global stylesheets.
-   *
-   * @deprecated
-   */
-  patchColorText(text: string, colorUsage: number): string {
-    const color = Common.Color.Color.parse(text);
-    if (!color) {
-      return text;
-    }
-    const outColor = this.patchColor(color, colorUsage);
-    let outText = outColor.asString(null);
-    if (!outText) {
-      outText = outColor.asString(outColor.hasAlpha() ? Common.Color.Format.RGBA : Common.Color.Format.RGB);
-    }
-    return outText || text;
-  }
-
-  /**
-   * This legacy function has been supeseded by CSS custom properties. Wherever possible, please use
-   * the values declared in global stylesheets.
-   *
-   * @deprecated
-   */
-  patchColor(color: Common.Color.Color, colorUsage: number): Common.Color.Color {
-    const hsla = color.hsla();
-    this.patchHSLA(hsla, colorUsage);
-
-    const rgba: number[] = [];
-    Common.Color.Color.hsl2rgb(hsla, rgba);
-    return new Common.Color.Color(rgba, color.format());
-  }
-
-  private patchHSLA(hsla: number[], colorUsage: number): void {
-    const hue = hsla[0];
-    const sat = hsla[1];
-    let lit: number = hsla[2];
-    const alpha = hsla[3];
-
-    switch (this.themeNameInternal) {
-      case 'dark': {
-        const minCap = colorUsage & ThemeSupport.ColorUsage.Background ? 0.14 : 0;
-        const maxCap = colorUsage & ThemeSupport.ColorUsage.Foreground ? 0.9 : 1;
-        lit = 1 - lit;
-        if (lit < minCap * 2) {
-          lit = minCap + lit / 2;
-        } else if (lit > 2 * maxCap - 1) {
-          lit = maxCap - 1 / 2 + lit / 2;
-        }
-        break;
-      }
-    }
-    hsla[0] = Platform.NumberUtilities.clamp(hue, 0, 1);
-    hsla[1] = Platform.NumberUtilities.clamp(sat, 0, 1);
-    hsla[2] = Platform.NumberUtilities.clamp(lit, 0, 1);
-    hsla[3] = Platform.NumberUtilities.clamp(alpha, 0, 1);
+    document.documentElement.classList.add('-theme-with-dark-background');
   }
 }
 export namespace ThemeSupport {

package/front_end/ui/legacy/treeoutline.css

@@ -93,10 +93,6 @@ ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus * {
   color: inherit;
 }
 
-.tree-outline .tree-element-content {
-  display: flex;
-}
-
 .tree-outline li .icons-container {
   align-self: center;
   display: flex;

package/package.json

@@ -53,5 +53,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.955630"
+  "version": "1.0.956060"
 }

package/scripts/component_server/server.js

@@ -150,8 +150,8 @@ function createServerIndexFile(componentNames) {
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width" />
       <title>DevTools components</title>
-      <link rel="stylesheet" href="/front_end/ui/legacy/themeColors.css" />
-      <link rel="stylesheet" href="/front_end/ui/components/docs/component_docs_styles.css" />
+      <link rel="stylesheet" href="${sharedResourcesBase}front_end/ui/legacy/themeColors.css" />
+      <link rel="stylesheet" href="${sharedResourcesBase}front_end/ui/components/docs/component_docs_styles.css" />
     </head>
     <body id="index-page">
       <h1>DevTools components</h1>

package/front_end/global_typings/intl_display_names.d.ts

@@ -1,111 +0,0 @@
-declare namespace Intl {
-  /**
-   * An object with properties reflecting the locale
-   * and styles options computed during initialization
-   * of the `Intl.DisplayNames` object
-   *
-   * [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/resolvedOptions#Description).
-   *
-   * [Specification](https://tc39.es/ecma402/#sec-intl-displaynames-constructor)
-   */
-  interface DisplayNamesOptions {
-    localeMatcher: RelativeTimeFormatLocaleMatcher;
-    style: RelativeTimeFormatStyle;
-    type: 'language'|'region'|'script'|'currency';
-    fallback: 'code'|'none';
-  }
-
-  interface DisplayNames {
-    /**
-       * Receives a code and returns a string based on the locale and options provided when instantiating
-       * [`Intl.DisplayNames()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames)
-       *
-       * @param code The `code` to provide depends on the `type`:
-       *  - If the type is "region", code should be either an [ISO-3166 two letters region code](https://www.iso.org/iso-3166-country-codes.html),
-       *    or a [three digits UN M49 Geographic Regions](https://unstats.un.org/unsd/methodology/m49/).
-       *  - If the type is "script", code should be an [ISO-15924 four letters script code](https://unicode.org/iso15924/iso15924-codes.html).
-       *  - If the type is "language", code should be a `languageCode` ["-" `scriptCode`] ["-" `regionCode` ] *("-" `variant` )
-       *    subsequence of the unicode_language_id grammar in [UTS 35's Unicode Language and Locale Identifiers grammar](https://unicode.org/reports/tr35/#Unicode_language_identifier).
-       *    `languageCode` is either a two letters ISO 639-1 language code or a three letters ISO 639-2 language code.
-       *  - If the type is "currency", code should be a [3-letter ISO 4217 currency code](https://www.iso.org/iso-4217-currency-codes.html).
-       *
-       * @returns A language-specific formatted string.
-       *
-       * [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/of).
-       *
-       * [Specification](https://tc39.es/ecma402/#sec-Intl.DisplayNames.prototype.of).
-       */
-    of(code: string): string;
-    /**
-       * Returns a new object with properties reflecting the locale and style formatting options computed during the construction of the current
-       * [`Intl/DisplayNames`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames) object.
-       *
-       * @returns An object with properties reflecting the locale and formatting options computed during the construction of the
-       *  given [`Intl/DisplayNames`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames) object.
-       *
-       * [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/resolvedOptions).
-       *
-       * [Specification](https://tc39.es/ecma402/#sec-Intl.DisplayNames.prototype.resolvedOptions)
-       */
-    resolvedOptions(): DisplayNamesOptions;
-  }
-
-  /**
-   * The [`Intl.DisplayNames()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames)
-   * object enables the consistent translation of language, region and script display names.
-   *
-   * Part of [Intl object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl)
-   * namespace and the [ECMAScript Internationalization API](https://www.ecma-international.org/publications/standards/Ecma-402.htm).
-   *
-   * [Compatibility](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames#browser_compatibility).
-   */
-  const DisplayNames: {
-    prototype: DisplayNames;
-
-    /**
-       * Constructor creates [`Intl.DisplayNames`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames)
-       * objects that enable the consistent translation of language, region and script display names.
-       *
-       * @param locales A string with a BCP 47 language tag, or an array of such strings.
-       *   For the general form and interpretation of the `locales` argument, see the [Intl](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locale_identification_and_negotiation)
-       *   page. The following Unicode extension key is allowed:
-       *   - `nu` The numbering system to be used. Possible values include: `"arab"`, `"arabext"`, `"bali"`, `"beng"`, `"deva"`, `"fullwide"`, `"gujr"`, `"guru"`, `"hanidec"`, `"khmr"`, `"knda"`, `"laoo"`, `"latn"`, `"limb"`, `"mlym"`, `"mong"`, `"mymr"`, `"orya"`, `"tamldec"`, `"telu"`, `"thai"`, `"tibt"`.
-       *
-       * @param options An object with some or all of the following properties:
-       *   - `localeMatcher` The locale matching algorithm to use. Possible values are `"lookup"` and `"best fit"`; the default is `"best fit"`.
-       *     For information about this option, see the [Intl](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locale_identification_and_negotiation) page.
-       *   - `style` The formatting style to use, the default is `"long"`. `"narrow"` `"short"` `"long"`
-       *   - `type` The type to use. `"language"` `"region"` `"script"` `"currency"`
-       *   - `fallback` The fallback to use, the default is `"code"`. `"code"` `"none"`
-       *
-       * @returns [Intl.DisplayNames](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames) object.
-       *
-       * [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/DisplayNames).
-       *
-       * [Specification](https://tc39.es/ecma402/#sec-intl-displaynames-constructor).
-       */
-    new (locales?: UnicodeBCP47LocaleIdentifier|UnicodeBCP47LocaleIdentifier[], options?: Partial<DisplayNamesOptions>):
-        DisplayNames;
-
-    /**
-       * Returns an array containing those of the provided locales that are supported in display names without having to fall back to the runtime's default locale.
-       *
-       * @param locales A string with a BCP 47 language tag, or an array of such strings.
-       *   For the general form and interpretation of the `locales` argument, see the [Intl](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locale_identification_and_negotiation)
-       *   page.
-       *
-       * @param options An object that may have the following property:
-       *   - `localeMatcher` The locale matching algorithm to use. Possible values are `"lookup"` and `"best fit"`; the default is `"best fit"`.
-       *     For information about this option, see the [Intl](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locale_identification_and_negotiation) page.
-       *
-       * @returns An array of strings representing a subset of the given locale tags that are supported in display names without having to fall back to the runtime's default locale.
-       *
-       * [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/supportedLocalesOf).
-       *
-       * [Specification](https://tc39.es/ecma402/#sec-Intl.DisplayNames.supportedLocalesOf).
-       */
-    supportedLocalesOf(
-        locales: UnicodeBCP47LocaleIdentifier|UnicodeBCP47LocaleIdentifier[],
-        options: {localeMatcher: RelativeTimeFormatLocaleMatcher}): UnicodeBCP47LocaleIdentifier[];
-  };
-}