chrome-devtools-frontend 1.0.1638082 → 1.0.1640418

package/front_end/panels/sources/ScopeChainSidebarPane.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) 2008 Apple Inc. All Rights Reserved.
@@ -31,13 +30,14 @@
 
 import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import * as SDK from '../../core/sdk/sdk.js';
+import type * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as SourceMapScopes from '../../models/source_map_scopes/source_map_scopes.js';
 import * as StackTrace from '../../models/stack_trace/stack_trace.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {html, nothing, render, type TemplateResult} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import scopeChainSidebarPaneStyles from './scopeChainSidebarPane.css.js';
@@ -69,32 +69,119 @@ const str_ = i18n.i18n.registerUIStrings('panels/sources/ScopeChainSidebarPane.t
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 let scopeChainSidebarPaneInstance: ScopeChainSidebarPane;
 
+interface ViewInput {
+  linkifier: Components.Linkifier.Linkifier;
+  isPaused: boolean;
+  scopeChain: Array<{
+    scope: SDK.DebuggerModel.ScopeChainEntry,
+    objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree,
+  }>|null;
+}
+type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  const createScopeSectionTreeElement =
+      (scope: SDK.DebuggerModel.ScopeChainEntry,
+       objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree): TemplateResult => {
+        let emptyPlaceholder: Common.UIString.LocalizedString|null = null;
+        if (scope.type() === Protocol.Debugger.ScopeType.Local ||
+            scope.type() === Protocol.Debugger.ScopeType.Closure) {
+          emptyPlaceholder = i18nString(UIStrings.noVariables);
+        }
+        const icon = scope.icon();
+        const {title, subtitle} = scopeTitle(scope);
+        const section = new ObjectUI.ObjectPropertiesSection.RootElement(objectTree, input.linkifier, emptyPlaceholder);
+        section.listItemElement.classList.add('scope-chain-sidebar-pane-section');
+        section.listItemElement.setAttribute('aria-label', title);
+
+        const titleNode = document.createDocumentFragment();
+        // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+        render(
+            html`<div class='scope-chain-sidebar-pane-section-header tree-element-title'>${
+                icon ? html`<img class=scope-chain-sidebar-pane-section-icon src=${icon}>` : nothing}
+                   <div class=scope-chain-sidebar-pane-section-subtitle>${subtitle}</div>
+                   <div class=scope-chain-sidebar-pane-section-title>${title}</div>
+                 </div>`,
+            titleNode);
+        section.title = titleNode;
+
+        if (scope === input.scopeChain?.[0]?.scope) {
+          section.select(/* omitFocus */ true);
+        }
+
+        return html`<devtools-tree-wrapper .treeElement=${section}></devtools-tree-wrapper>`;
+      };
+
+  render(
+      // clang-format off
+      html`
+    <style>${scopeChainSidebarPaneStyles}</style>
+    ${input.scopeChain ? html`
+      <devtools-tree autofocus hide-overflow show-selection-on-keyboard-focus .template=${
+            html`<ul role=tree class="source-code object-properties-section">
+          <style>${ObjectUI.ObjectPropertiesSection.objectValueStyles}</style>
+          <style>${ObjectUI.ObjectPropertiesSection.objectPropertiesSectionStyles}</style>
+          <style>${scopeChainSidebarPaneStyles}</style>
+          ${input.scopeChain?.map(({scope, objectTree}) => createScopeSectionTreeElement(scope, objectTree)) ?? nothing}
+        </ul>`}>
+      </devtools-tree>` : html`
+      <div class=gray-info-message tabindex=-1>${
+          input.isPaused ? i18nString(UIStrings.loading) : i18nString(UIStrings.notPaused)}</div>`}
+    `,
+      // clang-format on
+      target);
+};
+
+function scopeTitle(scope: SDK.DebuggerModel.ScopeChainEntry): {title: string, subtitle: string|null} {
+  let title = scope.typeName();
+  if (scope.type() === Protocol.Debugger.ScopeType.Closure) {
+    const scopeName = scope.name();
+    if (scopeName) {
+      title = i18nString(UIStrings.closureS, {PH1: UI.UIUtils.beautifyFunctionName(scopeName)});
+    } else {
+      title = i18nString(UIStrings.closure);
+    }
+  }
+  let subtitle: string|null = scope.description();
+  if (!title || title === subtitle) {
+    subtitle = null;
+  }
+  return {title, subtitle};
+}
+
+function scopeKey(scope: SDK.DebuggerModel.ScopeChainEntry): string {
+  let title = scope.typeName();
+  if (scope.type() === Protocol.Debugger.ScopeType.Closure) {
+    const scopeName = scope.name();
+    if (scopeName) {
+      title = `Closure: ${UI.UIUtils.beautifyFunctionName(scopeName)}`;
+    } else {
+      title = 'Closure';
+    }
+  }
+  let subtitle: string|null = scope.description();
+  if (!title || title === subtitle) {
+    subtitle = null;
+  }
+  return title + (subtitle ? ':' + subtitle : '');
+}
 export class ScopeChainSidebarPane extends UI.Widget.VBox implements UI.ContextFlavorListener.ContextFlavorListener {
-  private readonly treeOutline: ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeOutline;
-  private readonly expandController: ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeExpandController;
-  private readonly linkifier: Components.Linkifier.Linkifier;
-  private infoElement: HTMLDivElement;
+  readonly #linkifier: Components.Linkifier.Linkifier;
+  #expansionTrackers = new Map<string, ObjectUI.ObjectPropertiesSection.ObjectTreeExpansionTracker>();
   #scopeChainModel: SourceMapScopes.ScopeChainModel.ScopeChainModel|null = null;
+  #scopeChain:
+      Array<{scope: SDK.DebuggerModel.ScopeChainEntry, objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree}>|null =
+          null;
+  #view: View;
 
-  private constructor() {
-    super({
+  constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
+    super(target, {
       jslog: `${VisualLogging.section('sources.scope-chain')}`,
       useShadowDom: true,
     });
-    this.registerRequiredCSS(scopeChainSidebarPaneStyles);
-
-    this.treeOutline = new ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeOutline();
-    this.treeOutline.registerRequiredCSS(scopeChainSidebarPaneStyles);
-    this.treeOutline.setHideOverflow(true);
-
-    this.treeOutline.setShowSelectionOnKeyboardFocus(/* show */ true);
-    this.expandController =
-        new ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeExpandController(this.treeOutline);
-    this.linkifier = new Components.Linkifier.Linkifier();
-    this.infoElement = document.createElement('div');
-    this.infoElement.className = 'gray-info-message';
-    this.infoElement.tabIndex = -1;
+
+    this.#linkifier = new Components.Linkifier.Linkifier();
     this.flavorChanged(UI.Context.Context.instance().flavor(StackTrace.StackTrace.DebuggableFrameFlavor));
+    this.#view = view;
   }
 
   static instance(): ScopeChainSidebarPane {
@@ -104,116 +191,92 @@ export class ScopeChainSidebarPane extends UI.Widget.VBox implements UI.ContextF
     return scopeChainSidebarPaneInstance;
   }
 
-  treeOutlineForTest(): ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeOutline {
-    return this.treeOutline;
+  /**
+   * @deprecated Required for legacy web tests via DebuggerTestRunner.js
+   */
+  get treeOutline(): ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeOutline|null {
+    const devtoolsTree = this.contentElement.querySelector('devtools-tree');
+    if (devtoolsTree) {
+      return (devtoolsTree as UI.TreeOutline.TreeViewElement).getInternalTreeOutlineForTest() as
+          ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeOutline;
+    }
+    return null;
   }
 
   flavorChanged(callFrame: StackTrace.StackTrace.DebuggableFrameFlavor|null): void {
     this.#scopeChainModel?.dispose();
     this.#scopeChainModel = null;
+    this.#scopeChain = null;
 
-    this.linkifier.reset();
-    this.contentElement.removeChildren();
-    this.contentElement.appendChild(this.infoElement);
+    this.#linkifier.reset();
 
     if (callFrame) {
-      // Resolving the scope may take a while to complete, so indicate to the user that something
-      // is happening (see https://crbug.com/1162416).
-      this.infoElement.textContent = i18nString(UIStrings.loading);
-
-      this.#scopeChainModel = new SourceMapScopes.ScopeChainModel.ScopeChainModel(callFrame.sdkFrame);
-      this.#scopeChainModel.addEventListener(
-          SourceMapScopes.ScopeChainModel.Events.SCOPE_CHAIN_UPDATED, event => this.buildScopeTreeOutline(event.data),
-          this);
-    } else {
-      this.infoElement.textContent = i18nString(UIStrings.notPaused);
-    }
-  }
-
-  override focus(): void {
-    if (this.hasFocus()) {
-      return;
+      const scopeChainModel = new SourceMapScopes.ScopeChainModel.ScopeChainModel(callFrame.sdkFrame);
+      this.#scopeChainModel = scopeChainModel;
+      this.#scopeChainModel.addEventListener(SourceMapScopes.ScopeChainModel.Events.SCOPE_CHAIN_UPDATED, event => {
+        if (this.#scopeChainModel === scopeChainModel) {
+          this.#buildScopeChain(event.data);
+        }
+      });
     }
 
-    if (UI.Context.Context.instance().flavor(SDK.DebuggerModel.DebuggerPausedDetails)) {
-      this.treeOutline.forceSelect();
-    }
+    this.requestUpdate();
   }
 
-  private buildScopeTreeOutline(eventScopeChain: SourceMapScopes.ScopeChainModel.ScopeChain): void {
-    const {scopeChain} = eventScopeChain;
+  override performUpdate(): void {
+    this.#view(
+        {
+          linkifier: this.#linkifier,
+          isPaused: Boolean(this.#scopeChainModel),
+          scopeChain: this.#scopeChain,
+        },
+        {}, this.contentElement);
+  }
 
-    this.treeOutline.removeChildren();
+  #buildScopeChain({scopeChain}: SourceMapScopes.ScopeChainModel.ScopeChain): void {
+    const oldExpansionTrackers = this.#expansionTrackers;
+    this.#expansionTrackers = new Map();
+    this.#scopeChain = [];
 
-    this.contentElement.removeChildren();
-    this.contentElement.appendChild(this.treeOutline.element);
-    let foundLocalScope = false;
-    for (const [i, scope] of scopeChain.entries()) {
-      if (scope.type() === Protocol.Debugger.ScopeType.Local) {
-        foundLocalScope = true;
+    for (const scope of scopeChain) {
+      const key = scopeKey(scope);
+      let expansionTracker = this.#expansionTrackers.get(key);
+      if (!expansionTracker) {
+        expansionTracker =
+            oldExpansionTrackers.get(key) ?? new ObjectUI.ObjectPropertiesSection.ObjectTreeExpansionTracker();
+        this.#expansionTrackers.set(key, expansionTracker);
       }
 
-      const section = this.createScopeSectionTreeElement(scope);
+      const objectTree = new ObjectUI.ObjectPropertiesSection.ObjectTree(scope.object(), {
+        propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.ALL,
+        readOnly: false,
+        expansionTracker,
+      });
+      void expansionTracker.apply(objectTree);
+      objectTree.addExtraProperties(...scope.extraProperties());
       if (scope.type() === Protocol.Debugger.ScopeType.Global) {
-        section.collapse();
-      } else if (!foundLocalScope || scope.type() === Protocol.Debugger.ScopeType.Local) {
-        section.expand();
+        objectTree.expanded = false;
       }
 
-      this.treeOutline.appendChild(section);
-      if (i === 0) {
-        section.select(/* omitFocus */ true);
-      }
+      this.#scopeChain.push({scope, objectTree});
     }
-    this.sidebarPaneUpdatedForTest();
-  }
 
-  private createScopeSectionTreeElement(scope: SDK.DebuggerModel.ScopeChainEntry):
-      ObjectUI.ObjectPropertiesSection.RootElement {
-    let emptyPlaceholder: Common.UIString.LocalizedString|null = null;
-    if (scope.type() === Protocol.Debugger.ScopeType.Local || scope.type() === Protocol.Debugger.ScopeType.Closure) {
-      emptyPlaceholder = i18nString(UIStrings.noVariables);
-    }
-
-    let title = scope.typeName();
-    if (scope.type() === Protocol.Debugger.ScopeType.Closure) {
-      const scopeName = scope.name();
-      if (scopeName) {
-        title = i18nString(UIStrings.closureS, {PH1: UI.UIUtils.beautifyFunctionName(scopeName)});
-      } else {
-        title = i18nString(UIStrings.closure);
+    for (const {scope, objectTree} of this.#scopeChain) {
+      if (scope.type() !== Protocol.Debugger.ScopeType.Global) {
+        objectTree.expanded = true;
+      }
+      if (scope.type() === Protocol.Debugger.ScopeType.Local) {
+        break;
       }
     }
-    let subtitle: string|null = scope.description();
-    if (!title || title === subtitle) {
-      subtitle = null;
-    }
-    const icon = scope.icon();
-
-    const titleElement = document.createElement('div');
-    titleElement.classList.add('scope-chain-sidebar-pane-section-header');
-    titleElement.classList.add('tree-element-title');
-    if (icon) {
-      const iconElement = document.createElement('img');
-      iconElement.classList.add('scope-chain-sidebar-pane-section-icon');
-      iconElement.src = icon;
-      titleElement.appendChild(iconElement);
-    }
-    titleElement.createChild('div', 'scope-chain-sidebar-pane-section-subtitle').textContent = subtitle;
-    titleElement.createChild('div', 'scope-chain-sidebar-pane-section-title').textContent = title;
-
-    const root = new ObjectUI.ObjectPropertiesSection.ObjectTree(
-        scope.object(), {propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.ALL, readOnly: false});
-    root.addExtraProperties(...scope.extraProperties());
-    const section = new ObjectUI.ObjectPropertiesSection.RootElement(root, this.linkifier, emptyPlaceholder);
-    section.title = titleElement;
-    section.listItemElement.classList.add('scope-chain-sidebar-pane-section');
-    section.listItemElement.setAttribute('aria-label', title);
-    this.expandController.watchSection(title + (subtitle ? ':' + subtitle : ''), section);
-
-    return section;
+
+    this.requestUpdate();
+    void this.updateComplete.then(() => this.sidebarPaneUpdatedForTest());
   }
 
+  /**
+   * @deprecated Hook for legacy web tests
+   */
   sidebarPaneUpdatedForTest(): void {
   }
 }

package/front_end/panels/timeline/components/IgnoreListSetting.ts

@@ -192,6 +192,7 @@ export class IgnoreListSetting extends UI.Widget.Widget {
     Common.Settings.Settings.instance()
         .moduleSetting('enable-ignore-listing')
         .addChangeListener(this.requestUpdate.bind(this));
+    this.requestUpdate();
   }
 
   #getSkipStackFramesPatternSetting(): Common.Settings.RegExpSetting {

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: Internal
 Version: N/A
-Revision: c76b4a416b8d83c855cffa79e49ac6b5709b42ec
+Revision: d56b17376efe8dc18fbf38aee20fe155821dd910
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/third_party/marked/README.chromium

@@ -1,8 +1,8 @@
 Name: Marked
 Short Name: marked
 URL: https://github.com/markedjs/marked
-Version: 13.0.1
-Revision: aaee616d54e82295d61a61aa26192416c2547ac4
+Version: 18.0.4
+Revision: 0a2cd54cbe91911890e4460ae4fd7b9966e05654
 Update Mechanism: Manual
 License: BSD-3-Clause, MIT
 License File: LICENSE
@@ -14,8 +14,5 @@ Light-weight markdown parser and renderer.
 
 To update this package, run the following command (replace version number with updated version number):
 ```bash
-wget -qO- https://registry.npmjs.org/marked/-/marked-13.0.1.tgz | tar xzf -
+wget -qO- https://registry.npmjs.org/marked/-/marked-18.0.4.tgz | tar xzf -
 ```
-
-Local Modifications:
-- Renamed marked.d.ts to marked.esm.d.ts for TypeScript typechecking.

package/front_end/third_party/marked/package/README.md

@@ -5,7 +5,6 @@
 # Marked
 
 [![npm](https://badgen.net/npm/v/marked)](https://www.npmjs.com/package/marked)
-[![gzip size](https://badgen.net/badgesize/gzip/https://cdn.jsdelivr.net/npm/marked/marked.min.js)](https://cdn.jsdelivr.net/npm/marked/marked.min.js)
 [![install size](https://badgen.net/packagephobia/install/marked)](https://packagephobia.now.sh/result?p=marked)
 [![downloads](https://badgen.net/npm/dt/marked)](https://www.npmjs.com/package/marked)
 [![github actions](https://github.com/markedjs/marked/workflows/Tests/badge.svg)](https://github.com/markedjs/marked/actions)
@@ -18,7 +17,7 @@
 
 ## Demo
 
-Checkout the [demo page](https://marked.js.org/demo/) to see marked in action ⛹️
+Check out the [demo page](https://marked.js.org/demo/) to see Marked in action ⛹️
 
 ## Docs
 
@@ -33,7 +32,7 @@ Also read about:
 
 **Node.js:** Only [current and LTS](https://nodejs.org/en/about/releases/) Node.js versions are supported. End of life Node.js versions may become incompatible with Marked at any point in time.
 
-**Browser:** Not IE11 :)
+**Browser:** [Baseline Widely Available](https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Compatibility)
 
 ## Installation
 
@@ -84,7 +83,7 @@ $ marked --help
 </head>
 <body>
   <div id="content"></div>
-  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js"></script>
   <script>
     document.getElementById('content').innerHTML =
       marked.parse('# Marked in the browser\n\nRendered by **marked**.');
@@ -104,4 +103,5 @@ or import esm module
 
 ## License
 
-Copyright (c) 2011-2022, Christopher Jeffrey. (MIT License)
+Copyright (c) 2018+, MarkedJS. (MIT License)
+Copyright (c) 2011-2018, Christopher Jeffrey. (MIT License)

package/front_end/third_party/marked/package/bin/main.js

@@ -2,13 +2,15 @@
 
 /**
  * Marked CLI
- * Copyright (c) 2011-2013, Christopher Jeffrey (MIT License)
+ * Copyright (c) 2018+, MarkedJS. (MIT License)
+ * Copyright (c) 2011-2018, Christopher Jeffrey. (MIT License)
  */
 
 import { promises } from 'node:fs';
 import { dirname, resolve } from 'node:path';
 import { homedir } from 'node:os';
 import { createRequire } from 'node:module';
+import { pathToFileURL } from 'node:url';
 import { marked } from '../lib/marked.esm.js';
 
 const { access, readFile, writeFile } = promises;
@@ -28,18 +30,21 @@ export async function main(nodeProcess) {
     const options = {
       cwd: nodeProcess.cwd(),
       env: nodeProcess.env,
-      stdio: 'inherit'
+      stdio: 'inherit',
     };
 
     const __dirname = dirname(fileURLToPath(import.meta.url));
     const helpText = await readFile(resolve(__dirname, '../man/marked.1.md'), 'utf8');
 
-    // eslint-disable-next-line promise/param-names
     await new Promise(res => {
-      spawn('man', [resolve(__dirname, '../man/marked.1')], options)
-        .on('error', () => {
-          console.log(helpText);
-        })
+      const manProcess = spawn('man', [resolve(__dirname, '../man/marked.1')], options);
+      nodeProcess.on('SIGINT', () => {
+        manProcess.kill('SIGINT');
+      });
+
+      manProcess.on('error', () => {
+        console.log(helpText);
+      })
         .on('close', res);
     });
   }
@@ -128,7 +133,7 @@ export async function main(nodeProcess) {
         default:
           if (arg.indexOf('--') === 0) {
             opt = camelize(arg.replace(/^--(no-)?/, ''));
-            if (!marked.defaults.hasOwnProperty(opt)) {
+            if (!(opt in marked.defaults)) {
               continue;
             }
             if (arg.indexOf('--no-') === 0) {
@@ -148,16 +153,16 @@ export async function main(nodeProcess) {
     }
 
     async function getData() {
-      if (!input) {
-        if (files.length <= 2) {
-          if (string) {
-            return string;
-          }
-          return await getStdin();
-        }
-        input = files.pop();
+      if (string) {
+        return string;
+      }
+      if (input) {
+        return await readFile(input, 'utf8');
+      }
+      if (files.length > 0) {
+        return await readFile(files.pop(), 'utf8');
       }
-      return await readFile(input, 'utf8');
+      return await getStdin();
     }
 
     function resolveFile(file) {
@@ -174,12 +179,12 @@ export async function main(nodeProcess) {
       try {
         // try require for json
         markedConfig = require(configFile);
-      } catch (err) {
+      } catch(err) {
         if (err.code !== 'ERR_REQUIRE_ESM') {
           throw err;
         }
         // must import esm
-        markedConfig = await import('file:///' + configFile);
+        markedConfig = await import(pathToFileURL(configFile).href);
       }
 
       if (markedConfig.default) {
@@ -205,7 +210,7 @@ export async function main(nodeProcess) {
       const defaultConfig = [
         '~/.marked.json',
         '~/.marked.js',
-        '~/.marked/index.js'
+        '~/.marked/index.js',
       ];
 
       for (const configFile of defaultConfig) {
@@ -266,9 +271,9 @@ export async function main(nodeProcess) {
   }
 
   try {
-    await start(nodeProcess.argv.slice());
+    await start(nodeProcess.argv.slice(2));
     nodeProcess.exit(0);
-  } catch (err) {
+  } catch(err) {
     if (err.code === 'ENOENT') {
       nodeProcess.stderr.write('marked: ' + err.path + ': No such file or directory');
     } else {

package/front_end/third_party/marked/package/bin/marked.js

@@ -2,7 +2,8 @@
 
 /**
  * Marked CLI
- * Copyright (c) 2011-2013, Christopher Jeffrey (MIT License)
+ * Copyright (c) 2018+, MarkedJS. (MIT License)
+ * Copyright (c) 2011-2018, Christopher Jeffrey. (MIT License)
  */
 
 import { main } from './main.js';