chrome-devtools-frontend 1.0.1011333 → 1.0.1012587

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/data_grid/dataGrid.css

@@ -25,7 +25,7 @@
   bottom: 0;
   left: 0;
   right: 0;
-  overflow: overlay;
+  overflow: scroll;
   transform: translateZ(0);
   background-color: var(--color-background);
 }

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.1011333"
+  "version": "1.0.1012587"
 }

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);
       },
     };