chrome-devtools-frontend 1.0.1515446 → 1.0.1515796

package/front_end/panels/search/SearchView.ts

@@ -108,67 +108,51 @@ const str_ = i18n.i18n.registerUIStrings('panels/search/SearchView.ts', UIString
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const {ref} = Directives;
 
-export class SearchView extends UI.Widget.VBox {
-  #focusOnShow: boolean;
-  #isIndexing: boolean;
-  #searchId: number;
-  #searchMatchesCount: number;
-  #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;
-  #searchInputElement!: HTMLInputElement;
-  #matchCaseButton!: Buttons.Button.Button;
-  #regexButton!: Buttons.Button.Button;
-  #searchMessageElement!: HTMLElement;
-  #searchProgressPlaceholderElement!: HTMLElement;
-  #searchResultsMessageElement!: HTMLElement;
-  readonly #advancedSearchConfig: Common.Settings.Setting<{
-    query: string,
-    ignoreCase: boolean,
-    isRegex: boolean,
-  }>;
-  #searchScope: SearchScope|null;
-
-  // We throttle adding search results, otherwise we trigger DOM layout for each
-  // result added.
-  #throttler: Common.Throttler.Throttler;
-  #pendingSearchResults: SearchResult[] = [];
-  #emptyStartView: UI.EmptyWidget.EmptyWidget;
-
-  constructor(settingKey: string, throttler: Common.Throttler.Throttler) {
-    super({
-      jslog: `${VisualLogging.panel('search').track({resize: true})}`,
-      useShadowDom: true,
-    });
-    this.setMinimumSize(0, 40);
+interface SearchViewInput {
+  query: string;
+  focusSearchInput: boolean;
+  matchCase: boolean;
+  isRegex: boolean;
+  searchMessage: string;
+  searchResultsMessage: string;
+  onQueryChange: (query: string) => void;
+  onQueryKeyDown: (evt: KeyboardEvent) => void;
+  onPanelKeyDown: (evt: KeyboardEvent) => void;
+  onClearSearchInput: () => void;
+  onToggleRegex: () => void;
+  onToggleMatchCase: () => void;
+  onRefresh: () => void;
+  onClearSearch: () => void;
+}
 
-    this.#focusOnShow = false;
-    this.#isIndexing = false;
-    this.#searchId = 1;
-    this.#searchMatchesCount = 0;
-    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.#throttler = throttler;
+interface SearchViewOutput {
+  searchResultsElement?: HTMLElement;
+  searchProgressPlaceholderElement?: HTMLElement;
+}
 
-    // clang-format off
-    /* eslint-disable-next-line rulesdir/no-lit-render-outside-of-view */
-    render(html`
+type View = (input: SearchViewInput, output: SearchViewOutput, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  const {
+    query,
+    focusSearchInput,
+    matchCase,
+    isRegex,
+    searchMessage,
+    searchResultsMessage,
+    onQueryChange,
+    onQueryKeyDown,
+    onPanelKeyDown,
+    onClearSearchInput,
+    onToggleRegex,
+    onToggleMatchCase,
+    onRefresh,
+    onClearSearch,
+  } = input;
+  // clang-format off
+  render(html`
       <style>${searchViewStyles}</style>
-      <div class="search-drawer-header" @keydown=${this.#onPanelKeyDown}>
+      <div class="search-drawer-header" @keydown=${onPanelKeyDown}>
         <div class="search-container">
           <div class="toolbar-item-search">
             <devtools-icon name="search"></devtools-icon>
@@ -179,10 +163,17 @@ export class SearchView extends UI.Widget.VBox {
                     change: true, keydown: 'ArrowUp|ArrowDown|Enter'})}
                 aria-label=${i18nString(UIStrings.find)}
                 size="100" results="0"
-                @keydown=${this.#onQueryKeyDown}
-                ${ref(e => {this.#searchInputElement = e as HTMLInputElement;})}>
+                .value=${query}
+                @keydown=${onQueryKeyDown}
+                @input=${(e: Event) => onQueryChange((e.target as HTMLInputElement).value)}
+                ${ref(e => {
+                  if (e instanceof HTMLInputElement && focusSearchInput) {
+                    e.focus();
+                    e.select();
+                  }
+                })}>
             <devtools-button class="clear-button" tabindex="-1"
-                @click=${this.#onClearSearchInput}
+                @click=${onClearSearchInput}
                 .data=${{
                   variant: Buttons.Button.Variant.ICON,
                   iconName: 'cross-circle-filled',
@@ -191,40 +182,40 @@ export class SearchView extends UI.Widget.VBox {
                   title: i18nString(UIStrings.clearInput),
                 } as Buttons.Button.ButtonData}
             ></devtools-button>
-            <devtools-button @click=${this.#onToggleRegex} .data=${{
+            <devtools-button @click=${onToggleRegex} .data=${{
                 variant: Buttons.Button.Variant.ICON_TOGGLE,
                 iconName: 'regular-expression',
                 toggledIconName: 'regular-expression',
                 toggleType: Buttons.Button.ToggleType.PRIMARY,
                 size: Buttons.Button.Size.SMALL,
-                toggled: false,
-                title: i18nString(UIStrings.enableRegularExpression),
+                toggled: isRegex,
+                title: isRegex ? i18nString(UIStrings.disableRegularExpression) : i18nString(UIStrings.enableRegularExpression),
                 jslogContext: 'regular-expression',
               } as Buttons.Button.ButtonData}
-              ${ref(e => {this.#regexButton = e as Buttons.Button.Button;})}
+              class="regex-button"
             ></devtools-button>
-            <devtools-button @click=${this.#onToggleMatchCase} .data=${{
+            <devtools-button @click=${onToggleMatchCase} .data=${{
                 variant: Buttons.Button.Variant.ICON_TOGGLE,
                 iconName: 'match-case',
                 toggledIconName: 'match-case',
                 toggleType: Buttons.Button.ToggleType.PRIMARY,
                 size: Buttons.Button.Size.SMALL,
-                toggled: false,
-                title: i18nString(UIStrings.enableCaseSensitive),
+                toggled: matchCase,
+                title: matchCase ? i18nString(UIStrings.disableCaseSensitive) : i18nString(UIStrings.enableCaseSensitive),
                 jslogContext: 'match-case',
               } as Buttons.Button.ButtonData}
-              ${ref(e => {this.#matchCaseButton = e as Buttons.Button.Button;})}
+              class="match-case-button"
             ></devtools-button>
           </div>
         </div>
         <devtools-toolbar class="search-toolbar" jslog=${VisualLogging.toolbar()}>
-          <devtools-button title=${i18nString(UIStrings.refresh)} @click=${this.#onRefresh}
+          <devtools-button title=${i18nString(UIStrings.refresh)} @click=${onRefresh}
               .data=${{
                 variant: Buttons.Button.Variant.TOOLBAR,
                 iconName: 'refresh',
                 jslogContext: 'search.refresh',
               } as Buttons.Button.ButtonData}></devtools-button>
-          <devtools-button title=${i18nString(UIStrings.clear)} @click=${this.#onClearSearch}
+          <devtools-button title=${i18nString(UIStrings.clear)} @click=${onClearSearch}
               .data=${{
                 variant: Buttons.Button.Variant.TOOLBAR,
                 iconName: 'clear',
@@ -232,22 +223,83 @@ export class SearchView extends UI.Widget.VBox {
               } as Buttons.Button.ButtonData}></devtools-button>
         </devtools-toolbar>
       </div>
-      <div class="search-results" @keydown=${this.#onPanelKeyDown}
-           ${ref(e => {this.#searchResultsElement = e as HTMLElement;})}>
+      <div class="search-results" @keydown=${onPanelKeyDown}
+           ${ref(e => {output.searchResultsElement = e as HTMLElement;})}>
       </div>
-      <div class="search-toolbar-summary" @keydown=${this.#onPanelKeyDown}>
-        <div class="search-message" ${ref(e => {this.#searchMessageElement = e as HTMLElement;})}></div>
-        <div class="flex-centered" ${ref(e => {this.#searchProgressPlaceholderElement = e as HTMLElement;})}>
-        </div>
-        <div class="search-message" ${ref(e => {this.#searchResultsMessageElement = e as HTMLElement;})}>
+      <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>
-      </div>`, this.contentElement, {host: this});
-    // clang-format on
+        <div class="search-message">${searchResultsMessage}</div>
+      </div>`, target);
+  // clang-format on
+};
+
+export class SearchView extends UI.Widget.VBox {
+  readonly #view: View;
+  #focusSearchInput: boolean;
+  #isIndexing: boolean;
+  #searchId: number;
+  #searchMatchesCount: number;
+  #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;
+  #query: string;
+  #matchCase = false;
+  #isRegex = false;
+  #searchMessage = '';
+  #searchProgressPlaceholderElement!: HTMLElement;
+  #searchResultsMessage = '';
+  readonly #advancedSearchConfig: Common.Settings.Setting<{
+    query: string,
+    ignoreCase: boolean,
+    isRegex: boolean,
+  }>;
+  #searchScope: SearchScope|null;
+
+  // We throttle adding search results, otherwise we trigger DOM layout for each
+  // result added.
+  #throttler: Common.Throttler.Throttler;
+  #pendingSearchResults: SearchResult[] = [];
+  #emptyStartView: UI.EmptyWidget.EmptyWidget;
+
+  constructor(settingKey: string, throttler: Common.Throttler.Throttler, view = DEFAULT_VIEW) {
+    super({
+      jslog: `${VisualLogging.panel('search').track({resize: true})}`,
+      useShadowDom: true,
+    });
+    this.#view = view;
+    this.setMinimumSize(0, 40);
+
+    this.#focusSearchInput = false;
+    this.#isIndexing = false;
+    this.#searchId = 1;
+    this.#query = '';
+    this.#searchMatchesCount = 0;
+    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.#throttler = throttler;
 
     this.#advancedSearchConfig = Common.Settings.Settings.instance().createLocalSetting(
         settingKey + '-search-config', new Workspace.SearchConfig.SearchConfig('', true, false).toPlainObject());
 
+    this.performUpdate();
     this.#load();
+    this.performUpdate();
     this.#searchScope = null;
 
     this.#emptyStartView = new UI.EmptyWidget.EmptyWidget(
@@ -257,28 +309,54 @@ export class SearchView extends UI.Widget.VBox {
     this.#showPane(this.#emptyStartView);
   }
 
+  override performUpdate(): void {
+    const input: SearchViewInput = {
+      query: this.#query,
+      focusSearchInput: this.#focusSearchInput,
+      matchCase: this.#matchCase,
+      isRegex: this.#isRegex,
+      searchMessage: this.#searchMessage,
+      searchResultsMessage: this.#searchResultsMessage,
+      onQueryChange: (query: string) => {
+        this.#query = query;
+      },
+      onQueryKeyDown: this.#onQueryKeyDown.bind(this),
+      onPanelKeyDown: this.#onPanelKeyDown.bind(this),
+      onClearSearchInput: this.#onClearSearchInput.bind(this),
+      onToggleRegex: this.#onToggleRegex.bind(this),
+      onToggleMatchCase: this.#onToggleMatchCase.bind(this),
+      onRefresh: this.#onRefresh.bind(this),
+      onClearSearch: this.#onClearSearch.bind(this),
+    };
+    const output: SearchViewOutput = {};
+    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 {
-    this.#regexButton.title = this.#regexButton.toggled ? i18nString(UIStrings.disableRegularExpression) :
-                                                          i18nString(UIStrings.enableRegularExpression);
+    this.#isRegex = !this.#isRegex;
+    this.performUpdate();
   }
 
   #onToggleMatchCase(): void {
-    this.#matchCaseButton.title = this.#matchCaseButton.toggled ? i18nString(UIStrings.disableCaseSensitive) :
-                                                                  i18nString(UIStrings.enableCaseSensitive);
+    this.#matchCase = !this.#matchCase;
+    this.performUpdate();
   }
 
   #buildSearchConfig(): Workspace.SearchConfig.SearchConfig {
-    return new Workspace.SearchConfig.SearchConfig(
-        this.#searchInputElement.value, !this.#matchCaseButton.toggled, this.#regexButton.toggled);
+    return new Workspace.SearchConfig.SearchConfig(this.#query, !this.#matchCase, this.#isRegex);
   }
 
   toggle(queryCandidate: string, searchImmediately?: boolean): void {
-    this.#searchInputElement.value = queryCandidate;
-    if (this.isShowing()) {
-      this.focus();
-    } else {
-      this.#focusOnShow = true;
-    }
+    this.#query = queryCandidate;
+    this.requestUpdate();
+    this.focus();
 
     this.#initScope();
     if (searchImmediately) {
@@ -296,14 +374,6 @@ export class SearchView extends UI.Widget.VBox {
     this.#searchScope = this.createScope();
   }
 
-  override wasShown(): void {
-    super.wasShown();
-    if (this.#focusOnShow) {
-      this.focus();
-      this.#focusOnShow = false;
-    }
-  }
-
   #onIndexingFinished(): void {
     if (!this.#progressIndicator) {
       return;
@@ -313,10 +383,11 @@ export class SearchView extends UI.Widget.VBox {
     this.#progressIndicator.done();
     this.#progressIndicator = null;
     this.#isIndexing = false;
-    this.#searchMessageElement.textContent = finished ? '' : i18nString(UIStrings.indexingInterrupted);
+    this.#searchMessage = finished ? '' : i18nString(UIStrings.indexingInterrupted);
     if (!finished) {
       this.#pendingSearchConfig = null;
     }
+    this.performUpdate();
     if (!this.#pendingSearchConfig) {
       return;
     }
@@ -331,8 +402,9 @@ export class SearchView extends UI.Widget.VBox {
       this.#progressIndicator.done();
     }
     this.#progressIndicator = document.createElement('devtools-progress');
-    this.#searchMessageElement.textContent = i18nString(UIStrings.indexing);
+    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)));
@@ -340,7 +412,8 @@ export class SearchView extends UI.Widget.VBox {
   }
 
   #onClearSearchInput(): void {
-    this.#searchInputElement.value = '';
+    this.#query = '';
+    this.requestUpdate();
     this.#save();
     this.focus();
     this.#showPane(this.#emptyStartView);
@@ -385,8 +458,7 @@ export class SearchView extends UI.Widget.VBox {
     }
     this.#searchFinished(finished);
     this.#searchConfig = null;
-    UI.ARIAUtils.LiveAnnouncer.alert(
-        this.#searchMessageElement.textContent + ' ' + this.#searchResultsMessageElement.textContent);
+    UI.ARIAUtils.LiveAnnouncer.alert(this.#searchMessage + ' ' + this.#searchResultsMessage);
   }
 
   #innerStartSearch(searchConfig: Workspace.SearchConfig.SearchConfig): void {
@@ -407,8 +479,9 @@ export class SearchView extends UI.Widget.VBox {
     this.#stopSearch();
     this.#showPane(null);
     this.#searchResultsPane = null;
-    this.#searchMessageElement.textContent = '';
-    this.#searchResultsMessageElement.textContent = '';
+    this.#searchMessage = '';
+    this.#searchResultsMessage = '';
+    this.performUpdate();
   }
 
   #stopSearch(): void {
@@ -429,7 +502,8 @@ export class SearchView extends UI.Widget.VBox {
       this.#searchingView = new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.searching), '');
     }
     this.#showPane(this.#searchingView);
-    this.#searchMessageElement.textContent = i18nString(UIStrings.searching);
+    this.#searchMessage = i18nString(UIStrings.searching);
+    this.performUpdate();
     this.#searchProgressPlaceholderElement.appendChild(progressIndicator);
     this.#updateSearchResultsMessage();
   }
@@ -437,18 +511,18 @@ export class SearchView extends UI.Widget.VBox {
   #updateSearchResultsMessage(): void {
     if (this.#searchMatchesCount && this.#searchResultsCount) {
       if (this.#searchMatchesCount === 1 && this.#nonEmptySearchResultsCount === 1) {
-        this.#searchResultsMessageElement.textContent = i18nString(UIStrings.foundMatchingLineInFile);
+        this.#searchResultsMessage = i18nString(UIStrings.foundMatchingLineInFile);
       } else if (this.#searchMatchesCount > 1 && this.#nonEmptySearchResultsCount === 1) {
-        this.#searchResultsMessageElement.textContent =
-            i18nString(UIStrings.foundDMatchingLinesInFile, {PH1: this.#searchMatchesCount});
+        this.#searchResultsMessage = i18nString(UIStrings.foundDMatchingLinesInFile, {PH1: this.#searchMatchesCount});
       } else {
-        this.#searchResultsMessageElement.textContent = i18nString(
+        this.#searchResultsMessage = i18nString(
             UIStrings.foundDMatchingLinesInDFiles,
             {PH1: this.#searchMatchesCount, PH2: this.#nonEmptySearchResultsCount});
       }
     } else {
-      this.#searchResultsMessageElement.textContent = '';
+      this.#searchResultsMessage = '';
     }
+    this.performUpdate();
   }
 
   #showPane(panel: UI.Widget.Widget|null): void {
@@ -480,13 +554,13 @@ export class SearchView extends UI.Widget.VBox {
   }
 
   #searchFinished(finished: boolean): void {
-    this.#searchMessageElement.textContent =
-        finished ? i18nString(UIStrings.searchFinished) : i18nString(UIStrings.searchInterrupted);
+    this.#searchMessage = finished ? i18nString(UIStrings.searchFinished) : i18nString(UIStrings.searchInterrupted);
+    this.performUpdate();
   }
 
   override focus(): void {
-    this.#searchInputElement.focus();
-    this.#searchInputElement.select();
+    this.#focusSearchInput = true;
+    this.requestUpdate();
   }
 
   override willHide(): void {
@@ -550,13 +624,11 @@ export class SearchView extends UI.Widget.VBox {
 
   #load(): void {
     const searchConfig = Workspace.SearchConfig.SearchConfig.fromPlainObject(this.#advancedSearchConfig.get());
-    this.#searchInputElement.value = searchConfig.query();
+    this.#query = searchConfig.query();
 
-    this.#matchCaseButton.toggled = !searchConfig.ignoreCase();
-    this.#onToggleMatchCase();
-
-    this.#regexButton.toggled = searchConfig.isRegex();
-    this.#onToggleRegex();
+    this.#matchCase = !searchConfig.ignoreCase();
+    this.#isRegex = searchConfig.isRegex();
+    this.requestUpdate();
   }
 
   #onRefresh(): void {
@@ -581,16 +653,4 @@ export class SearchView extends UI.Widget.VBox {
   get throttlerForTest(): Common.Throttler.Throttler {
     return this.#throttler;
   }
-
-  get search(): HTMLInputElement {
-    return this.#searchInputElement;
-  }
-
-  get matchCaseButton(): Buttons.Button.Button {
-    return this.#matchCaseButton;
-  }
-
-  get regexButton(): Buttons.Button.Button {
-    return this.#regexButton;
-  }
 }

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,21 @@ export class SyncSection extends HTMLElement {
         ${renderGdpSectionIfNeeded({
           receiveBadgesSetting: this.#receiveBadgesSetting,
           receiveBadgesSettingContainerRef: this.#receiveBadgesSettingContainerRef,
-          gdpProfile: this.#gdpProfile
+          gdpProfile: this.#gdpProfile,
+          isEligibleToCreateProfile: this.#isEligibleToCreateGdpProfile,
         })}
       </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 +294,22 @@ function renderGdpSectionIfNeeded({
   receiveBadgesSetting,
   receiveBadgesSettingContainerRef,
   gdpProfile,
+  isEligibleToCreateProfile,
 }: {
   receiveBadgesSettingContainerRef: Lit.Directives.Ref<HTMLElement>,
   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,7 +338,7 @@ 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`

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/webauthn/WebauthnPane.ts

@@ -748,7 +748,7 @@ export class WebauthnPaneImpl extends UI.Panel.Panel implements
   }
 
   async #handleAddAuthenticatorButton(): Promise<void> {
-    const options = this.#newAuthenticatorOptions;
+    const options = {...this.#newAuthenticatorOptions};
     if (this.#model) {
       const authenticatorId = await this.#addAuthenticator(options);
       this.#activeAuthId = authenticatorId;  // Newly added authenticator is automatically set as active.

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: https://source.chromium.org/chromium/chromium/src/+/main:components/variations/proto/devtools/
 Version: N/A
-Revision: a0857bc5fc46c520d7fe71beb1b0a0d7b0e60136
+Revision: a53252f55270b0a53536cabc8402ef6457ee9ab9
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE