chrome-devtools-frontend 1.0.976172 → 1.0.977567

package/front_end/panels/elements/LayersWidget.ts

@@ -84,8 +84,9 @@ export class LayersWidget extends UI.Widget.Widget {
     const makeTreeNode = (parentId: string) =>
         (layer: Protocol.CSS.CSSLayerData): TreeOutline.TreeOutlineUtils.TreeNode<string> => {
           const subLayers = layer.subLayers;
-          const treeNodeData = layer.order + ': ' + layer.name;
-          const id = parentId ? parentId + '.' + layer.name : layer.name;
+          const name = SDK.CSSModel.CSSModel.readableLayerName(layer.name);
+          const treeNodeData = layer.order + ': ' + name;
+          const id = parentId ? parentId + '.' + name : name;
           if (!subLayers) {
             return {treeNodeData, id};
           }
@@ -96,7 +97,7 @@ export class LayersWidget extends UI.Widget.Widget {
                 Promise.resolve(subLayers.sort((layer1, layer2) => layer1.order - layer2.order).map(makeTreeNode(id))),
           };
         };
-    const rootLayer = await this.cssModel.rootLayerPromise(node.id);
+    const rootLayer = await this.cssModel.getRootLayer(node.id);
     this.layerTreeComponent.data = {
       defaultRenderer: TreeOutline.TreeOutline.defaultRenderer,
       tree: [makeTreeNode('')(rootLayer)],

package/front_end/panels/elements/MetricsSidebarPane.ts

@@ -88,8 +88,8 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
     }
 
     const promises = [
-      cssModel.computedStylePromise(node.id).then(callback.bind(this)),
-      cssModel.inlineStylesPromise(node.id).then(inlineStyleResult => {
+      cssModel.getComputedStyle(node.id).then(callback.bind(this)),
+      cssModel.getInlineStyles(node.id).then(inlineStyleResult => {
         if (inlineStyleResult && this.node() === node) {
           this.inlineStyle = inlineStyleResult.inlineStyle;
         }

package/front_end/panels/elements/PlatformFontsWidget.ts

@@ -88,7 +88,7 @@ export class PlatformFontsWidget extends UI.ThrottledWidget.ThrottledWidget {
       return Promise.resolve();
     }
 
-    return cssModel.platformFontsPromise(node.id).then(this.refreshUI.bind(this, node));
+    return cssModel.getPlatformFonts(node.id).then(this.refreshUI.bind(this, node));
   }
 
   private refreshUI(node: SDK.DOMModel.DOMNode, platformFonts: Protocol.CSS.PlatformFontUsage[]|null): void {

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -278,7 +278,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     const cssModel = this.parentPaneInternal.cssModel();
     const node = this.node();
     if (cssModel && node && typeof node.id !== 'undefined') {
-      const contrastInfo = new ColorPicker.ContrastInfo.ContrastInfo(await cssModel.backgroundColorsPromise(node.id));
+      const contrastInfo = new ColorPicker.ContrastInfo.ContrastInfo(await cssModel.getBackgroundColors(node.id));
       swatchIcon.setContrastInfo(contrastInfo);
     }
   }

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -875,7 +875,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       if (parentRule instanceof SDK.CSSRule.CSSStyleRule) {
         const layers = parentRule.layers;
         if ((layers.length || lastLayers) && lastLayers !== layers) {
-          const block = SectionBlock.createLayerBlock(layers);
+          const block = SectionBlock.createLayerBlock(parentRule);
           blocks.push(block);
           sawLayers = true;
           lastLayers = layers;
@@ -1430,18 +1430,21 @@ export class SectionBlock {
     return new SectionBlock(separatorElement);
   }
 
-  static createLayerBlock(layers: SDK.CSSLayer.CSSLayer[]): SectionBlock {
+  static createLayerBlock(rule: SDK.CSSRule.CSSStyleRule): SectionBlock {
     const separatorElement = document.createElement('div');
     separatorElement.className = 'sidebar-separator layer-separator';
     UI.UIUtils.createTextChild(separatorElement.createChild('div'), i18nString(UIStrings.layer));
-    if (!layers.length) {
-      UI.UIUtils.createTextChild(separatorElement.createChild('div'), '\xa0user\xa0agent\xa0stylesheet');
+    const layers = rule.layers;
+    if (!layers.length && rule.origin === Protocol.CSS.StyleSheetOrigin.UserAgent) {
+      const name = rule.origin === Protocol.CSS.StyleSheetOrigin.UserAgent ? '\xa0user\xa0agent\xa0stylesheet' :
+                                                                             '\xa0implicit\xa0outer\xa0layer';
+      UI.UIUtils.createTextChild(separatorElement.createChild('div'), name);
       return new SectionBlock(separatorElement);
     }
     const layerLink = separatorElement.createChild('button') as HTMLButtonElement;
     layerLink.className = 'link';
     layerLink.title = i18nString(UIStrings.clickToRevealLayer);
-    const name = layers.map(layer => layer.text || '<anonymous>').join('.');
+    const name = layers.map(layer => SDK.CSSModel.CSSModel.readableLayerName(layer.text)).join('.');
     layerLink.textContent = name;
     layerLink.onclick = (): Promise<void> => LayersWidget.LayersWidget.instance().revealLayer(name);
     return new SectionBlock(separatorElement);
@@ -3192,13 +3195,12 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
       if (!node || this.selectedNodeComputedStyles) {
         return;
       }
-      this.selectedNodeComputedStyles = await node.domModel().cssModel().computedStylePromise(node.id);
+      this.selectedNodeComputedStyles = await node.domModel().cssModel().getComputedStyle(node.id);
       const parentNode = node.parentNode;
       if (parentNode) {
-        this.parentNodeComputedStyles = await parentNode.domModel().cssModel().computedStylePromise(parentNode.id);
+        this.parentNodeComputedStyles = await parentNode.domModel().cssModel().getComputedStyle(parentNode.id);
       }
     };
-
     for (const result of results) {
       await ensureComputedStyles();
       // Using parent node's computed styles does not work in all cases. For example:

package/front_end/panels/emulation/MediaQueryInspector.ts

@@ -165,7 +165,7 @@ export class MediaQueryInspector extends UI.Widget.Widget implements
       return Promise.resolve();
     }
 
-    return this.cssModel.mediaQueriesPromise().then(this.rebuildMediaQueries.bind(this));
+    return this.cssModel.getMediaQueries().then(this.rebuildMediaQueries.bind(this));
   }
 
   private squashAdjacentEqual(models: MediaQueryUIModel[]): MediaQueryUIModel[] {

package/front_end/panels/issues/IssueView.ts

@@ -131,7 +131,7 @@ class AffectedRequestsView extends AffectedResourcesView {
 const issueTypeToNetworkHeaderMap =
     new Map<IssuesManager.Issue.IssueCategory, NetworkForward.UIRequestLocation.UIRequestTabs>([
       [
-        IssuesManager.Issue.IssueCategory.SameSiteCookie,
+        IssuesManager.Issue.IssueCategory.Cookie,
         NetworkForward.UIRequestLocation.UIRequestTabs.Cookies,
       ],
       [

package/front_end/panels/issues/IssuesPane.ts

@@ -127,7 +127,7 @@ class IssueCategoryView extends UI.TreeOutline.TreeElement {
         return i18nString(UIStrings.crossOriginEmbedderPolicy);
       case IssuesManager.Issue.IssueCategory.MixedContent:
         return i18nString(UIStrings.mixedContent);
-      case IssuesManager.Issue.IssueCategory.SameSiteCookie:
+      case IssuesManager.Issue.IssueCategory.Cookie:
         return i18nString(UIStrings.samesiteCookie);
       case IssuesManager.Issue.IssueCategory.HeavyAd:
         return i18nString(UIStrings.heavyAds);

package/front_end/panels/network/NetworkLogView.ts

@@ -1716,7 +1716,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
       return false;
     }
     if (this.onlyIssuesFilterUI.checked() &&
-        !IssuesManager.RelatedIssue.hasIssueOfCategory(request, IssuesManager.Issue.IssueCategory.SameSiteCookie)) {
+        !IssuesManager.RelatedIssue.hasIssueOfCategory(request, IssuesManager.Issue.IssueCategory.Cookie)) {
       return false;
     }
     if (this.onlyBlockedRequestsUI.checked() && !request.wasBlocked() && !request.corsErrorStatus()) {

package/front_end/panels/sources/CSSPlugin.ts

@@ -4,13 +4,17 @@
 
 import * as Common from '../../core/common/common.js';
 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 type * as Protocol from '../../generated/protocol.js';
 import type * as Workspace from '../../models/workspace/workspace.js';
 import * as ColorPicker from '../../ui/legacy/components/color_picker/color_picker.js';
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
+import type * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
+import {assertNotNullOrUndefined} from '../../core/platform/platform.js';
 import {Plugin} from './Plugin.js';
 
 // Plugin to add CSS completion, shortcuts, and color/curve swatches
@@ -29,17 +33,6 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/sources/CSSPlugin.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export function completion(): CodeMirror.Extension {
-  const {cssCompletionSource} = CodeMirror.css;
-  return CodeMirror.autocompletion({
-    override:
-        [async(cx: CodeMirror.CompletionContext):
-             Promise<CodeMirror.CompletionResult|null> => {
-               return (await specificCssCompletion(cx)) || cssCompletionSource(cx);
-             }],
-  });
-}
-
 const dontCompleteIn = new Set(['ColorLiteral', 'NumberLiteral', 'StringLiteral', 'Comment', 'Important']);
 
 function findPropertyAt(node: CodeMirror.SyntaxNode, pos: number): CodeMirror.SyntaxNode|null {
@@ -57,18 +50,43 @@ function findPropertyAt(node: CodeMirror.SyntaxNode, pos: number): CodeMirror.Sy
   return null;
 }
 
-function specificCssCompletion(cx: CodeMirror.CompletionContext): CodeMirror.CompletionResult|null {
+function getCurrentStyleSheet(
+    url: Platform.DevToolsPath.UrlString, cssModel: SDK.CSSModel.CSSModel): Protocol.CSS.StyleSheetId {
+  const currentStyleSheet = cssModel.getStyleSheetIdsForURL(url);
+  if (currentStyleSheet.length === 0) {
+    Platform.DCHECK(() => currentStyleSheet.length !== 0, 'Can\'t find style sheet ID for current URL');
+  }
+
+  return currentStyleSheet[0];
+}
+
+async function specificCssCompletion(
+    cx: CodeMirror.CompletionContext, uiSourceCode: Workspace.UISourceCode.UISourceCode,
+    cssModel: SDK.CSSModel.CSSModel|undefined): Promise<CodeMirror.CompletionResult|null> {
   const node = CodeMirror.syntaxTree(cx.state).resolveInner(cx.pos, -1);
+  if (node.name === 'ClassName') {
+    // Should never happen, but let's code defensively here
+    assertNotNullOrUndefined(cssModel);
+
+    const currentStyleSheet = getCurrentStyleSheet(uiSourceCode.url(), cssModel);
+    const existingClassNames = await cssModel.getClassNames(currentStyleSheet);
+
+    return {
+      from: node.from,
+      options: existingClassNames.map(value => ({type: 'constant', label: value})),
+    };
+  }
   const property = findPropertyAt(node, cx.pos);
-  if (!property) {
-    return null;
+  if (property) {
+    const propertyValues =
+        SDK.CSSMetadata.cssMetadata().getPropertyValues(cx.state.sliceDoc(property.from, property.to));
+    return {
+      from: node.name === 'ValueName' ? node.from : cx.pos,
+      options: propertyValues.map(value => ({type: 'constant', label: value})),
+      span: /^[\w\P{ASCII}\-]+$/u,
+    };
   }
-  const propertyValues = SDK.CSSMetadata.cssMetadata().getPropertyValues(cx.state.sliceDoc(property.from, property.to));
-  return {
-    from: node.name === 'ValueName' ? node.from : cx.pos,
-    options: propertyValues.map(value => ({type: 'constant', label: value})),
-    span: /^[\w\P{ASCII}\-]+$/u,
-  };
+  return null;
 }
 
 function findColorsAndCurves(
@@ -380,12 +398,49 @@ export function cssBindings(): CodeMirror.Extension {
   });
 }
 
-export class CSSPlugin extends Plugin {
+export class CSSPlugin extends Plugin implements SDK.TargetManager.SDKModelObserver<SDK.CSSModel.CSSModel> {
+  #cssModel?: SDK.CSSModel.CSSModel;
+
+  constructor(uiSourceCode: Workspace.UISourceCode.UISourceCode, _transformer?: SourceFrame.SourceFrame.Transformer) {
+    super(uiSourceCode, _transformer);
+    SDK.TargetManager.TargetManager.instance().observeModels(SDK.CSSModel.CSSModel, this);
+  }
+
   static accepts(uiSourceCode: Workspace.UISourceCode.UISourceCode): boolean {
     return uiSourceCode.contentType().isStyleSheet();
   }
 
+  modelAdded(cssModel: SDK.CSSModel.CSSModel): void {
+    if (this.#cssModel) {
+      return;
+    }
+    this.#cssModel = cssModel;
+  }
+  modelRemoved(cssModel: SDK.CSSModel.CSSModel): void {
+    if (this.#cssModel === cssModel) {
+      this.#cssModel = undefined;
+    }
+  }
+
   editorExtension(): CodeMirror.Extension {
-    return [cssBindings(), completion(), cssSwatches()];
+    return [cssBindings(), this.#cssCompletion(), cssSwatches()];
+  }
+
+  #cssCompletion(): CodeMirror.Extension {
+    const {cssCompletionSource} = CodeMirror.css;
+
+    // CodeMirror binds the function below to the state object.
+    // Therefore, we can't access `this` and retrieve the following properties.
+    // Instead, retrieve them up front to bind them to the correct closure.
+    const uiSourceCode = this.uiSourceCode;
+    const cssModel = this.#cssModel;
+
+    return CodeMirror.autocompletion({
+      override:
+          [async(cx: CodeMirror.CompletionContext):
+               Promise<CodeMirror.CompletionResult|null> => {
+                 return (await specificCssCompletion(cx, uiSourceCode, cssModel)) || cssCompletionSource(cx);
+               }],
+    });
   }
 }

package/front_end/panels/sources/SourcesView.ts

@@ -12,6 +12,7 @@ import * as QuickOpen from '../../ui/legacy/components/quick_open/quick_open.js'
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
+import * as Components from './components/components.js';
 import {EditingLocationHistoryManager} from './EditingLocationHistoryManager.js';
 import sourcesViewStyles from './sourcesView.css.js';
 
@@ -377,6 +378,10 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
       sourceView = new SourceFrame.ImageView.ImageView(uiSourceCode.mimeType(), uiSourceCode);
     } else if (contentType === Common.ResourceType.resourceTypes.Font) {
       sourceView = new SourceFrame.FontView.FontView(uiSourceCode.mimeType(), uiSourceCode);
+    } else if (
+        uiSourceCode.name() === HEADER_OVERRIDES_FILENAME &&
+        Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.HEADER_OVERRIDES)) {
+      sourceView = new Components.HeadersView.HeadersView(uiSourceCode);
     } else {
       sourceFrame = new UISourceCodeFrame(uiSourceCode);
     }
@@ -399,10 +404,18 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     if (widget instanceof SourceFrame.FontView.FontView) {
       return SourceViewType.FontView;
     }
+    if (widget instanceof Components.HeadersView.HeadersView) {
+      return SourceViewType.HeadersView;
+    }
     return SourceViewType.SourceView;
   }
 
-  #sourceViewTypeForContentType(contentType: Common.ResourceType.ResourceType): SourceViewType {
+  #sourceViewTypeForUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): SourceViewType {
+    if (uiSourceCode.name() === HEADER_OVERRIDES_FILENAME &&
+        Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.HEADER_OVERRIDES)) {
+      return SourceViewType.HeadersView;
+    }
+    const contentType = uiSourceCode.contentType();
     switch (contentType) {
       case Common.ResourceType.resourceTypes.Image:
         return SourceViewType.ImageView;
@@ -417,8 +430,7 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     const uiSourceCode = event.data;
     const widget = this.sourceViewByUISourceCode.get(uiSourceCode);
     if (widget) {
-      const contentType = uiSourceCode.contentType();
-      if (this.#sourceViewTypeForWidget(widget) !== this.#sourceViewTypeForContentType(contentType)) {
+      if (this.#sourceViewTypeForWidget(widget) !== this.#sourceViewTypeForUISourceCode(uiSourceCode)) {
         // Remove the exisiting editor tab and create a new one of the correct type.
         this.removeUISourceCodes([uiSourceCode]);
         this.showSourceLocation(uiSourceCode);
@@ -602,20 +614,18 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
   }
 
   save(): void {
-    this.saveSourceFrame(this.currentSourceFrame());
+    this.saveSourceView(this.visibleView());
   }
 
   saveAll(): void {
     const sourceFrames = this.editorContainer.fileViews();
-    sourceFrames.forEach(this.saveSourceFrame.bind(this));
+    sourceFrames.forEach(this.saveSourceView.bind(this));
   }
 
-  private saveSourceFrame(sourceFrame: UI.Widget.Widget|null): void {
-    if (!(sourceFrame instanceof UISourceCodeFrame)) {
-      return;
+  private saveSourceView(sourceView: UI.Widget.Widget|null): void {
+    if (sourceView instanceof UISourceCodeFrame || sourceView instanceof Components.HeadersView.HeadersView) {
+      sourceView.commitEditing();
     }
-    const uiSourceCodeFrame = (sourceFrame as UISourceCodeFrame);
-    uiSourceCodeFrame.commitEditing();
   }
 
   toggleBreakpointsActiveState(active: boolean): void {
@@ -764,9 +774,12 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
   }
 }
 
+const HEADER_OVERRIDES_FILENAME = '.headers';
+
 // eslint-disable-next-line rulesdir/const_enum
 enum SourceViewType {
   ImageView = 'ImageView',
   FontView = 'FontView',
+  HeadersView = 'HeadersView',
   SourceView = 'SourceView',
 }

package/front_end/panels/sources/components/HeadersView.css

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2022 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+:host {
+  flex-grow: 1;
+}
+
+.center-wrapper {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.centered {
+  margin: 1em;
+  max-width: 300px;
+  text-align: center;
+}
+
+.error-header {
+  font-weight: bold;
+  margin-bottom: 1em;
+}
+
+.error-body {
+  line-height: 1.5em;
+  color: var(--color-text-secondary);
+}

package/front_end/panels/sources/components/HeadersView.ts

@@ -0,0 +1,89 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as Persistence from '../../../models/persistence/persistence.js';
+import type * as Workspace from '../../../models/workspace/workspace.js';
+import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
+import * as UI from '../../../ui/legacy/legacy.js';
+import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+
+import HeadersViewStyles from './HeadersView.css.js';
+
+const UIStrings = {
+  /**
+  *@description Error message for files which cannot not be parsed.
+  *@example {.headers} PH1
+  */
+  errorWhenParsing: 'Error when parsing \'\'{PH1}\'\'.',
+  /**
+  *@description Explainer for files which cannot be parsed.
+  *@example {.headers} PH1
+  */
+  parsingErrorExplainer:
+      'This is most likely due to a syntax error in \'\'{PH1}\'\'. Try opening this file in an external editor to fix the error or delete the file and re-create the override.',
+};
+const str_ = i18n.i18n.registerUIStrings('panels/sources/components/HeadersView.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export class HeadersView extends UI.View.SimpleView {
+  readonly #headersViewComponent = new HeadersViewComponent();
+  #uiSourceCode: Workspace.UISourceCode.UISourceCode;
+
+  constructor(uiSourceCode: Workspace.UISourceCode.UISourceCode) {
+    super('HeadersView');
+    this.#uiSourceCode = uiSourceCode;
+    this.element.appendChild(this.#headersViewComponent);
+    this.#headersViewComponent.data = {
+      uiSourceCode: this.#uiSourceCode,
+    };
+  }
+
+  commitEditing(): void {
+    this.#uiSourceCode.commitWorkingCopy();
+    Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance().updateInterceptionPatterns();
+  }
+}
+
+export interface HeadersViewComponentData {
+  uiSourceCode: Workspace.UISourceCode.UISourceCode;
+}
+
+export class HeadersViewComponent extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-sources-headers-view`;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #uiSourceCode: Workspace.UISourceCode.UISourceCode|null = null;
+
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [HeadersViewStyles];
+  }
+
+  set data(data: HeadersViewComponentData) {
+    this.#uiSourceCode = data.uiSourceCode;
+    this.#render();
+  }
+
+  #render(): void {
+    const fileName = this.#uiSourceCode?.name() || '.headers';
+    // clang-format off
+    LitHtml.render(LitHtml.html`
+      <div class="center-wrapper">
+        <div class="centered">
+          <div class="error-header">${i18nString(UIStrings.errorWhenParsing, {PH1: fileName})}</div>
+          <div class="error-body">${i18nString(UIStrings.parsingErrorExplainer, {PH1: fileName})}</div>
+        </div>
+      </div>
+    `, this.#shadow, {host: this});
+    // clang-format on
+  }
+}
+
+ComponentHelpers.CustomElements.defineComponent('devtools-sources-headers-view', HeadersViewComponent);
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface HTMLElementTagNameMap {
+    'devtools-sources-headers-view': HeadersViewComponent;
+  }
+}

package/front_end/panels/sources/components/components.ts

@@ -0,0 +1,9 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as HeadersView from './HeadersView.js';
+
+export {
+  HeadersView,
+};

package/front_end/panels/timeline/TimelineController.ts

@@ -80,18 +80,31 @@ export class TimelineController implements SDK.TargetManager.SDKModelObserver<SD
     function disabledByDefault(category: string): string {
       return 'disabled-by-default-' + category;
     }
+
+    // The following categories are also used in other tools, but this panel
+    // offers the possibility of turning them off (see below).
+    // 'disabled-by-default-devtools.screenshot'
+    //   └ default: on, option: captureFilmStrip
+    // 'disabled-by-default-devtools.timeline.invalidationTracking'
+    //   └ default: off, experiment: timelineInvalidationTracking
+    // 'disabled-by-default-v8.cpu_profiler'
+    //   └ default: on, option: enableJSSampling
     const categoriesArray = [
       '-*',
+      TimelineModel.TimelineModel.TimelineModelImpl.Category.Console,
+      TimelineModel.TimelineModel.TimelineModelImpl.Category.UserTiming,
       'devtools.timeline',
       disabledByDefault('devtools.timeline'),
       disabledByDefault('devtools.timeline.frame'),
-      'v8.execute',
+      disabledByDefault('devtools.timeline.stack'),
       disabledByDefault('v8.compile'),
-      TimelineModel.TimelineModel.TimelineModelImpl.Category.Console,
-      TimelineModel.TimelineModel.TimelineModelImpl.Category.UserTiming,
+      disabledByDefault('v8.cpu_profiler.hires'),
+      TimelineModel.TimelineModel.TimelineModelImpl.Category.LatencyInfo,
       TimelineModel.TimelineModel.TimelineModelImpl.Category.Loading,
+      disabledByDefault('lighthouse'),
+      'v8.execute',
+      'v8',
     ];
-    categoriesArray.push(TimelineModel.TimelineModel.TimelineModelImpl.Category.LatencyInfo);
 
     if (Root.Runtime.experiments.isEnabled('timelineV8RuntimeCallStats') && options.enableJSSampling) {
       categoriesArray.push(disabledByDefault('v8.runtime_stats_sampling'));
@@ -99,7 +112,6 @@ export class TimelineController implements SDK.TargetManager.SDKModelObserver<SD
     if (!Root.Runtime.Runtime.queryParam('timelineTracingJSProfileDisabled') && options.enableJSSampling) {
       categoriesArray.push(disabledByDefault('v8.cpu_profiler'));
     }
-    categoriesArray.push(disabledByDefault('devtools.timeline.stack'));
     if (Root.Runtime.experiments.isEnabled('timelineInvalidationTracking')) {
       categoriesArray.push(disabledByDefault('devtools.timeline.invalidationTracking'));
     }

package/front_end/ui/components/expandable_list/expandableList.css

@@ -4,6 +4,10 @@
  * found in the LICENSE file.
  */
 
+:host {
+  overflow: hidden;
+}
+
 div {
   line-height: 1.7em;
 }
@@ -53,3 +57,9 @@ button.link {
   font-family: inherit;
   font-size: inherit;
 }
+
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

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

@@ -101,11 +101,11 @@ const dontCompleteIn = new Set([
   'TypeName',
 ]);
 
-// FIXME Implement Map property completion?
 export const enum QueryType {
   Expression = 0,
   PropertyName = 1,
   PropertyExpression = 2,
+  PotentiallyRetrievingFromMap = 3,
 }
 
 export function getQueryType(tree: CodeMirror.Tree, pos: number, doc: CodeMirror.Text): {
@@ -149,6 +149,22 @@ export function getQueryType(tree: CodeMirror.Tree, pos: number, doc: CodeMirror
       return {type: QueryType.PropertyName, relatedNode: node};
     }
   }
+  if (node.name === '(') {
+    // map.get(<auto-complete>
+    if (parent.name === 'ArgList' && parent.parent.name === 'CallExpression') {
+      // map.get
+      const callReceiver = parent.parent.firstChild;
+      if (callReceiver.name === 'MemberExpression') {
+        // get
+        const propertyExpression = callReceiver.lastChild;
+        if (doc.sliceString(propertyExpression.from, propertyExpression.to) === 'get') {
+          // map
+          const potentiallyMapObject = callReceiver.firstChild;
+          return {type: QueryType.PotentiallyRetrievingFromMap, relatedNode: potentiallyMapObject};
+        }
+      }
+    }
+  }
   return {type: QueryType.Expression};
 }
 
@@ -184,6 +200,12 @@ export async function javascriptCompletionSource(cx: CodeMirror.CompletionContex
     }
     result = await completeProperties(
         cx.state.sliceDoc(objectExpr.from, objectExpr.to), quote, cx.state.sliceDoc(cx.pos, cx.pos + 1) === ']');
+  } else if (query.type === QueryType.PotentiallyRetrievingFromMap) {
+    const potentialMapObject = query.relatedNode;
+    if (!potentialMapObject) {
+      return null;
+    }
+    result = await maybeCompleteKeysFromMap(cx.state.sliceDoc(potentialMapObject.from, potentialMapObject.to));
   } else {
     return null;
   }
@@ -272,6 +294,29 @@ class PropertyCache {
   }
 }
 
+async function maybeCompleteKeysFromMap(objectVariable: string): Promise<CompletionSet> {
+  const result = new CompletionSet();
+  const context = getExecutionContext();
+  if (!context) {
+    return result;
+  }
+  const maybeRetrieveKeys =
+      await evaluateExpression(context, `[...Map.prototype.keys.call(${objectVariable})]`, 'completion');
+  if (!maybeRetrieveKeys) {
+    return result;
+  }
+  const properties = SDK.RemoteObject.RemoteArray.objectAsArray(maybeRetrieveKeys);
+  const numProperties = properties.length();
+  for (let i = 0; i < numProperties; i++) {
+    result.add({
+      label: `"${(await properties.at(i)).value}")`,
+      type: 'constant',
+      boost: i * -1,
+    });
+  }
+  return result;
+}
+
 async function completeProperties(
     expression: string,
     quoted?: string,

package/package.json

@@ -54,5 +54,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.976172"
+  "version": "1.0.977567"
 }