chrome-devtools-frontend 1.0.1515446 → 1.0.1515988

package/front_end/panels/settings/components/SyncSection.ts

@@ -77,20 +77,56 @@ const UIStrings = {
    * @description Label for Sign-Up button for the Google Developer Program profiles.
    */
   signUp: 'Sign up',
+  /**
+   * @description Link text for opening the Google Developer Program profile page.
+   */
+  viewProfile: 'View profile',
+  /**
+   * @description Text for tooltip shown on hovering over "Relevant Data" in the disclaimer text for AI code completion.
+   */
+  tooltipDisclaimerText:
+      'When you qualify for a badge, the badge’s identifier and the type of activity you did to earn it are sent to Google',
   /**
    * @description Text for the data notice right after the settings checkbox.
    */
-  relevantDataDisclaimer: '(Relevant data is sent to Google)',
+  relevantData: 'Relevant data',
   /**
-   * @description Link text for opening the Google Developer Program profile page.
+   * @description Text for the data notice right after the settings checkbox.
+   * @example {Relevant data} PH1
    */
-  viewProfile: 'View profile',
+  dataDisclaimer: '({PH1} is sent to Google)',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/settings/components/SyncSection.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 const {html, Directives: {ref, createRef}} = Lit;
 
+let cachedTooltipElement: HTMLElement|undefined;
+
+function renderDataDisclaimer(): HTMLElement {
+  if (cachedTooltipElement) {
+    return cachedTooltipElement;
+  }
+
+  const relevantDataTooltipTemplate = html`
+    <span
+      tabIndex="0"
+      class="link"
+      aria-details="gdp-profile-tooltip"
+      aria-describedby="gdp-profile-tooltip"
+      >${i18nString(UIStrings.relevantData)}</span>
+    <devtools-tooltip id="gdp-profile-tooltip" variant=${'rich'}>
+      <div class="tooltip-content" tabindex="0">${i18nString(UIStrings.tooltipDisclaimerText)}</div>
+    </devtools-tooltip>`;
+
+  const container = document.createElement('span');
+  Lit.render(relevantDataTooltipTemplate, container);
+  cachedTooltipElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.dataDisclaimer, {
+    PH1: container,
+  });
+  return cachedTooltipElement;
+}
+
 function getGdpSubscriptionText(profile: Host.GdpClient.Profile): Platform.UIString.LocalizedString {
   if (!profile.activeSubscription ||
       profile.activeSubscription.subscriptionStatus !== Host.GdpClient.SubscriptionStatus.ENABLED) {
@@ -124,14 +160,19 @@ export class SyncSection extends HTMLElement {
   #syncSetting?: Common.Settings.Setting<boolean>;
   #receiveBadgesSetting?: Common.Settings.Setting<boolean>;
   #receiveBadgesSettingContainerRef = createRef<HTMLElement>();
+  #isEligibleToCreateGdpProfile = false;
   #gdpProfile?: Host.GdpClient.Profile;
 
   set data(data: SyncSectionData) {
     this.#syncInfo = data.syncInfo;
     this.#syncSetting = data.syncSetting;
     this.#receiveBadgesSetting = data.receiveBadgesSetting;
-    void this.#updateGdpProfile();
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+
+    // Trigger fetching GDP profile if the user is signed in.
+    if (data.syncInfo.accountEmail) {
+      void this.#fetchGdpDetails();
+    }
   }
 
   async highlightReceiveBadgesSetting(): Promise<void> {
@@ -161,15 +202,22 @@ export class SyncSection extends HTMLElement {
         ${renderGdpSectionIfNeeded({
           receiveBadgesSetting: this.#receiveBadgesSetting,
           receiveBadgesSettingContainerRef: this.#receiveBadgesSettingContainerRef,
-          gdpProfile: this.#gdpProfile
+          gdpProfile: this.#gdpProfile,
+          isEligibleToCreateProfile: this.#isEligibleToCreateGdpProfile,
+          onSignUpSuccess: this.#fetchGdpDetails.bind(this),
         })}
       </fieldset>
     `, this.#shadow, {host: this});
     // clang-format on
   }
 
-  async #updateGdpProfile(): Promise<void> {
+  async #fetchGdpDetails(): Promise<void> {
+    if (!Root.Runtime.hostConfig.devToolsGdpProfiles?.enabled) {
+      return;
+    }
+
     this.#gdpProfile = await Host.GdpClient.GdpClient.instance().getProfile() ?? undefined;
+    this.#isEligibleToCreateGdpProfile = await Host.GdpClient.GdpClient.instance().isEligibleToCreateProfile();
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
   }
 }
@@ -247,20 +295,24 @@ function renderGdpSectionIfNeeded({
   receiveBadgesSetting,
   receiveBadgesSettingContainerRef,
   gdpProfile,
+  isEligibleToCreateProfile,
+  onSignUpSuccess,
 }: {
   receiveBadgesSettingContainerRef: Lit.Directives.Ref<HTMLElement>,
+  onSignUpSuccess: () => void,
   receiveBadgesSetting?: Common.Settings.Setting<boolean>,
   gdpProfile?: Host.GdpClient.Profile,
+  isEligibleToCreateProfile?: boolean,
 }): Lit.LitTemplate {
   // clang-format off
-  if (!Root.Runtime.hostConfig.devToolsGdpProfiles?.enabled) {
+  if (!Root.Runtime.hostConfig.devToolsGdpProfiles?.enabled || (!gdpProfile && !isEligibleToCreateProfile)) {
     return Lit.nothing;
   }
 
   function renderBrand(): Lit.LitTemplate {
     return html`
       <div class="gdp-profile-header">
-        <div class="gdp-logo" role="img" aria-label="Google Developer Program"></div>
+        <div class="gdp-logo" role="img" tabindex="0" aria-label="Google Developer Program"></div>
       </div>
     `;
   }
@@ -289,14 +341,16 @@ function renderGdpSectionIfNeeded({
                     Badges.UserBadges.instance().recordAction(Badges.BadgeAction.RECEIVE_BADGES_SETTING_ENABLED);
                   });
                 }}></setting-checkbox>
-                <span>${i18nString(UIStrings.relevantDataDisclaimer)}</span>
+                ${renderDataDisclaimer()}
               </div>` : Lit.nothing}
         </div>
       ` : html`
         <div class="gdp-profile-sign-up-content">
           ${renderBrand()}
           <devtools-button
-            @click=${() => PanelCommon.GdpSignUpDialog.show()}
+            @click=${() => PanelCommon.GdpSignUpDialog.show({
+              onSuccess: onSignUpSuccess
+            })}
             .jslogContext=${'gdp.sign-up-dialog-open'}
             .variant=${Buttons.Button.Variant.OUTLINED}>
               ${i18nString(UIStrings.signUp)}

package/front_end/panels/settings/components/syncSection.css

@@ -114,5 +114,11 @@ fieldset {
       align-items: center;
       gap: var(--sys-size-2);
     }
+
+    & .tooltip-content {
+      max-width: 278px;
+      padding: var(--sys-size-2) var(--sys-size-3);
+      font: var(--sys-typescale-body5-regular);
+    }
   }
 }

package/front_end/panels/sources/AiCodeCompletionPlugin.ts

@@ -87,10 +87,7 @@ export class AiCodeCompletionPlugin extends Plugin {
   override editorExtension(): CodeMirror.Extension {
     return [
       CodeMirror.EditorView.updateListener.of(update => this.#editorUpdate(update)), this.#teaserCompartment.of([]),
-      // conservativeCompletion is required so that the completion suggestions in the traditional
-      // autocomplete menu are only activated after the first keyDown/keyUp events.
-      TextEditor.Config.conservativeCompletion, TextEditor.Config.aiAutoCompleteSuggestion,
-      CodeMirror.Prec.highest(CodeMirror.keymap.of(this.#editorKeymap()))
+      TextEditor.Config.aiAutoCompleteSuggestion, CodeMirror.Prec.highest(CodeMirror.keymap.of(this.#editorKeymap()))
     ];
   }
 

package/front_end/panels/sources/SourcesSearchScope.ts

@@ -184,12 +184,12 @@ export class SourcesSearchScope implements Search.SearchScope.SearchScope {
 
     const files = this.searchResultCandidates;
     if (!files.length) {
-      progress.done();
+      progress.done = true;
       callback();
       return;
     }
 
-    progress.setTotalWork(files.length);
+    progress.totalWork = files.length;
 
     let fileIndex = 0;
     const maxFileContentRequests = 20;
@@ -213,7 +213,7 @@ export class SourcesSearchScope implements Search.SearchScope.SearchScope {
     function scheduleSearchInNextFileOrFinish(this: SourcesSearchScope): void {
       if (fileIndex >= files.length) {
         if (!callbacksLeft) {
-          progress.done();
+          progress.done = true;
           callback();
           return;
         }
@@ -228,7 +228,7 @@ export class SourcesSearchScope implements Search.SearchScope.SearchScope {
     function contentLoaded(
         this: SourcesSearchScope, uiSourceCode: Workspace.UISourceCode.UISourceCode,
         content: TextUtils.Text.Text): void {
-      progress.incrementWorked(1);
+      ++progress.worked;
       let matches: TextUtils.ContentProvider.SearchMatch[] = [];
       const searchConfig = (this.searchConfig as Workspace.SearchConfig.SearchConfig);
       const queries = searchConfig.queries();

package/front_end/panels/sources/TabbedEditorContainer.ts

@@ -196,7 +196,7 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
         frame?.currentUISourceCode() === uiSourceCode) {
       Common.EventTarget.fireEvent('source-file-loaded', uiSourceCode.displayName(true));
     } else {
-      this.innerShowFile(uiSourceCode, true);
+      this.#showFile(uiSourceCode, true);
     }
   }
 
@@ -279,7 +279,7 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
     }
   }
 
-  private innerShowFile(uiSourceCode: Workspace.UISourceCode.UISourceCode, userGesture?: boolean): void {
+  #showFile(uiSourceCode: Workspace.UISourceCode.UISourceCode, userGesture?: boolean): void {
     if (this.reentrantShow) {
       return;
     }
@@ -430,7 +430,7 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
 
     // Select tab if this file was the last to be shown.
     if (!index) {
-      this.innerShowFile(uiSourceCode, false);
+      this.#showFile(uiSourceCode, false);
       return;
     }
 
@@ -441,7 +441,7 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
     const currentProjectIsSnippets = Snippets.ScriptSnippetFileSystem.isSnippetsUISourceCode(this.#currentFile);
     const addedProjectIsSnippets = Snippets.ScriptSnippetFileSystem.isSnippetsUISourceCode(uiSourceCode);
     if (this.history.index(historyItemKey(this.#currentFile)) && currentProjectIsSnippets && !addedProjectIsSnippets) {
-      this.innerShowFile(uiSourceCode, false);
+      this.#showFile(uiSourceCode, false);
     }
   }
 
@@ -578,7 +578,7 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
 
     const uiSourceCode = this.files.get(tabId);
     if (uiSourceCode) {
-      this.innerShowFile(uiSourceCode, isUserGesture);
+      this.#showFile(uiSourceCode, isUserGesture);
     }
   }
 

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -248,12 +248,17 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
 
     const contextMenu = new UI.ContextMenu.ContextMenu(mouseEvent);
     if (perfAIEntryPointEnabled && this.parsedTrace) {
-      const aiCallTree = AIAssistance.AICallTree.fromEvent(entry, this.parsedTrace);
-      if (aiCallTree) {
+      const callTree = AIAssistance.AICallTree.fromEvent(entry, this.parsedTrace);
+      if (callTree) {
+        let focus = UI.Context.Context.instance().flavor(AIAssistance.AgentFocus);
+        if (focus) {
+          focus = focus.withCallTree(callTree);
+        } else {
+          focus = AIAssistance.AgentFocus.fromCallTree(callTree);
+        }
+        UI.Context.Context.instance().setFlavor(AIAssistance.AgentFocus, focus);
+
         const action = UI.ActionRegistry.ActionRegistry.instance().getAction(PERF_AI_ACTION_ID);
-        // The other side of setFlavor is handleTraceEntryNodeFlavorChange() in FreestylerPanel
-        const context = AIAssistance.AgentFocus.fromCallTree(aiCallTree);
-        UI.Context.Context.instance().setFlavor(AIAssistance.AgentFocus, context);
 
         if (Root.Runtime.hostConfig.devToolsAiSubmenuPrompts?.enabled) {
           function appendSubmenuPromptAction(

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -1510,22 +1510,25 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     // supports (currently, only main thread events), then set the context's
     // "flavor" to be the AI Call Tree of the active event.
     // This is listened to by the AI Assistance panel to update its state.
-    // Note that we do not change the Context back to `null` if the user picks
-    // an invalid event - we don't want to reset it back as it may be they are
-    // clicking around in order to understand something.
     // We also do this in a rAF to not block the UI updating to show the selected event first.
-    if (selectionIsEvent(selection) && this.#parsedTrace) {
-      requestAnimationFrame(() => {
-        if (!this.#parsedTrace) {
-          return;
-        }
-        const aiCallTree = AIAssistance.AICallTree.fromEvent(selection.event, this.#parsedTrace);
-        if (aiCallTree) {
-          const context = AIAssistance.AgentFocus.fromCallTree(aiCallTree);
-          UI.Context.Context.instance().setFlavor(AIAssistance.AgentFocus, context);
-        }
-      });
-    }
+    requestAnimationFrame(() => {
+      if (!this.#parsedTrace) {
+        return;
+      }
+
+      const callTree =
+          selectionIsEvent(selection) ? AIAssistance.AICallTree.fromEvent(selection.event, this.#parsedTrace) : null;
+      let focus = UI.Context.Context.instance().flavor(AIAssistance.AgentFocus);
+      if (focus) {
+        focus = focus.withCallTree(callTree);
+      } else if (callTree) {
+        focus = AIAssistance.AgentFocus.fromCallTree(callTree);
+      } else {
+        focus = null;
+      }
+
+      UI.Context.Context.instance().setFlavor(AIAssistance.AgentFocus, focus);
+    });
   }
 
   // Only opens the details view of a selection. This is used for Timing Markers. Timing markers replace

package/front_end/panels/timeline/TimelinePanel.ts

@@ -940,9 +940,9 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
         throw new Error('could not create performance agent focus');
       }
 
-      const agent = conversationHandler.createAgent(AiAssistanceModel.ConversationType.PERFORMANCE_FULL);
+      const agent = conversationHandler.createAgent(AiAssistanceModel.ConversationType.PERFORMANCE);
       const conversation = new AiAssistanceModel.Conversation(
-          AiAssistanceModel.ConversationType.PERFORMANCE_FULL,
+          AiAssistanceModel.ConversationType.PERFORMANCE,
           [],
           agent.id,
           /* isReadOnly */ true,
@@ -950,6 +950,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       );
 
       const selected = new AiAssistanceModel.PerformanceTraceContext(focus);
+      selected.external = true;
 
       this.#externalAIConversationData = {
         conversationHandler,
@@ -1373,18 +1374,17 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     void contextMenu.show();
   }
 
-  /**
-   * Saves a trace file to disk.
-   * Pass `config.savingEnhancedTrace === true` to include source maps in the resulting metadata.
-   * Pass `config.addModifications === true` to include user modifications to the trace file, which includes:
-   *      1. Annotations
-   *      2. Filtering / collapsing of the flame chart.
-   *      3. Visual track configuration (re-ordering or hiding tracks).
-   */
   async saveToFile(config: {
     includeScriptContent: boolean,
     includeSourceMaps: boolean,
+    /**
+     * Includes many things:
+     * 1. annotations
+     * 2. filtering / collapsing of the flame chart
+     * 3. visual track configuration (re-ordering or hiding tracks)
+     **/
     addModifications: boolean,
+    shouldCompress: boolean,
   }): Promise<void> {
     if (this.state !== State.IDLE) {
       return;
@@ -1407,7 +1407,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     }
 
     const traceEvents = parsedTrace.traceEvents.map(event => {
-      if (Trace.Types.Events.isAnyScriptCatchupEvent(event) && event.name !== 'StubScriptCatchup') {
+      if (Trace.Types.Events.isAnyScriptSourceEvent(event) && event.name !== 'StubScriptCatchup') {
         const mappedScript = scriptByIdMap.get(`${event.args.data.isolate}.${event.args.data.scriptId}`);
 
         // If the checkbox to include script content is not checked or if it comes from and
@@ -1425,7 +1425,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
             args: {
               data: {isolate: event.args.data.isolate, scriptId: event.args.data.scriptId},
             },
-          } as Trace.Types.Events.V8SourceRundownSourcesStubScriptCatchupEvent;
+          } as Trace.Types.Events.RundownScriptStub;
         }
       }
 
@@ -1447,7 +1447,8 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       await this.innerSaveToFile(traceEvents, metadata, {
         includeScriptContent: config.includeScriptContent,
         includeSourceMaps: config.includeSourceMaps,
-        addModifications: config.addModifications
+        addModifications: config.addModifications,
+        shouldCompress: config.shouldCompress,
       });
     } catch (e) {
       // We expect the error to be an Error class, but this deals with any weird case where it's not.
@@ -1467,6 +1468,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     includeScriptContent: boolean,
     includeSourceMaps: boolean,
     addModifications: boolean,
+    shouldCompress: boolean,
   }): Promise<void> {
     // Base the filename on the trace's time of recording
     const isoDate =
@@ -1501,8 +1503,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
     let blob = new Blob(blobParts, {type: 'application/json'});
 
-    // TODO: Enable by default and connect with upcoming SaveDialog
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_SAVE_AS_GZ)) {
+    if (config.shouldCompress) {
       fileName = `${fileName}.gz` as Platform.DevToolsPath.RawPathString;
       const gzStream = Common.Gzip.compressStream(blob.stream());
       blob = await new Response(gzStream, {
@@ -1537,6 +1538,18 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     }
   }
 
+  async handleSaveToFileAction(): Promise<void> {
+    const exportTraceOptionsElement =
+        this.saveButton.element as TimelineComponents.ExportTraceOptions.ExportTraceOptions;
+    const state = exportTraceOptionsElement.state;
+    await this.saveToFile({
+      includeScriptContent: state.includeScriptContent,
+      includeSourceMaps: state.includeSourceMaps,
+      addModifications: state.includeAnnotations,
+      shouldCompress: state.shouldCompress,
+    });
+  }
+
   #filterMetadataSourceMaps(metadata: Trace.Types.File.MetaData): Trace.Types.File.MetadataSourceMap[]|undefined {
     if (!metadata.sourceMaps) {
       return undefined;
@@ -2125,8 +2138,9 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
     const exclusiveFilter = this.#exclusiveFilterPerTrace.get(traceIndex) ?? null;
     this.#applyActiveFilters(parsedTrace.data.Meta.traceIsGeneric, exclusiveFilter);
-    (this.saveButton.element as TimelineComponents.ExportTraceOptions.ExportTraceOptions)
-        .updateContentVisibility(currentManager ? currentManager.getAnnotations()?.length > 0 : false);
+    (this.saveButton.element as TimelineComponents.ExportTraceOptions.ExportTraceOptions).updateContentVisibility({
+      annotationsExist: currentManager ? currentManager.getAnnotations()?.length > 0 : false
+    });
 
     // Add ModificationsManager listeners for annotations change to update the
     // Annotation Overlays.
@@ -2226,6 +2240,9 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
             Host.UserMetrics.TimelineNavigationSetting.MODERN_AT_SESSION_FIRST_TRACE);
       }
     }
+
+    UI.Context.Context.instance().setFlavor(
+        AiAssistanceModel.AgentFocus, AiAssistanceModel.AgentFocus.full(parsedTrace));
   }
 
   #onAnnotationModifiedEvent(e: Event): void {
@@ -2258,8 +2275,9 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     const annotations = currentManager?.getAnnotations() ?? [];
     const annotationEntryToColorMap = this.buildColorsAnnotationsMap(annotations);
     this.#sideBar.setAnnotations(annotations, annotationEntryToColorMap);
-    (this.saveButton.element as TimelineComponents.ExportTraceOptions.ExportTraceOptions)
-        .updateContentVisibility(currentManager ? currentManager.getAnnotations()?.length > 0 : false);
+    (this.saveButton.element as TimelineComponents.ExportTraceOptions.ExportTraceOptions).updateContentVisibility({
+      annotationsExist: currentManager ? currentManager.getAnnotations()?.length > 0 : false
+    });
   }
 
   /**
@@ -2650,7 +2668,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   }
 
   #createSourceMapResolver(isFreshRecording: boolean, metadata: Trace.Types.File.MetaData|null):
-      Trace.TraceModel.ParseConfig['resolveSourceMap'] {
+      Trace.Types.Configuration.ParseOptions['resolveSourceMap'] {
     const debuggerModelForFrameId = new Map<string, SDK.DebuggerModel.DebuggerModel>();
     for (const target of SDK.TargetManager.TargetManager.instance().targets()) {
       const debuggerModel = target.model(SDK.DebuggerModel.DebuggerModel);
@@ -2742,6 +2760,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       metadata: metadata ?? undefined,
       isFreshRecording,
       resolveSourceMap: this.#createSourceMapResolver(isFreshRecording, metadata),
+      isCPUProfile: metadata?.dataOrigin === Trace.Types.File.DataOrigin.CPU_PROFILE,
     };
 
     if (window.location.href.includes('devtools/bundled') || window.location.search.includes('debugFrontend')) {
@@ -3112,7 +3131,7 @@ ${responseTextForPassedInsights}`;
       Promise<AsyncGenerator<AiAssistanceModel.ExternalRequestResponse, AiAssistanceModel.ExternalRequestResponse>> {
     const data = TimelinePanel.instance().getOrCreateExternalAIConversationData();
     return await data.conversationHandler.handleExternalRequest({
-      conversationType: AiAssistanceModel.ConversationType.PERFORMANCE_FULL,
+      conversationType: AiAssistanceModel.ConversationType.PERFORMANCE,
       prompt,
       data,
     });
@@ -3196,7 +3215,7 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
         panel.recordReload();
         return true;
       case 'timeline.save-to-file':
-        void panel.saveToFile({includeScriptContent: false, includeSourceMaps: false, addModifications: false});
+        void panel.handleSaveToFileAction();
         return true;
       case 'timeline.load-from-file':
         panel.selectFileToLoad();

package/front_end/panels/timeline/TracingLayerTree.ts

@@ -38,10 +38,10 @@ export class TracingLayerTree extends SDK.LayerTreeBase.LayerTreeBase {
     this.layersById = new Map();
     this.setContentRoot(null);
     if (root) {
-      const convertedLayers = this.innerSetLayers(oldLayersById, root);
+      const convertedLayers = this.#setLayers(oldLayersById, root);
       this.setRoot(convertedLayers);
     } else if (layers) {
-      const processedLayers = layers.map(this.innerSetLayers.bind(this, oldLayersById));
+      const processedLayers = layers.map(this.#setLayers.bind(this, oldLayersById));
       const contentRoot = this.contentRoot();
       if (!contentRoot) {
         throw new Error('Content root is not set.');
@@ -86,8 +86,7 @@ export class TracingLayerTree extends SDK.LayerTreeBase.LayerTreeBase {
     }
   }
 
-  private innerSetLayers(oldLayersById: Map<string|number, SDK.LayerTreeBase.Layer>, payload: TracingLayerPayload):
-      TracingLayer {
+  #setLayers(oldLayersById: Map<string|number, SDK.LayerTreeBase.Layer>, payload: TracingLayerPayload): TracingLayer {
     let layer = (oldLayersById.get(payload.layer_id) as TracingLayer | null);
     if (layer) {
       layer.reset(payload);
@@ -102,7 +101,7 @@ export class TracingLayerTree extends SDK.LayerTreeBase.LayerTreeBase {
       this.setContentRoot(layer);
     }
     for (let i = 0; payload.children && i < payload.children.length; ++i) {
-      layer.addChild(this.innerSetLayers(oldLayersById, payload.children[i]));
+      layer.addChild(this.#setLayers(oldLayersById, payload.children[i]));
     }
     return layer;
   }