chrome-devtools-frontend 1.0.1543472 → 1.0.1545096

package/front_end/ui/helpers/OpenInNewTab.ts

@@ -0,0 +1,87 @@
+// 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.
+
+/*
+ * Copyright (C) 2011 Google Inc.  All rights reserved.
+ * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
+ * Copyright (C) 2007 Matt Lilek (pewtermoose@gmail.com).
+ * Copyright (C) 2009 Joseph Pecoraro
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+import * as Common from '../../core/common/common.js';
+import * as Host from '../../core/host/host.js';
+import * as Platform from '../../core/platform/platform.js';
+import * as Root from '../../core/root/root.js';
+import * as SDK from '../../core/sdk/sdk.js';
+
+/**
+ * Opens the given `url` in a new Chrome tab.
+ *
+ * If the `url` is a Google owned documentation page (currently that includes
+ * `web.dev`, `developers.google.com`, and `developer.chrome.com`), the `url`
+ * will also be checked for UTM parameters:
+ *
+ * - If no `utm_source` search parameter is present, this method will add a new
+ *   search parameter `utm_source=devtools` to `url`.
+ * - If no `utm_campaign` search parameter is present, and DevTools is running
+ *   within a branded build, this method will add `utm_campaign=<channel>` to
+ *   the search parameters, with `<channel>` being the release channel of
+ *   Chrome ("stable", "beta", "dev", or "canary").
+ *
+ * @param url the URL to open in a new tab.
+ * @throws TypeError if `url` is not a valid URL.
+ * @see https://en.wikipedia.org/wiki/UTM_parameters
+ */
+export function openInNewTab(url: URL|string): void {
+  url = new URL(`${url}`);
+  // Navigating to a chrome:// link via a normal anchor doesn't work, so we "navigate"
+  // there using CDP.
+  if (Common.ParsedURL.schemeIs(url, 'chrome:')) {
+    const rootTarget = SDK.TargetManager.TargetManager.instance().rootTarget();
+    if (rootTarget === null) {
+      return;
+    }
+
+    void rootTarget.targetAgent().invoke_createTarget({url: url.toString()}).then(result => {
+      if (result.getError()) {
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(Platform.DevToolsPath.urlString`${url}`);
+      }
+    });
+  } else {
+    if (['developer.chrome.com', 'developers.google.com', 'web.dev'].includes(url.hostname)) {
+      if (!url.searchParams.has('utm_source')) {
+        url.searchParams.append('utm_source', 'devtools');
+      }
+      const {channel} = Root.Runtime.hostConfig;
+      if (!url.searchParams.has('utm_campaign') && typeof channel === 'string') {
+        url.searchParams.append('utm_campaign', channel);
+      }
+    }
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(Platform.DevToolsPath.urlString`${url}`);
+  }
+}

package/front_end/ui/helpers/helpers.ts

@@ -0,0 +1,5 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+export {openInNewTab} from './OpenInNewTab.js';

package/front_end/ui/i18n/i18n.ts

@@ -6,7 +6,9 @@
 
 import * as I18n from '../../core/i18n/i18n.js';
 import type * as ThirdPartyI18n from '../../third_party/i18n/i18n.js';
+import {Directives, html, type LitTemplate, nothing} from '../lit/lit.js';
 
+const {repeat} = Directives;
 /**
  * Returns a span element that may contains other DOM element as placeholders
  */
@@ -29,3 +31,17 @@ export function getFormatLocalizedString(
   }
   return element;
 }
+
+export function getFormatLocalizedStringTemplate(
+    registeredStrings: ThirdPartyI18n.LocalizedStringSet.RegisteredFileStrings, stringId: string,
+    placeholders: Record<string, Object>): LitTemplate {
+  const formatter = registeredStrings.getLocalizedStringSetFor(I18n.DevToolsLocale.DevToolsLocale.instance().locale)
+                        .getMessageFormatterFor(stringId);
+
+  return html`<span>${
+      repeat(
+          formatter.getAst(),
+          icuElement => icuElement.type === /* argumentElement */ 1 ? (placeholders[icuElement.value] ?? nothing) :
+              'value' in icuElement                                 ? String(icuElement.value) :
+                                                                      nothing)}</span>`;
+}

package/front_end/ui/legacy/ContextMenu.docs.ts

@@ -8,10 +8,11 @@ import {ContextMenu} from './legacy.js';
 
 const {html} = Lit;
 
-export async function render(container: HTMLElement) {
+export function render(container: HTMLElement) {
+  const menuDocs = container.createChild('div', 'menu-docs');
   const style = document.createElement('style');
   style.textContent = `
-      #container > div {
+      .menu-docs > div {
         width: var(--sys-size-34);
         padding: var(--sys-size-11);
         display: flex;
@@ -27,13 +28,13 @@ export async function render(container: HTMLElement) {
         }
       }
     `;
-  container.appendChild(style);
+  menuDocs.appendChild(style);
 
   const menuButtonSection = document.createElement('div');
   const menuButtonHeader = document.createElement('header');
   menuButtonHeader.textContent = 'DevTools menu button (lit-html)';
-  container.appendChild(menuButtonHeader);
-  container.appendChild(menuButtonSection);
+  menuDocs.appendChild(menuButtonHeader);
+  menuDocs.appendChild(menuButtonSection);
 
   Lit.render(
       html`
@@ -53,8 +54,8 @@ export async function render(container: HTMLElement) {
   simpleItemsSection.innerHTML = '<p>Right-click here</p>';
   const simpleItemsHeader = document.createElement('header');
   simpleItemsHeader.textContent = 'Various simple menu items (imperative API)';
-  container.appendChild(simpleItemsHeader);
-  container.appendChild(simpleItemsSection);
+  menuDocs.appendChild(simpleItemsHeader);
+  menuDocs.appendChild(simpleItemsSection);
 
   let checked = true;
   simpleItemsSection.addEventListener('contextmenu', onSimpleMenu);
@@ -93,8 +94,8 @@ export async function render(container: HTMLElement) {
   customSection.innerHTML = '<p>Right-click here</p>';
   const customSectionHeader = document.createElement('header');
   customSectionHeader.textContent = 'Custom sections (imperative API)';
-  container.appendChild(customSectionHeader);
-  container.appendChild(customSection);
+  menuDocs.appendChild(customSectionHeader);
+  menuDocs.appendChild(customSection);
 
   customSection.addEventListener('contextmenu', onCustomSectionMenu);
 
@@ -117,8 +118,8 @@ export async function render(container: HTMLElement) {
   subMenuSection.innerHTML = '<p>Right-click here</p>';
   const subMenuHeader = document.createElement('header');
   subMenuHeader.textContent = 'Sub menu (imperative API)';
-  container.appendChild(subMenuHeader);
-  container.appendChild(subMenuSection);
+  menuDocs.appendChild(subMenuHeader);
+  menuDocs.appendChild(subMenuSection);
 
   subMenuSection.addEventListener('contextmenu', onSubMenu);
 

package/front_end/ui/legacy/RadioButton.docs.ts

@@ -4,7 +4,7 @@
 
 import {UIUtils} from './legacy.js';
 
-export async function render(container: HTMLElement) {
+export function render(container: HTMLElement) {
   const styleElement = document.createElement('style');
   styleElement.textContent = 'fieldset { label { display: block; } }';
   container.appendChild(styleElement);

package/front_end/ui/legacy/SelectMenu.docs.ts

@@ -9,7 +9,7 @@ import {UIUtils} from './legacy.js';
 
 const {html} = Lit;
 
-export async function render(container: HTMLElement) {
+export function render(container: HTMLElement) {
   function createDivWithP(text: string): HTMLDivElement {
     const div = document.createElement('div');
     div.style.paddingLeft = '25px';

package/front_end/ui/legacy/Slider.docs.ts

@@ -4,7 +4,7 @@
 
 import {UIUtils} from './legacy.js';
 
-export async function render(container: HTMLElement) {
+export function render(container: HTMLElement) {
   function sliderExample({min, max, tabIndex, disabled}: {
     min: number,
     max: number,

package/front_end/ui/legacy/UIUtils.ts

@@ -40,7 +40,6 @@ 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 Root from '../../core/root/root.js';
 import * as Geometry from '../../models/geometry/geometry.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Buttons from '../components/buttons/buttons.js';
@@ -1923,7 +1922,7 @@ function updateWidgetfocusWidgetForNode(node: Node|null): void {
       break;
     }
 
-    parentWidget.defaultFocusedChild = widget;
+    parentWidget.setDefaultFocusedChild(widget);
     widget = parentWidget;
   }
 }
@@ -1989,38 +1988,6 @@ export function measuredScrollbarWidth(document?: Document|null): number {
   return cachedMeasuredScrollbarWidth;
 }
 
-/**
- * Opens the given `url` in a new Chrome tab.
- *
- * If the `url` is a Google owned documentation page (currently that includes
- * `web.dev`, `developers.google.com`, and `developer.chrome.com`), the `url`
- * will also be checked for UTM parameters:
- *
- * - If no `utm_source` search parameter is present, this method will add a new
- *   search parameter `utm_source=devtools` to `url`.
- * - If no `utm_campaign` search parameter is present, and DevTools is running
- *   within a branded build, this method will add `utm_campaign=<channel>` to
- *   the search parameters, with `<channel>` being the release channel of
- *   Chrome ("stable", "beta", "dev", or "canary").
- *
- * @param url the URL to open in a new tab.
- * @throws TypeError if `url` is not a valid URL.
- * @see https://en.wikipedia.org/wiki/UTM_parameters
- */
-export function openInNewTab(url: URL|string): void {
-  url = new URL(`${url}`);
-  if (['developer.chrome.com', 'developers.google.com', 'web.dev'].includes(url.hostname)) {
-    if (!url.searchParams.has('utm_source')) {
-      url.searchParams.append('utm_source', 'devtools');
-    }
-    const {channel} = Root.Runtime.hostConfig;
-    if (!url.searchParams.has('utm_campaign') && typeof channel === 'string') {
-      url.searchParams.append('utm_campaign', channel);
-    }
-  }
-  Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(Platform.DevToolsPath.urlString`${url}`);
-}
-
 export interface PromotionDisplayState {
   displayCount: number;
   firstRegistered: number;

package/front_end/ui/legacy/Widget.ts

@@ -330,7 +330,6 @@ export interface WidgetOptions {
 export class Widget {
   readonly element: HTMLElement;
   contentElement: HTMLElement;
-  defaultFocusedChild: Widget|null = null;
   #shadowRoot: typeof Element.prototype.shadowRoot;
   #visible = false;
   #isRoot = false;
@@ -632,6 +631,10 @@ export class Widget {
         originalAppendChild.call(parentElement, this.element);
       }
     }
+    const focusedElementsCount = this.#parentWidget?.getDefaultFocusedElements?.()?.length ?? 0;
+    if (this.element.hasAttribute('autofocus') && focusedElementsCount > 1) {
+      this.element.removeAttribute('autofocus');
+    }
 
     if (!wasVisible && this.parentIsShowing()) {
       this.processWasShown();
@@ -707,9 +710,6 @@ export class Widget {
       const childIndex = this.#parentWidget.#children.indexOf(this);
       assert(childIndex >= 0, 'Attempt to remove non-child widget');
       this.#parentWidget.#children.splice(childIndex, 1);
-      if (this.#parentWidget.defaultFocusedChild === this) {
-        this.#parentWidget.defaultFocusedChild = null;
-      }
       this.#parentWidget.childWasDetached(this);
       this.#parentWidget = null;
     } else {
@@ -801,22 +801,48 @@ export class Widget {
 
   setDefaultFocusedChild(child: Widget): void {
     assert(child.#parentWidget === this, 'Attempt to set non-child widget as default focused.');
-    this.defaultFocusedChild = child;
+
+    const defaultFocusedElement = this.getDefaultFocusedElement();
+    if (defaultFocusedElement) {
+      defaultFocusedElement.removeAttribute('autofocus');
+    }
+    child.element.setAttribute('autofocus', '');
   }
 
-  getDefaultFocusedElement(): HTMLElement|null {
-    const autofocusElement = this.contentElement.hasAttribute('autofocus') ?
-        this.contentElement :
-        this.contentElement.querySelector<HTMLElement>('[autofocus]');
-    let widgetElement: Element|null = autofocusElement;
-    while (widgetElement) {
-      const widget = Widget.get(widgetElement);
-      if (widget) {
-        return widget === this ? autofocusElement : null;
+  getDefaultFocusedElements(): HTMLElement[] {
+    const autofocusElements = [...this.contentElement.querySelectorAll<HTMLElement>('[autofocus]')];
+    if (this.contentElement !== this.element) {
+      if (this.contentElement.hasAttribute('autofocus')) {
+        autofocusElements.push(this.contentElement);
+      }
+      if (autofocusElements.length === 0) {
+        autofocusElements.push(...this.element.querySelectorAll<HTMLElement>('[autofocus]'));
+      }
+    }
+    return autofocusElements.filter(autofocusElement => {
+      let widgetElement: Element|null = autofocusElement;
+      while (widgetElement) {
+        const widget = Widget.get(widgetElement);
+        if (widget) {
+          if (widgetElement === autofocusElement && widget.#parentWidget === this && widget.#visible) {
+            return true;
+          }
+          return widget === this;
+        }
+        widgetElement = widgetElement.parentElementOrShadowHost();
       }
-      widgetElement = widgetElement.parentElementOrShadowHost();
+      return false;
+    });
+  }
+
+  getDefaultFocusedElement(): HTMLElement|null {
+    const elements = this.getDefaultFocusedElements();
+    if (elements.length > 1) {
+      console.error(
+          'Multiple autofocus elements found', this.constructor.name,
+          ...elements.map(e => Platform.StringUtilities.trimMiddle(e.outerHTML, 250)));
     }
-    return null;
+    return elements[0] || null;
   }
 
   focus(): void {
@@ -825,20 +851,25 @@ export class Widget {
     }
     const autofocusElement = this.getDefaultFocusedElement();
     if (autofocusElement) {
-      autofocusElement.focus();
+      const widget = Widget.get(autofocusElement);
+      if (widget && widget !== this) {
+        widget.focus();
+      } else {
+        autofocusElement.focus();
+      }
       return;
     }
 
-    if (this.defaultFocusedChild && this.defaultFocusedChild.#visible) {
-      this.defaultFocusedChild.focus();
-    } else {
-      for (const child of this.#children) {
-        if (child.#visible) {
-          child.focus();
-          return;
-        }
+    for (const child of this.#children) {
+      if (child.#visible) {
+        child.focus();
+        return;
       }
     }
+
+    if (this.element === this.contentElement && this.element.hasAttribute('autofocus')) {
+      this.element.focus();
+    }
   }
 
   hasFocus(): boolean {

package/front_end/ui/legacy/XLink.ts

@@ -4,6 +4,7 @@
 
 import * as Host from '../../core/host/host.js';
 import * as Platform from '../../core/platform/platform.js';
+import * as UIHelpers from '../helpers/helpers.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
@@ -13,7 +14,6 @@ import {Tooltip} from './Tooltip.js';
 import {
   copyLinkAddressLabel,
   MaxLengthForDisplayedURLs,
-  openInNewTab,
   openLinkExternallyLabel,
 } from './UIUtils.js';
 import {XElement} from './XElement.js';
@@ -54,18 +54,16 @@ export class XLink extends XElement {
     this.onClick = (event: Event) => {
       event.consume(true);
       if (this.#href) {
-        openInNewTab(this.#href);
+        UIHelpers.openInNewTab(this.#href);
       }
-      this.dispatchEvent(new Event('x-link-invoke'));
     };
     this.onKeyDown = (event: KeyboardEvent) => {
       if (Platform.KeyboardUtilities.isEnterOrSpaceKey(event)) {
         event.consume(true);
         if (this.#href) {
-          openInNewTab(this.#href);
+          UIHelpers.openInNewTab(this.#href);
         }
       }
-      this.dispatchEvent(new Event('x-link-invoke'));
     };
   }
 
@@ -142,7 +140,7 @@ export class ContextMenuProvider implements Provider<Node> {
     const node: XLink = targetNode;
     contextMenu.revealSection().appendItem(openLinkExternallyLabel(), () => {
       if (node.href) {
-        openInNewTab(node.href);
+        UIHelpers.openInNewTab(node.href);
       }
     }, {jslogContext: 'open-in-new-tab'});
     contextMenu.revealSection().appendItem(copyLinkAddressLabel(), () => {

package/front_end/ui/legacy/components/color_picker/ContrastDetails.ts

@@ -11,6 +11,7 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as Root from '../../../../core/root/root.js';
 import * as IconButton from '../../../../ui/components/icon_button/icon_button.js';
+import * as UIHelpers from '../../../helpers/helpers.js';
 import * as UI from '../../legacy.js';
 
 import {type ContrastInfo, Events as ContrastInfoEvents} from './ContrastInfo.js';
@@ -363,7 +364,7 @@ export class ContrastDetails extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   private static showHelp(): void {
-    UI.UIUtils.openInNewTab('https://web.dev/color-and-contrast-accessibility/');
+    UIHelpers.openInNewTab('https://web.dev/color-and-contrast-accessibility/');
   }
 
   setVisible(visible: boolean): void {

package/front_end/ui/legacy/components/object_ui/ObjectPopoverHelper.ts

@@ -8,6 +8,7 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import * as Geometry from '../../../../models/geometry/geometry.js';
+import {render} from '../../../lit/lit.js';
 import * as UI from '../../legacy.js';
 import * as Components from '../utils/utils.js';
 
@@ -65,7 +66,8 @@ export class ObjectPopoverHelper {
         const titleElement = popoverContentElement.createChild('div', 'object-popover-title');
         if (result.type === 'function') {
           titleElement.classList.add('source-code');
-          titleElement.appendChild(ObjectPropertiesSection.valueElementForFunctionDescription(result.description));
+          // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+          render(ObjectPropertiesSection.valueElementForFunctionDescription(result.description), titleElement);
         } else {
           titleElement.classList.add('monospace');
           titleElement.createChild('span').textContent = description;