chrome-devtools-frontend 1.0.973446 → 1.0.974575

package/front_end/third_party/puppeteer/package/lib/types.d.ts

@@ -288,7 +288,7 @@ export declare class Browser extends EventEmitter {
      * const newWindowTarget = await browser.waitForTarget(target => target.url() === 'https://www.example.com/');
      * ```
      */
-    waitForTarget(predicate: (x: Target) => boolean, options?: WaitForTargetOptions): Promise<Target>;
+    waitForTarget(predicate: (x: Target) => boolean | Promise<boolean>, options?: WaitForTargetOptions): Promise<Target>;
     /**
      * An array of all open pages inside the Browser.
      *
@@ -425,7 +425,7 @@ export declare class BrowserContext extends EventEmitter {
      * @returns Promise which resolves to the first target found
      * that matches the `predicate` function.
      */
-    waitForTarget(predicate: (x: Target) => boolean, options?: {
+    waitForTarget(predicate: (x: Target) => boolean | Promise<boolean>, options?: {
         timeout?: number;
     }): Promise<Target>;
     /**
@@ -751,7 +751,7 @@ export declare class CDPSession extends EventEmitter {
     /**
      * @internal
      */
-    _connection: Connection;
+    _connection?: Connection;
     private _sessionId;
     private _targetType;
     private _callbacks;
@@ -759,7 +759,7 @@ export declare class CDPSession extends EventEmitter {
      * @internal
      */
     constructor(connection: Connection, targetType: string, sessionId: string);
-    connection(): Connection;
+    connection(): Connection | undefined;
     send<T extends keyof ProtocolMapping.Commands>(method: T, ...paramArgs: ProtocolMapping.Commands[T]['paramsType']): Promise<ProtocolMapping.Commands[T]['returnType']>;
     /**
      * @internal
@@ -866,7 +866,7 @@ export declare interface CommonEventEmitter {
 }
 
 /**
- * Settings that are common to the Puppeteer class, regardless of enviroment.
+ * Settings that are common to the Puppeteer class, regardless of environment.
  * @internal
  */
 export declare interface CommonPuppeteerSettings {
@@ -891,7 +891,7 @@ export declare class Connection extends EventEmitter {
     _closed: boolean;
     _callbacks: Map<number, ConnectionCallback>;
     constructor(url: string, transport: ConnectionTransport, delay?: number);
-    static fromSession(session: CDPSession): Connection;
+    static fromSession(session: CDPSession): Connection | undefined;
     /**
      * @param sessionId - The session id
      * @returns The current CDP session if it exists
@@ -948,8 +948,8 @@ export declare const ConnectionEmittedEvents: {
  * @public
  */
 export declare interface ConnectionTransport {
-    send(string: any): any;
-    close(): any;
+    send(message: string): void;
+    close(): void;
     onmessage?: (message: string) => void;
     onclose?: () => void;
 }
@@ -1952,7 +1952,7 @@ export declare class ExecutionContext {
      *
      * @returns A promise that resolves to the return value of the given function.
      */
-    evaluate<ReturnType extends any>(pageFunction: Function | string, ...args: unknown[]): Promise<ReturnType>;
+    evaluate<ReturnType>(pageFunction: Function | string, ...args: unknown[]): Promise<ReturnType>;
     /**
      * @remarks
      * The only difference between `executionContext.evaluate` and
@@ -2171,6 +2171,11 @@ export declare class Frame {
      * @internal
      */
     _updateClient(client: CDPSession): void;
+    /**
+     * @remarks
+     *
+     * @returns `true` if the frame is an OOP frame, or `false` otherwise.
+     */
     isOOPFrame(): boolean;
     /**
      * @remarks
@@ -2240,6 +2245,10 @@ export declare class Frame {
         timeout?: number;
         waitUntil?: PuppeteerLifeCycleEvent | PuppeteerLifeCycleEvent[];
     }): Promise<HTTPResponse | null>;
+    /**
+     * @internal
+     */
+    client(): CDPSession;
     /**
      * @returns a promise that resolves to the frame's default execution context.
      */
@@ -3142,6 +3151,7 @@ export declare class HTTPResponse {
     private _fromServiceWorker;
     private _headers;
     private _securityDetails;
+    private _timing;
     /**
      * @internal
      */
@@ -3186,6 +3196,10 @@ export declare class HTTPResponse {
          * secure connection, or `null` otherwise.
          */
      securityDetails(): SecurityDetails | null;
+     /**
+      * @returns Timing information related to the response.
+      */
+     timing(): Protocol.Network.ResourceTiming | null;
      /**
       * @returns Promise which resolves to a buffer with response body.
       */
@@ -6232,9 +6246,9 @@ export declare class HTTPResponse {
      * @public
      */
     export declare interface ProductLauncher {
-        launch(object: PuppeteerNodeLaunchOptions): any;
-        executablePath: (string?: any) => string;
-        defaultArgs(object: BrowserLaunchArgumentOptions): any;
+        launch(object: PuppeteerNodeLaunchOptions): Promise<Browser>;
+        executablePath: (path?: any) => string;
+        defaultArgs(object: BrowserLaunchArgumentOptions): string[];
         product: Product;
     }
 
@@ -6436,8 +6450,8 @@ export declare class HTTPResponse {
      * @public
      */
     export declare class PuppeteerNode extends Puppeteer {
-        private _lazyLauncher;
-        private _projectRoot;
+        private _lazyLauncher?;
+        private _projectRoot?;
         private __productName?;
         /**
          * @internal
@@ -6447,7 +6461,7 @@ export declare class HTTPResponse {
          * @internal
          */
         constructor(settings: {
-            projectRoot: string;
+            projectRoot?: string;
             preferredRevision: string;
             productName?: Product;
         } & CommonPuppeteerSettings);
@@ -6463,8 +6477,8 @@ export declare class HTTPResponse {
         /**
          * @internal
          */
-        get _productName(): Product;
-        set _productName(name: Product);
+        get _productName(): Product | undefined;
+        set _productName(name: Product | undefined);
         /**
          * Launches puppeteer and launches a browser instance with given arguments
          * and options when specified.
@@ -7211,7 +7225,7 @@ export declare class HTTPResponse {
               * @param args - Arguments to pass to `pageFunction`.
               * @returns Promise which resolves to the return value of `pageFunction`.
               */
-             evaluate<ReturnType extends any>(pageFunction: Function | string, ...args: any[]): Promise<ReturnType>;
+             evaluate<ReturnType>(pageFunction: Function | string, ...args: any[]): Promise<ReturnType>;
              /**
               * The only difference between `worker.evaluate` and `worker.evaluateHandle`
               * is that `worker.evaluateHandle` returns in-page object (JSHandle). If the

package/front_end/third_party/puppeteer/package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "puppeteer",
-  "version": "13.1.1",
+  "version": "13.4.0",
   "description": "A high-level API to control headless Chrome over the DevTools Protocol",
   "main": "./cjs-entry.js",
   "types": "lib/types.d.ts",
@@ -24,9 +24,9 @@
     "eslint": "([ \"$CI\" = true ] && eslint --ext js --ext ts --quiet -f codeframe . || eslint --ext js --ext ts .)",
     "eslint-fix": "eslint --ext js --ext ts --fix .",
     "commitlint": "commitlint --from=HEAD~1",
-    "markdownlint": "prettier --check **/README.md docs/troubleshooting.md",
-    "markdownlint-fix": "prettier --write **/README.md docs/troubleshooting.md",
-    "lint": "npm run eslint && npm run build && npm run doc && npm run commitlint && npm run markdownlint",
+    "prettier": "prettier --check .",
+    "prettier-fix": "prettier --write .",
+    "lint": "npm run eslint && npm run build && npm run doc && npm run prettier",
     "doc": "node utils/doclint/cli.js",
     "clean-lib": "rimraf lib",
     "build": "npm run tsc && npm run generate-d-ts",
@@ -58,60 +58,61 @@
   "author": "The Chromium Authors",
   "license": "Apache-2.0",
   "dependencies": {
-    "debug": "4.3.2",
-    "devtools-protocol": "0.0.948846",
+    "cross-fetch": "3.1.5",
+    "debug": "4.3.3",
+    "devtools-protocol": "0.0.960912",
     "extract-zip": "2.0.1",
     "https-proxy-agent": "5.0.0",
-    "node-fetch": "2.6.5",
     "pkg-dir": "4.2.0",
     "progress": "2.0.3",
     "proxy-from-env": "1.1.0",
     "rimraf": "3.0.2",
     "tar-fs": "2.1.1",
     "unbzip2-stream": "1.4.3",
-    "ws": "8.2.3"
+    "ws": "8.5.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "13.2.0",
-    "@commitlint/config-conventional": "13.2.0",
-    "@microsoft/api-documenter": "7.13.65",
-    "@microsoft/api-extractor": "7.18.15",
+    "@commitlint/cli": "16.2.1",
+    "@commitlint/config-conventional": "16.2.1",
+    "@microsoft/api-documenter": "7.15.3",
+    "@microsoft/api-extractor": "7.19.4",
     "@types/debug": "4.1.7",
     "@types/mime": "2.0.3",
-    "@types/mocha": "9.0.0",
-    "@types/node": "16.10.9",
+    "@types/mocha": "9.1.0",
+    "@types/node": "17.0.19",
+    "@types/progress": "2.0.5",
     "@types/proxy-from-env": "1.0.1",
     "@types/rimraf": "3.0.2",
-    "@types/sinon": "10.0.4",
+    "@types/sinon": "10.0.11",
     "@types/tar-fs": "2.0.1",
-    "@types/ws": "8.2.0",
-    "@typescript-eslint/eslint-plugin": "4.23.0",
-    "@typescript-eslint/parser": "4.33.0",
-    "@web/test-runner": "0.13.18",
-    "commonmark": "0.29.3",
+    "@types/ws": "8.2.3",
+    "@typescript-eslint/eslint-plugin": "5.12.1",
+    "@typescript-eslint/parser": "5.12.1",
+    "@web/test-runner": "0.13.27",
+    "commonmark": "0.30.0",
     "cross-env": "7.0.3",
-    "eslint": "7.32.0",
-    "eslint-config-prettier": "8.3.0",
-    "eslint-plugin-import": "2.22.1",
-    "eslint-plugin-mocha": "9.0.0",
+    "eslint": "8.9.0",
+    "eslint-config-prettier": "8.4.0",
+    "eslint-plugin-import": "2.25.4",
+    "eslint-plugin-mocha": "10.0.3",
     "eslint-plugin-prettier": "4.0.0",
-    "eslint-plugin-unicorn": "37.0.1",
+    "eslint-plugin-unicorn": "41.0.0",
     "esprima": "4.0.1",
     "expect": "25.2.7",
-    "husky": "7.0.2",
-    "jpeg-js": "0.3.7",
-    "mime": "2.5.2",
-    "minimist": "1.2.0",
-    "mocha": "9.1.3",
+    "husky": "7.0.4",
+    "jpeg-js": "0.4.3",
+    "mime": "3.0.0",
+    "minimist": "1.2.5",
+    "mocha": "9.2.1",
     "ncp": "2.0.0",
     "pixelmatch": "5.2.1",
     "pngjs": "6.0.0",
-    "prettier": "2.3.0",
-    "sinon": "9.2.4",
-    "source-map-support": "0.5.19",
+    "prettier": "2.5.1",
+    "sinon": "13.0.1",
+    "source-map-support": "0.5.21",
     "standard-version": "9.3.2",
     "text-diff": "1.0.1",
-    "ts-node": "10.4.0",
-    "typescript": "4.4.4"
+    "ts-node": "10.5.0",
+    "typescript": "4.5.5"
   }
 }

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

@@ -7,6 +7,7 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as WindowBoundsService from '../../../services/window_bounds/window_bounds.js';
 import * as CM from '../../../third_party/codemirror.next/codemirror.next.js';
 import * as CodeHighlighter from '../code_highlighter/code_highlighter.js';
+import * as Icon from '../icon_button/icon_button.js';
 
 import {editorTheme} from './theme.js';
 
@@ -82,7 +83,22 @@ export const sourcesAutocompletion = DynamicSetting.bool('textEditorAutocompleti
 
 export const bracketMatching = DynamicSetting.bool('textEditorBracketMatching', CM.bracketMatching());
 
-export const codeFolding = DynamicSetting.bool('textEditorCodeFolding', [CM.foldGutter(), CM.keymap.of(CM.foldKeymap)]);
+export const codeFolding = DynamicSetting.bool('textEditorCodeFolding', [
+  CM.foldGutter({
+    markerDOM(open: boolean): HTMLElement {
+      const iconName = open ? 'triangle-expanded' : 'triangle-collapsed';
+      const icon = new Icon.Icon.Icon();
+      icon.data = {
+        iconName,
+        color: 'var(--color-text-secondary)',
+        width: '12px',
+        height: '12px',
+      };
+      return icon;
+    },
+  }),
+  CM.keymap.of(CM.foldKeymap),
+]);
 
 export function guessIndent(doc: CM.Text): string {
   const values: {[indent: string]: number} = Object.create(null);

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

@@ -4,11 +4,13 @@
 
 import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js';
 
+export type ArgumentHintsTooltip = [CodeMirror.StateField<CodeMirror.Tooltip|null>, CodeMirror.ViewPlugin<{}>];
+export const closeTooltip = CodeMirror.StateEffect.define<null>();
+
 export function cursorTooltip(
     source: (state: CodeMirror.EditorState, pos: number) => Promise<(() => CodeMirror.TooltipView)|null>,
-    ): CodeMirror.Extension {
+    ): ArgumentHintsTooltip {
   const openTooltip = CodeMirror.StateEffect.define<() => CodeMirror.TooltipView>();
-  const closeTooltip = CodeMirror.StateEffect.define<null>();
 
   const state = CodeMirror.StateField.define<null|CodeMirror.Tooltip>({
     create() {
@@ -41,18 +43,18 @@ export function cursorTooltip(
     update(update: CodeMirror.ViewUpdate): void {
       this.updateID++;
       if (update.transactions.some(tr => tr.selection) && update.state.selection.main.empty) {
-        this.scheduleUpdate(update.view);
+        this.#scheduleUpdate(update.view);
       }
     }
 
-    scheduleUpdate(view: CodeMirror.EditorView): void {
+    #scheduleUpdate(view: CodeMirror.EditorView): void {
       if (this.pending > -1) {
         clearTimeout(this.pending);
       }
-      this.pending = window.setTimeout(() => this.startUpdate(view), 50) as unknown as number;
+      this.pending = window.setTimeout(() => this.#startUpdate(view), 50) as unknown as number;
     }
 
-    startUpdate(view: CodeMirror.EditorView): void {
+    #startUpdate(view: CodeMirror.EditorView): void {
       this.pending = -1;
       const {main} = view.state.selection;
       if (main.empty) {
@@ -60,7 +62,7 @@ export function cursorTooltip(
         void source(view.state, main.from).then(tooltip => {
           if (this.updateID !== updateID) {
             if (this.pending < 0) {
-              this.scheduleUpdate(view);
+              this.#scheduleUpdate(view);
             }
           } else if (tooltip) {
             view.dispatch({effects: openTooltip.of(tooltip)});

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

@@ -7,7 +7,8 @@ import * as Formatter from '../../../models/formatter/formatter.js';
 import * as JavaScriptMetaData from '../../../models/javascript_metadata/javascript_metadata.js';
 import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js';
 import * as UI from '../../legacy/legacy.js';
-import {cursorTooltip} from './cursor_tooltip.js';
+
+import {type ArgumentHintsTooltip, closeTooltip, cursorTooltip} from './cursor_tooltip.js';
 
 export function completion(): CodeMirror.Extension {
   return CodeMirror.javascript.javascriptLanguage.data.of({
@@ -225,6 +226,7 @@ async function evaluateExpression(
 
 const primitivePrototypes = new Map<string, string>([
   ['string', 'String'],
+  ['symbol', 'Symbol'],
   ['number', 'Number'],
   ['boolean', 'Boolean'],
   ['bigint', 'BigInt'],
@@ -319,9 +321,7 @@ async function completePropertiesInner(
     object = innerObject as SDK.RemoteObject.RemoteObject;
   }
 
-  const toPrototype = object.subtype === 'array' ?
-      'Array' :
-      object.subtype === 'typedarray' ? 'Uint8Array' : primitivePrototypes.get(object.type);
+  const toPrototype = primitivePrototypes.get(object.type);
   if (toPrototype) {
     object = await evaluateExpression(context, toPrototype + '.prototype', 'completion');
   }
@@ -329,7 +329,8 @@ async function completePropertiesInner(
   const functionType = expression === 'globalThis' ? 'function' : 'method';
   const otherType = expression === 'globalThis' ? 'variable' : 'property';
   if (object && (object.type === 'object' || object.type === 'function')) {
-    const properties = await object.getAllProperties(false, false);
+    const properties = await object.getAllProperties(
+        /* accessorPropertiesOnly */ false, /* generatePreview */ false, /* nonIndexedPropertiesOnly */ true);
     const isFunction = object.type === 'function';
     for (const prop of properties.properties || []) {
       if (!prop.symbol && !(isFunction && (prop.name === 'arguments' || prop.name === 'caller')) &&
@@ -420,10 +421,21 @@ export async function isExpressionComplete(expression: string): Promise<boolean>
   return false;
 }
 
-export function argumentHints(): CodeMirror.Extension {
+export function argumentHints(): ArgumentHintsTooltip {
   return cursorTooltip(getArgumentHints);
 }
 
+export function closeArgumentsHintsTooltip(
+    view: CodeMirror.EditorView, tooltip: CodeMirror.StateField<CodeMirror.Tooltip|null>): boolean {
+  // If the tooltip is currently showing, the state will reflect its properties.
+  // If it isn't showing, the state is explicitly set to `null`.
+  if (view.state.field(tooltip) === null) {
+    return false;
+  }
+  view.dispatch({effects: closeTooltip.of(null)});
+  return true;
+}
+
 async function getArgumentHints(
     state: CodeMirror.EditorState, pos: number): Promise<(() => CodeMirror.TooltipView)|null> {
   const node = CodeMirror.syntaxTree(state).resolveInner(pos).enterUnfinishedNodesBefore(pos);

package/front_end/ui/components/text_prompt/TextPrompt.ts

@@ -55,7 +55,7 @@ export class TextPrompt extends HTMLElement {
   }
 
   #input(): HTMLInputElement {
-    const inputElement = this.#shadow.querySelector<HTMLInputElement>('input');
+    const inputElement = this.#shadow.querySelector<HTMLInputElement>('.input');
     if (!inputElement) {
       throw new Error('Expected an input element!');
     }
@@ -67,7 +67,7 @@ export class TextPrompt extends HTMLElement {
   }
 
   onInput(): void {
-    this.#suggestion().textContent = this.#text();
+    this.#suggestion().value = this.#text();
     this.dispatchEvent(new PromptInputEvent(this.#text().trim()));
   }
 
@@ -98,12 +98,13 @@ export class TextPrompt extends HTMLElement {
 
   setSuggestion(suggestion: string): void {
     this.#suggestionText = suggestion;
+    this.#suggestion().value += this.#suggestionText;
     this.#render();
   }
 
   setText(text: string): void {
     this.#input().value = text;
-    this.#suggestion().textContent = this.#text();
+    this.#suggestion().value = this.#text();
 
     if (this.#input().hasFocus()) {
       this.moveCaretToEndOfInput();
@@ -111,8 +112,8 @@ export class TextPrompt extends HTMLElement {
     }
   }
 
-  #suggestion(): HTMLSpanElement {
-    const suggestionElement = this.#shadow.querySelector<HTMLSpanElement>('.suggestion');
+  #suggestion(): HTMLInputElement {
+    const suggestionElement = this.#shadow.querySelector<HTMLInputElement>('.suggestion');
     if (!suggestionElement) {
       throw new Error('Expected an suggestion element!');
     }
@@ -126,9 +127,9 @@ export class TextPrompt extends HTMLElement {
   #render(): void {
     const output = LitHtml.html`
       <span class="prefix">${this.#prefixText} </span>
-      <span class="text-prompt-input"><input aria-label=${this.#ariaLabelText} spellcheck="false" @input=${
-        this.onInput} @keydown=${this.onKeyDown}/><span class='suggestion' suggestion=${
-        this.#suggestionText}></span></span>`;
+      <span class="text-prompt-input"><input class="input" aria-label=${
+        this.#ariaLabelText} spellcheck="false" @input=${this.onInput} @keydown=${
+        this.onKeyDown}/><input class="suggestion" aria-label=${this.#ariaLabelText + ' Suggestion'}></span>`;
     LitHtml.render(output, this.#shadow, {host: this});
   }
 }

package/front_end/ui/components/text_prompt/textPrompt.css

@@ -32,13 +32,8 @@
 }
 
 .text-prompt-input .suggestion {
-  color: transparent;
+  color: var(--color-background-highlight);
   position: absolute;
   left: 0;
   z-index: 1;
 }
-
-.text-prompt-input .suggestion::after {
-  content: attr(suggestion);
-  color: var(--color-background-highlight);
-}

package/front_end/ui/legacy/TabbedPane.ts

@@ -1019,6 +1019,9 @@ export class TabbedPaneTab {
     this.titleInternal = title;
     if (this.titleElement) {
       this.titleElement.textContent = title;
+      const closeIconContainer = this.tabElementInternal?.querySelector('.close-button');
+      closeIconContainer?.setAttribute('title', i18nString(UIStrings.closeS, {PH1: title}));
+      closeIconContainer?.setAttribute('aria-label', i18nString(UIStrings.closeS, {PH1: title}));
     }
     delete this.measuredWidth;
   }

package/front_end/ui/legacy/Toolbar.ts

@@ -542,6 +542,7 @@ export class ToolbarButton extends ToolbarItem<ToolbarButton.EventTypes> {
   private textElement: HTMLElement;
   private text?: string;
   private glyph?: string;
+  private icon?: HTMLElement;
   /**
    * TODO(crbug.com/1126026): remove glyph parameter in favor of icon.
    */
@@ -557,11 +558,8 @@ export class ToolbarButton extends ToolbarItem<ToolbarButton.EventTypes> {
     this.textElement = this.element.createChild('div', 'toolbar-text hidden');
 
     this.setTitle(title);
-    if (glyphOrIcon instanceof HTMLElement) {
-      glyphOrIcon.classList.add('toolbar-icon');
-      this.element.append(glyphOrIcon);
-    } else if (glyphOrIcon) {
-      this.setGlyph(glyphOrIcon);
+    if (glyphOrIcon) {
+      this.setGlyphOrIcon(glyphOrIcon);
     }
     this.setText(text || '');
     this.title = '';
@@ -580,6 +578,20 @@ export class ToolbarButton extends ToolbarItem<ToolbarButton.EventTypes> {
     this.text = text;
   }
 
+  setGlyphOrIcon(glyphOrIcon: string|HTMLElement): void {
+    if (glyphOrIcon instanceof HTMLElement) {
+      glyphOrIcon.classList.add('toolbar-icon');
+      if (this.icon) {
+        this.icon.replaceWith(glyphOrIcon);
+      } else {
+        this.element.appendChild(glyphOrIcon);
+      }
+      this.icon = glyphOrIcon;
+    } else if (glyphOrIcon) {
+      this.setGlyph(glyphOrIcon);
+    }
+  }
+
   setGlyph(glyph: string): void {
     if (this.glyph === glyph) {
       return;
@@ -739,14 +751,14 @@ export namespace ToolbarInput {
 
 export class ToolbarToggle extends ToolbarButton {
   private toggledInternal: boolean;
-  private readonly untoggledGlyph: string|undefined;
-  private readonly toggledGlyph: string|undefined;
+  private readonly untoggledGlyphOrIcon: string|HTMLElement|undefined;
+  private readonly toggledGlyphOrIcon: string|HTMLElement|undefined;
 
-  constructor(title: string, glyph?: string, toggledGlyph?: string) {
-    super(title, glyph, '');
+  constructor(title: string, glyphOrIcon?: string|HTMLElement, toggledGlyphOrIcon?: string|HTMLElement) {
+    super(title, glyphOrIcon, '');
     this.toggledInternal = false;
-    this.untoggledGlyph = glyph;
-    this.toggledGlyph = toggledGlyph;
+    this.untoggledGlyphOrIcon = glyphOrIcon;
+    this.toggledGlyphOrIcon = toggledGlyphOrIcon;
     this.element.classList.add('toolbar-state-off');
     ARIAUtils.setPressed(this.element, false);
   }
@@ -763,8 +775,8 @@ export class ToolbarToggle extends ToolbarButton {
     this.element.classList.toggle('toolbar-state-on', toggled);
     this.element.classList.toggle('toolbar-state-off', !toggled);
     ARIAUtils.setPressed(this.element, toggled);
-    if (this.toggledGlyph && this.untoggledGlyph) {
-      this.setGlyph(toggled ? this.toggledGlyph : this.untoggledGlyph);
+    if (this.toggledGlyphOrIcon && this.untoggledGlyphOrIcon) {
+      this.setGlyphOrIcon(toggled ? this.toggledGlyphOrIcon : this.untoggledGlyphOrIcon);
     }
   }
 

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

@@ -1018,9 +1018,23 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
           this.property.value, this.property.wasThrown, showPreview, this.listItemElement, this.linkifier);
       this.valueElement = (this.propertyValue.element as HTMLElement);
     } else if (this.property.getter) {
-      this.valueElement = ObjectPropertyTreeElement.createRemoteObjectAccessorPropertySpan(
-          (parentMap.get(this.property) as SDK.RemoteObject.RemoteObject), [this.property.name],
-          this.onInvokeGetterClick.bind(this));
+      this.valueElement = document.createElement('span');
+      const element = this.valueElement.createChild('span');
+      element.textContent = i18nString(UIStrings.dots);
+      element.classList.add('object-value-calculate-value-button');
+      UI.Tooltip.Tooltip.install(element, i18nString(UIStrings.invokePropertyGetter));
+      const object = parentMap.get(this.property) as SDK.RemoteObject.RemoteObject;
+      const getter = this.property.getter;
+      element.addEventListener('click', (event: Event) => {
+        event.consume();
+        // @ts-ignore No way to teach TypeScript to preserve the Function-ness of `getter`.
+        void object.callFunction(invokeGetter, [SDK.RemoteObject.RemoteObject.toCallArgument(getter)])
+            .then(this.onInvokeGetterClick.bind(this));
+
+        function invokeGetter(this: Object, getter: Function): Object {
+          return Reflect.apply(getter, this, []);
+        }
+      }, false);
     } else {
       this.valueElement = document.createElement('span');
       this.valueElement.classList.add('object-value-undefined');

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

@@ -8,16 +8,16 @@ import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 
 import {ResourceSourceFrame} from './ResourceSourceFrame.js';
 
-// TODO(crbug.com/1253323): Casts to UrlString will be removed from this file when migration to branded types is complete.
-
 export class BinaryResourceViewFactory {
   private base64content: string;
-  private readonly contentUrl: string;
+  private readonly contentUrl: Platform.DevToolsPath.UrlString;
   private readonly resourceType: Common.ResourceType.ResourceType;
   private arrayPromise: Promise<Uint8Array>|null;
   private hexPromise: Promise<TextUtils.ContentProvider.DeferredContent>|null;
   private utf8Promise: Promise<TextUtils.ContentProvider.DeferredContent>|null;
-  constructor(base64content: string, contentUrl: string, resourceType: Common.ResourceType.ResourceType) {
+  constructor(
+      base64content: string, contentUrl: Platform.DevToolsPath.UrlString,
+      resourceType: Common.ResourceType.ResourceType) {
     this.base64content = base64content;
     this.contentUrl = contentUrl;
     this.resourceType = resourceType;
@@ -70,8 +70,8 @@ export class BinaryResourceViewFactory {
   }
 
   createHexView(): ResourceSourceFrame {
-    const hexViewerContentProvider = new TextUtils.StaticContentProvider.StaticContentProvider(
-        this.contentUrl as Platform.DevToolsPath.UrlString, this.resourceType, async () => {
+    const hexViewerContentProvider =
+        new TextUtils.StaticContentProvider.StaticContentProvider(this.contentUrl, this.resourceType, async () => {
           const contentAsArray = await this.fetchContentAsArray();
           const content = BinaryResourceViewFactory.uint8ArrayToHexViewer(contentAsArray);
           return {content, isEncoded: false};
@@ -82,8 +82,8 @@ export class BinaryResourceViewFactory {
 
   createUtf8View(): ResourceSourceFrame {
     const utf8fn = this.utf8.bind(this);
-    const utf8ContentProvider = new TextUtils.StaticContentProvider.StaticContentProvider(
-        this.contentUrl as Platform.DevToolsPath.UrlString, this.resourceType, utf8fn);
+    const utf8ContentProvider =
+        new TextUtils.StaticContentProvider.StaticContentProvider(this.contentUrl, this.resourceType, utf8fn);
     return new ResourceSourceFrame(
         utf8ContentProvider, this.resourceType.canonicalMimeType(), {lineNumbers: true, lineWrapping: true});
   }

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

@@ -211,7 +211,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
       TextEditor.Config.sourcesAutocompletion.instance(),
       TextEditor.Config.showWhitespace.instance(),
       TextEditor.Config.allowScrollPastEof.instance(),
-      TextEditor.Config.codeFolding.instance(),
+      CodeMirror.Prec.lowest(TextEditor.Config.codeFolding.instance()),
       TextEditor.Config.autoDetectIndent.instance(),
       sourceFrameTheme,
       CodeMirror.EditorView.domEventHandlers({