chrome-devtools-frontend 1.0.1581708 → 1.0.1583146

package/front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts

@@ -134,6 +134,9 @@ interface ViewOutput {
 interface ViewInput {
   onFilterChanged: (filterText: string|null) => void;
   onBreakpointChange: (breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint, enabled: boolean) => void;
+  onItemSelected: (item: SDK.CategorizedBreakpoint.Category|SDK.CategorizedBreakpoint.CategorizedBreakpoint|
+                   null) => void;
+  onSpaceKeyDown: () => void;
 
   filterText: string|null;
   userExpandedCategories: Set<SDK.CategorizedBreakpoint.Category>;
@@ -200,6 +203,13 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
             }
           };
 
+  const onKeyDown = (e: KeyboardEvent): void => {
+    if (e.key === ' ') {
+      input.onSpaceKeyDown();
+      e.preventDefault();
+    }
+  };
+
   render(
       // clang-format off
       html`
@@ -210,10 +220,11 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         style="flex: 1;"
         ></devtools-toolbar-input>
     </devtools-toolbar>
-    <devtools-tree autofocus .template=${html`
+    <devtools-tree autofocus @keydown=${onKeyDown} .template=${html`
       <ul role="tree">
         ${filteredCategories.map(([category, breakpoints]) => html`
-          <li @expand=${(e: UI.TreeOutline.TreeViewElement.ExpandEvent) => onExpand(category, e)}
+          <li @select=${() => input.onItemSelected(category)}
+              @expand=${(e: UI.TreeOutline.TreeViewElement.ExpandEvent) => onExpand(category, e)}
               role="treeitem"
               jslog-context=${category}
               aria-checked=${breakpoints.some(breakpoint => breakpoint.enabled())
@@ -233,7 +244,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
                 role="group"
                 ?hidden=${!shouldExpandCategory(breakpoints) && !input.userExpandedCategories.has(category)}>
               ${breakpoints.map(breakpoint => html`
-              <li
+              <li @select=${() => input.onItemSelected(breakpoint)}
                   role="treeitem"
                   aria-checked=${breakpoint.enabled()}
                   jslog-context=${Platform.StringUtilities.toKebabCase(breakpoint.name)}>
@@ -265,6 +276,7 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
   #filterText: string|null = null;
   #view: View;
   #userExpandedCategories = new Set<SDK.CategorizedBreakpoint.Category>();
+  #selectedItem: SDK.CategorizedBreakpoint.Category|SDK.CategorizedBreakpoint.CategorizedBreakpoint|null = null;
   constructor(
       breakpoints: SDK.CategorizedBreakpoint.CategorizedBreakpoint[], jslog: string, viewId: string,
       view = DEFAULT_VIEW) {
@@ -321,6 +333,26 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
     this.requestUpdate();
   }
 
+  #onItemSelected(item: SDK.CategorizedBreakpoint.Category|SDK.CategorizedBreakpoint.CategorizedBreakpoint|null): void {
+    this.#selectedItem = item;
+  }
+
+  #onSpaceKeyDown(): void {
+    const selected = this.#selectedItem;
+    if (!selected) {
+      return;
+    }
+    if (selected instanceof SDK.CategorizedBreakpoint.CategorizedBreakpoint) {
+      this.onBreakpointChanged(selected, !selected.enabled());
+    } else {
+      const breakpoints = this.categories.get(selected);
+      if (breakpoints) {
+        const newEnabled = breakpoints.some(bp => !bp.enabled());
+        breakpoints.forEach(bp => this.onBreakpointChanged(bp, newEnabled));
+      }
+    }
+  }
+
   protected onBreakpointChanged(breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint, enabled: boolean): void {
     breakpoint.setEnabled(enabled);
     this.requestUpdate();
@@ -331,6 +363,8 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
       filterText: this.#filterText,
       onFilterChanged: this.#onFilterChanged.bind(this),
       onBreakpointChange: this.onBreakpointChanged.bind(this),
+      onItemSelected: this.#onItemSelected.bind(this),
+      onSpaceKeyDown: this.#onSpaceKeyDown.bind(this),
       sortedCategoryNames: this.#sortedCategories,
       categories: this.categories,
       highlightedItem: this.#highlightedItem,

package/front_end/panels/changes/ChangesSidebar.ts

@@ -24,7 +24,7 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/changes/ChangesSidebar.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const {render, html, Directives: {ref}} = Lit;
+const {render, html} = Lit;
 interface ViewInput {
   selectedSourceCode: Workspace.UISourceCode.UISourceCode|null;
   onSelect: (uiSourceCode: Workspace.UISourceCode.UISourceCode|null) => void;
@@ -38,20 +38,16 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
       uiSourceCode.url();
   const icon = (uiSourceCode: Workspace.UISourceCode.UISourceCode): string =>
       Snippets.ScriptSnippetFileSystem.isSnippetsUISourceCode(uiSourceCode) ? 'snippet' : 'document';
-  const configElements = new WeakMap<HTMLLIElement, Workspace.UISourceCode.UISourceCode>();
-  const onSelect = (e: UI.TreeOutline.TreeViewElement.SelectEvent): void =>
-      input.onSelect(configElements.get(e.detail) ?? null);
   render(
       // clang-format off
       html`<devtools-tree
-             @selected=${onSelect}
              navigation-variant
              hide-overflow .template=${html`
                <ul role="tree">
                  ${input.sourceCodes.values().map(uiSourceCode => html`
                    <li
                      role="treeitem"
-                     ${ref(e => e instanceof HTMLLIElement && configElements.set(e, uiSourceCode))}
+                     @select=${() => input.onSelect(uiSourceCode)}
                      ?selected=${uiSourceCode === input.selectedSourceCode}>
                        <style>${changesSidebarStyles}</style>
                        <div class=${'navigator-' + uiSourceCode.contentType().name() + '-tree-item'}>

package/front_end/panels/common/AiCodeGenerationTeaser.ts

@@ -23,6 +23,14 @@ const UIStringsNotTranslate = {
    * @description Text for teaser to generate code in Mac.
    */
   cmdItoGenerateCode: 'cmd+i to generate code',
+  /**
+   * @description Text for teaser to learn how data is being used.
+   */
+  ctrlOneTimeDisclaimerToLearnHowYourDataIsBeingUsed: 'ctrl+. to learn how your data is being used.',
+  /**
+   * @description Text for teaser to learn how data is being used in Mac.
+   */
+  cmdOneTimeDisclaimerToLearnHowYourDataIsBeingUsed: 'cmd+. to learn how your data is being used.',
   /**
    * @description Aria label for teaser to generate code.
    */
@@ -109,6 +117,7 @@ export interface ViewInput {
   disclaimerTooltipId?: string;
   noLogging: boolean;
   onManageInSettingsTooltipClick: (event: Event) => void;
+  showDataUsageTeaser: boolean;
   // TODO(b/472268298): Remove ContextFlavor explicitly and pass required values
   panel?: AiCodeCompletion.AiCodeCompletion.ContextFlavor;
 }
@@ -136,18 +145,23 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
       }
       const toGenerateCode = Host.Platform.isMac() ? lockedString(UIStringsNotTranslate.cmdItoGenerateCode) :
                                                      lockedString(UIStringsNotTranslate.ctrlItoGenerateCode);
-      const toLearnHowYourDataIsBeingUsed = Host.Platform.isMac() ?
+      const toLearnHowYourDataIsBeingUsedScreenReaderOnly = Host.Platform.isMac() ?
           lockedString(UIStringsNotTranslate.pressCmdPeriodToLearnHowYourDataIsBeingUsed) :
           lockedString(UIStringsNotTranslate.pressCtrlPeriodToLearnHowYourDataIsBeingUsed);
+      const toLearnHowYourDataIsBeingUsedVisible = Host.Platform.isMac() ?
+          lockedString(UIStringsNotTranslate.cmdOneTimeDisclaimerToLearnHowYourDataIsBeingUsed) :
+          lockedString(UIStringsNotTranslate.ctrlOneTimeDisclaimerToLearnHowYourDataIsBeingUsed);
       const tooltipDisclaimerText = getTooltipDisclaimerText(input.noLogging, input.panel);
-      // TODO(b/472291834): Disclaimer icon should match the placeholder's color
+
       // clang-format off
       teaserLabel = html`<div class="ai-code-generation-teaser-trigger">
-        <span aria-atomic="true" aria-live="assertive">${toGenerateCode}&nbsp;</span>
-        <div class="ai-code-generation-teaser-screen-reader-only" aria-atomic="true" aria-live="assertive">
-          ${toLearnHowYourDataIsBeingUsed}
-        </div>
-        <devtools-button
+        <span aria-atomic="true" aria-live="assertive">${toGenerateCode}</span>
+        ${input.showDataUsageTeaser ?
+            html`<span aria-hidden="true">${'. ' + toLearnHowYourDataIsBeingUsedVisible}</span>` : nothing}
+        <span class="ai-code-generation-teaser-screen-reader-only" aria-atomic="true" aria-live="assertive">
+          ${toLearnHowYourDataIsBeingUsedScreenReaderOnly}
+        </span>
+        &nbsp;<devtools-button
           .data=${{
               title: lockedString(UIStringsNotTranslate.learnMoreAboutHowYourDataIsBeingUsed),
               size: Buttons.Button.Size.MICRO,
@@ -245,12 +259,13 @@ export class AiCodeGenerationTeaser extends UI.Widget.Widget {
   readonly #view: View;
   #viewOutput: ViewOutput = {};
 
-  #displayState = AiCodeGenerationTeaserDisplayState.TRIGGER;
+  #displayState = AiCodeGenerationTeaserDisplayState.DISCOVERY;
   #disclaimerTooltipId?: string;
   #noLogging: boolean;  // Whether the enterprise setting is `ALLOW_WITHOUT_LOGGING` or not.
   #panel?: AiCodeCompletion.AiCodeCompletion.ContextFlavor;
   #timerIntervalId?: number;
   #loadStartTime?: number;
+  static #showDataUsageTeaser = true;
 
   constructor(view?: View) {
     super();
@@ -268,6 +283,7 @@ export class AiCodeGenerationTeaser extends UI.Widget.Widget {
           onManageInSettingsTooltipClick: this.#onManageInSettingsTooltipClick.bind(this),
           disclaimerTooltipId: this.#disclaimerTooltipId,
           noLogging: this.#noLogging,
+          showDataUsageTeaser: AiCodeGenerationTeaser.#showDataUsageTeaser,
           panel: this.#panel,
         },
         this.#viewOutput, this.contentElement);
@@ -286,6 +302,9 @@ export class AiCodeGenerationTeaser extends UI.Widget.Widget {
     if (displayState === this.#displayState) {
       return;
     }
+    if (this.#displayState === AiCodeGenerationTeaserDisplayState.TRIGGER) {
+      AiCodeGenerationTeaser.#showDataUsageTeaser = false;
+    }
     this.#displayState = displayState;
     this.requestUpdate();
     if (this.#displayState === AiCodeGenerationTeaserDisplayState.LOADING) {

package/front_end/panels/console/ConsoleSidebar.ts

@@ -50,7 +50,7 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/console/ConsoleSidebar.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const {render, html, nothing, Directives} = Lit;
+const {render, html, nothing} = Lit;
 
 export const enum GroupName {
   CONSOLE_API = 'user message',
@@ -78,18 +78,10 @@ interface ViewInput {
 
 export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 export const DEFAULT_VIEW: View = (input, output, target) => {
-  const nodeFilterMap = new WeakMap<Element, ConsoleFilter>();
-  const onSelectionChanged = (event: UI.TreeOutline.TreeViewElement.SelectEvent): void => {
-    const filter = nodeFilterMap.get(event.detail);
-    if (filter) {
-      input.onSelectionChanged(filter);
-    }
-  };
   render(
       html`<devtools-tree
         navigation-variant
         hide-overflow
-        @select=${onSelectionChanged}
         .template=${
           html`
           <ul role="tree">
@@ -98,7 +90,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                   group => html`
               <li
                 role="treeitem"
-                ${Directives.ref(element => element && nodeFilterMap.set(element, group.filter))}
+                @select=${() => input.onSelectionChanged(group.filter)}
                 ?selected=${group.filter === input.selectedFilter}>
                   <style>${consoleSidebarStyles}</style>
                   <devtools-icon name=${GROUP_ICONS[group.name].icon}></devtools-icon>
@@ -112,7 +104,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                   <ul role="group" hidden>
                     ${group.urlGroups.values().map(urlGroup => html`
                       <li
-                        ${Directives.ref(element => element && nodeFilterMap.set(element, urlGroup.filter))}
+                        @select=${() => input.onSelectionChanged(urlGroup.filter)}
                         role="treeitem"
                         ?selected=${urlGroup.filter === input.selectedFilter}
                         title=${urlGroup.url ?? ''}>

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -46,7 +46,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
 
 import * as ElementsComponents from './components/components.js';
-import computedStyleSidebarPaneStyles from './computedStyleSidebarPane.css.js';
+import computedStyleWidgetStyles from './computedStyleWidget.css.js';
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
 import {PlatformFontsWidget} from './PlatformFontsWidget.js';
 import {categorizePropertyName, type Category, DefaultCategoryOrder} from './PropertyNameCategories.js';
@@ -54,6 +54,7 @@ import {Renderer, rendererBase, type RenderingContext, StringRenderer, URLRender
 import {StylePropertiesSection} from './StylePropertiesSection.js';
 
 const {html, render} = Lit;
+const {bindToSetting} = UI.UIUtils;
 
 const UIStrings = {
   /**
@@ -263,9 +264,12 @@ type ComputedStyleData = {
 
 interface ComputedStyleWidgetInput {
   computedStylesTree: TreeOutline.TreeOutline.TreeOutline<ComputedStyleData>;
-  toolbar: HTMLElement;
   hasMatches: boolean;
   computedStyleModel: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel;
+  showInheritedComputedStylePropertiesSetting: Common.Settings.Setting<boolean>;
+  groupComputedStylesSetting: Common.Settings.Setting<boolean>;
+  onFilterChanged: (event: CustomEvent<string>) => void;
+  filterText: string;
 }
 
 type View = (input: ComputedStyleWidgetInput, output: null, target: HTMLElement) => void;
@@ -273,14 +277,30 @@ type View = (input: ComputedStyleWidgetInput, output: null, target: HTMLElement)
 export const DEFAULT_VIEW: View = (input, _output, target) => {
   // clang-format off
   render(html`
-    <div class="styles-sidebar-pane-toolbar">${input.toolbar}</div>
+    <style>${computedStyleWidgetStyles}</style>
+    <div class="styles-sidebar-pane-toolbar">
+      <devtools-toolbar class="styles-pane-toolbar" role="presentation">
+        <devtools-toolbar-input
+          type="filter"
+          autofocus
+          value=${input.filterText}
+          @change=${input.onFilterChanged}
+        ></devtools-toolbar-input>
+        <devtools-checkbox
+          title=${i18nString(UIStrings.showAll)}
+          ${bindToSetting(input.showInheritedComputedStylePropertiesSetting)}
+        >${i18nString(UIStrings.showAll)}</devtools-checkbox>
+        <devtools-checkbox
+          title=${i18nString(UIStrings.group)}
+          ${bindToSetting(input.groupComputedStylesSetting)}
+        >${i18nString(UIStrings.group)}</devtools-checkbox>
+      </devtools-toolbar>
+    </div>
     <div class="computed-style-tree-outline-container">
       ${input.computedStylesTree}
     </div>
     ${!input.hasMatches ? html`<div class="gray-info-message">${i18nString(UIStrings.noMatchingProperty)}</div>` : ''}
-    <div class="platform-fonts-widget-container">
-      <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(PlatformFontsWidget, { sharedModel: input.computedStyleModel})}></devtools-widget>
-    </div>
+    <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(PlatformFontsWidget, { sharedModel: input.computedStyleModel})}></devtools-widget>
   `, target);
   // clang-format on
 };
@@ -289,7 +309,6 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
   private computedStyleModel: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel;
   private readonly showInheritedComputedStylePropertiesSetting: Common.Settings.Setting<boolean>;
   private readonly groupComputedStylesSetting: Common.Settings.Setting<boolean>;
-  input: UI.Toolbar.ToolbarInput;
   private filterRegex: RegExp|null;
   private readonly linkifier: Components.Linkifier.Linkifier;
   private readonly imagePreviewPopover: ImagePreviewPopover;
@@ -297,12 +316,11 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
   #computedStylesTree = new TreeOutline.TreeOutline.TreeOutline<ComputedStyleData>();
   #treeData?: TreeOutline.TreeOutline.TreeOutlineData<ComputedStyleData>;
   readonly #view: View;
-  private readonly toolbarElement: HTMLElement;
+  #filterText = '';
 
   constructor(computedStyleModel: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel) {
     super({useShadowDom: true});
     this.#view = DEFAULT_VIEW;
-    this.registerRequiredCSS(computedStyleSidebarPaneStyles);
 
     this.contentElement.classList.add('styles-sidebar-computed-style-widget');
 
@@ -321,23 +339,8 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
       this.requestUpdate();
     });
 
-    this.toolbarElement = document.createElement('div');
-    this.toolbarElement.classList.add('hbox', 'styles-sidebar-pane-toolbar');
-    const toolbar = document.createElement('devtools-toolbar');
-    toolbar.classList.add('styles-pane-toolbar');
-    this.toolbarElement.appendChild(toolbar);
-
-    const filterInput = new UI.Toolbar.ToolbarFilter(undefined, 1, 1, undefined, undefined, false);
-    filterInput.addEventListener(UI.Toolbar.ToolbarInput.Event.TEXT_CHANGED, this.onFilterChanged, this);
-    toolbar.appendToolbarItem(filterInput);
-    this.input = filterInput;
     this.filterRegex = null;
 
-    toolbar.appendToolbarItem(new UI.Toolbar.ToolbarSettingCheckbox(
-        this.showInheritedComputedStylePropertiesSetting, undefined, i18nString(UIStrings.showAll)));
-    toolbar.appendToolbarItem(
-        new UI.Toolbar.ToolbarSettingCheckbox(this.groupComputedStylesSetting, undefined, i18nString(UIStrings.group)));
-
     this.linkifier = new Components.Linkifier.Linkifier(maxLinkLength);
 
     this.imagePreviewPopover = new ImagePreviewPopover(this.contentElement, event => {
@@ -373,9 +376,12 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     this.#view(
         {
           computedStylesTree: this.#computedStylesTree,
-          toolbar: this.toolbarElement,
           hasMatches,
           computedStyleModel: this.computedStyleModel,
+          showInheritedComputedStylePropertiesSetting: this.showInheritedComputedStylePropertiesSetting,
+          groupComputedStylesSetting: this.groupComputedStylesSetting,
+          onFilterChanged: this.onFilterChanged.bind(this),
+          filterText: this.#filterText,
         },
         null, this.contentElement);
   }
@@ -628,13 +634,14 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     return result;
   }
 
-  private async onFilterChanged(event: Common.EventTarget.EventTargetEvent<string>): Promise<void> {
+  private async onFilterChanged(event: CustomEvent<string>): Promise<void> {
+    this.#filterText = event.detail;
     await this.filterComputedStyles(
-        event.data ? new RegExp(Platform.StringUtilities.escapeForRegExp(event.data), 'i') : null);
+        event.detail ? new RegExp(Platform.StringUtilities.escapeForRegExp(event.detail), 'i') : null);
 
-    if (event.data && this.#computedStylesTree.data && this.#computedStylesTree.data.tree) {
+    if (event.detail && this.#computedStylesTree.data && this.#computedStylesTree.data.tree) {
       UI.ARIAUtils.LiveAnnouncer.alert(i18nString(
-          UIStrings.filterUpdateAriaText, {PH1: event.data, PH2: this.#computedStylesTree.data.tree.length}));
+          UIStrings.filterUpdateAriaText, {PH1: event.detail, PH2: this.#computedStylesTree.data.tree.length}));
     }
   }
 
@@ -646,6 +653,11 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     return this.filterAlphabeticalList();
   }
 
+  setFilterInput(text: string): void {
+    this.#filterText = text;
+    this.requestUpdate();
+  }
+
   private nodeFilter(node: TreeOutline.TreeOutlineUtils.TreeNode<ComputedStyleData>): boolean {
     const regex = this.filterRegex;
     const data = node.treeNodeData;

package/front_end/panels/elements/ElementStatePaneWidget.ts

@@ -106,7 +106,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
         jslog=${VisualLogging.pane('element-states')}>
       <div class="page-state-checkbox">
         <devtools-checkbox class="small" title=${i18nString(UIStrings.emulatesAFocusedPage)}
-            jslog=${VisualLogging.toggle('emulate-page-focus').track({change: true})} ${bindToSetting('emulate-page-focus')}>${
+            ${bindToSetting('emulate-page-focus')}>${
           i18nString(UIStrings.emulateFocusedPage)}</devtools-checkbox>
         <devtools-button
             @click=${() => UIHelpers.openInNewTab('https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_a_focused_page')}