chrome-devtools-frontend 1.0.947377 → 1.0.948295

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

@@ -325,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

@@ -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);
 }
@@ -330,8 +333,9 @@ async function completePropertiesInner(
     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,

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/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}

package/front_end/ui/legacy/utils/append-style.ts

@@ -2,19 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Root from '../../../core/root/root.js';
-
-export function appendStyle(node: Node, cssReference: string|{cssContent: string}): void {
-  let content: string;
-  if (typeof cssReference === 'string') {
-    content = Root.Runtime.cachedResources.get(cssReference) || '';
-    if (!content) {
-      console.error(cssReference + ' not preloaded. Check module.json');
-    }
-  } else {
-    content = cssReference.cssContent;
-  }
+export function appendStyle(node: Node, {cssContent}: {cssContent: string}): void {
   const styleElement = document.createElement('style');
-  styleElement.textContent = content;
+  styleElement.textContent = cssContent;
   node.appendChild(styleElement);
 }

package/front_end/ui/legacy/utils/create-shadow-root-with-core-styles.ts

@@ -7,7 +7,7 @@ import {focusChanged} from './focus-changed.js';
 import {injectCoreStyles} from './inject-core-styles.js';
 
 interface Options {
-  cssFile?: string|CSSStyleSheet[]|{cssContent: string};
+  cssFile?: CSSStyleSheet[]|{cssContent: string};
   delegatesFocus?: boolean;
 }
 
@@ -22,10 +22,12 @@ export function createShadowRootWithCoreStyles(element: Element, options: Option
 
   const shadowRoot = element.attachShadow({mode: 'open', delegatesFocus});
   injectCoreStyles(shadowRoot);
-  if (typeof cssFile === 'string' || (cssFile !== undefined && 'cssContent' in cssFile)) {
-    appendStyle(shadowRoot, cssFile);
-  } else if (cssFile) {
-    shadowRoot.adoptedStyleSheets = cssFile;
+  if (cssFile) {
+    if ('cssContent' in cssFile) {
+      appendStyle(shadowRoot, cssFile);
+    } else {
+      shadowRoot.adoptedStyleSheets = cssFile;
+    }
   }
   shadowRoot.addEventListener('focus', focusChanged, true);
   return shadowRoot;

package/package.json

@@ -27,10 +27,8 @@
     "auto-unittest": "scripts/test/run_auto_unittests.py --no-text-coverage",
     "build": "autoninja -C out/Default",
     "build-release": "autoninja -C out/Release",
-    "check": "npm run check-json && npm run check-gn && npm run check-lint && npm run check-loc",
+    "check": "npm run check-lint && npm run check-loc",
     "check-external-links": "third_party/node/node.py --output scripts/check_external_links.js",
-    "check-gn": "third_party/node/node.py --output scripts/check_gn.js",
-    "check-json": "third_party/node/node.py --output scripts/json_validator/validate_module_json.js",
     "check-lint": "third_party/node/node.py --output scripts/test/run_lint_check_js.mjs && third_party/node/node.py --output scripts/test/run_lint_check_css.js",
     "check-lint-css": "third_party/node/node.py --output scripts/test/run_lint_check_css.js",
     "collect-strings": "third_party/node/node.py --output third_party/i18n/collect-strings.js front_end",
@@ -55,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.947377"
+  "version": "1.0.948295"
 }

package/scripts/build/build_inspector_overlay.py

@@ -12,7 +12,6 @@ Builds inspector overlay:
 
 from os import path
 from os.path import join
-from modular_build import read_file, write_file
 from itertools import tee
 
 import os
@@ -29,6 +28,21 @@ finally:
     sys.path = original_sys_path
 
 
+def read_file(filename):
+    with open(path.normpath(filename), 'rt', encoding='utf-8') as input:
+        return input.read()
+
+
+def write_file(filename, content):
+    if path.exists(filename):
+        os.remove(filename)
+    directory = path.dirname(filename)
+    if not path.exists(directory):
+        os.makedirs(directory)
+    with open(filename, 'wt', encoding='utf-8') as output:
+        output.write(content)
+
+
 def check_size(filename, data, max_size):
     assert len(
         data