chrome-devtools-frontend 1.0.1703574 → 1.0.1705227

package/front_end/ui/legacy/README.md

@@ -73,11 +73,11 @@ UI.ActionRegistration.registerActionExtension({
   bindings: [
     {
       shortcut: 'Ctrl+E',
-      platform: UI.ActionRegistration.Platforms.WindowsLinux,
+      platform: UI.ActionRegistration.Platforms.WINDOWS_LINUX,
     },
     {
       shortcut: 'Meta+E',
-      platform: UI.ActionRegistration.Platforms.Mac,
+      platform: UI.ActionRegistration.Platforms.MAC,
     },
   ],
 });
@@ -87,7 +87,7 @@ UI.ActionRegistration.registerActionExtension({
 
 #### Context types
 The `contextTypes` property determines the context under which the action is available.
-A context is defined as set 'flavors' or classes, which usually represent views, that are added and removed to the context as the user interacts with the application (e.g when the user moves across views).
+A context is defined as set of 'flavors' or classes, which usually represent views, that are added and removed to the context as the user interacts with the application (e.g when the user moves across views).
 (See [`UI.Context`](./Context.js)).
 Therefore, an action can only be triggered when one of its respective context types is visible.
 These flavors can be retrieved invoking the method `flavors` inside the class `UI.Context.Context`.
@@ -97,10 +97,10 @@ In this case, the action will always be available, regardless of which context i
 
 #### Key bindings
 
-The `bindings` property defines a `platform` and a `keybindSets` properties along with the keyboard shortcut itself.
+The `bindings` property defines `platform` and `keybindSets` properties along with the `shortcut` property containing the actual keyboard shortcut.
 These two extra properties add more conditions (additional to the ones introduced by the `contextTypes` property discussed before) that need to be fulfilled to trigger a particular action.
 
-- `platform` refers to the OS on which DevTools is running and can be either `mac` or `windows,linux`.
+- `platform` refers to the OS on which DevTools is running and can be either `MAC`, `WINDOWS_LINUX` or `WINDOWS`. (See [`UI.ActionRegistration`](./ActionRegistration.ts)).
 - `keybindSets` refers to the selected shortcut preset, which can be changed in `settings -> shortcuts -> “Match shortcuts from preset”`.
 A key binding will be used when the selected preset matches any of the keybind sets declared by the binding.
 
@@ -125,16 +125,16 @@ UI.ActionRegistration.registerActionExtension({
   contextTypes: undefined,
   bindings: [
     {
-      platform: 'windows,linux',
+      platform: UI.ActionRegistration.Platforms.WINDOWS_LINUX,
       shortcut: 'Esc',
     },
   ],
 });
 ```
 
-These two key bindings both allocate the same key for the `windows, linux` platform (the first one is global across platforms) in the `ElementsPanel` context (the second one is global across context types) and both are global across keybind sets.
+These two key bindings both allocate the same key for the `WINDOWS_LINUX` platform (the first one is global across platforms) in the `ElementsPanel` context (the second one is global across context types) and both are global across keybind sets.
 
-If key bindings were declared such that **at least one** of the three variables (`platform, contextTypes` and `keybindSets`) doesn't overlap, then no duplication would occur.
+If key bindings were declared such that **at least one** of the three variables (`platform`, `contextTypes` and `keybindSets`) doesn't overlap, then no duplication would occur.
 For example, the following is **not** a form of duplication:
 
 ```ts
@@ -147,7 +147,7 @@ UI.ActionRegistration.registerActionExtension({
   bindings: [
     {
       shortcut: 'Esc',
-      keybindSets: ['devToolsDefault'],
+      keybindSets: [UI.ActionRegistration.KeybindSet.DEVTOOLS_DEFAULT],
     },
   ],
 });
@@ -160,12 +160,12 @@ UI.ActionRegistration.registerActionExtension({
   contextTypes: undefined,
   bindings: [
     {
-      platform: 'windows,linux',
+      platform: UI.ActionRegistration.Platforms.WINDOWS_LINUX,
       shortcut: 'Esc',
-      keybindSets: ['vsCode'],
+      keybindSets: [UI.ActionRegistration.KeybindSet.VS_CODE],
     },
   ],
 });
 ```
 
-In this case, they keybindings are declared for different keybind sets and thus do not result in duplcation.
+In this case, the keybindings are declared for different keybind sets and thus do not result in duplication.

package/front_end/ui/legacy/components/data_grid/DataGridExporter.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Platform from '../../../../core/platform/platform.js';
+
 import type {DataGridImpl} from './DataGrid.js';
 
 /**
@@ -72,18 +74,10 @@ function escapeMarkdown(val: string): string {
       .replace(/\r?\n/g, '<br>');
 }
 
+/**
+ * Escapes a string for CSV export (handling both RFC 4180 quoting and
+ * prefixing spreadsheet formula characters like `=`, `+`, `-`, `@` with `'`).
+ */
 function escapeCSV(val: string): string {
-  let needQuotes = false;
-  let escaped = val;
-  if (escaped.includes('"')) {
-    escaped = escaped.replace(/"/g, '""');
-    needQuotes = true;
-  }
-  if (escaped.includes(',') || escaped.includes('\n') || escaped.includes('\r')) {
-    needQuotes = true;
-  }
-  if (needQuotes) {
-    return `"${escaped}"`;
-  }
-  return escaped;
+  return Platform.StringUtilities.escapeCsvCell(val);
 }

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

@@ -4,6 +4,7 @@
 import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Lit from '../../../../ui/lit/lit.js';
+import * as VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 
 import positionAreaEditorStyles from './positionAreaEditor.css.js';
@@ -19,21 +20,9 @@ const UIStrings = {
    */
   positionAreaGrid: 'position-area grid',
   /**
-   * @description Title for the block axis section in the position-area editor.
+   * @description Title for the mode section and accessible label for the mode radio button group in the position-area editor.
    */
-  block: 'Block',
-  /**
-   * @description Title for the inline axis section in the position-area editor.
-   */
-  inline: 'Inline',
-  /**
-   * @description Accessible label for the block axis mode radio button group.
-   */
-  blockAxisMode: 'Block axis mode',
-  /**
-   * @description Accessible label for the inline axis mode radio button group.
-   */
-  inlineAxisMode: 'Inline axis mode',
+  mode: 'Mode',
   /**
    * @description Label for physical mode radio button in the position-area editor.
    */
@@ -299,14 +288,15 @@ export interface ViewInput {
   onSelectStart: (x: number, y: number) => void;
   onSelect: (x: number, y: number) => void;
   onSelectEnd: (x?: number, y?: number) => void;
-  onModeChange: (axis: Axis, mode: Mode) => void;
-  onSelfChange: (axis: Axis, self: boolean) => void;
+  onModeChange: (mode: Mode) => void;
+  onSelfChange: (self: boolean) => void;
 }
 export type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
 export const DEFAULT_VIEW: View = (input, output, target) => {
   const container = {
     attributes: {
       tabindex: '0',
+      jslog: `${VisualLogging.dialog('position-area-editor').parent('mapped').track({keydown: 'Enter|Escape'})}`,
     },
   };
   if (!input.area) {
@@ -486,35 +476,42 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
 
   const blockAxis = input.area.primaryAxis === Axis.BLOCK ? input.area.first : input.area.second;
   const inlineAxis = input.area.primaryAxis === Axis.INLINE ? input.area.first : input.area.second;
+  const currentMode = blockAxis.mode === inlineAxis.mode ? blockAxis.mode : undefined;
+  const selfDisabled = (isGeneric(blockAxis) || blockAxis.mode === Mode.PHYSICAL) &&
+      (isGeneric(inlineAxis) || inlineAxis.mode === Mode.PHYSICAL);
+  const selfIndeterminate = !isGeneric(blockAxis) && !isGeneric(inlineAxis) && blockAxis.self !== inlineAxis.self;
+  const selfChecked = !selfIndeterminate && (blockAxis.self || inlineAxis.self);
 
-  function renderModeRadioGroup(axis: Axis, currentMode: Mode): Lit.TemplateResult {
+  function renderModeRadioGroup(currentMode: Mode|undefined): Lit.TemplateResult {
     const modes = [
       {mode: Mode.PHYSICAL, label: i18nString(UIStrings.physical)},
       {mode: Mode.COORDINATE, label: i18nString(UIStrings.coordinate)},
       {mode: Mode.LOGICAL, label: i18nString(UIStrings.logical)},
       {mode: Mode.AUTO, label: i18nString(UIStrings.auto)},
     ];
-    const axisModeLabel =
-        axis === Axis.BLOCK ? i18nString(UIStrings.blockAxisMode) : i18nString(UIStrings.inlineAxisMode);
 
+    // clang-format off
     return html`
-      <fieldset class="chip-radio-group" aria-label=${axisModeLabel}>
+      <fieldset class="chip-radio-group" aria-label=${i18nString(UIStrings.mode)}>
         ${modes.map(({mode, label}) => {
-      const id = `${axis}-mode-${mode}`;
-      return html`
-            <input
-              type="radio"
-              id=${id}
-              name="${axis}-mode"
-              value=${mode}
-              .checked=${currentMode === mode}
-              @change=${() => input.onModeChange(axis, mode)}
-            >
-            <label for=${id}>${label}</label>
-          `;
-    })}
-      </fieldset>
-    `;
+          const id = `mode-${mode}`;
+          return html`
+                <input
+                  type="radio"
+                  id=${id}
+                  name="mode"
+                  value=${mode}
+                  .checked=${currentMode === mode}
+                  @change=${() => input.onModeChange(mode)}
+                >
+                <label
+                  for=${id}
+                  jslog=${VisualLogging.toggle(mode).track({click: true})}
+                >${label}</label>
+              `;
+          })}
+      </fieldset>`;
+    // clang-format on
   }
 
   // clang-format off
@@ -531,6 +528,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
         aria-label=${i18nString(UIStrings.positionAreaGrid)}
         aria-description=${i18nString(UIStrings.positionAreaGridDescription)}
         aria-multiselectable="true"
+        jslog=${VisualLogging.canvas('position-area-grid').track({click: true, drag: true, keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Enter|Space'})}
         data-x-start=${x.start} data-x-end=${x.end} data-y-start=${y.start} data-y-end=${y.end}
         @pointerdown=${onPointerDown}
         @pointermove=${onPointerMove}
@@ -558,27 +556,17 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     <div class=position-area-controls>
       <div class=axis-section>
         <div class=axis-header>
-          <span class=axis-title>${i18nString(UIStrings.block)}</span>
-          <devtools-checkbox
-            .checked=${blockAxis.self}
-            ?disabled=${isGeneric(blockAxis)}
-            @change=${(e: Event) => input.onSelfChange(Axis.BLOCK, (e.target as UI.UIUtils.CheckboxLabel).checked)}>
-            <span class="self-checkbox-label source-code">self</span>
-          </devtools-checkbox>
-        </div>
-        ${renderModeRadioGroup(Axis.BLOCK, blockAxis.mode)}
-      </div>
-      <div class=axis-section>
-        <div class=axis-header>
-          <span class=axis-title>${i18nString(UIStrings.inline)}</span>
+          <span class=axis-title>${i18nString(UIStrings.mode)}</span>
           <devtools-checkbox
-            .checked=${inlineAxis.self}
-            ?disabled=${isGeneric(inlineAxis)}
-            @change=${(e: Event) => input.onSelfChange(Axis.INLINE, (e.target as UI.UIUtils.CheckboxLabel).checked)}>
+            .checked=${selfChecked}
+            .indeterminate=${selfIndeterminate}
+            ?disabled=${selfDisabled}
+            jslog=${VisualLogging.toggle('self').track({change: true})}
+            @change=${(e: Event) => input.onSelfChange((e.target as UI.UIUtils.CheckboxLabel).checked)}>
             <span class="self-checkbox-label source-code">self</span>
           </devtools-checkbox>
         </div>
-        ${renderModeRadioGroup(Axis.INLINE, inlineAxis.mode)}
+        ${renderModeRadioGroup(currentMode)}
       </div>
     </div>
     `,
@@ -725,10 +713,10 @@ export class PositionAreaEditor extends PositionAreaEditorBase {
           other.mode = mode === Mode.COORDINATE ? Mode.COORDINATE : (other.self ? Mode.COORDINATE : Mode.PHYSICAL);
         }
       } else {
+        const self = current.self || other.self;
+        current.self = !isGeneric(current) && self;
         other.mode = mode;
-        if (!isGeneric(current)) {
-          other.self = current.self;
-        }
+        other.self = !isGeneric(other) && self;
       }
     } else {
       other.mode = mode;
@@ -779,8 +767,14 @@ export class PositionAreaEditor extends PositionAreaEditorBase {
       onSelectStart: this.#startSelection.bind(this),
       onSelect: this.#select.bind(this),
       onSelectEnd: this.#finishSelection.bind(this),
-      onModeChange: this.#setAxisMode.bind(this),
-      onSelfChange: this.#setAxisSelf.bind(this),
+      onModeChange: (mode: Mode) => {
+        this.#setAxisMode(Axis.BLOCK, mode);
+        this.#setAxisMode(Axis.INLINE, mode);
+      },
+      onSelfChange: (self: boolean) => {
+        this.#setAxisSelf(Axis.BLOCK, self);
+        this.#setAxisSelf(Axis.INLINE, self);
+      },
     },
                undefined, this.contentElement);
   }

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

@@ -1,7 +1,6 @@
 // Copyright 2021 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
 
 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
@@ -31,13 +30,15 @@
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+import '../../../kit/kit.js';
+
 import * as Common from '../../../../core/common/common.js';
 import * as Host from '../../../../core/host/host.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as TextUtils from '../../../../core/text_utils/text_utils.js';
 import * as Workspace from '../../../../models/workspace/workspace.js';
-import {createIcon} from '../../../kit/kit.js';
+import {html, render} from '../../../lit/lit.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 
@@ -90,6 +91,54 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/source_frame/ImageView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export interface ViewInput {
+  url: Platform.DevToolsPath.UrlString;
+  imageSrc: string|null;
+  isUnavailable: boolean;
+  onImageLoad: (event: Event) => void;
+  onContextMenu: (event: Event) => void;
+}
+
+export type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+// clang-format off
+export const DEFAULT_VIEW: View = (input, _output, target) => {
+  render(html`
+    <style>${imageViewStyles}</style>
+    <div class="image">
+      ${input.imageSrc ? html`
+        <img
+          class="resource-image-view"
+          src=${input.imageSrc}
+          alt=${i18nString(UIStrings.imageFromS, {PH1: input.url})}
+          @load=${input.onImageLoad}
+          @contextmenu=${{handleEvent: input.onContextMenu, capture: true}}
+        >` : html`
+        <img
+          class="resource-image-view"
+          alt=${i18nString(UIStrings.imageFromS, {PH1: input.url})}
+          hidden
+        >`}
+      <devtools-link
+        class="resource-image-unavailable ${input.isUnavailable ? '' : 'hidden'}"
+        href=${input.url}
+      >
+        <devtools-icon name="open-externally"></devtools-icon>
+        ${i18nString(UIStrings.thisImageIsTooBig)}
+      </devtools-link>
+    </div>
+  `, target, {
+    container: {
+      classes: ['image-view'],
+      attributes: {
+        tabindex: '-1',
+      },
+    },
+  });
+};
+// clang-format on
+
 export class ImageView extends UI.View.SimpleView {
   private url: Platform.DevToolsPath.UrlString;
   private parsedURL: Common.ParsedURL.ParsedURL;
@@ -100,47 +149,58 @@ export class ImageView extends UI.View.SimpleView {
   private readonly dimensionsLabel: UI.Toolbar.ToolbarText;
   private readonly aspectRatioLabel: UI.Toolbar.ToolbarText;
   private readonly mimeTypeLabel: UI.Toolbar.ToolbarText;
-  private readonly container: HTMLElement;
-  private imagePreviewElement: HTMLImageElement;
-  private imageUnavailableElement: HTMLElement;
   private cachedContent?: TextUtils.ContentData.ContentData;
-  constructor(mimeType: string, contentProvider: TextUtils.ContentProvider.ContentProvider) {
+  readonly #view: View;
+  #imageSrc: string|null = null;
+  #isUnavailable = false;
+  #loadResolve?: () => void;
+
+  constructor(mimeType: string, contentProvider: TextUtils.ContentProvider.ContentProvider, view: View = DEFAULT_VIEW) {
     super({
       title: i18nString(UIStrings.image),
       viewId: 'image',
       jslog: `${VisualLogging.pane('image-view')}`,
     });
-    this.registerRequiredCSS(imageViewStyles);
-    this.element.tabIndex = -1;
-    this.element.classList.add('image-view');
+    this.#view = view;
     this.url = contentProvider.contentURL();
     this.parsedURL = new Common.ParsedURL.ParsedURL(this.url);
     this.contentProvider = contentProvider;
     this.uiSourceCode = contentProvider instanceof Workspace.UISourceCode.UISourceCode ? contentProvider : null;
     if (this.uiSourceCode) {
-      this.uiSourceCode.addEventListener(
-          Workspace.UISourceCode.Events.WorkingCopyCommitted, this.workingCopyCommitted, this);
-      new UI.DropTarget.DropTarget(
-          this.element, [UI.DropTarget.Type.ImageFile, UI.DropTarget.Type.URI], i18nString(UIStrings.dropImageFileHere),
-          this.handleDrop.bind(this));
+      this.uiSourceCode.addEventListener(Workspace.UISourceCode.Events.WorkingCopyCommitted, this.workingCopyCommitted,
+                                         this);
+      new UI.DropTarget.DropTarget(this.element, [UI.DropTarget.Type.ImageFile, UI.DropTarget.Type.URI],
+                                   i18nString(UIStrings.dropImageFileHere), this.handleDrop.bind(this));
     }
     this.sizeLabel = new UI.Toolbar.ToolbarText();
     this.dimensionsLabel = new UI.Toolbar.ToolbarText();
     this.aspectRatioLabel = new UI.Toolbar.ToolbarText();
     this.mimeTypeLabel = new UI.Toolbar.ToolbarText(mimeType);
-    this.container = this.element.createChild('div', 'image');
-    this.imagePreviewElement = this.container.createChild('img', 'resource-image-view');
-    this.imagePreviewElement.addEventListener('contextmenu', this.contextMenu.bind(this), true);
+    this.performUpdate();
+  }
 
-    const link = document.createElement('devtools-link');
-    link.setAttribute('href', this.url);
-    link.classList.add('resource-image-unavailable', 'hidden');
-    link.appendChild(createIcon('open-externally'));
-    link.appendChild(document.createTextNode(i18nString(UIStrings.thisImageIsTooBig)));
-    this.container.appendChild(link);
-    this.imageUnavailableElement = link;
+  override performUpdate(): void {
+    this.#view(
+        {
+          url: this.url,
+          imageSrc: this.#imageSrc,
+          isUnavailable: this.#isUnavailable,
+          onImageLoad: this.#onImageLoad,
+          onContextMenu: this.contextMenu.bind(this),
+        },
+        undefined,
+        this.contentElement,
+    );
   }
 
+  #onImageLoad = (event: Event): void => {
+    const img = event.target as HTMLImageElement;
+    this.dimensionsLabel.setText(i18nString(UIStrings.dD, {PH1: img.naturalWidth, PH2: img.naturalHeight}));
+    this.aspectRatioLabel.setText(Platform.NumberUtilities.aspectRatio(img.naturalWidth, img.naturalHeight));
+    this.#loadResolve?.();
+    this.#loadResolve = undefined;
+  };
+
   override async toolbarItems(): Promise<UI.Toolbar.ToolbarItem[]> {
     await this.updateContentIfNeeded();
     return [
@@ -156,13 +216,14 @@ export class ImageView extends UI.View.SimpleView {
 
   override wasShown(): void {
     super.wasShown();
+    this.requestUpdate();
     void this.updateContentIfNeeded();
   }
 
   override disposeView(): void {
     if (this.uiSourceCode) {
-      this.uiSourceCode.removeEventListener(
-          Workspace.UISourceCode.Events.WorkingCopyCommitted, this.workingCopyCommitted, this);
+      this.uiSourceCode.removeEventListener(Workspace.UISourceCode.Events.WorkingCopyCommitted,
+                                            this.workingCopyCommitted, this);
     }
   }
 
@@ -179,37 +240,35 @@ export class ImageView extends UI.View.SimpleView {
     this.cachedContent = content;
     const imageSrc = content.asImagePreviewUrl();
     if (imageSrc === null) {
-      this.imageUnavailableElement.classList.remove('hidden');
+      this.#isUnavailable = true;
+      this.#imageSrc = null;
+      this.performUpdate();
       return;
     }
-    this.imageUnavailableElement.classList.add('hidden');
-    const loadPromise = new Promise(x => {
-      this.imagePreviewElement.onload = x;
+    this.#isUnavailable = false;
+    const loadPromise = new Promise<void>(resolve => {
+      this.#loadResolve = resolve;
     });
-    this.imagePreviewElement.src = imageSrc;
-    this.imagePreviewElement.alt = i18nString(UIStrings.imageFromS, {PH1: this.url});
+    this.#imageSrc = imageSrc;
     const size = content.isTextContent ? content.text.length : Platform.StringUtilities.base64ToSize(content.base64);
     this.sizeLabel.setText(i18n.ByteUtilities.bytesToString(size));
+    this.performUpdate();
     await loadPromise;
-    this.dimensionsLabel.setText(i18nString(
-        UIStrings.dD, {PH1: this.imagePreviewElement.naturalWidth, PH2: this.imagePreviewElement.naturalHeight}));
-    this.aspectRatioLabel.setText(Platform.NumberUtilities.aspectRatio(
-        this.imagePreviewElement.naturalWidth, this.imagePreviewElement.naturalHeight));
   }
 
   private contextMenu(event: Event): void {
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
-    const parsedSrc = new Common.ParsedURL.ParsedURL(this.imagePreviewElement.src);
+    const parsedSrc = new Common.ParsedURL.ParsedURL(this.#imageSrc ?? '');
     if (!this.parsedURL.isDataURL()) {
       contextMenu.clipboardSection().appendItem(i18nString(UIStrings.copyImageUrl), this.copyImageURL.bind(this), {
         jslogContext: 'image-view.copy-image-url',
       });
     }
     if (parsedSrc.isDataURL()) {
-      contextMenu.clipboardSection().appendItem(
-          i18nString(UIStrings.copyImageAsDataUri), this.copyImageAsDataURL.bind(this), {
-            jslogContext: 'image-view.copy-image-as-data-url',
-          });
+      contextMenu.clipboardSection().appendItem(i18nString(UIStrings.copyImageAsDataUri),
+                                                this.copyImageAsDataURL.bind(this), {
+                                                  jslogContext: 'image-view.copy-image-as-data-url',
+                                                });
     }
 
     contextMenu.clipboardSection().appendItem(i18nString(UIStrings.openImageInNewTab), this.openInNewTab.bind(this), {
@@ -223,7 +282,7 @@ export class ImageView extends UI.View.SimpleView {
   }
 
   private copyImageAsDataURL(): void {
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(this.imagePreviewElement.src);
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(this.#imageSrc ?? '');
   }
 
   private copyImageURL(): void {

package/front_end/ui/legacy/components/utils/Linkifier.ts

@@ -593,8 +593,7 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
     const lineNumber = options.lineNumber;
     const columnNumber = options.columnNumber;
     const showColumnNumber = options.showColumnNumber;
-    const isPrivileged = Common.ParsedURL.schemeIs(url, 'chrome:') || Common.ParsedURL.schemeIs(url, 'file:') ||
-        Common.ParsedURL.schemeIs(url, 'devtools:');
+    const isPrivileged = Common.ParsedURL.isPrivilegedScheme(url);
     const preventClick = options.preventClick;
     const maxLength = options.maxLength || UI.UIUtils.MaxLengthForDisplayedURLs;
     const bypassURLTrimming = options.bypassURLTrimming;

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -1058,6 +1058,7 @@ export const knownContextValues: Set<string> = new Set([
   'cookies',
   'cookies-data',
   'cookies-for-frame',
+  'coordinate',
   'copy',
   'copy-ai-response',
   'copy-all-as-curl',
@@ -1089,12 +1090,14 @@ export const knownContextValues: Set<string> = new Set([
   'copy-css-declaration-as-js',
   'copy-declaration',
   'copy-element',
+  'copy-element-html',
   'copy-file-name',
   'copy-full-xpath',
   'copy-initiator-url',
   'copy-js-path',
   'copy-key',
   'copy-link-address',
+  'copy-message',
   'copy-object',
   'copy-outer-html',
   'copy-payload',
@@ -2716,6 +2719,7 @@ export const knownContextValues: Set<string> = new Set([
   'location',
   'location-dialog',
   'log-level',
+  'logical',
   'logpoint',
   'long',
   'long-interaction',
@@ -3203,6 +3207,7 @@ export const knownContextValues: Set<string> = new Set([
   'perspective',
   'perspective-origin',
   'phone',
+  'physical',
   'picture-in-picture',
   'pill',
   'ping',
@@ -3253,6 +3258,8 @@ export const knownContextValues: Set<string> = new Set([
   'position',
   'position-anchor',
   'position-area',
+  'position-area-editor',
+  'position-area-grid',
   'position-fallback',
   'position-try',
   'position-try-fallbacks',

package/package.json

@@ -91,5 +91,5 @@
     "yargs": "18.1.0",
     "yargs-unparser": "2.0.0"
   },
-  "version": "1.0.1703574"
+  "version": "1.0.1705227"
 }