chrome-devtools-frontend 1.0.1518653 → 1.0.1520139

package/front_end/third_party/puppeteer/package/src/node/PipeTransport.ts

@@ -17,7 +17,7 @@ export class PipeTransport implements ConnectionTransport {
   #subscriptions = new DisposableStack();
 
   #isClosed = false;
-  #pendingMessage = '';
+  #pendingMessage: Buffer[] = [];
 
   onclose?: () => void;
   onmessage?: (value: string) => void;
@@ -34,7 +34,7 @@ export class PipeTransport implements ConnectionTransport {
         pipeRead as unknown as EventEmitter<Record<string, any>>,
       ),
     );
-    pipeReadEmitter.on('data', (buffer: Buffer) => {
+    pipeReadEmitter.on('data', buffer => {
       return this.#dispatch(buffer);
     });
     pipeReadEmitter.on('close', () => {
@@ -60,34 +60,32 @@ export class PipeTransport implements ConnectionTransport {
     this.#pipeWrite.write('\0');
   }
 
-  #dispatch(buffer: Buffer): void {
+  #dispatch(buffer: Buffer<ArrayBuffer>): void {
     assert(!this.#isClosed, '`PipeTransport` is closed.');
 
-    let end = buffer.indexOf('\0');
-    if (end === -1) {
-      this.#pendingMessage += buffer.toString();
+    this.#pendingMessage.push(buffer);
+    if (buffer.indexOf('\0') === -1) {
       return;
     }
-    const message = this.#pendingMessage + buffer.toString(undefined, 0, end);
-    setImmediate(() => {
-      if (this.onmessage) {
-        this.onmessage.call(null, message);
-      }
-    });
+    const concatBuffer = Buffer.concat(this.#pendingMessage);
 
-    let start = end + 1;
-    end = buffer.indexOf('\0', start);
+    let start = 0;
+    let end = concatBuffer.indexOf('\0');
     while (end !== -1) {
-      const message = buffer.toString(undefined, start, end);
+      const message = concatBuffer.toString(undefined, start, end);
       setImmediate(() => {
         if (this.onmessage) {
           this.onmessage.call(null, message);
         }
       });
       start = end + 1;
-      end = buffer.indexOf('\0', start);
+      end = concatBuffer.indexOf('\0', start);
+    }
+    if (start >= concatBuffer.length) {
+      this.#pendingMessage = [];
+    } else {
+      this.#pendingMessage = [concatBuffer.subarray(start)];
     }
-    this.#pendingMessage = buffer.toString(undefined, start);
   }
 
   close(): void {

package/front_end/third_party/puppeteer/package/src/revisions.ts

@@ -8,7 +8,7 @@
  * @internal
  */
 export const PUPPETEER_REVISIONS = Object.freeze({
-  chrome: '140.0.7339.82',
-  'chrome-headless-shell': '140.0.7339.82',
-  firefox: 'stable_143.0',
+  chrome: '140.0.7339.207',
+  'chrome-headless-shell': '140.0.7339.207',
+  firefox: 'stable_143.0.1',
 });

package/front_end/third_party/puppeteer/package/src/util/Function.ts

@@ -29,37 +29,29 @@ export const createFunction = (
  */
 export function stringifyFunction(fn: (...args: never) => unknown): string {
   let value = fn.toString();
-  try {
-    new Function(`(${value})`);
-  } catch (err) {
-    if (
-      (err as Error).message.includes(
-        `Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive`,
-      ) ||
-      (err as Error).message.includes(
-        'Evaluating a string as JavaScript violates the following Content Security Policy',
-      )
-    ) {
-      // The content security policy does not allow Function eval. Let's
-      // assume the value might be valid as is.
-      return value;
-    }
-    // This means we might have a function shorthand (e.g. `test(){}`). Let's
-    // try prefixing.
-    let prefix = 'function ';
-    if (value.startsWith('async ')) {
-      prefix = `async ${prefix}`;
-      value = value.substring('async '.length);
-    }
-    value = `${prefix}${value}`;
-    try {
-      new Function(`(${value})`);
-    } catch {
-      // We tried hard to serialize, but there's a weird beast here.
-      throw new Error('Passed function cannot be serialized!');
-    }
+  if (
+    value.match(/^(async )*function(\(|\s)/) ||
+    value.match(/^(async )*function\s*\*\s*/)
+  ) {
+    return value;
   }
-  return value;
+  const isArrow =
+    value.startsWith('(') ||
+    value.match(/^async\s*\(/) ||
+    value.match(
+      /^(async)*\s*(?:[$_\p{ID_Start}])(?:[$\u200C\u200D\p{ID_Continue}])*\s*=>/u,
+    );
+  if (isArrow) {
+    return value;
+  }
+  // This means we might have a function shorthand (e.g. `test(){}`). Let's
+  // try prefixing.
+  let prefix = 'function ';
+  if (value.startsWith('async ')) {
+    prefix = `async ${prefix}`;
+    value = value.substring('async '.length);
+  }
+  return `${prefix}${value}`;
 }
 
 /**

package/front_end/tsconfig.json

@@ -3,7 +3,18 @@
   "compilerOptions": {
     "allowUmdGlobalAccess": true,
     "outDir": "ignored",
-    "lib": ["esnext", "dom", "dom.iterable", "webworker", "webworker.iterable"],
+    "target": "ES2023",
+    "lib": [
+      "ES2023",
+      "ES2024.Promise",
+      "ESNext.Iterator",
+      "ESNext.Collection",
+      "ESNext.Array",
+      "dom",
+      "dom.iterable",
+      "webworker",
+      "webworker.iterable"
+    ],
     "plugins": [
       {
         "name": "ts-lit-plugin",

package/front_end/ui/components/dialogs/Dialog.ts

@@ -704,7 +704,7 @@ export class Dialog extends HTMLElement {
       return;
     }
 
-    let dialogContent = html``;
+    let dialogContent: Lit.LitTemplate = Lit.nothing;
 
     // If state is expanded content should be shown, do not render it otherwise.
     if (this.#props.state === DialogState.EXPANDED) {

package/front_end/ui/components/markdown_view/MarkdownImage.ts

@@ -24,7 +24,6 @@ export interface MarkdownImageData {
  * This makes sure that all icons/images are accounted for in markdown.
  */
 export class MarkdownImage extends HTMLElement {
-
   readonly #shadow = this.attachShadow({mode: 'open'});
   #imageData?: ImageData;
   #imageTitle?: string;
@@ -37,9 +36,9 @@ export class MarkdownImage extends HTMLElement {
     this.#render();
   }
 
-  #getIconComponent(): Lit.TemplateResult {
+  #getIconComponent(): Lit.LitTemplate {
     if (!this.#imageData) {
-      return html``;
+      return Lit.nothing;
     }
     const {src, color, width = '100%', height = '100%'} = this.#imageData;
     return html`
@@ -47,9 +46,9 @@ export class MarkdownImage extends HTMLElement {
     `;
   }
 
-  #getImageComponent(): Lit.TemplateResult {
+  #getImageComponent(): Lit.LitTemplate {
     if (!this.#imageData) {
-      return html``;
+      return Lit.nothing;
     }
     const {src, width = '100%', height = '100%'} = this.#imageData;
     return html`

package/front_end/ui/components/switch/SwitchImpl.ts

@@ -21,6 +21,7 @@ export class Switch extends HTMLElement {
   #checked = false;
   #disabled = false;
   #jslogContext = '';
+  #label = '';
 
   connectedCallback(): void {
     this.#render();
@@ -53,6 +54,15 @@ export class Switch extends HTMLElement {
     this.#render();
   }
 
+  get label(): string {
+    return this.#label;
+  }
+
+  set label(label: string) {
+    this.#label = label;
+    this.#render();
+  }
+
   #handleChange = (ev: Event): void => {
     this.#checked = (ev.target as HTMLInputElement).checked;
     this.dispatchEvent(new SwitchChangeEvent(this.#checked));
@@ -64,8 +74,9 @@ export class Switch extends HTMLElement {
     // clang-format off
     render(html`
     <style>${switchStyles}</style>
-    <label role="button" jslog=${jslog || nothing}>
+    <label jslog=${jslog || nothing}>
       <input type="checkbox"
+        aria-label=${this.#label || nothing}
         @change=${this.#handleChange}
         ?disabled=${this.#disabled}
         .checked=${this.#checked}

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

@@ -488,6 +488,7 @@ interface ActiveSuggestion {
   rpcGlobalId?: Host.AidaClient.RpcGlobalId;
   startTime: number;
   onImpression: (rpcGlobalId: Host.AidaClient.RpcGlobalId, sampleId: number, latency: number) => void;
+  clearCachedRequest: () => void;
 }
 
 export const aiAutoCompleteSuggestionState = CM.StateField.define<ActiveSuggestion|null>({
@@ -498,6 +499,7 @@ export const aiAutoCompleteSuggestionState = CM.StateField.define<ActiveSuggesti
         if (effect.value) {
           return effect.value;
         }
+        value?.clearCachedRequest();
         return null;
       }
     }
@@ -509,13 +511,15 @@ export const aiAutoCompleteSuggestionState = CM.StateField.define<ActiveSuggesti
     // A suggestion from an effect can be stale if the document was changed
     // between when the request was sent and the response was received.
     // We check if the position is still valid before trying to map it.
-    if (value.from > tr.startState.doc.length) {
+    if (value.from > tr.state.doc.length) {
+      value.clearCachedRequest();
       return null;
     }
 
     // If deletion occurs, set to null. Otherwise, the mapping might fail if
     // the position is inside the deleted range.
     if (tr.docChanged && tr.state.doc.length < tr.startState.doc.length) {
+      value.clearCachedRequest();
       return null;
     }
 
@@ -523,7 +527,8 @@ export const aiAutoCompleteSuggestionState = CM.StateField.define<ActiveSuggesti
     const {head} = tr.state.selection.main;
 
     // If a change happened before the position from which suggestion was generated, set to null.
-    if (head < from) {
+    if (tr.docChanged && head < from) {
+      value.clearCachedRequest();
       return null;
     }
 
@@ -563,6 +568,8 @@ export function acceptAiAutoCompleteSuggestion(view: CM.EditorView):
     effects: setAiAutoCompleteSuggestion.of(null),
     userEvent: 'input.complete',
   });
+
+  suggestion.clearCachedRequest();
   return {accepted: true, suggestion};
 }
 
@@ -603,6 +610,13 @@ export const aiAutoCompleteSuggestion: CM.Extension = [
           }
 
           const {head} = update.state.selection.main;
+          // Hide AI suggestion if the user moves the cursor to a location
+          // before the position from which suggestion was generated.
+          if (head < activeSuggestion.from) {
+            this.decorations = CM.Decoration.none;
+            return;
+          }
+
           const selectedCompletion = CM.selectedCompletion(update.state);
           const additionallyTypedText = update.state.doc.sliceString(activeSuggestion.from, head);
           // The user might have typed text after the suggestion is triggered.

package/front_end/ui/legacy/InspectorView.ts

@@ -18,7 +18,7 @@ import * as ARIAUtils from './ARIAUtils.js';
 import type {Context} from './Context.js';
 import type {ContextMenu} from './ContextMenu.js';
 import {Dialog} from './Dialog.js';
-import {DockController, DockState} from './DockController.js';
+import {DockController, DockState, Events as DockControllerEvents} from './DockController.js';
 import {GlassPane} from './GlassPane.js';
 import {Infobar, Type as InfobarType} from './Infobar.js';
 import {KeyboardShortcut} from './KeyboardShortcut.js';
@@ -127,8 +127,20 @@ export enum DrawerOrientation {
   UNSET = 'unset',
 }
 
+export enum DockMode {
+  BOTTOM = 'bottom',
+  SIDE = 'side',  // For LEFT and RIGHT
+  UNDOCKED = 'undocked',
+}
+
+export interface DrawerOrientationByDockMode {
+  [DockMode.BOTTOM]: DrawerOrientation;
+  [DockMode.SIDE]: DrawerOrientation;
+  [DockMode.UNDOCKED]: DrawerOrientation;
+}
+
 export class InspectorView extends VBox implements ViewLocationResolver {
-  private readonly drawerOrientationSetting: Common.Settings.Setting<DrawerOrientation>;
+  private readonly drawerOrientationByDockSetting: Common.Settings.Setting<DrawerOrientationByDockMode>;
   private readonly drawerSplitWidget: SplitWidget;
   private readonly tabDelegate: InspectorViewTabDelegate;
   private readonly drawerTabbedLocation: TabbedViewLocation;
@@ -151,9 +163,14 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     this.setMinimumSize(MIN_INSPECTOR_WIDTH_HORIZONTAL_DRAWER, MIN_INSPECTOR_HEIGHT);
 
     // DevTools sidebar is a vertical split of main tab bar panels and a drawer.
-    this.drawerOrientationSetting =
-        Common.Settings.Settings.instance().createSetting('inspector.drawer-orientation', DrawerOrientation.UNSET);
-    const isVertical = this.drawerOrientationSetting.get() === DrawerOrientation.VERTICAL;
+    this.drawerOrientationByDockSetting =
+        Common.Settings.Settings.instance().createSetting('inspector.drawer-orientation-by-dock-mode', {
+          [DockMode.BOTTOM]: DrawerOrientation.UNSET,
+          [DockMode.SIDE]: DrawerOrientation.UNSET,
+          [DockMode.UNDOCKED]: DrawerOrientation.UNSET,
+        });
+    const initialOrientation = this.#getOrientationForDockMode();
+    const isVertical = initialOrientation === DrawerOrientation.VERTICAL;
     this.drawerSplitWidget = new SplitWidget(isVertical, true, 'inspector.drawer-split-view-state', 200, 200);
     this.drawerSplitWidget.hideSidebar();
     this.drawerSplitWidget.enableShowModeSaving();
@@ -285,6 +302,50 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     inspectorViewInstance = null;
   }
 
+  onDockSideChangedHandledForTest(): void {
+  }
+
+  #onDockSideChanged(): void {
+    if (!this.drawerVisible()) {
+      this.onDockSideChangedHandledForTest();
+      return;
+    }
+    const newOrientation = this.#getOrientationForDockMode();
+    this.#applyOrientation(newOrientation);
+    this.onDockSideChangedHandledForTest();
+  }
+
+  #getDockMode(): DockMode {
+    const dockSide = DockController.instance().dockSide();
+    if (dockSide === DockState.BOTTOM) {
+      return DockMode.BOTTOM;
+    }
+    if (dockSide === DockState.UNDOCKED) {
+      return DockMode.UNDOCKED;
+    }
+
+    return DockMode.SIDE;
+  }
+
+  #getOrientationForDockMode(): Omit<DrawerOrientation, DrawerOrientation.UNSET> {
+    const dockMode = this.#getDockMode();
+    const orientationSetting = this.drawerOrientationByDockSetting.get();
+
+    let orientation = orientationSetting[dockMode];
+    if (orientation === DrawerOrientation.UNSET) {
+      // Apply defaults: horizontal for side-dock, vertical for bottom-dock.
+      orientation = dockMode === DockMode.BOTTOM ? DrawerOrientation.VERTICAL : DrawerOrientation.HORIZONTAL;
+    }
+    return orientation;
+  }
+
+  #applyOrientation(orientation: Omit<DrawerOrientation, DrawerOrientation.UNSET>): void {
+    const isVertical = orientation === DrawerOrientation.VERTICAL;
+    this.#toggleOrientationButton.setGlyph(isVertical ? 'dock-bottom' : 'dock-right');
+    this.drawerSplitWidget.setVertical(isVertical);
+    this.setDrawerRelatedMinimumSizes();
+  }
+
   #observedResize(): void {
     const rect = this.element.getBoundingClientRect();
     this.element.style.setProperty('--devtools-window-left', `${rect.left}px`);
@@ -299,11 +360,15 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     this.#resizeObserver.observe(this.element);
     this.#observedResize();
     this.element.ownerDocument.addEventListener('keydown', this.keyDownBound, false);
+    DockController.instance().addEventListener(DockControllerEvents.DOCK_SIDE_CHANGED, this.#onDockSideChanged, this);
+    this.#onDockSideChanged();
   }
 
   override willHide(): void {
     this.#resizeObserver.unobserve(this.element);
     this.element.ownerDocument.removeEventListener('keydown', this.keyDownBound, false);
+    DockController.instance().removeEventListener(
+        DockControllerEvents.DOCK_SIDE_CHANGED, this.#onDockSideChanged, this);
   }
 
   resolveLocation(locationName: string): ViewLocation|null {
@@ -421,21 +486,29 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     if (!this.drawerTabbedPane.isShowing()) {
       return;
     }
-    let drawerWillBeVertical: boolean;
+
+    const dockMode = this.#getDockMode();
+    const currentSettings = this.drawerOrientationByDockSetting.get();
+
+    let newOrientation: Omit<DrawerOrientation, DrawerOrientation.UNSET>;
     if (force) {
-      drawerWillBeVertical = force === DrawerOrientation.VERTICAL;
+      newOrientation = force;
     } else {
-      drawerWillBeVertical = !this.drawerSplitWidget.isVertical();
+      const currentOrientation = this.#getOrientationForDockMode();
+      newOrientation =
+          currentOrientation === DrawerOrientation.VERTICAL ? DrawerOrientation.HORIZONTAL : DrawerOrientation.VERTICAL;
     }
 
-    this.drawerOrientationSetting.set(drawerWillBeVertical ? DrawerOrientation.VERTICAL : DrawerOrientation.HORIZONTAL);
-    this.#toggleOrientationButton.setGlyph(drawerWillBeVertical ? 'dock-bottom' : 'dock-right');
-    this.drawerSplitWidget.setVertical(drawerWillBeVertical);
-    this.setDrawerRelatedMinimumSizes();
+    currentSettings[dockMode] = newOrientation as DrawerOrientation;
+    this.drawerOrientationByDockSetting.set(currentSettings);
+
+    this.#applyOrientation(newOrientation);
   }
 
   isUserExplicitlyUpdatedDrawerOrientation(): boolean {
-    return this.drawerOrientationSetting.get() !== DrawerOrientation.UNSET;
+    const orientationSetting = this.drawerOrientationByDockSetting.get();
+    const dockMode = this.#getDockMode();
+    return orientationSetting[dockMode] !== DrawerOrientation.UNSET;
   }
 
   setDrawerRelatedMinimumSizes(): void {

package/front_end/ui/legacy/TabbedPane.ts

@@ -326,6 +326,8 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
       return false;
     }
 
+    this.lastSelectedOverflowTab = tab;
+
     const eventData: EventData = {
       prevTabId: this.currentTab ? this.currentTab.id : undefined,
       tabId: id,
@@ -676,7 +678,6 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
   }
 
   private dropDownMenuItemSelected(tab: TabbedPaneTab): void {
-    this.lastSelectedOverflowTab = tab;
     this.selectTab(tab.id, true, true);
   }
 

package/front_end/ui/legacy/Treeoutline.ts

@@ -1455,7 +1455,7 @@ export class TreeSearch < NodeT extends TreeNode<NodeT>,
     return this.#getNodeMatchMap().get(node) ?? [];
   }
 
-  highlight(ranges: TextUtils.TextRange.SourceRange[], selectedRange: TextUtils.TextRange.SourceRange|undefined):
+  static highlight(ranges: TextUtils.TextRange.SourceRange[], selectedRange: TextUtils.TextRange.SourceRange|undefined):
       ReturnType<typeof Lit.Directives.ref> {
     return Lit.Directives.ref(element => {
       if (element instanceof HTMLLIElement) {
@@ -1777,6 +1777,8 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
       const nextElement = nextSibling ? TreeViewTreeElement.get(nextSibling) : null;
       const index = nextElement ? parent.treeElement.indexOfChild(nextElement) : parent.treeElement.children().length;
       const treeElement = new TreeViewTreeElement(this.#treeOutline, node);
+      const expandable = Boolean(node.querySelector('ul[role="group"]'));
+      treeElement.setExpandable(expandable);
       parent.treeElement.insertChild(treeElement, index);
       if (hasBooleanAttribute(node, 'selected')) {
         treeElement.revealAndSelect(true);

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

@@ -129,7 +129,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
         }
       }
     }
-    return input.search.highlight(highlights, selected);
+    return UI.TreeOutline.TreeSearch.highlight(highlights, selected);
   }
 
   function layOutNode(node: XMLTreeViewNode, populateSubtrees = false): Lit.LitTemplate {
@@ -138,13 +138,15 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
 
     // clang-format off
     return html`
-    <li
-      ${highlight(node, /* closeTag=*/ false)}
-      role="treeitem"
-      ?selected=${input.jumpToNextSearchResult?.node === node}
-      @expand=${onExpand}>
-        ${htmlView(node)}${populateSubtrees || input.search ? subtree(node) : Lit.nothing}
-    </li>`;
+      <li ${highlight(node, /* closeTag=*/ false)} role="treeitem"
+          ?selected=${input.jumpToNextSearchResult?.node === node}
+          @expand=${onExpand}>
+        ${htmlView(node)}
+        ${node.children().length ? html`
+          <ul role="group" ?hidden=${!node.expanded}>
+            ${populateSubtrees || input.search ? subtree(node) : Lit.nothing}
+          </ul>` : Lit.nothing}
+      </li>`;
     // clang-format on
   }
 
@@ -154,15 +156,14 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
       return Lit.nothing;
     }
     // clang-format off
-    return html`<ul role="group" ?hidden=${!treeNode.expanded}>
+    return html`
       ${children.map(child => layOutNode(child, treeNode.expanded))}
       ${treeNode.node instanceof Element
           ? html`<li
                   ${highlight(treeNode, /* closeTag=*/ true)}
                   role="treeitem"><span part='shadow-xml-view-close-tag'>${'</' + treeNode.node.tagName + '>'}</span
                  ></li>`
-          : Lit.nothing}
-        </ul>`;
+          : Lit.nothing}`;
     // clang-format on
   }
 

package/front_end/ui/lit/i18n-template.ts

@@ -2,6 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// This files is import lit directly
+/* eslint-disable rulesdir/lit-template-result-or-nothing */
+
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as I18n from '../../third_party/i18n/i18n.js';
 import * as Lit from '../../third_party/lit/lit.js';
@@ -14,10 +17,10 @@ const {html} = Lit.StaticHtml;
  */
 export function i18nTemplate(
     registeredStrings: I18n.LocalizedStringSet.RegisteredFileStrings, stringId: string,
-    placeholders: Record<string, Lit.TemplateResult|string>): Lit.TemplateResult {
+    placeholders: Record<string, Lit.TemplateResult|string>): Lit.TemplateResult|typeof Lit.nothing {
   const formatter = registeredStrings.getLocalizedStringSetFor(i18n.DevToolsLocale.DevToolsLocale.instance().locale)
                         .getMessageFormatterFor(stringId);
-  let result = html``;
+  let result: Lit.TemplateResult|typeof Lit.nothing = Lit.nothing;
   for (const icuElement of formatter.getAst()) {
     if (icuElement.type === /* argumentElement */ 1) {
       const placeholderValue = placeholders[icuElement.value];