chrome-devtools-frontend 1.0.1593518 → 1.0.1595090

package/front_end/panels/application/preloading/preloadingView.css

@@ -25,6 +25,10 @@
   button.toolbar-has-dropdown {
     margin: var(--sys-size-2) 0;
   }
+
+  .toolbar-filter {
+    max-width: var(--sys-size-29);
+  }
 }
 
 devtools-split-view {

package/front_end/panels/common/AiCodeCompletionDisclaimer.ts

@@ -70,6 +70,9 @@ function getTooltipDisclaimerText(noLogging: boolean, panel: AiCodeCompletion.Ai
       return noLogging ?
           lockedString(UIStringsNotTranslate.tooltipDisclaimerTextForAiCodeCompletionNoLoggingInSources) :
           lockedString(UIStringsNotTranslate.tooltipDisclaimerTextForAiCodeCompletionInSources);
+    case AiCodeCompletion.AiCodeCompletion.ContextFlavor.STYLES:
+      // TODO(476101019): update with string for styles pane
+      return '';
   }
 }
 

package/front_end/panels/common/AiCodeGenerationTeaser.ts

@@ -147,6 +147,9 @@ function getTooltipDisclaimerText(noLogging: boolean, panel: AiCodeCompletion.Ai
       return noLogging ?
           lockedString(UIStringsNotTranslate.tooltipDisclaimerTextForAiCodeGenerationNoLoggingInSources) :
           lockedString(UIStringsNotTranslate.tooltipDisclaimerTextForAiCodeGenerationInSources);
+    case AiCodeCompletion.AiCodeCompletion.ContextFlavor.STYLES:
+      // TODO(476101019): update with string for styles pane
+      return '';
   }
 }
 

package/front_end/panels/console/ConsoleView.ts

@@ -107,11 +107,11 @@ const UIStrings = {
   /**
    * @description Title of a setting under the Console category that can be invoked through the Command Menu
    */
-  groupSimilarMessagesInConsole: 'Group similar messages in console',
+  groupSimilarMessagesInConsole: 'Group similar messages',
   /**
    * @description Title of a setting under the Console category that can be invoked through the Command Menu
    */
-  showCorsErrorsInConsole: 'Show `CORS` errors in console',
+  showCorsErrorsInConsole: 'CORS errors in console',
   /**
    * @description Tooltip for the the console sidebar toggle in the Console panel. Command to
    * open/show the sidebar.

package/front_end/panels/console/console-meta.ts

@@ -62,11 +62,11 @@ const UIStrings = {
    */
   timestamps: 'Timestamps',
   /**
-   * @description Title of a setting under the Console category that can be invoked through the Command Menu
+   * @description Title of an option under the Console category that can be invoked through the Command Menu
    */
   showTimestamps: 'Show timestamps',
   /**
-   * @description Title of a setting under the Console category that can be invoked through the Command Menu
+   * @description Title of an option under the Console category that can be invoked through the Command Menu
    */
   hideTimestamps: 'Hide timestamps',
   /**
@@ -88,19 +88,23 @@ const UIStrings = {
   /**
    * @description Title of a setting under the Console category that can be invoked through the Command Menu
    */
-  groupSimilarMessagesInConsole: 'Group similar messages in console',
+  groupSimilarMessages: 'Group similar messages',
   /**
    * @description Title of a setting under the Console category that can be invoked through the Command Menu
    */
-  doNotGroupSimilarMessagesIn: 'Do not group similar messages in console',
+  doNotGroupSimilarMessages: 'Don\'t group similar messages',
   /**
-   * @description Title of a setting under the Console category that can be invoked through the Command Menu
+   * @description Title of a setting under the Console category in Settings
    */
-  showCorsErrorsInConsole: 'Show `CORS` errors in console',
+  corsErrorsInConsole: 'CORS errors in console',
   /**
-   * @description Title of a setting under the Console category that can be invoked through the Command Menu
+   * @description Title of an option under the Console category that can be invoked through the Command Menu
+   */
+  showCorsErrorsInConsole: 'Show CORS errors in console',
+  /**
+   * @description Title of an option under the Console category that can be invoked through the Command Menu
    */
-  doNotShowCorsErrorsIn: 'Do not show `CORS` errors in console',
+  doNotShowCorsErrorsIn: 'Don\'t show CORS errors in console',
   /**
    * @description Title of a setting under the Console category in Settings
    */
@@ -137,7 +141,7 @@ const UIStrings = {
    * @description Title of a setting under the Console category in Settings that controls whether AI summaries should
    * be shown for console warnings/errors.
    */
-  showConsoleInsightTeasers: 'Show AI summaries for console messages',
+  consoleInsightTeasers: 'AI summaries for console messages',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/console/console-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
@@ -342,25 +346,25 @@ Common.Settings.registerSettingExtension({
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.CONSOLE,
   storageType: Common.Settings.SettingStorageType.SYNCED,
-  title: i18nLazyString(UIStrings.groupSimilarMessagesInConsole),
+  title: i18nLazyString(UIStrings.groupSimilarMessages),
   settingName: 'console-group-similar',
   settingType: Common.Settings.SettingType.BOOLEAN,
   defaultValue: true,
   options: [
     {
       value: true,
-      title: i18nLazyString(UIStrings.groupSimilarMessagesInConsole),
+      title: i18nLazyString(UIStrings.groupSimilarMessages),
     },
     {
       value: false,
-      title: i18nLazyString(UIStrings.doNotGroupSimilarMessagesIn),
+      title: i18nLazyString(UIStrings.doNotGroupSimilarMessages),
     },
   ],
 });
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.CONSOLE,
-  title: i18nLazyString(UIStrings.showCorsErrorsInConsole),
+  title: i18nLazyString(UIStrings.corsErrorsInConsole),
   settingName: 'console-shows-cors-errors',
   settingType: Common.Settings.SettingType.BOOLEAN,
   defaultValue: true,
@@ -436,7 +440,7 @@ Common.Settings.registerSettingExtension({
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.CONSOLE,
   storageType: Common.Settings.SettingStorageType.SYNCED,
-  title: i18nLazyString(UIStrings.showConsoleInsightTeasers),
+  title: i18nLazyString(UIStrings.consoleInsightTeasers),
   settingName: 'console-insight-teasers-enabled',
   settingType: Common.Settings.SettingType.BOOLEAN,
   defaultValue: true,

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -353,13 +353,18 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
 
     this.filterRegex = null;
     this.linkifier = new Components.Linkifier.Linkifier(maxLinkLength);
-    this.imagePreviewPopover = new ImagePreviewPopover(this.contentElement, event => {
-      const link = event.composedPath()[0];
-      if (link instanceof Element) {
-        return link;
-      }
-      return null;
-    }, () => this.#computedStyleModel ? this.#computedStyleModel.node : null);
+    this.imagePreviewPopover = new ImagePreviewPopover(
+        this.contentElement,
+        event => {
+          const link = event.composedPath()[0];
+          if (link instanceof Element) {
+            return link;
+          }
+          return null;
+        },
+        async () => {
+          return await Components.ImagePreview.loadPrecomputedFeatures(this.#computedStyleModel?.node);
+        });
 
     this.#updateView({hasMatches: true});
   }

package/front_end/panels/elements/ElementsPanel.ts

@@ -1556,7 +1556,7 @@ export class DOMNodeRevealer implements
         }
 
         if (resolvedNode) {
-          const opts: RevealAndSelectNodeOpts = {showPanel: true, focusNode: !omitFocus};
+          const opts: RevealAndSelectNodeOpts = omitFocus ? {showPanel: false} : {showPanel: true, focusNode: true};
           const promise = resolvedNode instanceof SDK.DOMModel.AdoptedStyleSheet ?
               panel.revealAndSelectAdoptedStyleSheet(resolvedNode, opts) :
               panel.revealAndSelectNode(resolvedNode, opts);

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -43,6 +43,7 @@ import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
 import * as Highlighting from '../../ui/components/highlighting/highlighting.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
+import * as UIComponentUtils from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {html, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -555,18 +556,15 @@ export class ElementsTreeOutline extends
           }
           return link;
         },
-        link => {
+        async link => {
           const listItem = UI.UIUtils.enclosingNodeOrSelfWithNodeName(link, 'li');
           if (!listItem) {
-            return null;
+            return undefined;
           }
 
           const treeElement =
               (UI.TreeOutline.TreeElement.getTreeElementBylistItemNode(listItem) as ElementsTreeElement | undefined);
-          if (!treeElement) {
-            return null;
-          }
-          return treeElement.node();
+          return await UIComponentUtils.ImagePreview.loadPrecomputedFeatures(treeElement?.node());
         });
 
     this.updateRecords = new Map();

package/front_end/panels/elements/ImagePreviewPopover.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import type * as Platform from '../../core/platform/platform.js';
-import type * as SDK from '../../core/sdk/sdk.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -15,13 +14,15 @@ import * as UI from '../../ui/legacy/legacy.js';
  */
 export class ImagePreviewPopover {
   private readonly getLinkElement: (arg0: Event) => Element | null;
-  private readonly getDOMNode: (arg0: Element) => SDK.DOMModel.DOMNode | null;
   private readonly popover: UI.PopoverHelper.PopoverHelper;
+
+  #getNodeFeatures: (link: Element) => Promise<Components.ImagePreview.PrecomputedFeatures|undefined>;
+
   constructor(
       container: HTMLElement, getLinkElement: (arg0: Event) => Element | null,
-      getDOMNode: (arg0: Element) => SDK.DOMModel.DOMNode | null) {
+      getNodeFeatures: (arg0: Element) => Promise<Components.ImagePreview.PrecomputedFeatures|undefined>) {
     this.getLinkElement = getLinkElement;
-    this.getDOMNode = getDOMNode;
+    this.#getNodeFeatures = getNodeFeatures;
     this.popover =
         new UI.PopoverHelper.PopoverHelper(container, this.handleRequest.bind(this), 'elements.image-preview');
     this.popover.setTimeout(0, 100);
@@ -39,11 +40,7 @@ export class ImagePreviewPopover {
     return {
       box: link.boxInWindow(),
       show: async (popover: UI.GlassPane.GlassPane) => {
-        const node = this.getDOMNode((link));
-        if (!node) {
-          return false;
-        }
-        const precomputedFeatures = await Components.ImagePreview.ImagePreview.loadDimensionsForNode(node);
+        const precomputedFeatures = await this.#getNodeFeatures(link);
         const preview = await Components.ImagePreview.ImagePreview.build(href, true, {
           precomputedFeatures,
           align: Components.ImagePreview.Align.CENTER,

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -807,6 +807,7 @@ export class StylePropertiesSection {
     let scopeIndex = 0;
     let supportsIndex = 0;
     let nestingIndex = 0;
+    let navigationsIndex = 0;
     this.nestingLevel = 0;
     for (const ruleType of rule.ruleTypes) {
       let ancestorRuleElement;
@@ -829,6 +830,9 @@ export class StylePropertiesSection {
         case Protocol.CSS.CSSRuleType.StartingStyleRule:
           ancestorRuleElement = this.createStartingStyleElement();
           break;
+        case Protocol.CSS.CSSRuleType.NavigationRule:
+          ancestorRuleElement = this.createNavigationElement(rule.navigations[navigationsIndex++]);
+          break;
       }
       if (ancestorRuleElement) {
         this.#ancestorRuleListElement.prepend(ancestorRuleElement);
@@ -1007,6 +1011,27 @@ export class StylePropertiesSection {
     return supportsElement;
   }
 
+  protected createNavigationElement(navigation: SDK.CSSNavigation.CSSNavigation): ElementsComponents.CSSQuery.CSSQuery
+      |undefined {
+    if (!navigation.text) {
+      return;
+    }
+
+    let onQueryTextClick;
+    if (navigation.styleSheetId) {
+      onQueryTextClick = this.handleQueryRuleClick.bind(this, navigation);
+    }
+
+    const navigationElement = new ElementsComponents.CSSQuery.CSSQuery();
+    navigationElement.data = {
+      queryPrefix: '@navigation',
+      queryText: navigation.text,
+      onQueryTextClick,
+      jslogContext: 'navigation',
+    };
+    return navigationElement;
+  }
+
   protected createNestingElement(nestingSelector?: string): HTMLElement|undefined {
     if (!nestingSelector) {
       return;
@@ -1419,6 +1444,8 @@ export class StylePropertiesSection {
         success = await cssModel.setSupportsText(query.styleSheetId, range, newContent);
       } else if (query instanceof SDK.CSSScope.CSSScope) {
         success = await cssModel.setScopeText(query.styleSheetId, range, newContent);
+      } else if (query instanceof SDK.CSSNavigation.CSSNavigation) {
+        success = await cssModel.setNavigationText(query.styleSheetId, range, newContent);
       } else {
         success = await cssModel.setMediaText(query.styleSheetId, range, newContent);
       }
@@ -1871,6 +1898,9 @@ export class FunctionRuleSection extends StylePropertiesSection {
     if ('supports' in condition) {
       return this.createSupportsElement(condition.supports);
     }
+    if ('navigation' in condition) {
+      return this.createNavigationElement(condition.navigation);
+    }
     return;
   }
 

package/front_end/panels/elements/StylesAiCodeCompletionProvider.ts

@@ -18,11 +18,6 @@ export class StylesAiCodeCompletionProvider {
 
   #boundOnUpdateAiCodeCompletionState = this.#updateAiCodeCompletionState.bind(this);
 
-  #debouncedRequestAidaSuggestion =
-      Common.Debouncer.debounce((prefix: string, suffix: string, cursorPositionAtRequest: number) => {
-        void this.#requestAidaSuggestion(prefix, suffix, cursorPositionAtRequest);
-      }, TextEditor.AiCodeCompletionProvider.AIDA_REQUEST_DEBOUNCE_TIMEOUT_MS);
-
   private constructor(aiCodeCompletionConfig: TextEditor.AiCodeCompletionProvider.AiCodeCompletionConfig) {
     const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
     if (!AiCodeCompletion.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionStylesEnabled(devtoolsLocale.locale)) {
@@ -113,7 +108,7 @@ export class StylesAiCodeCompletionProvider {
     prefix = prefix + text;
     const suffix = content.substring(propertyEndOffset);
     // TODO(b/476098133): Consider adjusting cursor position
-    this.#debouncedRequestAidaSuggestion(prefix, suffix, cursorPosition);
+    await this.#requestAidaSuggestion(prefix, suffix, cursorPosition);
   }
 
   async #requestAidaSuggestion(prefix: string, suffix: string, cursorPositionAtRequest: number): Promise<void> {

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -42,9 +42,11 @@ import {assertNotNullOrUndefined} from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
+import * as AiCodeCompletion from '../../models/ai_code_completion/ai_code_completion.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import type * as ComputedStyle from '../../models/computed_style/computed_style.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
+import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
 import {createIcon, Icon} from '../../ui/kit/kit.js';
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
@@ -70,6 +72,7 @@ import {
 } from './StylePropertiesSection.js';
 import {StylePropertyHighlighter} from './StylePropertyHighlighter.js';
 import type {StylePropertyTreeElement} from './StylePropertyTreeElement.js';
+import * as StylesAiCodeCompletionProvider from './StylesAiCodeCompletionProvider.js';
 import type {StylesContainer} from './StylesContainer.js';
 import stylesSidebarPaneStyles from './stylesSidebarPane.css.js';
 import {WebCustomData} from './WebCustomData.js';
@@ -233,13 +236,19 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     this.contentElement.addEventListener('copy', this.clipboardCopy.bind(this));
 
     this.boundOnScroll = this.onScroll.bind(this);
-    this.imagePreviewPopover = new ImagePreviewPopover(this.contentElement, event => {
-      const link = event.composedPath()[0];
-      if (link instanceof Element) {
-        return link;
-      }
-      return null;
-    }, () => this.node());
+    this.imagePreviewPopover = new ImagePreviewPopover(
+        this.contentElement,
+        event => {
+          const link = event.composedPath()[0];
+          if (link instanceof Element) {
+            return link;
+          }
+          return null;
+        },
+        async () => {
+          const features = await Components.ImagePreview.loadPrecomputedFeatures(this.node());
+          return features;
+        });
 
     UI.ViewManager.ViewManager.instance().addEventListener(UI.ViewManager.Events.VIEW_VISIBILITY_CHANGED, event => {
       if (event.data.revealedViewId === 'animations' || event.data.hiddenViewId === 'animations') {
@@ -1736,6 +1745,12 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
   private treeElement: StylePropertyTreeElement;
   private isEditingName: boolean;
   private readonly cssVariables: string[];
+  aiCodeCompletionConfig?: TextEditor.AiCodeCompletionProvider.AiCodeCompletionConfig;
+  aiCodeCompletionProvider?: StylesAiCodeCompletionProvider.StylesAiCodeCompletionProvider;
+
+  #debouncedTriggerAiCodeCompletion = Common.Debouncer.debounce(() => {
+    void this.triggerAiCodeCompletion();
+  }, TextEditor.AiCodeCompletionProvider.AIDA_REQUEST_DEBOUNCE_TIMEOUT_MS);
 
   constructor(treeElement: StylePropertyTreeElement, isEditingName: boolean, completions: string[] = []) {
     // Use the same callback both for applyItemCallback and acceptItemCallback.
@@ -1794,6 +1809,27 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
         }
       }
     }
+
+    const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
+    if (AiCodeCompletion.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionStylesEnabled(devtoolsLocale.locale)) {
+      this.aiCodeCompletionConfig = {
+        completionContext: {},
+        generationContext: {},
+        onFeatureEnabled: () => {},
+        onFeatureDisabled: () => {},
+        onSuggestionAccepted: () => {},
+        onRequestTriggered: () => {},
+        onResponseReceived: () => {},
+        panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor.STYLES,
+        getCompletionHint: this.getCompletionHint.bind(this),
+        getCurrentText: () => {
+          return this.text();
+        },
+        setAiAutoCompletion: () => {},
+      };
+      this.aiCodeCompletionProvider =
+          StylesAiCodeCompletionProvider.StylesAiCodeCompletionProvider.createInstance(this.aiCodeCompletionConfig);
+    }
   }
 
   override onKeyDown(event: Event): void {
@@ -1844,6 +1880,13 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
     return false;
   }
 
+  override onInput(event: Event): void {
+    super.onInput(event);
+    if (this.aiCodeCompletionProvider) {
+      this.#debouncedTriggerAiCodeCompletion();
+    }
+  }
+
   private handleNameOrValueUpDown(event: Event): boolean {
     function finishHandler(this: CSSPropertyPrompt, _originalValue: string, _replacementString: string): void {
       // Synthesize property text disregarding any comments, custom whitespace etc.
@@ -2054,6 +2097,48 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
       return subtitleElement;
     }
   }
+
+  private async triggerAiCodeCompletion(): Promise<void> {
+    const selection = this.element().getComponentSelection();
+    if (!this.aiCodeCompletionProvider || !selection || selection.rangeCount === 0) {
+      return;
+    }
+    const range = selection.getRangeAt(0);
+    const userInput = this.text();
+    // Only trigger if caret is at end of text content
+    if (range.endOffset < userInput.length) {
+      return;
+    }
+    const cssModel = this.treeElement.stylesContainer().cssModel();
+    if (!cssModel) {
+      return;
+    }
+    await this.aiCodeCompletionProvider.triggerAiCodeCompletion(
+        userInput, range.endOffset, this.isEditingName, this.treeElement.property, cssModel);
+  }
+
+  /**
+   * Extracts the remaining portion of the suggestion text that follows the
+   * user's current input.
+   */
+  private getCompletionHint(): string|null {
+    const topSuggestion = this.isSuggestBoxVisible() ? this.suggestBox?.completion() : null;
+    const suggestionText = topSuggestion?.text;
+    if (!suggestionText) {
+      return null;
+    }
+    const userInput = this.text();
+    let completionHint = suggestionText;
+    // Iterate from the longest possible overlap down to the shortest
+    for (let i = Math.min(userInput.length, suggestionText.length); i > 0; i--) {
+      const overlapCandidate = suggestionText.substring(0, i);
+      if (userInput.endsWith(overlapCandidate)) {
+        completionHint = suggestionText.slice(i);
+        break;
+      }
+    }
+    return completionHint;
+  }
 }
 
 export function unescapeCssString(input: string): string {

package/front_end/panels/elements/elements-meta.ts

@@ -110,9 +110,13 @@ const UIStrings = {
   /**
    * @description Title of a setting under the Elements category. Whether to show/hide code comments in HTML.
    */
+  htmlComments: 'HTML comments',
+  /**
+   * @description Title of an option under the Elements category that can be invoked through the Command Menu
+   */
   showHtmlComments: 'Show `HTML` comments',
   /**
-   * @description Title of a setting under the Elements category. Whether to show/hide code comments in HTML.
+   * @description Title of an option under the Elements category that can be invoked through the Command Menu
    */
   hideHtmlComments: 'Hide `HTML` comments',
   /**
@@ -126,12 +130,12 @@ const UIStrings = {
    * the inspect tooltip (an information pane that hovers next to selected DOM elements) has extra
    * detail.
    */
-  showDetailedInspectTooltip: 'Show detailed inspect tooltip',
+  detailedInspectTooltip: 'Detailed inspect tooltip',
   /**
    * @description Title of a setting under the Elements category in Settings. Turns on a mode where
    * hovering over CSS properties in the Styles pane will display a popover with documentation.
    */
-  showCSSDocumentationTooltip: 'Show CSS documentation tooltip',
+  CSSDocumentationTooltip: 'CSS documentation tooltip',
   /**
    * @description A context menu item (command) in the Elements panel that copy the styles of
    * the HTML element.
@@ -146,7 +150,7 @@ const UIStrings = {
    * @description Title of a setting under the Elements category. Whether to show/hide hide
    * the shadow DOM nodes of HTML elements that are built into the browser (e.g. the <input> element).
    */
-  showUserAgentShadowDOM: 'Show user agent shadow `DOM`',
+  userAgentShadowDOM: 'User agent shadow `DOM`',
   /**
    * @description Command for showing the 'Computed' tool. Displays computed CSS styles in Elements sidebar.
    */
@@ -489,7 +493,7 @@ Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.ELEMENTS,
   storageType: Common.Settings.SettingStorageType.SYNCED,
   order: 1,
-  title: i18nLazyString(UIStrings.showUserAgentShadowDOM),
+  title: i18nLazyString(UIStrings.userAgentShadowDOM),
   settingName: 'show-ua-shadow-dom',
   settingType: Common.Settings.SettingType.BOOLEAN,
   defaultValue: false,
@@ -528,7 +532,7 @@ Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.ELEMENTS,
   storageType: Common.Settings.SettingStorageType.SYNCED,
   order: 3,
-  title: i18nLazyString(UIStrings.showHtmlComments),
+  title: i18nLazyString(UIStrings.htmlComments),
   settingName: 'show-html-comments',
   settingType: Common.Settings.SettingType.BOOLEAN,
   defaultValue: true,
@@ -558,7 +562,7 @@ Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.ELEMENTS,
   storageType: Common.Settings.SettingStorageType.SYNCED,
   order: 5,
-  title: i18nLazyString(UIStrings.showDetailedInspectTooltip),
+  title: i18nLazyString(UIStrings.detailedInspectTooltip),
   settingName: 'show-detailed-inspect-tooltip',
   settingType: Common.Settings.SettingType.BOOLEAN,
   defaultValue: true,
@@ -581,7 +585,7 @@ Common.Settings.registerSettingExtension({
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.ELEMENTS,
   storageType: Common.Settings.SettingStorageType.SYNCED,
-  title: i18nLazyString(UIStrings.showCSSDocumentationTooltip),
+  title: i18nLazyString(UIStrings.CSSDocumentationTooltip),
   settingName: 'show-css-property-documentation-on-hover',
   settingType: Common.Settings.SettingType.BOOLEAN,
   defaultValue: true,