chrome-devtools-frontend 1.0.1518653 → 1.0.1519267

package/front_end/panels/search/SearchResultsPane.ts

@@ -1,16 +1,13 @@
 // Copyright 2014 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable rulesdir/no-imperative-dom-api */
-/* eslint-disable rulesdir/no-lit-render-outside-of-view */
-
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import type * as Workspace from '../../models/workspace/workspace.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {html, render} from '../../ui/lit/lit.js';
+import {html, render, type TemplateResult} from '../../ui/lit/lit.js';
 
 import searchResultsPaneStyles from './searchResultsPane.css.js';
 import type {SearchResult} from './SearchScope.js';
@@ -41,143 +38,168 @@ interface SearchMatch {
   resultLabel: string|number;
 }
 
-export class SearchResultsPane extends UI.Widget.VBox {
-  private readonly searchConfig: Workspace.SearchConfig.SearchConfig;
-  private readonly searchResults = new Map<SearchResult, UI.TreeOutline.TreeElement>();
-  private expandedResults = new WeakSet<SearchResult>();
-  private readonly searchMatches = new WeakMap<SearchResult, SearchMatch[]>();
-  private treeOutline: UI.TreeOutline.TreeOutlineInShadow;
-  private matchesExpandedCount = 0;
-
-  private addTreeElement(searchResult: SearchResult): void {
-    const treeElement = new UI.TreeOutline.TreeElement('', true);
-    treeElement.toggleOnClick = true;
-    this.searchResults.set(searchResult, treeElement);
-    this.treeOutline.appendChild(treeElement);
-    if (!this.treeOutline.selectedTreeElement) {
-      treeElement.select(/* omitFocus */ true, /* selectedByUser */ true);
-    }
-    treeElement.listItemElement.classList.add('search-result');
-    // clang-format off
-    render(html`
-      <span class="search-result-file-name">${searchResult.label()}
-        <span class="search-result-dash">${'\u2014'}</span>
-        <span class="search-result-qualifier">${searchResult.description()}</span>
-      </span>
-      <span class="search-result-matches-count"
-          aria-label=${i18nString(UIStrings.matchesCountS, {PH1: searchResult.matchesCount()})}>
-          ${searchResult.matchesCount()}
-      </span>`,
-    treeElement.listItemElement);
-    // clang-format on
-    treeElement.tooltip = searchResult.description();
-  }
+interface ViewInput {
+  results: SearchResult[];
+  matches: WeakMap<SearchResult, SearchMatch[]>;
+  expandedResults: WeakSet<SearchResult>;
+  onSelectMatch: (searchResult: SearchResult, matchIndex: number) => void;
+  onExpandSearchResult: (searchResult: SearchResult) => void;
+  onShowMoreMatches: (searchResult: SearchResult) => void;
+}
 
-  private appendSearchMatchElement(searchResult: SearchResult, match: SearchMatch, i: number): void {
-    const {lineContent, matchRanges, resultLabel} = match;
-    const element = this.searchResults.get(searchResult);
-    if (!element) {
-      return;
+export type View = (input: ViewInput, output: unknown, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, _output, target) => {
+  const {results, matches, expandedResults, onSelectMatch, onExpandSearchResult, onShowMoreMatches} = input;
+
+  const onExpand = ({detail: {expanded, target}}: UI.TreeOutline.TreeViewElement.ExpandEvent): void => {
+    const searchResultIndex = Number(target.dataset.searchResultIndex);
+    const searchResult = results[searchResultIndex];
+    if (expanded) {
+      expandedResults.add(searchResult);
+      onExpandSearchResult(searchResult);
+    } else {
+      expandedResults.delete(searchResult);
     }
-    const searchMatchElement = new UI.TreeOutline.TreeElement();
-    element.appendChild(searchMatchElement);
-    // clang-format off
-    render(html`
-      <button class="devtools-link text-button link-style search-match-link"
-              jslog="Link; context: search-match; track: click" role="link" tabindex="0"
-              @click=${() => void Common.Revealer.reveal(searchResult.matchRevealable(i))}>
-        <span class="search-match-line-number"
-            aria-label=${typeof resultLabel === 'number' && !isNaN(resultLabel)
-                            ?  i18nString(UIStrings.lineS, {PH1: resultLabel}) : resultLabel}>
-          ${resultLabel}
-        </span>
-        <span class="search-match-content" aria-label="${lineContent} line">
-          ${lineContent}
-        </span>
-      </button>`,
-      searchMatchElement.listItemElement);
-    // clang-format on
-    const contentSpan = searchMatchElement.listItemElement.querySelector('.search-match-content') as HTMLElement;
-    UI.UIUtils.highlightRangesWithStyleClass(contentSpan, matchRanges, 'highlighted-search-result');
-    searchMatchElement.listItemElement.className = 'search-match';
-    searchMatchElement.listItemElement.addEventListener('keydown', event => {
-      if (event.key === 'Enter') {
-        event.consume(true);
-        void Common.Revealer.reveal(searchResult.matchRevealable(i));
-      }
-    });
-    searchMatchElement.tooltip = lineContent;
-  }
+  };
+
+  // clang-format off
+  render(html`
+    <devtools-tree hide-overflow @expand=${onExpand} .template=${html`
+      <ul role="tree">
+        ${results.map((searchResult, i) => html`
+          <li role="treeitem" data-search-result-index=${i} class="search-result">
+            <style>${searchResultsPaneStyles}</style>
+            ${renderSearchResult(searchResult)}
+            <ul role="group" ?hidden=${!expandedResults.has(searchResult)}>
+              ${renderSearchMatches(searchResult, matches, onSelectMatch, onShowMoreMatches)}
+            </ul>
+          </li>`)}
+      </ul>
+    `}></devtools-tree>`,
+    target,
+  );
+  // clang-format on
+};
+
+const renderSearchResult = (searchResult: SearchResult): TemplateResult => {
+  // clang-format off
+  return html`
+    <span class="search-result-file-name">${searchResult.label()}
+      <span class="search-result-dash">${'\u2014'}</span>
+      <span class="search-result-qualifier">${searchResult.description()}</span>
+    </span>
+    <span class="search-result-matches-count"
+        aria-label=${i18nString(UIStrings.matchesCountS, {PH1: searchResult.matchesCount()})}>
+        ${searchResult.matchesCount()}
+    </span>`;
+  // clang-format on
+};
+
+const renderSearchMatches =
+    (searchResult: SearchResult, matches: WeakMap<SearchResult, SearchMatch[]>,
+     onSelectMatch: (searchResult: SearchResult, matchIndex: number) => void,
+     onShowMoreMatches: (searchResult: SearchResult) => void): TemplateResult => {
+      const visibleMatches = matches.get(searchResult) ?? [];
+      const matchesLeftCount = searchResult.matchesCount() - visibleMatches.length;
+      // clang-format off
+  return html`
+      ${visibleMatches.map(({lineContent, matchRanges, resultLabel}, i) => html`
+        <li role="treeitem" class="search-match" @click=${() => onSelectMatch(searchResult, i)}
+          ${UI.TreeOutline.TreeSearch.highlight(matchRanges.map(range =>
+            ({offset: range.offset + `${resultLabel}`.length, length: range.length})), undefined)}
+          @keydown=${(event: KeyboardEvent) => {
+            if (event.key === 'Enter') {
+              onSelectMatch(searchResult, i);
+            }
+          }}
+        >
+          <button class="devtools-link text-button link-style search-match-link"
+                  jslog="Link; context: search-match; track: click" role="link" tabindex="0"
+                  @click=${() => void Common.Revealer.reveal(searchResult.matchRevealable(i))}>
+            <span class="search-match-line-number"
+                aria-label=${typeof resultLabel === 'number' && !isNaN(resultLabel)
+                                ? i18nString(UIStrings.lineS, {PH1: resultLabel}) : resultLabel}>
+              ${resultLabel}
+            </span>
+            <span class="search-match-content" aria-label="${lineContent} line">
+              ${lineContent}
+            </span>
+          </button>
+        </li>`)}
+      ${
+      matchesLeftCount > 0 ? html`
+        <li role="treeitem" class="show-more-matches" @click=${() => onShowMoreMatches(searchResult)}>
+          ${i18nString(UIStrings.showDMore, { PH1: matchesLeftCount })}
+        </li>` : ''}`;
+      // clang-format on
+    };
+
+export class SearchResultsPane extends UI.Widget.VBox {
+  readonly #searchConfig: Workspace.SearchConfig.SearchConfig;
+  #searchResults: SearchResult[] = [];
+  #expandedResults = new WeakSet<SearchResult>();
+  readonly #searchMatches = new WeakMap<SearchResult, SearchMatch[]>();
+  #view: View;
 
-  constructor(searchConfig: Workspace.SearchConfig.SearchConfig) {
+  constructor(searchConfig: Workspace.SearchConfig.SearchConfig, view: View = DEFAULT_VIEW) {
     super({useShadowDom: true});
-    this.searchConfig = searchConfig;
-    this.treeOutline = new UI.TreeOutline.TreeOutlineInShadow();
-    this.treeOutline.registerRequiredCSS(searchResultsPaneStyles);
-    this.treeOutline.setHideOverflow(true);
-    this.treeOutline.addEventListener(
-        UI.TreeOutline.Events.ElementExpanded,
-        (event: Common.EventTarget.EventTargetEvent<UI.TreeOutline.TreeElement>) => {
-          const searchResult = this.searchResults.entries().find(entry => entry[1] === event.data)?.[0];
-          if (!searchResult) {
-            return;
-          }
-          this.expandSearchResult(searchResult);
-        });
-
-    this.contentElement.appendChild(this.treeOutline.element);
-
-    this.matchesExpandedCount = 0;
+    this.#view = view;
+    this.#searchConfig = searchConfig;
+  }
+
+  get searchResults(): SearchResult[] {
+    return this.#searchResults;
   }
 
-  addSearchResult(searchResult: SearchResult): void {
-    this.addTreeElement(searchResult);
-    // Expand until at least a certain number of matches is expanded.
-    if (this.matchesExpandedCount < matchesExpandedByDefault) {
-      this.searchResults.get(searchResult)?.expand();
+  set searchResults(searchResults: SearchResult[]) {
+    this.#searchResults = searchResults;
+    let matchesExpandedCount = 0;
+    for (const searchResult of searchResults) {
+      if (this.#expandedResults.has(searchResult)) {
+        matchesExpandedCount += this.#searchMatches.get(searchResult)?.length ?? 0;
+      }
     }
+    for (const searchResult of searchResults) {
+      if (matchesExpandedCount < matchesExpandedByDefault && !this.#expandedResults.has(searchResult)) {
+        this.#expandedResults.add(searchResult);
+        this.#onExpandSearchResult(searchResult);
+        matchesExpandedCount += this.#searchMatches.get(searchResult)?.length ?? 0;
+      }
+    }
+    this.requestUpdate();
   }
 
   showAllMatches(): void {
-    for (const searchResult of this.searchResults.keys()) {
-      const startMatchIndex = this.searchMatches.get(searchResult)?.length ?? 0;
-      this.appendSearchMatches(searchResult, startMatchIndex, searchResult.matchesCount());
+    for (const searchResult of this.#searchResults) {
+      const startMatchIndex = this.#searchMatches.get(searchResult)?.length ?? 0;
+      this.#appendSearchMatches(searchResult, startMatchIndex, searchResult.matchesCount());
     }
+    this.requestUpdate();
   }
 
   collapseAllResults(): void {
-    for (const treeElement of this.searchResults.values()) {
-      treeElement.collapse();
-    }
+    this.#expandedResults = new WeakSet<SearchResult>();
+    this.requestUpdate();
   }
 
-  private expandSearchResult(searchResult: SearchResult): void {
+  #onExpandSearchResult(searchResult: SearchResult): void {
     const toIndex = Math.min(searchResult.matchesCount(), matchesShownAtOnce);
-    if (toIndex < searchResult.matchesCount()) {
-      this.appendSearchMatches(searchResult, 0, toIndex - 1);
-      this.appendShowMoreMatchesElement(searchResult, toIndex - 1);
-    } else {
-      this.appendSearchMatches(searchResult, 0, toIndex);
-    }
-    this.matchesExpandedCount += toIndex;
+    this.#appendSearchMatches(searchResult, 0, toIndex);
     this.requestUpdate();
   }
 
-  private collapseSearchResult(searchResult: SearchResult): void {
-    this.searchResults.get(searchResult)?.collapse();
-  }
-
-  private appendSearchMatches(searchResult: SearchResult, fromIndex: number, toIndex: number): void {
-    const queries = this.searchConfig.queries();
+  #appendSearchMatches(searchResult: SearchResult, fromIndex: number, toIndex: number): void {
+    const queries = this.#searchConfig.queries();
     const regexes = [];
     for (let i = 0; i < queries.length; ++i) {
       regexes.push(Platform.StringUtilities.createSearchRegex(
-          queries[i], !this.searchConfig.ignoreCase(), this.searchConfig.isRegex()));
+          queries[i], !this.#searchConfig.ignoreCase(), this.#searchConfig.isRegex()));
     }
 
-    const searchMatches = this.searchMatches.get(searchResult) ?? [];
-    this.searchMatches.set(searchResult, searchMatches);
-    if (searchMatches.length > toIndex) {
+    const searchMatches = this.#searchMatches.get(searchResult) ?? [];
+    this.#searchMatches.set(searchResult, searchMatches);
+    if (searchMatches.length >= toIndex) {
       return;
     }
 
@@ -197,32 +219,32 @@ export class SearchResultsPane extends UI.Widget.VBox {
       } else {
         lineContent = lineContent.trim();
         for (let j = 0; j < regexes.length; ++j) {
-          matchRanges = matchRanges.concat(this.regexMatchRanges(lineContent, regexes[j]));
+          matchRanges = matchRanges.concat(this.#regexMatchRanges(lineContent, regexes[j]));
         }
         ({lineSegment: lineContent, matchRanges} = lineSegmentForMultipleMatches(lineContent, matchRanges));
       }
 
       const resultLabel = searchResult.matchLabel(i);
       searchMatches.push({lineContent, matchRanges, resultLabel});
-      this.appendSearchMatchElement(searchResult, searchMatches[i], i);
     }
   }
 
-  private appendShowMoreMatchesElement(searchResult: SearchResult, startMatchIndex: number): void {
-    const element = this.searchResults.get(searchResult);
-    if (!element) {
-      return;
-    }
-    const matchesLeftCount = searchResult.matchesCount() - startMatchIndex;
-    const showMoreMatchesText = i18nString(UIStrings.showDMore, {PH1: matchesLeftCount});
-    const showMoreMatchesTreeElement = new UI.TreeOutline.TreeElement(showMoreMatchesText);
-    element.appendChild(showMoreMatchesTreeElement);
-    showMoreMatchesTreeElement.listItemElement.classList.add('show-more-matches');
-    showMoreMatchesTreeElement.onselect =
-        this.showMoreMatchesElementSelected.bind(this, searchResult, showMoreMatchesTreeElement, startMatchIndex);
+  override performUpdate(): void {
+    this.#view(
+        {
+          results: this.#searchResults,
+          matches: this.#searchMatches,
+          expandedResults: this.#expandedResults,
+          onSelectMatch: (searchResult, matchIndex) => {
+            void Common.Revealer.reveal(searchResult.matchRevealable(matchIndex));
+          },
+          onExpandSearchResult: this.#onExpandSearchResult.bind(this),
+          onShowMoreMatches: this.#onShowMoreMatches.bind(this),
+        },
+        {}, this.contentElement);
   }
 
-  private regexMatchRanges(lineContent: string, regex: RegExp): TextUtils.TextRange.SourceRange[] {
+  #regexMatchRanges(lineContent: string, regex: RegExp): TextUtils.TextRange.SourceRange[] {
     regex.lastIndex = 0;
     let match;
     const matchRanges = [];
@@ -233,13 +255,10 @@ export class SearchResultsPane extends UI.Widget.VBox {
     return matchRanges;
   }
 
-  private showMoreMatchesElementSelected(
-      searchResult: SearchResult, showMoreMatchesTreeElement: UI.TreeOutline.TreeElement,
-      startMatchIndex: number): boolean {
-    const parentElement = showMoreMatchesTreeElement.parent;
-    parentElement?.removeChild(showMoreMatchesTreeElement);
-    this.appendSearchMatches(searchResult, startMatchIndex, searchResult.matchesCount());
-    return true;
+  #onShowMoreMatches(searchResult: SearchResult): void {
+    const startMatchIndex = this.#searchMatches.get(searchResult)?.length ?? 0;
+    this.#appendSearchMatches(searchResult, startMatchIndex, searchResult.matchesCount());
+    this.requestUpdate();
   }
 }
 

package/front_end/panels/search/SearchView.ts

@@ -288,7 +288,7 @@ export class SearchView extends UI.Widget.VBox {
   // We throttle adding search results, otherwise we trigger DOM layout for each
   // result added.
   #throttler: Common.Throttler.Throttler;
-  #pendingSearchResults: SearchResult[] = [];
+  #searchResults: SearchResult[] = [];
 
   constructor(settingKey: string, throttler: Common.Throttler.Throttler, view = DEFAULT_VIEW) {
     super({
@@ -439,22 +439,24 @@ export class SearchView extends UI.Widget.VBox {
     if (!this.#searchResultsPane) {
       this.#searchResultsPane = this.createSearchResultsPane();
     }
-    this.#pendingSearchResults.push(searchResult);
-    void this.#throttler.schedule(async () => this.#addPendingSearchResults());
+    this.#searchResults.push(searchResult);
+    void this.#throttler.schedule(async () => this.#setSearchResults());
   }
 
   protected createSearchResultsPane(): SearchResultsPane {
     return new SearchResultsPane((this.#searchConfig as Workspace.SearchConfig.SearchConfig));
   }
 
-  #addPendingSearchResults(): void {
-    for (const searchResult of this.#pendingSearchResults) {
+  #setSearchResults(): void {
+    this.#searchMatchesCount = 0;
+    this.#searchResultsCount = 0;
+    this.#nonEmptySearchResultsCount = 0;
+    for (const searchResult of this.#searchResults) {
       this.#addSearchResult(searchResult);
-      if (searchResult.matchesCount()) {
-        this.#searchResultsPane?.addSearchResult(searchResult);
-      }
     }
-    this.#pendingSearchResults = [];
+    if (this.#searchResultsPane) {
+      this.#searchResultsPane.searchResults = this.#searchResults.filter(searchResult => searchResult.matchesCount());
+    }
   }
 
   #onSearchFinished(searchId: number, finished: boolean): void {
@@ -503,6 +505,7 @@ export class SearchView extends UI.Widget.VBox {
   #searchStarted(): void {
     this.#searchMatchesCount = 0;
     this.#searchResultsCount = 0;
+    this.#searchResults = [];
     this.#nonEmptySearchResultsCount = 0;
     if (!this.#searchingView) {
       this.#searchingView = new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.searching), '');

package/front_end/panels/search/searchResultsPane.css

@@ -31,6 +31,11 @@ li.search-result {
   white-space: pre;
 }
 
+li.search-result .tree-element-title {
+  display: flex;
+  width: 100%;
+}
+
 li.search-result:hover {
   background-color: var(--sys-color-state-hover-on-subtle);
 }
@@ -68,6 +73,10 @@ li.search-match {
   white-space: pre;
 }
 
+li.search-match .tree-element-title {
+  display: flex;
+}
+
 li.search-match.selected:focus-visible {
   background: var(--sys-color-tonal-container);
 }

package/front_end/panels/security/CookieControlsView.ts

@@ -186,8 +186,9 @@ export class CookieControlsView extends UI.Widget.VBox {
           <devtools-switch
             .checked=${Boolean(toggleEnabledSetting.get())}
             .disabled=${Boolean(enterpriseEnabledSetting.get())}
+            .label=${'Temporarily limit third-party cookies, only when DevTools is open'}
+            data-testid="cookie-control-override"
             @switchchange=${()=>{input.inputChanged(!toggleEnabledSetting.get(), toggleEnabledSetting);}}
-            aria-label="Temporarily limit third-party cookies, only when DevTools is open"
             jslog=${VisualLogging.toggle(toggleEnabledSetting.name).track({click: true})}
           >
           </devtools-switch>

package/front_end/panels/settings/AISettingsTab.ts

@@ -381,8 +381,10 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
           text: noLogging ? i18nString(UIStrings.codeSuggestionsSendDataNoLogging) :
                             i18nString(UIStrings.codeSuggestionsSendData)
         }],
-        // TODO: Add a relevant link
-        learnMoreLink: {url: '', linkJSLogContext: 'learn-more.code-completion'},
+        learnMoreLink: {
+          url: ' https://developers.chrome.com/docs/devtools/ai-assistance/code-completion',
+          linkJSLogContext: 'learn-more.code-completion'
+        },
         settingExpandState: {
           isSettingExpanded: false,
           expandSettingJSLogContext: 'code-completion.accordion',
@@ -590,8 +592,9 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
           .checked=${Boolean(setting.get()) && !isDisabled}
           .jslogContext=${setting.name || ''}
           .disabled=${isDisabled}
+          .label=${disabledReasonsJoined || settingData.enableSettingText}
+          data-testid=${settingData.enableSettingText}
           @switchchange=${this.#toggleSetting.bind(this, setting)}
-          aria-label=${disabledReasonsJoined || settingData.enableSettingText}
         ></devtools-switch>
       </div>
       <div class=${classMap(detailsClasses)}>

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

@@ -12,6 +12,7 @@ import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Platform from '../../../core/platform/platform.js';
 import * as Root from '../../../core/root/root.js';
+import * as SDK from '../../../core/sdk/sdk.js';
 import * as Badges from '../../../models/badges/badges.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
@@ -252,16 +253,29 @@ function renderWarningIfNeeded(syncInfo: Host.InspectorFrontendHostAPI.SyncInfor
       'chrome://settings/syncSetup/advanced' as Platform.DevToolsPath.UrlString;
   const warningText =
       !syncInfo.isSyncActive ? i18nString(UIStrings.syncDisabled) : i18nString(UIStrings.preferencesSyncDisabled);
+  const handleClick = (event: Event): void => {
+    const rootTarget = SDK.TargetManager.TargetManager.instance().rootTarget();
+    if (rootTarget === null) {
+      return;
+    }
+
+    void rootTarget.targetAgent().invoke_createTarget({url: warningLink}).then(result => {
+      if (result.getError()) {
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(warningLink);
+      }
+    });
+    event.consume();
+  };
   // clang-format off
   return html`
-    <devtools-chrome-link .href=${warningLink}>
-      <devtools-button
-        aria-describedby=settings-sync-info
-        .iconName=${'info'}
-        .variant=${Buttons.Button.Variant.ICON}
-        .size=${Buttons.Button.Size.SMALL}>
-      </devtools-button>
-    </devtools-chrome-link>
+    <devtools-button
+      aria-describedby=settings-sync-info
+      aria-label=${warningText}
+      .iconName=${'info'}
+      .variant=${Buttons.Button.Variant.ICON}
+      .size=${Buttons.Button.Size.SMALL}
+      @click=${handleClick}>
+    </devtools-button>
     <devtools-tooltip
         id=settings-sync-info
         variant=simple>
@@ -315,7 +329,7 @@ function renderGdpSectionIfNeeded({
     // clang-format off
     return html`
       <div class="gdp-profile-header">
-        <div class="gdp-logo" role="img" tabindex="0" aria-label="Google Developer Program"></div>
+        <div class="gdp-logo" role="img" aria-label="Google Developer Program"></div>
       </div>
     `;
     // clang-format on

package/front_end/panels/settings/emulation/components/UserAgentClientHintsForm.ts

@@ -585,7 +585,7 @@ export class UserAgentClientHintsForm extends HTMLElement {
         ${i18nString(UIStrings.mobileCheckboxLabel)}
       </label>
     ` :
-                                                           html``;
+                                                           Lit.nothing;
     return html`
       <span class="full-row label">${i18nString(UIStrings.deviceModel)}</span>
       <div class="full-row brand-row" aria-label=${i18nString(UIStrings.deviceProperties)} role="group">

package/front_end/panels/sources/AiCodeCompletionPlugin.ts

@@ -59,6 +59,9 @@ export class AiCodeCompletionPlugin extends Plugin {
     if (showTeaser) {
       this.#teaser = new PanelCommon.AiCodeCompletionTeaser({onDetach: this.#detachAiCodeCompletionTeaser.bind(this)});
     }
+
+    this.#aiCodeCompletionDisclaimerContainer.classList.add('ai-code-completion-disclaimer-container');
+    this.#aiCodeCompletionDisclaimerContainer.style.paddingInline = 'var(--sys-size-3)';
   }
 
   static override accepts(uiSourceCode: Workspace.UISourceCode.UISourceCode): boolean {

package/front_end/panels/sources/SourcesPanel.ts

@@ -1197,7 +1197,7 @@ export class SourcesPanel extends UI.Panel.Panel implements
     } else if (position === 'bottom') {
       vertically = true;
     } else {
-      vertically = UI.InspectorView.InspectorView.instance().element.offsetWidth < 680;
+      vertically = this.splitWidget.element.offsetWidth < 680;
     }
 
     if (this.sidebarPaneView && vertically === !this.splitWidget.isVertical()) {

package/front_end/panels/sources/sourcesView.css

@@ -14,11 +14,16 @@
 
 #sources-panel-sources-view .sources-toolbar {
   display: flex;
-  flex: 0 0 27px;
+  flex: 0 0 auto;
   background-color: var(--sys-color-cdt-base-container);
   border-top: 1px solid var(--sys-color-divider);
   overflow: hidden;
   z-index: 0;
+  align-items: flex-end;
+
+  devtools-toolbar:first-of-type {
+    flex-wrap: wrap;
+  }
 }
 
 .source-frame-debugger-script {

package/front_end/panels/timeline/components/LayoutShiftDetails.ts

@@ -158,7 +158,7 @@ export class LayoutShiftDetails extends UI.Widget.Widget {
 export const DEFAULT_VIEW: (input: ViewInput, output: object, target: HTMLElement) => void =
     (input, _output, target) => {
       if (!input.event || !input.parsedTrace) {
-        render(html``, target);
+        render(Lit.nothing, target);
         return;
       }
 

package/front_end/panels/timeline/components/NetworkRequestDetails.ts

@@ -197,7 +197,7 @@ export interface ViewInput {
 export const DEFAULT_VIEW: (
     input: ViewInput, output: object, target: HTMLElement) => void = (input, _output, target) => {
   if (!input.request) {
-    render(html``, target);
+    render(Lit.nothing, target);
     return;
   }
   const {request} = input;

package/front_end/panels/timeline/components/RelatedInsightChips.ts

@@ -86,7 +86,7 @@ export const DEFAULT_VIEW: (input: ViewInput, output: object, target: HTMLElemen
       const {activeEvent, eventToInsightsMap} = input;
       const relatedInsights = activeEvent ? eventToInsightsMap.get(activeEvent) ?? [] : [];
       if (!activeEvent || eventToInsightsMap.size === 0 || relatedInsights.length === 0) {
-        render(html``, target);
+        render(Lit.nothing, target);
         return;
       }
 

package/front_end/panels/timeline/components/SidebarSingleInsightSet.ts

@@ -478,7 +478,7 @@ export class SidebarSingleInsightSet extends HTMLElement {
       insightSetKey,
     } = this.#data;
     if (!parsedTrace?.insights || !insightSetKey) {
-      Lit.render(html``, this.#shadow, {host: this});
+      Lit.render(Lit.nothing, this.#shadow, {host: this});
       return;
     }
 

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: 8b6a2b940e6b293e99d648cdf34f8d26ae731d64
+Revision: 0b46aaf7af942d8ed35500074840aba1ef6d6303
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/third_party/puppeteer/README.chromium

@@ -1,10 +1,10 @@
 Name: Puppeteer Core
 Short Name: Puppeteer Core
 URL: https://github.com/puppeteer/puppeteer/tree/main/packages/puppeteer-core
-Version: 24.22.0
+Version: 24.22.1
 License: Apache-2.0
 License File: LICENSE
-Revision: 0e2affad10d4e4e19ef07504d9b8784b3da9ff91
+Revision: 6480e2548977ea43c962cb8043357cfb6524e50c
 Security Critical: no
 Shipped: yes
 Update Mechanism: Autoroll