chrome-devtools-frontend 1.0.1011873 → 1.0.1013237

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

@@ -115,19 +115,22 @@ export class LinearMemoryViewer extends HTMLElement {
 
     // We initially just plot one row with one byte group (here: byte group size of 4).
     // Depending on that initially plotted row we can determine how many rows and
-    // bytes per row we can fit:
-    // > 0000000 | b0 b1 b2 b4 | a0 a1 a2 a3       <
-    //             ^-^           ^-^
-    //             byteCellWidth textCellWidth
-    //             ^-------------------------------^
-    //                 widthToFill
+    // bytes per row we can fit.
+    // >    0000000 | b0 b1 b2 b4 | a0 a1 a2 a3    <
+    //      ^-------^ ^-^           ^-^
+    //          |     byteCellWidth textCellWidth
+    //          |
+    //     addressTextAndDividerWidth
+    //  ^--^   +     ^----------------------------^
+    //      widthToFill
 
     const firstByteCell = this.shadowRoot.querySelector('.byte-cell');
     const textCell = this.shadowRoot.querySelector('.text-cell');
     const divider = this.shadowRoot.querySelector('.divider');
     const rowElement = this.shadowRoot.querySelector('.row');
+    const addressText = this.shadowRoot.querySelector('.address');
 
-    if (!firstByteCell || !textCell || !divider || !rowElement) {
+    if (!firstByteCell || !textCell || !divider || !rowElement || !addressText) {
       this.#numBytesInRow = BYTE_GROUP_SIZE;
       this.#numRows = 1;
       return;
@@ -140,16 +143,18 @@ export class LinearMemoryViewer extends HTMLElement {
 
     // Calculate the width to fill.
     const dividerWidth = divider.getBoundingClientRect().width;
-    // this.clientWidth is rounded, while the other values are not. Subtract one to make
+    const addressTextAndDividerWidth =
+        firstByteCell.getBoundingClientRect().left - addressText.getBoundingClientRect().left;
+
+    // this.clientWidth is rounded, while the other values are not. Subtract 1 to make
     // sure that we correctly calculate the widths.
-    const widthToFill = this.clientWidth - 1 -
-        (firstByteCell.getBoundingClientRect().left - this.getBoundingClientRect().left) - dividerWidth;
+    const widthToFill = this.clientWidth - 1 - addressTextAndDividerWidth - dividerWidth;
+
     if (widthToFill < groupWidth) {
       this.#numBytesInRow = BYTE_GROUP_SIZE;
       this.#numRows = 1;
       return;
     }
-
     this.#numBytesInRow = Math.floor(widthToFill / groupWidth) * BYTE_GROUP_SIZE;
     this.#numRows = Math.floor(this.clientHeight / rowElement.clientHeight);
   }

package/front_end/ui/components/linear_memory_inspector/linearMemoryInspector.css

@@ -19,6 +19,10 @@
   padding: 9px 12px 9px 7px;
 }
 
+devtools-linear-memory-inspector-viewer {
+  justify-content: center;
+}
+
 devtools-linear-memory-inspector-navigator + devtools-linear-memory-inspector-viewer {
   margin-top: 12px;
 }

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

@@ -18,6 +18,7 @@ export interface PreviewToggleData {
   helperText: string|null;
   feedbackURL: string|null;
   experiment: Root.Runtime.ExperimentName;
+  learnMoreURL?: string;
   onChangeCallback?: (checked: boolean) => void;
 }
 
@@ -26,6 +27,14 @@ const UIStrings = {
   *@description Link text the user can click to provide feedback to the team.
   */
   previewTextFeedbackLink: 'Send us your feedback.',
+  /**
+  *@description Link text the user can click to provide feedback to the team.
+  */
+  shortFeedbackLink: 'Send feedback',
+  /**
+  *@description Link text the user can click to see documentation.
+  */
+  learnMoreLink: 'Learn More',
 };
 
 const str_ = i18n.i18n.registerUIStrings('ui/components/panel_feedback/PreviewToggle.ts', UIStrings);
@@ -38,6 +47,7 @@ export class PreviewToggle extends HTMLElement {
   #name = '';
   #helperText: string|null = null;
   #feedbackURL: string|null = null;
+  #learnMoreURL: string|undefined;
   #experiment: string = '';
   #onChangeCallback?: (checked: boolean) => void;
 
@@ -49,6 +59,7 @@ export class PreviewToggle extends HTMLElement {
     this.#name = data.name;
     this.#helperText = data.helperText;
     this.#feedbackURL = data.feedbackURL;
+    this.#learnMoreURL = data.learnMoreURL;
     this.#experiment = data.experiment;
     this.#onChangeCallback = data.onChangeCallback;
     this.#render();
@@ -60,20 +71,30 @@ export class PreviewToggle extends HTMLElement {
     // 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>`
+      <div class="container">
+        <div class="checkbox-line">
+          <label 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}
+          </label>
+          ${this.#feedbackURL && !this.#helperText
+            ? html`<div class="feedback"><x-link class="x-link" href=${this.#feedbackURL}>${i18nString(UIStrings.shortFeedbackLink)}</x-link></div>`
+            : nothing}
+        </div>
+        ${this.#learnMoreURL
+          ? html`<x-link class="x-link" href=${this.#learnMoreURL}>${i18nString(UIStrings.learnMoreLink)}</x-link>`
           : nothing}
+        <div class="helper">
+          ${this.#helperText && this.#feedbackURL
+            ? html`<p>${this.#helperText} <x-link class="x-link" href=${this.#feedbackURL}>${i18nString(UIStrings.previewTextFeedbackLink)}</x-link></p>`
+            : nothing}
+        </div>
       </div>`,
       this.#shadow,
       {

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

@@ -18,7 +18,27 @@
   font-style: italic;
 }
 
-x-link { /* stylelint-disable-line selector-type-no-unknown */
+.feedback {
+  text-align: right;
+}
+
+.checkbox-line {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.container {
+  padding: 4px;
+}
+
+.x-link {
   color: var(--color-primary);
   text-decoration-line: underline;
+  padding: 4px;
+}
+
+.feedback .x-link {
+  color: var(--color-text-secondary);
 }

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

@@ -236,7 +236,7 @@ function getTooltipSpace(): DOMRect {
   return sideBarElement.getBoundingClientRect();
 }
 
-export function baseConfiguration(text: string): CM.Extension {
+export function baseConfiguration(text: string|CM.Text): CM.Extension {
   return [
     theme(),
     CM.highlightSpecialChars(),
@@ -252,7 +252,7 @@ export function baseConfiguration(text: string): CM.Extension {
     bracketMatching.instance(),
     indentUnit.instance(),
     CM.Prec.lowest(CM.EditorView.contentAttributes.of({'aria-label': i18nString(UIStrings.codeEditor)})),
-    detectLineSeparator(text),
+    text instanceof CM.Text ? [] : detectLineSeparator(text),
     CM.tooltips({
       tooltipSpace: getTooltipSpace,
     }),

package/front_end/ui/legacy/ContextMenu.ts

@@ -111,7 +111,7 @@ export class Item {
         };
       }
       case 'checkbox': {
-        return {
+        const result = {
           type: 'checkbox',
           id: this.idInternal,
           label: this.label,
@@ -119,6 +119,11 @@ export class Item {
           enabled: !this.disabled,
           subItems: undefined,
         };
+        if (this.customElement) {
+          const resultAsSoftContextMenuItem = (result as SoftContextMenuDescriptor);
+          resultAsSoftContextMenuItem.element = (this.customElement as Element);
+        }
+        return result;
       }
     }
     throw new Error('Invalid item type:' + this.typeInternal);
@@ -187,12 +192,16 @@ export class Section {
     return item;
   }
 
-  appendCheckboxItem(label: string, handler: () => void, checked?: boolean, disabled?: boolean): Item {
+  appendCheckboxItem(
+      label: string, handler: () => void, checked?: boolean, disabled?: boolean, additionalElement?: Element): Item {
     const item = new Item(this.contextMenu, 'checkbox', label, disabled, checked);
     this.items.push(item);
     if (this.contextMenu) {
       this.contextMenu.setHandler(item.id(), handler);
     }
+    if (additionalElement) {
+      item.customElement = additionalElement;
+    }
     return item;
   }
 }

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

@@ -105,7 +105,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
     UI.View.SimpleView) implements UI.SearchableView.Searchable, UI.SearchableView.Replaceable, Transformer {
   private readonly lazyContent: () => Promise<TextUtils.ContentProvider.DeferredContent>;
   private prettyInternal: boolean;
-  private rawContent: string|null;
+  private rawContent: string|CodeMirror.Text|null;
   private formattedContentPromise: Promise<Formatter.ScriptFormatter.FormattedContent>|null;
   private formattedMap: Formatter.ScriptFormatter.FormatterSourceMapping|null;
   private readonly prettyToggle: UI.Toolbar.ToolbarToggle;
@@ -203,7 +203,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
     });
   }
 
-  protected editorConfiguration(doc: string): CodeMirror.Extension {
+  protected editorConfiguration(doc: string|CodeMirror.Text): CodeMirror.Extension {
     return [
       CodeMirror.EditorView.updateListener.of(update => this.dispatchEventToListeners(Events.EditorUpdate, update)),
       TextEditor.Config.baseConfiguration(doc),
@@ -459,7 +459,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
         const worker = Common.Worker.WorkerWrapper.fromURL(
             new URL('../../../../entrypoints/wasmparser_worker/wasmparser_worker-entrypoint.js', import.meta.url));
         const promise = new Promise<{
-          source: string,
+          lines: string[],
           offsets: number[],
           functionBodyOffsets: {
             start: number,
@@ -492,8 +492,8 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
         });
         worker.postMessage({method: 'disassemble', params: {content}});
         try {
-          const {source, offsets, functionBodyOffsets} = await promise;
-          this.rawContent = content = source;
+          const {lines, offsets, functionBodyOffsets} = await promise;
+          this.rawContent = content = CodeMirror.Text.of(lines);
           this.wasmDisassemblyInternal = new Common.WasmDisassembly.WasmDisassembly(offsets, functionBodyOffsets);
         } catch (e) {
           this.rawContent = content = error = e.message;
@@ -528,8 +528,8 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
     if (this.formattedContentPromise) {
       return this.formattedContentPromise;
     }
-    this.formattedContentPromise =
-        Formatter.ScriptFormatter.formatScriptContent(this.contentType, this.rawContent || '');
+    const content = this.rawContent instanceof CodeMirror.Text ? this.rawContent.sliceString(0) : this.rawContent || '';
+    this.formattedContentPromise = Formatter.ScriptFormatter.formatScriptContent(this.contentType, content);
     return this.formattedContentPromise;
   }
 
@@ -648,7 +648,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
     this.prettyToggle.setEnabled(true);
   }
 
-  private simplifyMimeType(content: string, mimeType: string): string {
+  private simplifyMimeType(content: string|CodeMirror.Text, mimeType: string): string {
     if (!mimeType) {
       return '';
     }
@@ -663,8 +663,11 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
       return 'text/jsx';
     }
     // A hack around the fact that files with "php" extension might be either standalone or html embedded php scripts.
-    if (mimeType === 'text/x-php' && content.match(/\<\?.*\?\>/g)) {
-      return 'application/x-httpd-php';
+    if (mimeType === 'text/x-php') {
+      const strContent = typeof content === 'string' ? content : content.sliceString(0);
+      if (strContent.match(/\<\?.*\?\>/g)) {
+        return 'application/x-httpd-php';
+      }
     }
     if (mimeType === 'application/wasm') {
       // text/webassembly is not a proper MIME type, but CodeMirror uses it for WAT syntax highlighting.
@@ -674,7 +677,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
     return mimeType;
   }
 
-  protected async getLanguageSupport(content: string): Promise<CodeMirror.Extension> {
+  protected async getLanguageSupport(content: string|CodeMirror.Text): Promise<CodeMirror.Extension> {
     const mimeType = this.simplifyMimeType(content, this.contentType) || '';
     const languageDesc = await CodeHighlighter.CodeHighlighter.languageFromMIME(mimeType);
     if (!languageDesc) {
@@ -694,7 +697,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
     this.textEditor.dispatch({effects: config.language.reconfigure(langExtension)});
   }
 
-  async setContent(content: string): Promise<void> {
+  async setContent(content: string|CodeMirror.Text): Promise<void> {
     this.muteChangeEventsForSetContent = true;
     const {textEditor} = this;
     const wasLoaded = this.loadedInternal;

package/package.json

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "vpython third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.1011873"
+  "version": "1.0.1013237"
 }

package/scripts/build/ninja/devtools_entrypoint.gni

@@ -121,9 +121,9 @@ template("devtools_entrypoint") {
 
       is_web_worker = _is_web_worker
 
-      if (defined(use_rbe) && use_rbe && defined(devtools_use_rbe) &&
-          devtools_use_rbe) {
-        use_rbe = false
+      if (defined(use_remoteexec) && use_remoteexec &&
+          defined(devtools_use_remoteexec) && devtools_use_remoteexec) {
+        use_remoteexec = false
       }
     }
 

package/scripts/build/ninja/wasm.gni

@@ -0,0 +1,25 @@
+# Copyright 2022 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("./copy.gni")
+
+template("wasm_module") {
+  assert(defined(invoker.sources), "Need sources in $target_name")
+  action_foreach(target_name) {
+    script = devtools_location_prepend + "scripts/build/wasm-as.py"
+    outputs = [
+      "$target_gen_dir/{{source_name_part}}.wasm",
+      "$target_gen_dir/{{source_name_part}}.wasm.map",
+      "$target_gen_dir/{{source_name_part}}.wasm.map.json",
+    ]
+    args = [
+      "{{source}}",
+      rebase_path("$target_gen_dir/{{source_name_part}}.wasm", root_build_dir),
+    ]
+    sources = invoker.sources
+  }
+
+  copy_to_gen(target_name + "_sources") {
+    sources = invoker.sources
+  }
+}

package/scripts/build/wasm-as.py

@@ -0,0 +1,87 @@
+# Copyright 2022 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 argparse
+import json
+from os import path
+import platform
+import re
+import subprocess
+import sys
+
+REPO_DIR = path.join(path.dirname(__file__), '..', '..')
+
+
+def llvm_readobj():
+    binary_name = {
+        'Darwin': 'llvm-readobj',
+        'Linux': 'llvm-readobj',
+        'Windows': 'llvm-readobj.exe',
+    }[platform.system()]
+    return path.realpath(
+        path.join(REPO_DIR, 'third_party', 'emscripten-releases', 'install',
+                  'bin', binary_name))
+
+
+def wasm_as():
+    binary_name = {
+        'Darwin': 'wasm-as',
+        'Linux': 'wasm-as',
+        'Windows': 'wasm-as.exe',
+    }[platform.system()]
+    return path.realpath(
+        path.join(REPO_DIR, 'third_party', 'emscripten-releases', 'install',
+                  'bin', binary_name))
+
+
+def script_main(args):
+    parser = argparse.ArgumentParser()
+    parser.add_argument('input')
+    parser.add_argument('output')
+    options = parser.parse_args(args)
+
+    sourcemap = f'{options.output}.map'
+    subprocess.check_call([
+        wasm_as(), options.input, '-g', '-sm', sourcemap, '-o', options.output
+    ])
+
+    wasm_obj_headers = subprocess.check_output([
+        llvm_readobj(),
+        '-e',
+        # TODO(crbug.com/1328729): use JSON output as soon as that's supported for wasm
+        # '--elf-output-style=JSON',
+        options.output
+    ])
+    (size, offset) = re.search(
+        b'Section {[^}]*Type: CODE[^}]*Size: (\d*)[^}]*Offset: (\d*)[^}]*}',
+        wasm_obj_headers).groups()
+
+    # readobj reports as offset the location of the first byte of the header.
+    # Our offsets are relative to the first byte of the section though, so
+    # calculate the offset manually. The header is composed of one byte for the
+    # section id, and an leb128 value for the length.
+    size = int(size)
+    leb_len = 0
+    while size > 0:
+        size >>= 7
+        leb_len += 1
+    offset = int(offset) + 1 + leb_len
+
+    node = path.realpath(path.join(REPO_DIR, 'third_party', 'node', 'node.py'))
+    sourcemap2json = path.realpath(
+        path.join(REPO_DIR, 'scripts', 'build', 'wasm_sourcemap.mjs'))
+    sourcemap_contents = subprocess.check_output([
+        sys.executable, node, '--output', sourcemap2json, sourcemap,
+        '%s' % (offset)
+    ])
+
+    json_file = f'{options.output}.map.json'
+    with open(json_file, 'wb') as output:
+        output.write(sourcemap_contents)
+
+    return 0
+
+
+if __name__ == '__main__':
+    sys.exit(script_main(sys.argv[1:]))

package/scripts/build/wasm_sourcemap.mjs

@@ -0,0 +1,22 @@
+// Copyright 2022 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 fs from 'fs';
+import * as sourceMap from 'source-map';
+
+if (process.argv.length !== 4) {
+  throw new Error(`usage: ${process.argv[1]} <input.map> <offset>`);
+}
+
+const offset = Number(process.argv[3] || 0);
+const sourceMapContents = JSON.parse(fs.readFileSync(process.argv[2], 'utf-8'));
+const sourceMapConsumer = new sourceMap.SourceMapConsumer(sourceMapContents);
+
+const sourceMappings = [];
+sourceMapConsumer.eachMapping(({source, generatedLine, generatedColumn, originalLine, originalColumn}) => {
+  const bytecodeOffset = generatedColumn - offset;
+  sourceMappings.push({source, generatedLine, generatedColumn, originalLine, originalColumn, bytecodeOffset});
+});
+
+console.log(JSON.stringify(sourceMappings));

package/scripts/eslint_rules/lib/lit_template_result_or_nothing.js

@@ -95,6 +95,9 @@ module.exports = {
 
     function checkTSTypeAnnotationForPotentialIssue(node) {
       const annotation = node.typeAnnotation;
+      if (!annotation) {
+        return;
+      }
       if (annotation.type === 'TSUnionType') {
         // matches foo(): X|Y
         checkUnionReturnTypeForLit(annotation);
@@ -137,6 +140,9 @@ module.exports = {
       },
       // Match values in interfaces or types.
       TSPropertySignature(node) {
+        if (!node.typeAnnotation) {
+          return;
+        }
         checkTSTypeAnnotationForPotentialIssue(node.typeAnnotation);
       },
     };