chrome-devtools-frontend 1.0.1515796 → 1.0.1516909

package/front_end/panels/search/SearchView.ts

@@ -107,6 +107,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/search/SearchView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const {ref} = Directives;
+const {widgetConfig} = UI.Widget;
 
 interface SearchViewInput {
   query: string;
@@ -115,6 +116,8 @@ interface SearchViewInput {
   isRegex: boolean;
   searchMessage: string;
   searchResultsMessage: string;
+  searchResultsPane: SearchResultsPane|null;
+  progress: Common.Progress.Progress|null;
   onQueryChange: (query: string) => void;
   onQueryKeyDown: (evt: KeyboardEvent) => void;
   onPanelKeyDown: (evt: KeyboardEvent) => void;
@@ -125,12 +128,7 @@ interface SearchViewInput {
   onClearSearch: () => void;
 }
 
-interface SearchViewOutput {
-  searchResultsElement?: HTMLElement;
-  searchProgressPlaceholderElement?: HTMLElement;
-}
-
-type View = (input: SearchViewInput, output: SearchViewOutput, target: HTMLElement) => void;
+type View = (input: SearchViewInput, output: object, target: HTMLElement) => void;
 
 export const DEFAULT_VIEW: View = (input, output, target) => {
   const {
@@ -139,7 +137,9 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     matchCase,
     isRegex,
     searchMessage,
+    searchResultsPane,
     searchResultsMessage,
+    progress,
     onQueryChange,
     onQueryKeyDown,
     onPanelKeyDown,
@@ -149,6 +149,18 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     onRefresh,
     onClearSearch,
   } = input;
+  let header = '', text = '';
+  if (!query) {
+    header = i18nString(UIStrings.noSearchResult);
+    text = i18nString(
+        UIStrings.typeAndPressSToSearch,
+        {PH1: UI.KeyboardShortcut.KeyboardShortcut.shortcutToString(UI.KeyboardShortcut.Keys.Enter)});
+  } else if (progress) {
+    header = i18nString(UIStrings.searching);
+  } else if (!searchResultsPane) {
+    header = i18nString(UIStrings.noMatchesFound);
+    text = i18nString(UIStrings.nothingMatchedTheQuery);
+  }
   // clang-format off
   render(html`
       <style>${searchViewStyles}</style>
@@ -223,12 +235,21 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
               } as Buttons.Button.ButtonData}></devtools-button>
         </devtools-toolbar>
       </div>
-      <div class="search-results" @keydown=${onPanelKeyDown}
-           ${ref(e => {output.searchResultsElement = e as HTMLElement;})}>
+      <div class="search-results" @keydown=${onPanelKeyDown}>
+        ${searchResultsPane
+           ? html`<devtools-widget .widgetConfig=${widgetConfig(UI.Widget.VBox)}>
+              ${searchResultsPane.element}
+            </devtools-widget>`
+           : html`<devtools-widget .widgetConfig=${widgetConfig(UI.EmptyWidget.EmptyWidget, {header, text})}>
+                  </devtools-widget>`}
       </div>
       <div class="search-toolbar-summary" @keydown=${onPanelKeyDown}>
         <div class="search-message">${searchMessage}</div>
-        <div class="flex-centered" ${ref(e => {output.searchProgressPlaceholderElement = e as HTMLElement;})}>
+        <div class="flex-centered">
+          ${progress ? html`
+            <devtools-progress .title=${progress.title ?? ''}
+                               .worked=${progress.worked} .totalWork=${progress.totalWork}>
+            </devtools-progress>` : ''}
         </div>
         <div class="search-message">${searchResultsMessage}</div>
       </div>`, target);
@@ -244,18 +265,14 @@ export class SearchView extends UI.Widget.VBox {
   #searchResultsCount: number;
   #nonEmptySearchResultsCount: number;
   #searchingView: UI.Widget.Widget|null;
-  #notFoundView: UI.Widget.Widget|null;
   #searchConfig: Workspace.SearchConfig.SearchConfig|null;
   #pendingSearchConfig: Workspace.SearchConfig.SearchConfig|null;
   #searchResultsPane: SearchResultsPane|null;
-  #progressIndicator: UI.ProgressIndicator.ProgressIndicator|null;
-  #visiblePane: UI.Widget.Widget|null;
-  #searchResultsElement!: HTMLElement;
+  #progress: Common.Progress.Progress|null;
   #query: string;
   #matchCase = false;
   #isRegex = false;
   #searchMessage = '';
-  #searchProgressPlaceholderElement!: HTMLElement;
   #searchResultsMessage = '';
   readonly #advancedSearchConfig: Common.Settings.Setting<{
     query: string,
@@ -268,7 +285,6 @@ export class SearchView extends UI.Widget.VBox {
   // result added.
   #throttler: Common.Throttler.Throttler;
   #pendingSearchResults: SearchResult[] = [];
-  #emptyStartView: UI.EmptyWidget.EmptyWidget;
 
   constructor(settingKey: string, throttler: Common.Throttler.Throttler, view = DEFAULT_VIEW) {
     super({
@@ -286,12 +302,10 @@ export class SearchView extends UI.Widget.VBox {
     this.#searchResultsCount = 0;
     this.#nonEmptySearchResultsCount = 0;
     this.#searchingView = null;
-    this.#notFoundView = null;
     this.#searchConfig = null;
     this.#pendingSearchConfig = null;
     this.#searchResultsPane = null;
-    this.#progressIndicator = null;
-    this.#visiblePane = null;
+    this.#progress = null;
     this.#throttler = throttler;
 
     this.#advancedSearchConfig = Common.Settings.Settings.instance().createLocalSetting(
@@ -301,12 +315,6 @@ export class SearchView extends UI.Widget.VBox {
     this.#load();
     this.performUpdate();
     this.#searchScope = null;
-
-    this.#emptyStartView = new UI.EmptyWidget.EmptyWidget(
-        i18nString(UIStrings.noSearchResult), i18nString(UIStrings.typeAndPressSToSearch, {
-          PH1: UI.KeyboardShortcut.KeyboardShortcut.shortcutToString(UI.KeyboardShortcut.Keys.Enter)
-        }));
-    this.#showPane(this.#emptyStartView);
   }
 
   override performUpdate(): void {
@@ -316,7 +324,9 @@ export class SearchView extends UI.Widget.VBox {
       matchCase: this.#matchCase,
       isRegex: this.#isRegex,
       searchMessage: this.#searchMessage,
+      searchResultsPane: this.#searchResultsPane,
       searchResultsMessage: this.#searchResultsMessage,
+      progress: this.#progress,
       onQueryChange: (query: string) => {
         this.#query = query;
       },
@@ -328,15 +338,9 @@ export class SearchView extends UI.Widget.VBox {
       onRefresh: this.#onRefresh.bind(this),
       onClearSearch: this.#onClearSearch.bind(this),
     };
-    const output: SearchViewOutput = {};
+    const output = {};
     this.#view(input, output, this.contentElement);
     this.#focusSearchInput = false;
-    if (output.searchResultsElement) {
-      this.#searchResultsElement = output.searchResultsElement;
-    }
-    if (output.searchProgressPlaceholderElement) {
-      this.#searchProgressPlaceholderElement = output.searchProgressPlaceholderElement;
-    }
   }
 
   #onToggleRegex(): void {
@@ -375,13 +379,12 @@ export class SearchView extends UI.Widget.VBox {
   }
 
   #onIndexingFinished(): void {
-    if (!this.#progressIndicator) {
+    if (!this.#progress) {
       return;
     }
 
-    const finished = !this.#progressIndicator.isCanceled();
-    this.#progressIndicator.done();
-    this.#progressIndicator = null;
+    const finished = !this.#progress.canceled;
+    this.#progress = null;
     this.#isIndexing = false;
     this.#searchMessage = finished ? '' : i18nString(UIStrings.indexingInterrupted);
     if (!finished) {
@@ -393,21 +396,20 @@ export class SearchView extends UI.Widget.VBox {
     }
     const searchConfig = this.#pendingSearchConfig;
     this.#pendingSearchConfig = null;
-    this.#innerStartSearch(searchConfig);
+    this.#startSearch(searchConfig);
   }
 
   #startIndexing(): void {
     this.#isIndexing = true;
-    if (this.#progressIndicator) {
-      this.#progressIndicator.done();
+    if (this.#progress) {
+      this.#progress.done = true;
     }
-    this.#progressIndicator = document.createElement('devtools-progress');
+    this.#progress = new Common.Progress.ProgressProxy(
+        new Common.Progress.Progress(), this.#onIndexingFinished.bind(this), this.requestUpdate.bind(this));
     this.#searchMessage = i18nString(UIStrings.indexing);
-    this.#searchProgressPlaceholderElement.appendChild(this.#progressIndicator);
     this.performUpdate();
     if (this.#searchScope) {
-      this.#searchScope.performIndexing(
-          new Common.Progress.ProgressProxy(this.#progressIndicator, this.#onIndexingFinished.bind(this)));
+      this.#searchScope.performIndexing(this.#progress);
     }
   }
 
@@ -416,20 +418,18 @@ export class SearchView extends UI.Widget.VBox {
     this.requestUpdate();
     this.#save();
     this.focus();
-    this.#showPane(this.#emptyStartView);
   }
 
   #onSearchResult(searchId: number, searchResult: SearchResult): void {
-    if (searchId !== this.#searchId || !this.#progressIndicator) {
+    if (searchId !== this.#searchId || !this.#progress) {
       return;
     }
-    if (this.#progressIndicator?.isCanceled()) {
+    if (this.#progress?.canceled) {
       this.#onIndexingFinished();
       return;
     }
     if (!this.#searchResultsPane) {
       this.#searchResultsPane = this.createSearchResultsPane();
-      this.#showPane(this.#searchResultsPane);
     }
     this.#pendingSearchResults.push(searchResult);
     void this.#throttler.schedule(async () => this.#addPendingSearchResults());
@@ -450,34 +450,32 @@ export class SearchView extends UI.Widget.VBox {
   }
 
   #onSearchFinished(searchId: number, finished: boolean): void {
-    if (searchId !== this.#searchId || !this.#progressIndicator) {
+    if (searchId !== this.#searchId || !this.#progress) {
       return;
     }
-    if (!this.#searchResultsPane) {
-      this.#nothingFound();
-    }
+    this.#progress = null;
     this.#searchFinished(finished);
     this.#searchConfig = null;
     UI.ARIAUtils.LiveAnnouncer.alert(this.#searchMessage + ' ' + this.#searchResultsMessage);
   }
 
-  #innerStartSearch(searchConfig: Workspace.SearchConfig.SearchConfig): void {
+  #startSearch(searchConfig: Workspace.SearchConfig.SearchConfig): void {
     this.#searchConfig = searchConfig;
-    if (this.#progressIndicator) {
-      this.#progressIndicator.done();
+    if (this.#progress) {
+      this.#progress.done = true;
     }
-    this.#progressIndicator = document.createElement('devtools-progress');
-    this.#searchStarted(this.#progressIndicator);
+    this.#progress =
+        new Common.Progress.ProgressProxy(new Common.Progress.Progress(), undefined, this.requestUpdate.bind(this));
+    this.#searchStarted();
     if (this.#searchScope) {
       void this.#searchScope.performSearch(
-          searchConfig, this.#progressIndicator, this.#onSearchResult.bind(this, this.#searchId),
+          searchConfig, this.#progress, this.#onSearchResult.bind(this, this.#searchId),
           this.#onSearchFinished.bind(this, this.#searchId));
     }
   }
 
   #resetSearch(): void {
     this.#stopSearch();
-    this.#showPane(null);
     this.#searchResultsPane = null;
     this.#searchMessage = '';
     this.#searchResultsMessage = '';
@@ -485,8 +483,8 @@ export class SearchView extends UI.Widget.VBox {
   }
 
   #stopSearch(): void {
-    if (this.#progressIndicator && !this.#isIndexing) {
-      this.#progressIndicator.cancel();
+    if (this.#progress && !this.#isIndexing) {
+      this.#progress.canceled = true;
     }
     if (this.#searchScope) {
       this.#searchScope.stopSearch();
@@ -494,17 +492,15 @@ export class SearchView extends UI.Widget.VBox {
     this.#searchConfig = null;
   }
 
-  #searchStarted(progressIndicator: UI.ProgressIndicator.ProgressIndicator): void {
+  #searchStarted(): void {
     this.#searchMatchesCount = 0;
     this.#searchResultsCount = 0;
     this.#nonEmptySearchResultsCount = 0;
     if (!this.#searchingView) {
       this.#searchingView = new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.searching), '');
     }
-    this.#showPane(this.#searchingView);
     this.#searchMessage = i18nString(UIStrings.searching);
     this.performUpdate();
-    this.#searchProgressPlaceholderElement.appendChild(progressIndicator);
     this.#updateSearchResultsMessage();
   }
 
@@ -525,24 +521,6 @@ export class SearchView extends UI.Widget.VBox {
     this.performUpdate();
   }
 
-  #showPane(panel: UI.Widget.Widget|null): void {
-    if (this.#visiblePane) {
-      this.#visiblePane.detach();
-    }
-    if (panel) {
-      panel.show(this.#searchResultsElement);
-    }
-    this.#visiblePane = panel;
-  }
-
-  #nothingFound(): void {
-    if (!this.#notFoundView) {
-      this.#notFoundView = new UI.EmptyWidget.EmptyWidget(
-          i18nString(UIStrings.noMatchesFound), i18nString(UIStrings.nothingMatchedTheQuery));
-    }
-    this.#showPane(this.#notFoundView);
-  }
-
   #addSearchResult(searchResult: SearchResult): void {
     const matchesCount = searchResult.matchesCount();
     this.#searchMatchesCount += matchesCount;

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

@@ -204,6 +204,7 @@ export class SyncSection extends HTMLElement {
           receiveBadgesSettingContainerRef: this.#receiveBadgesSettingContainerRef,
           gdpProfile: this.#gdpProfile,
           isEligibleToCreateProfile: this.#isEligibleToCreateGdpProfile,
+          onSignUpSuccess: this.#fetchGdpDetails.bind(this),
         })}
       </fieldset>
     `, this.#shadow, {host: this});
@@ -211,7 +212,7 @@ export class SyncSection extends HTMLElement {
   }
 
   async #fetchGdpDetails(): Promise<void> {
-    if (!Root.Runtime.hostConfig.devToolsGdpProfiles?.enabled) {
+    if (!Root.Runtime.hostConfig.devToolsGdpProfiles?.enabled || Root.Runtime.hostConfig.isOffTheRecord) {
       return;
     }
 
@@ -295,8 +296,10 @@ function renderGdpSectionIfNeeded({
   receiveBadgesSettingContainerRef,
   gdpProfile,
   isEligibleToCreateProfile,
+  onSignUpSuccess,
 }: {
   receiveBadgesSettingContainerRef: Lit.Directives.Ref<HTMLElement>,
+  onSignUpSuccess: () => void,
   receiveBadgesSetting?: Common.Settings.Setting<boolean>,
   gdpProfile?: Host.GdpClient.Profile,
   isEligibleToCreateProfile?: boolean,
@@ -345,7 +348,9 @@ function renderGdpSectionIfNeeded({
         <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/sources/OutlineQuickOpen.ts

@@ -44,7 +44,9 @@ export function outline(state: CodeMirror.EditorState): OutlineItem[] {
 
   function subtitleFromParamList(): string {
     while (cursor.name !== 'ParamList') {
-      cursor.nextSibling();
+      if (!cursor.nextSibling()) {
+        break;
+      }
     }
     let parameters = '';
     if (cursor.name === 'ParamList' && cursor.firstChild()) {

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