chrome-devtools-frontend 1.0.976703 → 1.0.978040

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -831,6 +831,7 @@ export class BackgroundServiceTreeElement extends ApplicationPanelTreeElement {
     }
     this.showView(this.view);
     UI.Context.Context.instance().setFlavor(BackgroundServiceView, this.view);
+    Host.userMetrics.panelShown('background_service_' + this.serviceName);
     return false;
   }
 }
@@ -854,6 +855,7 @@ export class DatabaseTreeElement extends ApplicationPanelTreeElement {
   onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
     this.sidebar.showDatabase(this.database);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.web_sql]);
     return false;
   }
 
@@ -891,6 +893,7 @@ export class DatabaseTableTreeElement extends ApplicationPanelTreeElement {
   onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
     this.sidebar.showDatabase(this.database, this.tableName);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.web_sql]);
     return false;
   }
 }
@@ -914,6 +917,7 @@ export class ServiceWorkersTreeElement extends ApplicationPanelTreeElement {
       this.view = new ServiceWorkersView();
     }
     this.showView(this.view);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.service_workers]);
     return false;
   }
 }
@@ -936,6 +940,7 @@ export class AppManifestTreeElement extends ApplicationPanelTreeElement {
       this.view = new AppManifestView();
     }
     this.showView(this.view);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.app_manifest]);
     return false;
   }
 }
@@ -958,6 +963,7 @@ export class ClearStorageTreeElement extends ApplicationPanelTreeElement {
       this.view = new StorageView();
     }
     this.showView(this.view);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.storage]);
     return false;
   }
 }
@@ -1170,6 +1176,7 @@ export class IDBDatabaseTreeElement extends ApplicationPanelTreeElement {
     }
 
     this.showView(this.view);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.indexed_db]);
     return false;
   }
 
@@ -1302,6 +1309,7 @@ export class IDBObjectStoreTreeElement extends ApplicationPanelTreeElement {
     }
 
     this.showView(this.view);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.indexed_db]);
     return false;
   }
 
@@ -1391,6 +1399,7 @@ export class IDBIndexTreeElement extends ApplicationPanelTreeElement {
     }
 
     this.showView(this.view);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.indexed_db]);
     return false;
   }
 
@@ -1417,6 +1426,7 @@ export class DOMStorageTreeElement extends ApplicationPanelTreeElement {
 
   onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.dom_storage]);
     this.resourcesPanel.showDOMStorage(this.domStorage);
     return false;
   }
@@ -1469,6 +1479,7 @@ export class CookieTreeElement extends ApplicationPanelTreeElement {
   onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
     this.resourcesPanel.showCookies(this.target, this.cookieDomainInternal);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.cookies]);
     return false;
   }
 }
@@ -1810,6 +1821,7 @@ export class FrameTreeElement extends ApplicationPanelTreeElement {
     } else {
       this.view.update();
     }
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.frame_details]);
     this.showView(this.view);
 
     this.listItemElement.classList.remove('hovered');
@@ -1978,6 +1990,7 @@ export class FrameResourceTreeElement extends ApplicationPanelTreeElement {
     } else {
       void this.panel.scheduleShowView(this.preparePreview());
     }
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.frame_resource]);
     return false;
   }
 
@@ -2065,6 +2078,7 @@ class FrameWindowTreeElement extends ApplicationPanelTreeElement {
       this.view.update();
     }
     this.showView(this.view);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.frame_window]);
     return false;
   }
 
@@ -2093,6 +2107,7 @@ class WorkerTreeElement extends ApplicationPanelTreeElement {
       this.view.update();
     }
     this.showView(this.view);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.frame_worker]);
     return false;
   }
 

package/front_end/panels/application/InterestGroupTreeElement.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -51,6 +52,7 @@ export class InterestGroupTreeElement extends ApplicationPanelTreeElement {
   onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
     this.showView(this.view);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.interest_groups]);
     return false;
   }
 

package/front_end/panels/application/ReportingApiTreeElement.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -37,6 +38,7 @@ export class ReportingApiTreeElement extends ApplicationPanelTreeElement {
       this.view = new ReportingApiView();
     }
     this.showView(this.view);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.reporting_api]);
     return false;
   }
 }

package/front_end/panels/application/TrustTokensTreeElement.ts

@@ -9,6 +9,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import * as ApplicationComponents from './components/components.js';
 import type {ResourcesPanel} from './ResourcesPanel.js';
+import * as Host from '../../core/host/host.js';
 
 const UIStrings = {
   /**
@@ -41,6 +42,7 @@ export class TrustTokensTreeElement extends ApplicationPanelTreeElement {
       this.view = new TrustTokensViewWidgetWrapper();
     }
     this.showView(this.view);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.trust_tokens]);
     return false;
   }
 }

package/front_end/panels/application/components/BackForwardCacheView.ts

@@ -13,6 +13,7 @@ import * as Protocol from '../../../generated/protocol.js';
 import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
+import * as ChromeLink from '../../../ui/components/chrome_link/chrome_link.js';
 
 import {NotRestoredReasonDescription} from './BackForwardCacheStrings.js';
 import backForwardCacheViewStyles from './backForwardCacheView.css.js';
@@ -97,6 +98,10 @@ const UIStrings = {
    */
   supportPendingExplanation:
       'Chrome support for these reasons is pending i.e. they will not prevent the page from being eligible for back/forward cache in a future version of Chrome.',
+  /**
+   * @description Text that precedes displaying a link to the extension which blocked the page from being eligible for back/forward cache.
+   */
+  blockingExtensionId: 'Extension id: ',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/BackForwardCacheView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -370,6 +375,20 @@ export class BackForwardCacheView extends HTMLElement {
     // clang-format on
   }
 
+  #maybeRenderReasonContext(explanation: Protocol.Page.BackForwardCacheNotRestoredExplanation): LitHtml.TemplateResult|
+      {} {
+    if (explanation.reason ===
+            Protocol.Page.BackForwardCacheNotRestoredReason.EmbedderExtensionSentMessageToCachedFrame &&
+        explanation.context) {
+      const link = 'chrome://extensions/?id=' + explanation.context;
+      // clang-format off
+    return LitHtml.html`${i18nString(UIStrings.blockingExtensionId)}
+      <${ChromeLink.ChromeLink.ChromeLink.litTagName} .href=${link}>${explanation.context}</${ChromeLink.ChromeLink.ChromeLink.litTagName}>`;
+      // clang-format on
+    }
+    return LitHtml.nothing;
+  }
+
   #renderReason(explanation: Protocol.Page.BackForwardCacheNotRestoredExplanation): LitHtml.TemplateResult {
     // clang-format off
     return LitHtml.html`
@@ -385,7 +404,10 @@ export class BackForwardCacheView extends HTMLElement {
               } as IconButton.Icon.IconData}>
               </${IconButton.Icon.Icon.litTagName}>
             </div>
-            ${NotRestoredReasonDescription[explanation.reason].name()}` :
+            <div>
+              ${NotRestoredReasonDescription[explanation.reason].name()}
+             ${this.#maybeRenderReasonContext(explanation)}
+           </div>` :
             LitHtml.nothing}
       </${ReportView.ReportView.ReportSection.litTagName}>
       <div class='gray-text'>

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

@@ -8,6 +8,58 @@
   flex-grow: 1;
 }
 
+.row {
+  display: flex;
+  flex-direction: row;
+  color: var(--color-syntax-1);
+  font-family: var(--monospace-font-family);
+  font-size: var(--monospace-font-size);
+  align-items: center;
+  line-height: 18px;
+  margin: 2em 0 0 0.5em;
+}
+
+.row:first-child {
+  margin-top: 0.5em;
+}
+
+.row devtools-button {
+  line-height: 1;
+  margin-left: 0.5em;
+}
+
+.padded {
+  margin: 0.25em 0 0 2em;
+}
+
+.separator {
+  margin-right: 0.5em;
+  color: var(--color-text-primary);
+}
+
+.editable {
+  cursor: text;
+  color: var(--color-text-primary);
+  overflow-wrap: anywhere;
+  min-height: 18px;
+  line-height: 18px;
+  min-width: 0.5em;
+  background: transparent;
+  border: none;
+  outline: none;
+  display: inline-block;
+}
+
+.editable.red {
+  color: var(--color-syntax-1);
+}
+
+.editable:hover,
+.editable:focus {
+  box-shadow: 0 0 0 1px var(--color-details-hairline);
+  border-radius: 2px;
+}
+
 .center-wrapper {
   height: 100%;
   display: flex;

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

@@ -4,7 +4,7 @@
 
 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 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';
@@ -34,9 +34,52 @@ export class HeadersView extends UI.View.SimpleView {
   constructor(uiSourceCode: Workspace.UISourceCode.UISourceCode) {
     super('HeadersView');
     this.#uiSourceCode = uiSourceCode;
+    this.#uiSourceCode.addEventListener(
+        Workspace.UISourceCode.Events.WorkingCopyChanged, this.#onWorkingCopyChanged, this);
+    this.#uiSourceCode.addEventListener(
+        Workspace.UISourceCode.Events.WorkingCopyCommitted, this.#onWorkingCopyCommitted, this);
     this.element.appendChild(this.#headersViewComponent);
+    void this.#setInitialData();
+  }
+
+  async #setInitialData(): Promise<void> {
+    const content = await this.#uiSourceCode.requestContent();
+    this.#setComponentData(content.content || '');
+  }
+
+  #setComponentData(content: string): void {
+    let parsingError = false;
+    let headerOverrides: Persistence.NetworkPersistenceManager.HeaderOverride[] = [];
+    content = content || '[]';
+    try {
+      headerOverrides = JSON.parse(content) as Persistence.NetworkPersistenceManager.HeaderOverride[];
+      if (!headerOverrides.every(Persistence.NetworkPersistenceManager.isHeaderOverride)) {
+        throw 'Type mismatch after parsing';
+      }
+    } catch (e) {
+      console.error('Failed to parse', this.#uiSourceCode.url(), 'for locally overriding headers.');
+      parsingError = true;
+    }
+
+    // Header overrides are stored as the key-value pairs of a JSON object on
+    // disk. For the editor we want them as an array instead, so that we can
+    // access/add/remove entries by their index.
+    const arrayOfHeaderOverrideArrays: HeaderOverride[] = headerOverrides.map(headerOverride => {
+      return {
+        applyTo: headerOverride.applyTo,
+        headers: Object.entries(headerOverride.headers).map(([headerName, headerValue]) => {
+          return {
+            name: headerName,
+            value: headerValue,
+          };
+        }),
+      };
+    });
+
     this.#headersViewComponent.data = {
+      headerOverrides: arrayOfHeaderOverrideArrays,
       uiSourceCode: this.#uiSourceCode,
+      parsingError,
     };
   }
 
@@ -44,39 +87,207 @@ export class HeadersView extends UI.View.SimpleView {
     this.#uiSourceCode.commitWorkingCopy();
     Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance().updateInterceptionPatterns();
   }
+
+  #onWorkingCopyChanged(): void {
+    this.#setComponentData(this.#uiSourceCode.workingCopy());
+  }
+
+  #onWorkingCopyCommitted(): void {
+    this.#setComponentData(this.#uiSourceCode.workingCopy());
+  }
+
+  dispose(): void {
+    this.#uiSourceCode.removeEventListener(
+        Workspace.UISourceCode.Events.WorkingCopyChanged, this.#onWorkingCopyChanged, this);
+    this.#uiSourceCode.removeEventListener(
+        Workspace.UISourceCode.Events.WorkingCopyCommitted, this.#onWorkingCopyCommitted, this);
+  }
 }
 
+type Header = {
+  name: string,
+  value: string,
+};
+
+type HeaderOverride = {
+  applyTo: string,
+  headers: Header[],
+};
+
 export interface HeadersViewComponentData {
+  headerOverrides: HeaderOverride[];
   uiSourceCode: Workspace.UISourceCode.UISourceCode;
+  parsingError: boolean;
 }
 
 export class HeadersViewComponent extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-sources-headers-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
+  readonly #boundRender = this.#render.bind(this);
+  #headerOverrides: HeaderOverride[] = [];
   #uiSourceCode: Workspace.UISourceCode.UISourceCode|null = null;
+  #parsingError = false;
+
+  constructor() {
+    super();
+    this.#shadow.addEventListener('focusin', this.#onFocusIn.bind(this));
+    this.#shadow.addEventListener('focusout', this.#onFocusOut.bind(this));
+    this.#shadow.addEventListener('input', this.#onInput.bind(this));
+    this.#shadow.addEventListener('keydown', this.#onKeyDown.bind(this));
+  }
 
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [HeadersViewStyles];
   }
 
   set data(data: HeadersViewComponentData) {
+    this.#headerOverrides = data.headerOverrides;
     this.#uiSourceCode = data.uiSourceCode;
-    this.#render();
+    this.#parsingError = data.parsingError;
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  // 'Enter' key should not create a new line in the contenteditable. Focus
+  // on the next contenteditable instead.
+  #onKeyDown(event: Event): void {
+    const keyboardEvent = event as KeyboardEvent;
+    const target = event.target as HTMLElement;
+    if (target.matches('.editable') && keyboardEvent.key === 'Enter') {
+      event.preventDefault();
+      this.#focusNext(target);
+    }
+  }
+
+  #focusNext(target: HTMLElement): void {
+    const elements = Array.from(this.#shadow.querySelectorAll('.editable')) as HTMLElement[];
+    const idx = elements.indexOf(target);
+    if (idx !== -1 && idx + 1 < elements.length) {
+      elements[idx + 1].focus();
+    }
+  }
+
+  #selectAllText(target: HTMLElement): void {
+    const selection = window.getSelection();
+    const range = document.createRange();
+    range.selectNodeContents(target);
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+  }
+
+  #onFocusIn(e: Event): void {
+    const target = e.target as HTMLElement;
+    if (target.matches('.editable')) {
+      this.#selectAllText(target);
+    }
+  }
+
+  #onFocusOut(): void {
+    // clear selection
+    const selection = window.getSelection();
+    selection?.removeAllRanges();
+  }
+
+  #onInput(e: Event): void {
+    const target = e.target as HTMLButtonElement;
+    const rowElement = target.closest('.row') as HTMLElement;
+    const blockIndex = Number(rowElement.dataset.blockIndex);
+    const headerIndex = Number(rowElement.dataset.headerIndex);
+    if (target.matches('.header-name')) {
+      this.#headerOverrides[blockIndex].headers[headerIndex].name = target.innerText;
+      this.#onHeadersChanged();
+    }
+    if (target.matches('.header-value')) {
+      this.#headerOverrides[blockIndex].headers[headerIndex].value = target.innerText;
+      this.#onHeadersChanged();
+    }
+    if (target.matches('.apply-to')) {
+      this.#headerOverrides[blockIndex].applyTo = target.innerText;
+      this.#onHeadersChanged();
+    }
+  }
+
+  #onHeadersChanged(): void {
+    // In the editor header overrides are represented by items in an array, so
+    // that we can access/add/remove entries by their index. On disk, they are
+    // stored as key-value pairs of a JSON object instead.
+    const arrayOfHeaderOverrideObjects: Persistence.NetworkPersistenceManager.HeaderOverride[] =
+        this.#headerOverrides.map(headerOverride => {
+          return {
+            applyTo: headerOverride.applyTo,
+            headers: headerOverride.headers.reduce((a, v) => ({...a, [v.name]: v.value}), {}),
+          };
+        });
+    this.#uiSourceCode?.setWorkingCopy(JSON.stringify(arrayOfHeaderOverrideObjects, null, 2));
   }
 
   #render(): void {
-    const fileName = this.#uiSourceCode?.name() || '.headers';
+    if (!ComponentHelpers.ScheduledRender.isScheduledRender(this)) {
+      throw new Error('HeadersView render was not scheduled');
+    }
+
+    if (this.#parsingError) {
+      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
+      return;
+    }
+
     // 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.#headerOverrides.map((headerOverride, blockIndex) =>
+        LitHtml.html`
+          ${this.#renderApplyToRow(headerOverride.applyTo, blockIndex)}
+          ${headerOverride.headers.map((header, headerIndex) =>
+            LitHtml.html`
+              ${this.#renderHeaderRow(header, blockIndex, headerIndex)}
+            `,
+          )}
+        `,
+      )}
     `, this.#shadow, {host: this});
     // clang-format on
   }
+
+  #renderApplyToRow(pattern: string, blockIndex: number): LitHtml.TemplateResult {
+    // clang-format off
+    return LitHtml.html`
+      <div class="row" data-block-index=${blockIndex}>
+        <div>${i18n.i18n.lockedString('Apply to')}</div>
+        <div class="separator">:</div>
+        ${this.#renderEditable(pattern, 'apply-to')}
+      </div>
+    `;
+    // clang-format on
+  }
+
+  #renderHeaderRow(header: Header, blockIndex: number, headerIndex: number): LitHtml.TemplateResult {
+    // clang-format off
+    return LitHtml.html`
+      <div class="row padded" data-block-index=${blockIndex} data-header-index=${headerIndex}>
+        ${this.#renderEditable(header.name, 'header-name red')}
+        <div class="separator">:</div>
+        ${this.#renderEditable(header.value, 'header-value')}
+    `;
+    // clang-format on
+  }
+
+  #renderEditable(value: string, className?: string): LitHtml.TemplateResult {
+    // This uses LitHtml's `live`-directive, so that when checking whether to
+    // update during re-render, `value` is compared against the actual live DOM
+    // value of the contenteditable element and not the potentially outdated
+    // value from the previous render.
+    // clang-format off
+    return LitHtml.html`<span contenteditable="true" class="editable ${className}" tabindex="0" .innerText=${LitHtml.Directives.live(value)}></span>`;
+    // clang-format on
+  }
 }
 
 ComponentHelpers.CustomElements.defineComponent('devtools-sources-headers-view', HeadersViewComponent);

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;
+}