chrome-devtools-frontend 1.0.1667564 → 1.0.1668390

package/front_end/core/sdk/sdk-meta.ts

@@ -452,30 +452,6 @@ const UIStrings = {
    */
   networkCacheExplanation:
       'Disabling the network cache will simulate a network experience similar to a first time visitor.',
-  /**
-   * @description Setting under the Sources category to toggle usage of JavaScript source maps.
-   */
-  javaScriptSourceMaps: 'JavaScript source maps',
-  /**
-   * @description Title of an option under the Sources category that can be invoked through the Command Menu.
-   */
-  enableJavaScriptSourceMaps: 'Enable JavaScript source maps',
-  /**
-   * @description Title of an option under the Sources category that can be invoked through the Command Menu.
-   */
-  disableJavaScriptSourceMaps: 'Disable JavaScript source maps',
-  /**
-   * @description Title of a setting under the Sources category.
-   */
-  cssSourceMaps: 'CSS source maps',
-  /**
-   * @description Title of an option under the Sources category that can be invoked through the Command Menu.
-   */
-  enableCssSourceMaps: 'Enable CSS source maps',
-  /**
-   * @description Title of an option under the Sources category that can be invoked through the Command Menu.
-   */
-  disableCssSourceMaps: 'Disable CSS source maps',
   /**
    * @description Title of a setting under the Console category in Settings.
    */
@@ -1391,44 +1367,6 @@ Common.Settings.registerSettingExtension({
   },
 });
 
-Common.Settings.registerSettingExtension({
-  category: Common.Settings.SettingCategory.SOURCES,
-  storageType: Common.Settings.SettingStorageType.SYNCED,
-  title: i18nLazyString(UIStrings.javaScriptSourceMaps),
-  settingName: 'js-source-maps-enabled',
-  settingType: Common.Settings.SettingType.BOOLEAN,
-  defaultValue: true,
-  options: [
-    {
-      value: true,
-      title: i18nLazyString(UIStrings.enableJavaScriptSourceMaps),
-    },
-    {
-      value: false,
-      title: i18nLazyString(UIStrings.disableJavaScriptSourceMaps),
-    },
-  ],
-});
-
-Common.Settings.registerSettingExtension({
-  category: Common.Settings.SettingCategory.SOURCES,
-  storageType: Common.Settings.SettingStorageType.SYNCED,
-  title: i18nLazyString(UIStrings.cssSourceMaps),
-  settingName: 'css-source-maps-enabled',
-  settingType: Common.Settings.SettingType.BOOLEAN,
-  defaultValue: true,
-  options: [
-    {
-      value: true,
-      title: i18nLazyString(UIStrings.enableCssSourceMaps),
-    },
-    {
-      value: false,
-      title: i18nLazyString(UIStrings.disableCssSourceMaps),
-    },
-  ],
-});
-
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.CONSOLE,
   storageType: Common.Settings.SettingStorageType.SYNCED,

package/front_end/core/sdk/sdk.ts

@@ -75,6 +75,7 @@ import * as ScopeTreeCache from './ScopeTreeCache.js';
 import * as ScreenCaptureModel from './ScreenCaptureModel.js';
 import * as Script from './Script.js';
 import * as SDKModel from './SDKModel.js';
+import * as SDKSettings from './SDKSettings.js';
 import * as SecurityOriginManager from './SecurityOriginManager.js';
 import * as ServerSentEventProtocol from './ServerSentEventsProtocol.js';
 import * as ServerTiming from './ServerTiming.js';
@@ -160,6 +161,7 @@ export {
   ScreenCaptureModel,
   Script,
   SDKModel,
+  SDKSettings,
   SecurityOriginManager,
   ServerSentEventProtocol,
   ServerTiming,

package/front_end/entrypoints/main/MainImpl.ts

@@ -373,8 +373,15 @@ export class MainImpl {
         Root.ExperimentNames.ExperimentName.PROTOCOL_MONITOR, protocolMonitorExperiment);
 
     // Debugging
-    Root.Runtime.experiments.register(
-        Root.ExperimentNames.ExperimentName.INSTRUMENTATION_BREAKPOINTS, 'Instrumentation breakpoints');
+    const instrumentationBreakpointsExperiment = Root.Runtime.experiments.registerHostExperiment({
+      name: Root.ExperimentNames.ExperimentName.INSTRUMENTATION_BREAKPOINTS,
+      title: 'Instrumentation breakpoints',
+      aboutFlag: 'devtools-instrumentation-breakpoints',
+      isEnabled: Root.Runtime.hostConfig.devToolsInstrumentationBreakpoints?.enabled ?? false,
+      requiresChromeRestart: false,
+    });
+    this.#migrateValueFromLegacyToHostExperiment(Root.ExperimentNames.ExperimentName.INSTRUMENTATION_BREAKPOINTS,
+                                                 instrumentationBreakpointsExperiment);
 
     Root.Runtime.experiments.registerHostExperiment({
       name: Root.ExperimentNames.ExperimentName.DURABLE_MESSAGES,
@@ -471,7 +478,7 @@ export class MainImpl {
     void this.#universe.liveMetrics.enable();
     CrUXManager.CrUXManager.instance();
 
-    const builtInAi = AiAssistanceModel.BuiltInAi.BuiltInAi.instance();
+    const builtInAi = this.#universe.builtInAi;
     builtInAi.addEventListener(
         AiAssistanceModel.BuiltInAi.Events.DOWNLOADED_AND_SESSION_CREATED,
         () => Snackbar.Snackbar.Snackbar.show({message: i18nString(UIStrings.aiModelDownloaded)}));

package/front_end/foundation/Universe.ts

@@ -216,6 +216,9 @@ export class Universe {
     const aiHistoryStorage = new AiAssistance.AiHistoryStorage.AiHistoryStorage(settings);
     context.set(AiAssistance.AiHistoryStorage.AiHistoryStorage, aiHistoryStorage);
 
+    const builtInAi = new AiAssistance.BuiltInAi.BuiltInAi();
+    context.set(AiAssistance.BuiltInAi.BuiltInAi, builtInAi);
+
     this.autofillManager = new AutofillManager.AutofillManager.AutofillManager(targetManager, frameManager);
     context.set(AutofillManager.AutofillManager.AutofillManager, this.autofillManager);
   }
@@ -233,6 +236,10 @@ export class Universe {
     return this.context.get(AiAssistance.AiHistoryStorage.AiHistoryStorage);
   }
 
+  get builtInAi(): AiAssistance.BuiltInAi.BuiltInAi {
+    return this.context.get(AiAssistance.BuiltInAi.BuiltInAi);
+  }
+
   get breakpointManager(): Breakpoints.BreakpointManager.BreakpointManager {
     return this.context.get(Breakpoints.BreakpointManager.BreakpointManager);
   }

package/front_end/models/ai_assistance/AiAgent2.ts

@@ -82,7 +82,7 @@ export class AiAgent2 extends AiAgent<unknown> {
 
   constructor(opts: AiAgent2Options) {
     super(opts);
-    this.#changes = new ChangeManager(opts.targetManager);
+    this.#changes = opts.changeManager ?? new ChangeManager(opts.targetManager);
     this.#lighthouseRecording = opts.lighthouseRecording;
     this.#execJs = opts.execJs ?? executeJsCode;
     this.#allowedOrigin = opts.allowedOrigin;

package/front_end/models/ai_assistance/BuiltInAi.ts

@@ -6,8 +6,6 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as Root from '../../core/root/root.js';
 
-let builtInAiInstance: BuiltInAi|undefined;
-
 export interface LanguageModel {
   promptStreaming: (arg0: string, opts?: {
     signal?: AbortSignal,
@@ -33,10 +31,11 @@ export class BuiltInAi extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   #currentlyCreatingSession = false;
 
   static instance(): BuiltInAi {
-    if (builtInAiInstance === undefined) {
-      builtInAiInstance = new BuiltInAi();
+    if (!Root.DevToolsContext.globalInstance().has(BuiltInAi)) {
+      Root.DevToolsContext.globalInstance().set(BuiltInAi, new BuiltInAi());
     }
-    return builtInAiInstance;
+
+    return Root.DevToolsContext.globalInstance().get(BuiltInAi);
   }
 
   constructor() {
@@ -107,6 +106,12 @@ export class BuiltInAi extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   }
 
   #isGpuAvailable(): boolean {
+    // In node-based API tests, there is no global `document` available. Since this
+    // class is instantiated during Universe bootstrapping, we need to guard against
+    // using document when not in the browser.
+    if (typeof document === 'undefined') {
+      return false;
+    }
     const canvas = document.createElement('canvas');
     try {
       const webgl = canvas.getContext('webgl');
@@ -197,7 +202,7 @@ Your instructions are as follows:
   }
 
   static removeInstance(): void {
-    builtInAiInstance = undefined;
+    Root.DevToolsContext.globalInstance().delete(BuiltInAi);
   }
 
   async * getConsoleInsight(prompt: string, abortController: AbortController): AsyncGenerator<string> {

package/front_end/models/ai_assistance/ChangeManager.ts

@@ -25,13 +25,15 @@ function formatStyles(styles: Record<string, string>, indent = 2): string {
  * primarily for stylesheet generation based on all changes.
  */
 export class ChangeManager {
+  readonly #targetManager: SDK.TargetManager.TargetManager;
   readonly #stylesheetMutex = new Common.Mutex.Mutex();
   readonly #cssModelToStylesheetId =
       new Map<SDK.CSSModel.CSSModel, Map<Protocol.Page.FrameId, Protocol.DOM.StyleSheetId>>();
   readonly #stylesheetChanges = new Map<Protocol.DOM.StyleSheetId, Change[]>();
 
   constructor(targetManager: SDK.TargetManager.TargetManager = SDK.TargetManager.TargetManager.instance()) {
-    targetManager.addModelListener(
+    this.#targetManager = targetManager;
+    this.#targetManager.addModelListener(
         SDK.ResourceTreeModel.ResourceTreeModel,
         SDK.ResourceTreeModel.Events.PrimaryPageChanged,
         this.clear,
@@ -39,6 +41,20 @@ export class ChangeManager {
     );
   }
 
+  dispose(): void {
+    this.#targetManager.removeModelListener(
+        SDK.ResourceTreeModel.ResourceTreeModel,
+        SDK.ResourceTreeModel.Events.PrimaryPageChanged,
+        this.clear,
+        this,
+    );
+    for (const cssModel of this.#cssModelToStylesheetId.keys()) {
+      cssModel.removeEventListener(SDK.CSSModel.Events.ModelDisposed, this.#onCssModelDisposed, this);
+    }
+    this.#cssModelToStylesheetId.clear();
+    this.#stylesheetChanges.clear();
+  }
+
   async clear(): Promise<void> {
     const models = Array.from(this.#cssModelToStylesheetId.keys());
     const results = await Promise.allSettled(models.map(async model => {

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -117,11 +117,6 @@ export const NativeFunctions = [
     signatures: [["id"]],
     receivers: ["Clients","BackgroundFetchManager"]
   },
-  {
-    name: "get",
-    signatures: [["entry"]],
-    receivers: ["RouteMap"]
-  },
   {
     name: "set",
     signatures: [["v"]],
@@ -2003,6 +1998,11 @@ export const NativeFunctions = [
     signatures: [["start","end"]],
     receivers: ["SourceBuffer"]
   },
+  {
+    name: "remove",
+    signatures: [["slot"]],
+    receivers: ["GPUResourceTable"]
+  },
   {
     name: "remove",
     signatures: [["manifest_ids"]],
@@ -3302,6 +3302,11 @@ export const NativeFunctions = [
     signatures: [["response"]],
     receivers: ["MediaKeySession"]
   },
+  {
+    name: "update",
+    signatures: [["slot","resource"]],
+    receivers: ["GPUResourceTable"]
+  },
   {
     name: "createObjectStore",
     signatures: [["name","?options"]]
@@ -6685,6 +6690,14 @@ export const NativeFunctions = [
     name: "writeTimestamp",
     signatures: [["querySet","queryIndex"]]
   },
+  {
+    name: "setResourceTable",
+    signatures: [["table"]]
+  },
+  {
+    name: "createResourceTable",
+    signatures: [["descriptor"]]
+  },
   {
     name: "GPUInternalError",
     signatures: [["message"]]
@@ -6713,6 +6726,10 @@ export const NativeFunctions = [
     name: "multiDrawIndexedIndirect",
     signatures: [["indirectBuffer","indirectOffset","maxDrawCount","?drawCountBuffer","?drawCountBufferOffset"]]
   },
+  {
+    name: "insert",
+    signatures: [["resource"]]
+  },
   {
     name: "GPUUncapturedErrorEvent",
     signatures: [["type","gpuUncapturedErrorEventInitDict"]]
@@ -8469,10 +8486,6 @@ export const NativeFunctions = [
     name: "removeProcessingInstruction",
     signatures: [["pi"]]
   },
-  {
-    name: "RouteEvent",
-    signatures: [["type"]]
-  },
   {
     name: "ResizeObserver",
     signatures: [["callback"]]

package/front_end/models/source_map_scopes/NamesResolver.ts

@@ -187,21 +187,21 @@ const enum Punctuation {
   EQUALS = 'equals',
 }
 
-const resolveDebuggerScope = async(
-    scope: SDK.DebuggerModel.ScopeChainEntry,
-    debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding):
-    Promise<{variableMapping: Map<string, string>, thisMapping: string | null}> => {
-      if (!scope.callFrame()
-               .debuggerModel.target()
-               .targetManager()
-               .settings.moduleSetting('js-source-maps-enabled')
-               .get()) {
-        return {variableMapping: new Map(), thisMapping: null};
-      }
-      const script = scope.callFrame().script;
-      const scopeChain = await findScopeChainForDebuggerScope(scope);
-      return await resolveScope(script, scopeChain, debuggerWorkspaceBinding);
-    };
+const resolveDebuggerScope =
+    async(scope: SDK.DebuggerModel.ScopeChainEntry,
+          debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding):
+        Promise<{variableMapping: Map<string, string>, thisMapping: string | null}> => {
+          if (!scope.callFrame()
+                   .debuggerModel.target()
+                   .targetManager()
+                   .settings.resolve(SDK.SDKSettings.jsSourceMapsEnabledSettingDescriptor)
+                   .get()) {
+            return {variableMapping: new Map(), thisMapping: null};
+          }
+          const script = scope.callFrame().script;
+          const scopeChain = await findScopeChainForDebuggerScope(scope);
+          return await resolveScope(script, scopeChain, debuggerWorkspaceBinding);
+        };
 
 const resolveScope = async(script: SDK.Script.Script, scopeChain: Formatter.FormatterWorkerPool.ScopeTreeNode[],
                            debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding):
@@ -400,7 +400,10 @@ export const allVariablesInCallFrame = async(
     callFrame: SDK.DebuggerModel.CallFrame,
     debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding):
     Promise<Map<string, string|null>> => {
-      if (!callFrame.debuggerModel.target().targetManager().settings.moduleSetting('js-source-maps-enabled').get()) {
+      if (!callFrame.debuggerModel.target()
+               .targetManager()
+               .settings.resolve(SDK.SDKSettings.jsSourceMapsEnabledSettingDescriptor)
+               .get()) {
         return new Map<string, string|null>();
       }
       const cachedMap = cachedMapByCallFrame.get(callFrame);
@@ -443,7 +446,10 @@ export const allVariablesAtPosition =
           if (!script) {
             return reverseMapping;
           }
-          if (!script.debuggerModel.target().targetManager().settings.moduleSetting('js-source-maps-enabled').get()) {
+          if (!script.debuggerModel.target()
+                   .targetManager()
+                   .settings.resolve(SDK.SDKSettings.jsSourceMapsEnabledSettingDescriptor)
+                   .get()) {
             return reverseMapping;
           }
 

package/front_end/panels/application/ServiceWorkerUpdateCycleView.ts

@@ -6,7 +6,7 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
-import * as UI from '../../ui/legacy/legacy.js';
+import {html, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 const UIStrings = {
@@ -39,13 +39,16 @@ export class ServiceWorkerUpdateCycleView {
   private registration: SDK.ServiceWorkerManager.ServiceWorkerRegistration;
   private rows: HTMLTableRowElement[];
   private selectedRowIndex: number;
+  private expandedRows = new Set<string>();
   tableElement: HTMLElement;
   constructor(registration: SDK.ServiceWorkerManager.ServiceWorkerRegistration) {
     this.registration = registration;
     this.rows = [];
     this.selectedRowIndex = -1;
     this.tableElement = document.createElement('table');
-    this.createTimingTable();
+    this.tableElement.classList.add('service-worker-update-timing-table');
+    this.tableElement.setAttribute('jslog', `${VisualLogging.tree('update-timing-table')}`);
+    this.refresh();
   }
 
   calculateServiceWorkerUpdateRanges(): ServiceWorkerUpdateRange[] {
@@ -132,119 +135,87 @@ export class ServiceWorkerUpdateCycleView {
     return [];
   }
 
-  private createTimingTable(): void {
-    this.tableElement.classList.add('service-worker-update-timing-table');
-    this.tableElement.setAttribute('jslog', `${VisualLogging.tree('update-timing-table')}`);
+  refresh(): void {
+    const tableHeader = html`
+      <tr class="service-worker-update-timing-table-header">
+        <td>${i18nString(UIStrings.version)}</td>
+        <td>${i18nString(UIStrings.updateActivity)}</td>
+        <td>${i18nString(UIStrings.timeline)}</td>
+      </tr>
+    `;
     const timeRanges = this.calculateServiceWorkerUpdateRanges();
-    this.updateTimingTable(timeRanges);
-  }
-
-  private createTimingTableHead(): void {
-    const serverHeader = this.tableElement.createChild('tr', 'service-worker-update-timing-table-header');
-    UI.UIUtils.createTextChild(serverHeader.createChild('td'), i18nString(UIStrings.version));
-    UI.UIUtils.createTextChild(serverHeader.createChild('td'), i18nString(UIStrings.updateActivity));
-    UI.UIUtils.createTextChild(serverHeader.createChild('td'), i18nString(UIStrings.timeline));
-  }
-
-  private removeRows(): void {
-    const rows = this.tableElement.getElementsByTagName('tr');
-    while (rows[0]) {
-      if (rows[0].parentNode) {
-        rows[0].parentNode.removeChild(rows[0]);
-      }
-    }
-    this.rows = [];
-  }
-
-  private updateTimingTable(timeRanges: ServiceWorkerUpdateRange[]): void {
-    this.selectedRowIndex = -1;
-    this.removeRows();
-    this.createTimingTableHead();
-    const timeRangeArray = timeRanges;
-    if (timeRangeArray.length === 0) {
+    if (timeRanges.length === 0) {
+      // clang-format off
+      // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+      render(tableHeader, this.tableElement, {host: this});
+      // clang-format on
+      this.rows = [];
       return;
     }
 
-    const startTimes = timeRangeArray.map(r => r.start);
-    const endTimes = timeRangeArray.map(r => r.end);
+    const startTimes = timeRanges.map(r => r.start);
+    const endTimes = timeRanges.map(r => r.end);
     const startTime = startTimes.reduce((a, b) => Math.min(a, b));
     const endTime = endTimes.reduce((a, b) => Math.max(a, b));
     const scale = 100 / (endTime - startTime);
 
-    for (const range of timeRangeArray) {
-      const phaseName = range.phase;
-
-      const left = (scale * (range.start - startTime));
-      const right = (scale * (endTime - range.end));
-
-      const tr = this.tableElement.createChild('tr', 'service-worker-update-timeline');
-      tr.setAttribute('jslog', `${VisualLogging.treeItem('update-timeline').track({
+    // clang-format off
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    render(html`
+      ${tableHeader}
+      ${timeRanges.map(range => {
+        const phaseName = range.phase;
+        const left = (scale * (range.start - startTime));
+        const right = (scale * (endTime - range.end));
+        const key = `${range.id}-${range.phase}`;
+        const expanded = this.expandedRows.has(key);
+
+        return html`
+          <tr class="service-worker-update-timeline" jslog=${VisualLogging.treeItem('update-timeline').track({
                         click: true,
                         resize: true,
                         keydown: 'ArrowLeft|ArrowRight|ArrowUp|ArrowDown|Enter|Space',
-                      })}`);
-      this.rows.push(tr);
-      const timingBarVersionElement = tr.createChild('td');
-      UI.UIUtils.createTextChild(timingBarVersionElement, '#' + range.id);
-      timingBarVersionElement.classList.add('service-worker-update-timing-bar-clickable');
-      timingBarVersionElement.setAttribute('tabindex', '0');
-      timingBarVersionElement.setAttribute('role', 'switch');
-      timingBarVersionElement.addEventListener('focus', (event: Event) => {
-        this.onFocus(event);
-      });
-      timingBarVersionElement.setAttribute('jslog', `${VisualLogging.expand('timing-info').track({click: true})}`);
-      UI.ARIAUtils.setChecked(timingBarVersionElement, false);
-      const timingBarTitleElement = tr.createChild('td');
-      UI.UIUtils.createTextChild(timingBarTitleElement, phaseName);
-      const barContainer = tr.createChild('td').createChild('div', 'service-worker-update-timing-row');
-
-      const bar = barContainer.createChild('span', 'service-worker-update-timing-bar ' + phaseName.toLowerCase());
-
-      bar.style.left = left + '%';
-      bar.style.right = right + '%';
-      bar.textContent = '\u200B';  // Important for 0-time items to have 0 width.
-
-      this.constructUpdateDetails(tr, range);
+                      })}>
+            <td class="service-worker-update-timing-bar-clickable" tabindex="0" role="switch"
+                aria-checked=${expanded ? 'true' : 'false'}
+                @focus=${this.onFocus}
+                @keydown=${(e: Event) => this.onKeydown(e, key)}
+                @click=${(e: Event) => this.onClick(e, key)}
+                jslog=${VisualLogging.expand('timing-info').track({click: true})}>
+              #${range.id}
+            </td>
+            <td>${phaseName}</td>
+            <td>
+              <div class="service-worker-update-timing-row">
+                <span class="service-worker-update-timing-bar ${phaseName.toLowerCase()}"
+                      style="left: ${left}%; right: ${right}%;">\u200B</span>
+              </div>
+            </td>
+          </tr>
+          <tr class="service-worker-update-timing-bar-details ${expanded ? 'service-worker-update-timing-bar-details-expanded' : 'service-worker-update-timing-bar-details-collapsed'}" tabindex="0">
+            <td colspan="3"><span>${i18nString(UIStrings.startTimeS, {PH1: new Date(range.start).toISOString()})}</span></td>
+          </tr>
+          <tr class="service-worker-update-timing-bar-details ${expanded ? 'service-worker-update-timing-bar-details-expanded' : 'service-worker-update-timing-bar-details-collapsed'}" tabindex="0">
+            <td colspan="3"><span>${i18nString(UIStrings.endTimeS, {PH1: new Date(range.end).toISOString()})}</span></td>
+          </tr>
+        `;
+      })}
+    `, this.tableElement, {host: this});
+    // clang-format on
+
+    this.rows = Array.from(this.tableElement.querySelectorAll<HTMLTableRowElement>('.service-worker-update-timeline'));
+    if (this.selectedRowIndex >= this.rows.length) {
+      this.selectedRowIndex = -1;
     }
   }
 
-  /**
-   * Detailed information about an update phase. Currently starting and ending time.
-   */
-  private constructUpdateDetails(tr: HTMLElement, range: ServiceWorkerUpdateRange): void {
-    const startRow = this.tableElement.createChild('tr', 'service-worker-update-timing-bar-details');
-    startRow.classList.add('service-worker-update-timing-bar-details-collapsed');
-    const startTimeItem = startRow.createChild('td');
-    startTimeItem.colSpan = 3;
-    const startTime = (new Date(range.start)).toISOString();
-    UI.UIUtils.createTextChild(startTimeItem.createChild('span'), i18nString(UIStrings.startTimeS, {PH1: startTime}));
-    startRow.tabIndex = 0;
-
-    const endRow = this.tableElement.createChild('tr', 'service-worker-update-timing-bar-details');
-    endRow.classList.add('service-worker-update-timing-bar-details-collapsed');
-    const endTimeItem = endRow.createChild('td');
-    endTimeItem.colSpan = 3;
-    const endTime = (new Date(range.end)).toISOString();
-    UI.UIUtils.createTextChild(endTimeItem.createChild('span'), i18nString(UIStrings.endTimeS, {PH1: endTime}));
-    endRow.tabIndex = 0;
-
-    tr.addEventListener('keydown', (event: Event) => {
-      this.onKeydown(event, startRow, endRow);
-    });
-
-    tr.addEventListener('click', (event: Event) => {
-      this.onClick(event, startRow, endRow);
-    });
-  }
-
-  private toggle(startRow: Element, endRow: Element, target: Element, expanded: boolean): void {
-    if (target.classList.contains('service-worker-update-timing-bar-clickable')) {
-      startRow.classList.toggle('service-worker-update-timing-bar-details-collapsed');
-      startRow.classList.toggle('service-worker-update-timing-bar-details-expanded');
-      endRow.classList.toggle('service-worker-update-timing-bar-details-collapsed');
-      endRow.classList.toggle('service-worker-update-timing-bar-details-expanded');
-      UI.ARIAUtils.setChecked(target, !expanded);
+  private toggle(key: string, expanded: boolean): void {
+    if (expanded) {
+      this.expandedRows.delete(key);
+    } else {
+      this.expandedRows.add(key);
     }
+    this.refresh();
   }
 
   private onFocus(event: Event): void {
@@ -260,21 +231,20 @@ export class ServiceWorkerUpdateCycleView {
     this.selectedRowIndex = this.rows.indexOf(tr);
   }
 
-  private onKeydown(event: Event, startRow: HTMLElement, endRow: HTMLElement): void {
+  private onKeydown(event: Event, key: string): void {
     if (!event.target) {
       return;
     }
-    const target: HTMLElement = event.target as HTMLElement;
     const keyboardEvent = event as KeyboardEvent;
-    const expanded = target.getAttribute('aria-checked') === 'true';
+    const expanded = this.expandedRows.has(key);
 
     if (keyboardEvent.key === 'Enter' || keyboardEvent.key === ' ') {
-      this.toggle(startRow, endRow, target, expanded);
+      this.toggle(key, expanded);
       event.preventDefault();
       return;
     }
     if ((!expanded && keyboardEvent.key === 'ArrowRight') || (expanded && keyboardEvent.key === 'ArrowLeft')) {
-      this.toggle(startRow, endRow, target, expanded);
+      this.toggle(key, expanded);
       event.preventDefault();
       return;
     }
@@ -346,21 +316,11 @@ export class ServiceWorkerUpdateCycleView {
     this.focusRow(this.rows[this.selectedRowIndex]);
   }
 
-  private onClick(event: Event, startRow: Element, endRow: Element): void {
-    const tr = event.target as Element;
-    if (!tr) {
-      return;
-    }
-
-    const expanded = tr.getAttribute('aria-checked') === 'true';
-    this.toggle(startRow, endRow, tr, expanded);
+  private onClick(event: Event, key: string): void {
+    const expanded = this.expandedRows.has(key);
+    this.toggle(key, expanded);
     event.preventDefault();
   }
-
-  refresh(): void {
-    const timeRanges = this.calculateServiceWorkerUpdateRanges();
-    this.updateTimingTable(timeRanges);
-  }
 }
 
 export const enum ServiceWorkerUpdateNames {