chrome-devtools-frontend 1.0.946351 → 1.0.948359

package/front_end/ui/components/diff_view/DiffView.ts

@@ -191,7 +191,7 @@ class DiffRenderer {
 
   private render(rows: readonly Row[]): LitHtml.TemplateResult {
     return LitHtml.html`
-      <div class="diff-listing" aria-label="${i18nString(UIStrings.changesDiffViewer)}">
+      <div class="diff-listing" aria-label=${i18nString(UIStrings.changesDiffViewer)}>
         ${rows.map(row => this.renderRow(row))}
       </div>`;
   }
@@ -213,7 +213,7 @@ class DiffRenderer {
     return LitHtml.html`
       <div class="diff-line-number" aria-hidden="true">${baseNumber}</div>
       <div class="diff-line-number" aria-hidden="true">${curNumber}</div>
-      <div class="${markerClass}" aria-hidden="true">${marker}</div>
+      <div class=${markerClass} aria-hidden="true">${marker}</div>
       <div class="diff-line-content diff-line-${row.type}" data-line-number=${curNumber}>${screenReaderText}${
         this.renderRowContent(row)}</div>`;
   }
@@ -230,10 +230,10 @@ class DiffRenderer {
     for (const token of row.tokens) {
       const tokenContent: (LitHtml.TemplateResult|string)[] = [];
       doc.highlightRange(pos, pos + token.text.length, (text, style) => {
-        tokenContent.push(style ? LitHtml.html`<span class="${style}">${text}</span>` : text);
+        tokenContent.push(style ? LitHtml.html`<span class=${style}>${text}</span>` : text);
       });
       content.push(
-          token.className ? LitHtml.html`<span class="${token.className}">${tokenContent}</span>` :
+          token.className ? LitHtml.html`<span class=${token.className}>${tokenContent}</span>` :
                             LitHtml.html`${tokenContent}`);
       pos += token.text.length;
     }

package/front_end/ui/components/helpers/component-server-setup.ts

@@ -3,28 +3,17 @@
 // found in the LICENSE file.
 
 import type * as Common from '../../../core/common/common.js';
-import * as Root from '../../../core/root/root.js';
 import * as ThemeSupport from '../../legacy/theme_support/theme_support.js';
 
-import {CSS_RESOURCES_TO_LOAD_INTO_RUNTIME} from './get-stylesheet.js';
-
 /**
  * Houses any setup required to run the component docs server. Currently this is
  * only populating the runtime CSS cache but may be extended in the future.
  */
-export async function setup(resourcesPrefix = ''): Promise<void> {
+export async function setup(): Promise<void> {
   const setting = {
     get() {
       return 'default';
     },
   } as Common.Settings.Setting<string>;
   ThemeSupport.ThemeSupport.instance({forceNew: true, setting});
-
-  const allPromises = CSS_RESOURCES_TO_LOAD_INTO_RUNTIME.map(resourcePath => {
-    return fetch(resourcesPrefix + '/front_end/' + resourcePath).then(response => response.text()).then(cssText => {
-      Root.Runtime.cachedResources.set(resourcePath, cssText);
-    });
-  });
-
-  await Promise.all(allPromises);
 }

package/front_end/ui/components/helpers/helpers.ts

@@ -6,7 +6,6 @@ import * as ComponentServerSetup from './component-server-setup.js';
 import * as CustomElements from './custom-elements.js';
 import * as Directives from './directives.js';
 import * as GetRootNode from './get-root-node.js';
-import * as LegacyGetStylesheet from './get-stylesheet.js';
 import * as ScheduledRender from './scheduled-render.js';
 import * as SetCSSProperty from './set-css-property.js';
 
@@ -15,7 +14,6 @@ export {
   CustomElements,
   Directives,
   GetRootNode,
-  LegacyGetStylesheet,
   ScheduledRender,
   SetCSSProperty,
 };

package/front_end/ui/components/icon_button/IconButton.ts

@@ -80,7 +80,7 @@ export class IconButton extends HTMLElement {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     LitHtml.render(LitHtml.html`
-      <button class="${buttonClasses}" @click=${this.onClickHandler} aria-label="${LitHtml.Directives.ifDefined(this.#accessibleName)}">
+      <button class=${buttonClasses} @click=${this.onClickHandler} aria-label=${LitHtml.Directives.ifDefined(this.#accessibleName)}>
       ${(!this.#compact && this.#leadingText) ? LitHtml.html`<span class="icon-button-title">${this.#leadingText}</span>` : LitHtml.nothing}
       ${filteredGroups.map(counter =>
       LitHtml.html`

package/front_end/ui/components/issue_counter/IssueCounter.ts

@@ -192,8 +192,8 @@ export class IssueCounter extends HTMLElement {
     };
     LitHtml.render(
         LitHtml.html`
-        <icon-button .data=${data as IconButton.IconButton.IconButtonData} .accessibleName="${
-            this.#accessibleName}"></icon-button>
+        <icon-button .data=${data as IconButton.IconButton.IconButtonData} .accessibleName=${
+            this.#accessibleName}></icon-button>
         `,
         this.#shadow, {host: this});
     this.#tooltipCallback?.();

package/front_end/ui/components/linear_memory_inspector/LinearMemoryViewer.ts

@@ -212,7 +212,7 @@ export class LinearMemoryViewer extends HTMLElement {
     };
     return html`
     <div class="row">
-      <span class="${LitHtml.Directives.classMap(classMap)}">${toHexString({number: startIndex + this.#memoryOffset, pad: 8, prefix: false})}</span>
+      <span class=${LitHtml.Directives.classMap(classMap)}>${toHexString({number: startIndex + this.#memoryOffset, pad: 8, prefix: false})}</span>
       <span class="divider"></span>
       ${this.renderByteValues(startIndex, endIndex)}
       <span class="divider"></span>
@@ -237,7 +237,7 @@ export class LinearMemoryViewer extends HTMLElement {
       const byteValue = isSelectableCell ? html`${toHexString({number: this.#memory[i], pad: 2, prefix: false})}` : '';
       const actualIndex = i + this.#memoryOffset;
       const onSelectedByte = isSelectableCell ? this.onSelectedByte.bind(this, actualIndex) : '';
-      cells.push(html`<span class="${LitHtml.Directives.classMap(classMap)}" @click=${onSelectedByte}>${byteValue}</span>`);
+      cells.push(html`<span class=${LitHtml.Directives.classMap(classMap)} @click=${onSelectedByte}>${byteValue}</span>`);
     }
     return html`${cells}`;
   }
@@ -253,7 +253,7 @@ export class LinearMemoryViewer extends HTMLElement {
       const isSelectableCell = i < this.#memory.length;
       const value = isSelectableCell ? html`${this.toAscii(this.#memory[i])}` : '';
       const onSelectedByte = isSelectableCell ? this.onSelectedByte.bind(this, i + this.#memoryOffset) : '';
-      cells.push(html`<span class="${LitHtml.Directives.classMap(classMap)}" @click=${onSelectedByte}>${value}</span>`);
+      cells.push(html`<span class=${LitHtml.Directives.classMap(classMap)} @click=${onSelectedByte}>${value}</span>`);
     }
     return html`${cells}`;
   }

package/front_end/ui/components/markdown_view/MarkdownView.ts

@@ -105,13 +105,13 @@ const tokenRenderers = new Map<string, (token: any) => LitHtml.TemplateResult>([
   ['space', (): LitHtml.TemplateResult => html``],
   [
     'link',
-    (token): LitHtml.TemplateResult => html`<${MarkdownLink.litTagName} .data="${
-        {key: token.href, title: token.text} as MarkdownLinkData}"></${MarkdownLink.litTagName}>`,
+    (token): LitHtml.TemplateResult => html`<${MarkdownLink.litTagName} .data=${
+        {key: token.href, title: token.text} as MarkdownLinkData}></${MarkdownLink.litTagName}>`,
   ],
   [
     'image',
-    (token): LitHtml.TemplateResult => html`<${MarkdownImage.litTagName} .data="${
-        {key: token.href, title: token.text} as MarkdownImageData}"></${MarkdownImage.litTagName}>`,
+    (token): LitHtml.TemplateResult => html`<${MarkdownImage.litTagName} .data=${
+        {key: token.href, title: token.text} as MarkdownImageData}></${MarkdownImage.litTagName}>`,
   ],
 ]);
 

package/front_end/ui/components/panel_feedback/PreviewToggle.ts

@@ -0,0 +1,98 @@
+// Copyright (c) 2021 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as Root from '../../../core/root/root.js';
+import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import * as ComponentHelpers from '../helpers/helpers.js';
+import * as IconButton from '../icon_button/icon_button.js';
+
+import previewToggleStyles from './previewToggle.css.js';
+
+const {render, html, nothing} = LitHtml;
+
+export interface PreviewToggleData {
+  name: string;
+  helperText: string|null;
+  feedbackURL: string|null;
+  experiment: Root.Runtime.ExperimentName;
+  onChangeCallback?: (checked: boolean) => void;
+}
+
+const UIStrings = {
+  /**
+  *@description Link text the user can click to provide feedback to the team.
+  */
+  previewTextFeedbackLink: 'Send us your feedback.',
+};
+
+const str_ = i18n.i18n.registerUIStrings('ui/components/panel_feedback/PreviewToggle.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export class PreviewToggle extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-preview-toggle`;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+
+  #name = '';
+  #helperText: string|null = null;
+  #feedbackURL: string|null = null;
+  #experiment: string = '';
+  #onChangeCallback?: (checked: boolean) => void;
+
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [previewToggleStyles];
+  }
+
+  set data(data: PreviewToggleData) {
+    this.#name = data.name;
+    this.#helperText = data.helperText;
+    this.#feedbackURL = data.feedbackURL;
+    this.#experiment = data.experiment;
+    this.#onChangeCallback = data.onChangeCallback;
+    this.render();
+  }
+
+  private render(): void {
+    const checked = Root.Runtime.experiments.isEnabled(this.#experiment);
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
+    render(
+      html`
+      <div class="experiment-preview">
+        <input type="checkbox" ?checked=${checked} @change=${this.checkboxChanged} aria-label=${this.#name}/>
+        <${IconButton.Icon.Icon.litTagName} .data=${{
+          iconName: 'ic_preview_feature',
+          width: '16px',
+          height: '16px',
+          color: 'var(--color-text-secondary)',
+        } as IconButton.Icon.IconData}>
+        </${IconButton.Icon.Icon.litTagName}>${this.#name}
+      </div>
+      <div class="helper">
+        ${this.#helperText && this.#feedbackURL
+          ? html`<p>${this.#helperText} <x-link href=${this.#feedbackURL}>${i18nString(UIStrings.previewTextFeedbackLink)}</x-link></p>`
+          : nothing}
+      </div>`,
+      this.#shadow,
+      {
+        host: this,
+      });
+    // clang-format on
+  }
+
+  private checkboxChanged(event: Event): void {
+    const checked = (event.target as HTMLInputElement).checked;
+    Root.Runtime.experiments.setEnabled(this.#experiment, checked);
+    this.#onChangeCallback?.(checked);
+  }
+}
+
+ComponentHelpers.CustomElements.defineComponent('devtools-preview-toggle', PreviewToggle);
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface HTMLElementTagNameMap {
+    'devtools-preview-toggle': PreviewToggle;
+  }
+}

package/front_end/ui/components/panel_feedback/panel_feedback.ts

@@ -4,3 +4,4 @@
 
 export * as FeedbackButton from './FeedbackButton.js';
 export * as PanelFeedback from './PanelFeedback.js';
+export * as PreviewToggle from './PreviewToggle.js';

package/front_end/ui/components/panel_feedback/previewToggle.css

@@ -0,0 +1,24 @@
+/*
+ * Copyright 2021 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+:host {
+  display: block;
+}
+
+.experiment-preview {
+  display: flex;
+  align-items: center;
+}
+
+.helper {
+  text-align: center;
+  font-style: italic;
+}
+
+x-link { /* stylelint-disable-line selector-type-no-unknown */
+  color: var(--color-primary);
+  text-decoration-line: underline;
+}

package/front_end/ui/components/report_view/ReportView.ts

@@ -7,6 +7,7 @@ import * as LitHtml from '../../lit-html/lit-html.js';
 
 import reportStyles from './report.css.js';
 import reportKeyStyles from './reportKey.css.js';
+import reportSectionStyles from './reportSection.css.js';
 import reportSectionDividerStyles from './reportSectionDivider.css.js';
 import reportSectionHeaderStyles from './reportSectionHeader.css.js';
 import reportValueStyles from './reportValue.css.js';
@@ -66,6 +67,25 @@ export interface ReportSectionData {
   sectionTitle: string;
 }
 
+export class ReportSection extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-report-section`;
+  private readonly shadow = this.attachShadow({mode: 'open'});
+  connectedCallback(): void {
+    this.shadow.adoptedStyleSheets = [reportSectionStyles];
+    this.render();
+  }
+  private render(): void {
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
+    LitHtml.render(LitHtml.html`
+      <div class="section">
+        <slot></slot>
+      </div>
+    `, this.shadow, {host: this});
+    // clang-format on
+  }
+}
+
 export class ReportSectionHeader extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-report-section-header`;
 
@@ -146,6 +166,7 @@ export class ReportValue extends HTMLElement {
 }
 
 ComponentHelpers.CustomElements.defineComponent('devtools-report', Report);
+ComponentHelpers.CustomElements.defineComponent('devtools-report-section', ReportSection);
 ComponentHelpers.CustomElements.defineComponent('devtools-report-section-header', ReportSectionHeader);
 ComponentHelpers.CustomElements.defineComponent('devtools-report-key', ReportKey);
 ComponentHelpers.CustomElements.defineComponent('devtools-report-value', ReportValue);
@@ -155,6 +176,7 @@ declare global {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface HTMLElementTagNameMap {
     'devtools-report': Report;
+    'devtools-report-section': ReportSection;
     'devtools-report-section-header': ReportSectionHeader;
     'devtools-report-key': ReportKey;
     'devtools-report-value': ReportValue;

package/front_end/ui/components/report_view/reportSection.css

@@ -0,0 +1,20 @@
+/*
+ * Copyright 2021 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+:host {
+  grid-column-start: span 2;
+}
+
+.section {
+  padding: 12px;
+  margin-left: 18px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex: auto;
+  overflow-wrap: break-word;
+  overflow: hidden;
+}

package/front_end/ui/components/request_link_icon/RequestLinkIcon.ts

@@ -179,7 +179,7 @@ export class RequestLinkIcon extends HTMLElement {
       return LitHtml.nothing;
     }
     const filename = extractShortPath(url);
-    return LitHtml.html`<span aria-label="${i18nString(UIStrings.shortenedURL)}" title="${url}">${filename}</span>`;
+    return LitHtml.html`<span aria-label=${i18nString(UIStrings.shortenedURL)} title=${url}>${filename}</span>`;
   }
 
   private render(): Promise<void> {

package/front_end/ui/components/settings/SettingCheckbox.ts

@@ -55,8 +55,8 @@ export class SettingCheckbox extends HTMLElement {
         LitHtml.html`
       <p>
         <label>
-          <input type="checkbox" ?checked=${this.#setting.get()} ?disabled=${this.#disabled} @change="${
-            this.checkboxChanged}" aria-label="${this.#setting.title()}" /> ${this.#setting.title()}
+          <input type="checkbox" ?checked=${this.#setting.get()} ?disabled=${this.#disabled} @change=${
+            this.checkboxChanged} aria-label=${this.#setting.title()} /> ${this.#setting.title()}
         </label>
       </p>`,
         this.#shadow, {host: this});

package/front_end/ui/components/text_editor/config.ts

@@ -26,9 +26,10 @@ const empty: CM.Extension = [];
 export const dynamicSetting = CM.Facet.define<DynamicSetting<unknown>>();
 
 // The code below is used to wire up dynamic settings to editors. When
-// you include one of these objects in an editor configuration, the
-// TextEditor class will take care of listening to changes in the
-// setting, and updating the configuration as appropriate.
+// you include the result of calling `instance()` in an editor
+// configuration, the TextEditor class will take care of listening to
+// changes in the setting, and updating the configuration as
+// appropriate.
 
 export class DynamicSetting<T> {
   compartment = new CM.Compartment();
@@ -246,7 +247,7 @@ export const closeBrackets: CM.Extension = [
 // element with the editor styles mounted in it for them. This is
 // annoying, but necessary because a scrollable parent node clips them
 // otherwise, `position: fixed` doesn't work due to `contain` styles,
-// and appending them diretly to `document.body` doesn't work because
+// and appending them directly to `document.body` doesn't work because
 // the necessary style sheets aren't available there.
 let tooltipHost: ShadowRoot|null = null;
 
@@ -324,11 +325,12 @@ export const showCompletionHint = CM.ViewPlugin.fromClass(class {
     if (pos !== lineBefore.to) {
       return null;
     }
-    const wordBefore = /#?[\w$]+$/.exec(lineBefore.text);
-    if (wordBefore && !label.startsWith(wordBefore[0])) {
+    const partBefore = (label[0] === '\'' ? /'(\\.|[^'\\])*$/ : label[0] === '"' ? /"(\\.|[^"\\])*$/ : /#?[\w$]+$/)
+                           .exec(lineBefore.text);
+    if (partBefore && !label.startsWith(partBefore[0])) {
       return null;
     }
-    return label.slice(wordBefore ? wordBefore[0].length : 0);
+    return label.slice(partBefore ? partBefore[0].length : 0);
   }
 }, {decorations: p => p.decorations});
 

package/front_end/ui/components/text_editor/javascript.ts

@@ -52,10 +52,10 @@ class CompletionSet {
 }
 
 const javascriptKeywords = [
-  'async',  'await',      'break',  'case',   'catch',   'class',   'const',  'continue', 'debugger', 'default',
-  'delete', 'do',         'else',   'export', 'extends', 'finally', 'for',    'function', 'if',       'import',
-  'in',     'instanceof', 'let',    'new',    'of',      'return',  'static', 'super',    'switch',   'this',
-  'throw',  'try',        'typeof', 'var',    'void',    'while',   'with',   'yield',
+  'async',      'await', 'break',  'case',    'catch', 'class',   'const',  'continue', 'debugger', 'default', 'delete',
+  'do',         'else',  'export', 'extends', 'false', 'finally', 'for',    'function', 'if',       'import',  'in',
+  'instanceof', 'let',   'new',    'null',    'of',    'return',  'static', 'super',    'switch',   'this',    'throw',
+  'true',       'try',   'typeof', 'var',     'void',  'while',   'with',   'yield',
 ];
 const consoleBuiltinFunctions = [
   'clear',
@@ -159,6 +159,7 @@ export async function javascriptCompletionSource(cx: CodeMirror.CompletionContex
   }
 
   let result: CompletionSet;
+  let quote: string|undefined = undefined;
   if (query.type === QueryType.Expression) {
     const [scope, global] = await Promise.all([
       completeExpressionInScope(),
@@ -174,7 +175,6 @@ export async function javascriptCompletionSource(cx: CodeMirror.CompletionContex
     }
   } else if (query.type === QueryType.PropertyName || query.type === QueryType.PropertyExpression) {
     const objectExpr = (query.relatedNode as CodeMirror.SyntaxNode).getChild('Expression');
-    let quote = undefined;
     if (query.type === QueryType.PropertyExpression) {
       quote = query.from === undefined ? '\'' : cx.state.sliceDoc(query.from, query.from + 1);
     }
@@ -189,10 +189,13 @@ export async function javascriptCompletionSource(cx: CodeMirror.CompletionContex
   return {
     from: query.from ?? cx.pos,
     options: result.completions,
-    span: /^#?[\w\P{ASCII}]*/u,
+    span: !quote ? SPAN_IDENT : quote === '\'' ? SPAN_SINGLE_QUOTE : SPAN_DOUBLE_QUOTE,
   };
 }
 
+const SPAN_IDENT = /^#?[\w\P{ASCII}]*$/u, SPAN_SINGLE_QUOTE = /^\'(\\.|[^\\'\n])*'?$/,
+      SPAN_DOUBLE_QUOTE = /^"(\\.|[^\\"\n])*"?$/;
+
 function getExecutionContext(): SDK.RuntimeModel.ExecutionContext|null {
   return UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
 }
@@ -323,15 +326,16 @@ async function completePropertiesInner(
     object = await evaluateExpression(context, toPrototype + '.prototype', 'completion');
   }
 
-  const functionType = expression === 'window' ? 'function' : 'method';
-  const otherType = expression === 'window' ? 'variable' : 'property';
+  const functionType = expression === 'globalThis' ? 'function' : 'method';
+  const otherType = expression === 'globalThis' ? 'variable' : 'property';
   if (object && (object.type === 'object' || object.type === 'function')) {
     const properties = await object.getAllProperties(false, false);
     const isFunction = object.type === 'function';
     for (const prop of properties.properties || []) {
       if (!prop.symbol && !(isFunction && (prop.name === 'arguments' || prop.name === 'caller')) &&
-          (!prop.private || expression === 'this')) {
-        const label = quoted ? quoted + prop.name + quoted : prop.name;
+          (!prop.private || expression === 'this') && (quoted || SPAN_IDENT.test(prop.name))) {
+        const label =
+            quoted ? quoted + prop.name.replaceAll('\\', '\\\\').replaceAll(quoted, '\\' + quoted) + quoted : prop.name;
         const completion: CodeMirror.Completion = {
           label,
           type: prop.value?.type === 'function' ? functionType : otherType,
@@ -383,7 +387,7 @@ async function completeExpressionGlobal(): Promise<CompletionSet> {
   }
   const result = baseCompletions.copy();
 
-  const fetchNames = completePropertiesInner('window', context).then(fromWindow => {
+  const fetchNames = completePropertiesInner('globalThis', context).then(fromWindow => {
     return context.globalLexicalScopeNames().then(globals => {
       for (const option of fromWindow.completions) {
         result.add(option);

package/front_end/ui/components/text_prompt/TextPrompt.ts

@@ -127,8 +127,8 @@ export class TextPrompt extends HTMLElement {
     const output = LitHtml.html`
       <span class="prefix">${this.#prefixText} </span>
       <span class="text-prompt-input"><input aria-label=${this.#ariaLabelText} spellcheck="false" @input=${
-        this.onInput} @keydown=${this.onKeyDown}/><span class='suggestion' suggestion="${
-        this.#suggestionText}"></span></span>`;
+        this.onInput} @keydown=${this.onKeyDown}/><span class='suggestion' suggestion=${
+        this.#suggestionText}></span></span>`;
     LitHtml.render(output, this.#shadow, {host: this});
   }
 }

package/front_end/ui/legacy/GlassPane.ts

@@ -55,7 +55,7 @@ export class GlassPane {
     return this.widgetInternal.isShowing();
   }
 
-  registerRequiredCSS(cssFile: string|{cssContent: string}): void {
+  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/InspectorView.ts

@@ -107,6 +107,14 @@ const UIStrings = {
   *@description The aria label for the drawer.
   */
   drawer: 'Tool drawer',
+  /**
+  *@description The aria label for the drawer shown.
+  */
+  drawerShown: 'Drawer shown',
+  /**
+  *@description The aria label for the drawer hidden.
+  */
+  drawerHidden: 'Drawer hidden',
 };
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/InspectorView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -312,6 +320,7 @@ export class InspectorView extends VBox implements ViewLocationResolver {
       this.focusRestorer = null;
     }
     this.emitDrawerChangeEvent(true);
+    ARIAUtils.alert(i18nString(UIStrings.drawerShown));
   }
 
   drawerVisible(): boolean {
@@ -328,6 +337,7 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     this.drawerSplitWidget.hideSidebar(true);
 
     this.emitDrawerChangeEvent(false);
+    ARIAUtils.alert(i18nString(UIStrings.drawerHidden));
   }
 
   setDrawerMinimized(minimized: boolean): void {

package/front_end/ui/legacy/SearchableView.ts

@@ -35,6 +35,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Platform from '../../core/platform/platform.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
 import {HistoryInput} from './HistoryInput.js';
@@ -629,7 +630,7 @@ export class SearchConfig {
 
     // Otherwise just do a plain text search.
     if (!regex) {
-      regex = createPlainTextSearchRegex(query, modifiers);
+      regex = Platform.StringUtilities.createPlainTextSearchRegex(query, modifiers);
     }
 
     return regex;

package/front_end/ui/legacy/Treeoutline.ts

@@ -399,7 +399,7 @@ export class TreeOutlineInShadow extends TreeOutline {
     this.renderSelection = true;
   }
 
-  registerRequiredCSS(cssFile: string|{cssContent: string}): void {
+  registerRequiredCSS(cssFile: {cssContent: string}): void {
     Utils.appendStyle(this.shadowRoot, cssFile);
   }
 

package/front_end/ui/legacy/Widget.ts

@@ -458,7 +458,7 @@ export class Widget {
     this.doResize();
   }
 
-  registerRequiredCSS(cssFile: string|{cssContent: string}): void {
+  registerRequiredCSS(cssFile: {cssContent: string}): void {
     if (this.isWebComponent) {
       Utils.appendStyle((this.shadowRoot as DocumentFragment), cssFile);
     } else {

package/front_end/ui/legacy/XWidget.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as ComponentHelpers from '../components/helpers/helpers.js';
-import * as Utils from './utils/utils.js';
 
 import {XElement} from './XElement.js';
 
@@ -55,10 +54,6 @@ export class XWidget extends XElement {
     return this.visible;
   }
 
-  registerRequiredCSS(cssFile: string): void {
-    Utils.appendStyle(this.shadowRootInternal || this, cssFile);
-  }
-
   setOnShown(callback: (() => void)|null): void {
     this.onShownCallback = callback;
   }

package/front_end/ui/legacy/components/inline_editor/CSSVarSwatch.ts

@@ -113,7 +113,7 @@ export class CSSVarSwatch extends HTMLElement {
     // The this.variableName's space must be removed, otherwise it cannot be triggered when clicked.
     const onActivate = isDefined ? this.onLinkActivate.bind(this, this.variableName.trim()) : null;
 
-    return html`<span class="${classes}" title="${title}" @mousedown=${onActivate} @keydown=${
+    return html`<span class=${classes} title=${title} @mousedown=${onActivate} @keydown=${
         onActivate} role="link" tabindex="-1">${variableName}</span>`;
   }
 
@@ -129,7 +129,7 @@ export class CSSVarSwatch extends HTMLElement {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(
-      html`<span title="${this.computedValue || ''}">${functionParts.pre}${link}${functionParts.post}</span>`,
+      html`<span title=${this.computedValue || ''}>${functionParts.pre}${link}${functionParts.post}</span>`,
       this.shadow, { host: this });
     // clang-format on
   }

package/front_end/ui/legacy/components/inline_editor/ColorSwatch.ts

@@ -118,7 +118,7 @@ export class ColorSwatch extends HTMLElement {
     // Note also that whitespace between nodes is removed on purpose to avoid pushing these elements apart. Do not
     // re-format the HTML code.
     LitHtml.render(
-      LitHtml.html`<span class="color-swatch" title="${this.tooltip}"><span class="color-swatch-inner"
+      LitHtml.html`<span class="color-swatch" title=${this.tooltip}><span class="color-swatch-inner"
         style="background-color: ${this.text};"
         @click=${this.onClick}
         @mousedown=${this.consume}