chrome-devtools-frontend 1.0.1681091 → 1.0.1682249

package/front_end/panels/elements/ElementIssueUtils.ts

@@ -8,71 +8,71 @@ import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 
 const UIStrings = {
   /**
-   * @description Tooltip text shown in the Elements panel when an element has an error.
+   * @description Tooltip text shown in the Elements panel when a label element has an incorrect for attribute.
    */
   formLabelForNameError: 'Incorrect use of <label for=FORM_ELEMENT>',
   /**
-   * @description Tooltip text shown in the Elements panel when an element has an error.
+   * @description Tooltip text shown in the Elements panel when a form field has a duplicate ID.
    */
-  formDuplicateIdForInputError: 'Duplicate form field id in the same form',
+  formDuplicateIdForInputError: 'Duplicate form field ID in the same form',
   /**
-   * @description Tooltip text shown in the Elements panel when an element has an error.
+   * @description Tooltip text shown in the Elements panel when a form field has no label or aria-labelledby attribute.
    */
   formInputWithNoLabelError: 'Form field without valid aria-labelledby attribute or associated label',
   /**
-   * @description Tooltip text shown in the Elements panel when an element has an error.
+   * @description Tooltip text shown in the Elements panel when an autocomplete attribute is empty or incorrect.
    */
   formAutocompleteAttributeEmptyError: 'Incorrect use of autocomplete attribute',
   /**
-   * @description Tooltip text shown in the Elements panel when an element has an error.
+   * @description Tooltip text shown in the Elements panel when a form field lacks both ID and name attributes.
    */
-  formEmptyIdAndNameAttributesForInputError: 'A form field element should have an id or name attribute',
+  formEmptyIdAndNameAttributesForInputError: 'A form field element should have an ID or name attribute',
   /**
-   * @description Tooltip text shown in the Elements panel when an element has an error.
+   * @description Tooltip text shown in the Elements panel when an aria-labelledby attribute references a non-existent element ID.
    */
-  formAriaLabelledByToNonExistingId: 'An aria-labelledby attribute doesn’t match any element id',
+  formAriaLabelledByToNonExistingId: 'An aria-labelledby attribute doesn’t match any element ID',
   /**
-   * @description Tooltip text shown in the Elements panel when an element has an error.
+   * @description Tooltip text shown in the Elements panel when an element lacks an autocomplete attribute.
    */
   formInputAssignedAutocompleteValueToIdOrNameAttributeError: 'An element doesn’t have an autocomplete attribute',
   /**
-   * @description Tooltip text shown in the Elements panel when an element has an error.
+   * @description Tooltip text shown in the Elements panel when a label is not associated with any form field.
    */
   formLabelHasNeitherForNorNestedInput: 'No label associated with a form field',
   /**
-   * @description Tooltip text shown in the Elements panel when an element has an error.
+   * @description Tooltip text shown in the Elements panel when a label's for attribute references a non-existent element ID.
    */
   formLabelForMatchesNonExistingIdError: 'Incorrect use of <label for=FORM_ELEMENT>',
   /**
-   * @description Tooltip text shown in the Elements panel when an element has an error.
+   * @description Tooltip text shown in the Elements panel when a form field uses a non-standard autocomplete value.
    */
   formInputHasWrongButWellIntendedAutocompleteValueError: 'Non-standard autocomplete attribute value',
   /**
-   * @description Tooltip text shown in the Elements panel when an element has an error.
+   * @description Tooltip text shown in the Elements panel when an invalid element or text node is inside a select element.
    */
   disallowedSelectChild: 'Invalid element or text node within <select>',
   /**
-   * @description Tooltip text shown in the Elements panel when an element has an error.
+   * @description Tooltip text shown in the Elements panel when an invalid element or text node is inside an optgroup element.
    */
   disallowedOptGroupChild: 'Invalid element or text node within <optgroup>',
   /**
-   * @description Tooltip text shown in the Elements panel when an element has an error.
+   * @description Tooltip text shown in the Elements panel when non-phrasing content is used inside an option element.
    */
   nonPhrasingContentOptionChild: 'Non-phrasing content used within an <option> element',
   /**
-   * @description Tooltip text shown in the Elements panel when an element has an error.
+   * @description Tooltip text shown in the Elements panel when an interactive element is inside an option element.
    */
   interactiveContentOptionChild: 'Interactive element inside of an <option> element',
   /**
-   * @description Tooltip text shown in the Elements panel when an element has an error.
+   * @description Tooltip text shown in the Elements panel when an interactive element is inside a legend element.
    */
   interactiveContentLegendChild: 'Interactive element inside of a <legend> element',
   /**
-   * @description Tooltip text shown in the Elements panel when an element has an error.
+   * @description Tooltip text shown in the Elements panel when an element with invalid attributes is inside a select element.
    */
   interactiveContentAttributesSelectDescendant: 'Element with invalid attributes within a <select> element',
   /**
-   * @description Tooltip text shown in the Elements panel when an element has an error.
+   * @description Tooltip text shown in the Elements panel when an interactive element is inside a summary element.
    */
   interactiveContentSummaryDescendant: 'Interactive element inside of a <summary> element',
 } as const;

package/front_end/panels/elements/ElementStatePaneWidget.ts

@@ -18,18 +18,18 @@ const {bindToSetting} = UI.UIUtils;
 
 const UIStrings = {
   /**
-   * @description Title of a section in the Element State Pane Widget of the Elements panel. The
+   * @description Title of a section in the force element state section of the Styles tab in the Elements panel. The
    * controls in this section allow users to force a particular state on the selected element, e.g. a
    * focused state via :focus or a hover state via :hover.
    */
   forceElementState: 'Force element state',
   /**
-   * @description Tooltip text in Element State Pane Widget of the Elements panel. For a button that
+   * @description Tooltip text in the force element state section of the Styles tab in the Elements panel. For a button that
    * opens a tool that toggles the various states of the selected element on/off.
    */
-  toggleElementState: 'Toggle Element State',
+  toggleElementState: 'Toggle element state',
   /**
-   * @description The name of a checkbox setting in the Element & Page State Pane Widget of the Elements panel.. This setting
+   * @description The name of a checkbox setting in the force element state section of the Styles tab in the Elements panel. This setting
    * emulates/pretends that the webpage is focused.
    */
   emulateFocusedPage: 'Emulate a focused page',
@@ -38,11 +38,11 @@ const UIStrings = {
    */
   emulatesAFocusedPage: 'Keep page focused. Commonly used for debugging disappearing elements.',
   /**
-   * @description Similar with forceElementState but allows users to force specific state of the selected element.
+   * @description Title of a section in the Styles tab of the Elements panel. Allows users to force specific states of the selected element.
    */
   forceElementSpecificStates: 'Force specific element state',
   /**
-   * @description Text that is usually a hyperlink to more documentation
+   * @description Text that is usually a hyperlink to more documentation.
    */
   learnMore: 'Learn more',
 } as const;
@@ -427,6 +427,9 @@ export class ButtonProvider implements UI.Toolbar.Provider {
   private clicked(): void {
     ElementsPanel.instance().showToolbarPane(!this.view.isShowing() ? this.view : null, this.button);
   }
+  showPane(): void {
+    ElementsPanel.instance().showToolbarPane(this.view, this.button);
+  }
   item(): UI.Toolbar.ToolbarToggle {
     return this.button;
   }

package/front_end/panels/elements/ElementsPanel.ts

@@ -64,41 +64,41 @@ import {
 
 const UIStrings = {
   /**
-   * @description Placeholder text for the search box the Elements Panel. Selector refers to CSS
+   * @description Placeholder text for the search box in the Elements panel. Selector refers to CSS
    * selectors.
    */
   findByStringSelectorOrXpath: 'Find by string, selector, or `XPath`',
   /**
-   * @description Tooltip for the the Computed Styles sidebar toggle in the Styles pane. Command to
+   * @description Tooltip for the computed styles sidebar toggle in the Styles tab of the Elements panel. Command to
    * open/show the sidebar.
    */
-  showComputedStylesSidebar: 'Show Computed Styles sidebar',
+  showComputedStylesSidebar: 'Show Computed styles sidebar',
   /**
-   * @description Tooltip for the the Computed Styles sidebar toggle in the Styles pane. Command to
+   * @description Tooltip for the computed styles sidebar toggle in the Styles tab of the Elements panel. Command to
    * close/hide the sidebar.
    */
-  hideComputedStylesSidebar: 'Hide Computed Styles sidebar',
+  hideComputedStylesSidebar: 'Hide Computed styles sidebar',
   /**
    * @description Screen reader announcement when the computed styles sidebar is shown in the Elements panel.
    */
-  computedStylesShown: 'Computed Styles sidebar shown',
+  computedStylesShown: 'Computed styles sidebar shown',
   /**
    * @description Screen reader announcement when the computed styles sidebar is hidden in the Elements panel.
    */
-  computedStylesHidden: 'Computed Styles sidebar hidden',
+  computedStylesHidden: 'Computed styles sidebar hidden',
   /**
-   * @description Title of a pane in the Elements panel that shows computed styles for the selected
+   * @description Title of a tab in the Elements panel sidebar that shows computed styles for the selected
    * HTML element. Computed styles are the final, actual styles of the element, including all
    * implicit and specified styles.
    */
   computed: 'Computed',
   /**
-   * @description Title of a pane in the Elements panel that shows the CSS styles for the selected
+   * @description Title of a tab in the Elements panel sidebar that shows the CSS styles for the selected
    * HTML element.
    */
   styles: 'Styles',
   /**
-   * @description A context menu item to reveal a node in the DOM tree of the Elements Panel
+   * @description A context menu item to reveal a node in the DOM tree of the Elements panel.
    */
   openInElementsPanel: 'Open in Elements panel',
   /**

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -68,6 +68,7 @@ import * as ElementsComponents from './components/components.js';
 import {cssPath, jsPath, xPath} from './DOMPath.js';
 import {getElementIssueDetails} from './ElementIssueUtils.js';
 import {ElementsPanel} from './ElementsPanel.js';
+import * as ElementStatePaneWidget from './ElementStatePaneWidget.js';
 import {type ElementsTreeOutline, MappedCharToEntity} from './ElementsTreeOutline.js';
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
 import {getRegisteredDecorators, type MarkerDecorator, type MarkerDecoratorRegistration} from './MarkerDecorator.js';
@@ -101,73 +102,73 @@ const UIStrings = {
    */
   forceState: 'Force state',
   /**
-   * @description Hint element title in Elements Tree Element of the Elements panel
+   * @description Hint element title in the DOM tree of the Elements panel.
    * @example {0} PH1
    */
   useSInTheConsoleToReferToThis: 'Use {PH1} in the console to refer to this element.',
   /**
-   * @description Context menu item in the Edit as HTML editor that selects the editor's entire
-   * contents. "Select all" should be used as a verb.
-   */
-  selectAll: 'Select all',
-  /**
-   * @description Text to cut an element, cut should be used as a verb
+   * @description Text to cut an element, cut should be used as a verb.
    */
   cut: 'Cut',
   /**
-   * @description Text for copying, copy should be used as a verb
+   * @description Text for copying, copy should be used as a verb.
    */
   copy: 'Copy',
   /**
-   * @description Text to paste an element, paste should be used as a verb
+   * @description Text to paste an element, paste should be used as a verb.
    */
   paste: 'Paste',
   /**
-   * @description Text in Elements Tree Element of the Elements panel
+   * @description Context menu item in the Edit as HTML editor that selects the editor's entire
+   * contents. "Select all" should be used as a verb.
+   */
+  selectAll: 'Select all',
+  /**
+   * @description Text in the DOM tree of the Elements panel.
    */
   valueIsTooLargeToEdit: '<value is too large to edit>',
   /**
-   * @description Element text content in Elements Tree Element of the Elements panel
+   * @description Element text content in the DOM tree of the Elements panel.
    */
   children: 'Children:',
   /**
-   * @description ARIA label for Elements Tree adorners
+   * @description ARIA label for Elements Tree adorners.
    */
   enableGridMode: 'Enable grid mode',
   /**
-   * @description ARIA label for Elements Tree adorners
+   * @description ARIA label for Elements Tree adorners.
    */
   disableGridMode: 'Disable grid mode',
   /**
-   * @description ARIA label for Elements Tree adorners
+   * @description ARIA label for Elements Tree adorners.
    */
   enableGridLanesMode: 'Enable grid-lanes mode',
   /**
-   * @description ARIA label for Elements Tree adorners
+   * @description ARIA label for Elements Tree adorners.
    */
   disableGridLanesMode: 'Disable grid-lanes mode',
   /**
-   * @description ARIA label for an elements tree adorner
+   * @description ARIA label for an elements tree adorner.
    */
   forceOpenPopover: 'Keep this popover open',
   /**
-   * @description ARIA label for an elements tree adorner
+   * @description ARIA label for an elements tree adorner.
    */
   stopForceOpenPopover: 'Stop keeping this popover open',
   /**
-   * @description ARIA label for an elements tree adorner
+   * @description ARIA label for an elements tree adorner.
    */
   forceShowInterest: 'Trigger interest on this element',
   /**
-   * @description ARIA label for an elements tree adorner
+   * @description ARIA label for an elements tree adorner.
    */
   stopForceShowInterest: 'Cancel interest on this element',
   /**
-   * @description Label of the adorner for flex elements in the Elements panel
+   * @description Label of the adorner for flex elements in the Elements panel.
    */
   enableFlexMode: 'Enable flex mode',
   /**
-   * @description Label of the adorner for flex elements in the Elements panel
+   * @description Label of the adorner for flex elements in the Elements panel.
    */
   disableFlexMode: 'Disable flex mode',
   /**
@@ -202,23 +203,23 @@ const UIStrings = {
   disableStartingStyle: 'Disable @starting-style mode',
   /**
    * @description Label of an adorner in the Elements panel. When clicked, it redirects
-   * to the Media Panel.
+   * to the Media panel.
    */
   openMediaPanel: 'Jump to Media panel',
   /**
-   * @description Text of a tooltip to redirect to another element in the Elements panel
+   * @description Text of a tooltip to redirect to another element in the Elements panel.
    */
   showPopoverTarget: 'Show element associated with the `popovertarget` attribute',
   /**
-   * @description Text of a tooltip to redirect to another element in the Elements panel, associated with the `interesttarget` attribute
+   * @description Text of a tooltip to redirect to another element in the Elements panel, associated with the `interesttarget` attribute.
    */
   showInterestTarget: 'Show element associated with the `interesttarget` attribute',
   /**
-   * @description Text of a tooltip to redirect to another element in the Elements panel, associated with the `commandfor` attribute
+   * @description Text of a tooltip to redirect to another element in the Elements panel, associated with the `commandfor` attribute.
    */
   showCommandForTarget: 'Show element associated with the `commandfor` attribute',
   /**
-   * @description Text of the tooltip for scroll adorner.
+   * @description Text of the tooltip for the scroll adorner.
    */
   elementHasScrollableOverflow: 'This element has a scrollable overflow',
   /**
@@ -231,9 +232,9 @@ const UIStrings = {
    */
   showCustomElementDefinition: 'Show custom element definition',
   /**
-   * @description Link text content in Elements Tree Outline of the Elements panel. When clicked, it "reveals" the true location of an element.
+   * @description ARIA label for the top-layer adorner in the DOM tree of the Elements panel. When clicked, it reveals the true location of an element.
    */
-  reveal: 'reveal',
+  reveal: 'Reveal',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/elements/ElementsTreeElement.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -334,7 +335,7 @@ export interface ViewOutput {
   editorRef?: TextEditor.TextEditor.TextEditor;
 }
 
-export function adornerRef(): DirectiveResult<typeof Lit.Directives.RefDirective> {
+export function adornerRef(): DirectiveResult {
   let adorner: Adorners.Adorner.Adorner|undefined;
   return ref(el => {
     if (adorner) {
@@ -1264,6 +1265,11 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
 
     function setPseudoStateCallback(pseudoState: string, enabled: boolean): void {
       node.domModel().cssModel().forcePseudoState(node, pseudoState, enabled);
+      // Show the element state pane after the user sets an element state from
+      // the context menu. We assume it should help the users to discover the
+      // element state pane and prevent overhead of using the context menu
+      // (http://crbug.com/519254907).
+      ElementStatePaneWidget.ButtonProvider.instance().showPane();
     }
   }
 

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -60,11 +60,11 @@ import {TopLayerContainer} from './TopLayerContainer.js';
 
 const UIStrings = {
   /**
-   * @description ARIA accessible name in Elements Tree Outline of the Elements panel
+   * @description ARIA accessible name in the DOM tree outline of the Elements panel.
    */
   pageDom: 'Page DOM',
   /**
-   * @description Tree element expand all button element button text content in Elements Tree Outline of the Elements panel
+   * @description Text for the button to expand all tree nodes in the DOM tree outline of the Elements panel.
    * @example {3} PH1
    */
   showAllNodesDMore: 'Show all nodes ({PH1} more)',
@@ -74,9 +74,9 @@ const UIStrings = {
    */
   showAllLines: 'Show all ({PH1} lines)',
   /**
-   * @description Text for popover that directs to Issues panel
+   * @description Text for popover that directs to the Issues panel.
    */
-  viewIssue: 'View Issue:',
+  viewIssue: 'View issue:',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/elements/ElementsTreeOutline.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -113,7 +113,6 @@ interface ViewInput {
   onElementsTreeUpdated: (event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode[]>) => void;
   onElementCollapsed: () => void;
   onElementExpanded: () => void;
-  onSaveNodeToTempVariable?: (node: SDK.DOMModel.DOMNode) => void;
 }
 
 interface ViewOutput {
@@ -217,7 +216,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
   output.elementsTreeOutline.maxTreeDepth = input.maxTreeDepth;
   output.elementsTreeOutline.enableContextMenu = input.enableContextMenu ?? true;
   output.elementsTreeOutline.showContextMenu = (treeElement, event) => {
-    void showContextMenu(treeElement, event, input.onSaveNodeToTempVariable);
+    void showContextMenu(treeElement, event);
   };
   let needsUpdate = false;
   const showComments = input.showComments ?? true;
@@ -546,9 +545,6 @@ export class DOMTreeWidget extends UI.Widget.Widget {
       onElementExpanded: () => {
         this.#clearHighlightedNode();
       },
-      onSaveNodeToTempVariable: node => {
-        void this.saveNodeToTempVariable(node);
-      },
     },
                this.#viewOutput, this.contentElement);
     if (firstRender && this.#viewOutput.elementsTreeOutline) {
@@ -640,10 +636,6 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     void this.#viewOutput.elementsTreeOutline?.findTreeElement(node)?.copyStyles();
   }
 
-  async saveNodeToTempVariable(node: SDK.DOMModel.DOMNode): Promise<void> {
-    await this.#viewOutput.elementsTreeOutline?.saveNodeToTempVariable(node);
-  }
-
   /**
    * FIXME: used to determine focus state, probably we can have a better
    * way to do it.
@@ -1550,13 +1542,6 @@ export class ElementsTreeOutline extends
 
   showContextMenu: (treeElement: ElementsTreeElement, event: Event) => void = () => {};
 
-  async saveNodeToTempVariable(node: SDK.DOMModel.DOMNode): Promise<void> {
-    const remoteObjectForConsole = await node.resolveToObject();
-    const consoleModel = remoteObjectForConsole?.runtimeModel().target()?.model(SDK.ConsoleModel.ConsoleModel);
-    await consoleModel?.saveToTempVariable(
-        UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext), remoteObjectForConsole);
-  }
-
   runPendingUpdates(): void {
     this.updateModifiedNodes();
   }

package/front_end/panels/elements/EventListenersWidget.ts

@@ -43,35 +43,35 @@ const {bindToAction, bindToSetting} = UI.UIUtils;
 
 const UIStrings = {
   /**
-   * @description Title of show framework listeners setting in event listeners widget of the elements panel
+   * @description Title of show framework listeners setting in the Event listeners tab of the Elements panel.
    */
   frameworkListeners: 'Resolve `Framework` listeners',
   /**
-   * @description Tooltip text that appears on the setting when hovering over it in Event Listeners Widget of the Elements panel
+   * @description Tooltip text that appears on the setting when hovering over it in the Event listeners tab of the Elements panel.
    */
   showListenersOnTheAncestors: 'Show listeners on the ancestors',
   /**
-   * @description Alternative title text of a setting in Event Listeners Widget of the Elements panel
+   * @description Alternative title text of a setting in the Event listeners tab of the Elements panel.
    */
   ancestors: 'Ancestors',
   /**
-   * @description Title of dispatch filter in event listeners widget of the elements panel
+   * @description Title of dispatch filter in the Event listeners tab of the Elements panel.
    */
   eventListenersCategory: 'Event listeners category',
   /**
-   * @description Text for everything
+   * @description Text for everything.
    */
   all: 'All',
   /**
-   * @description Text in Event Listeners Widget of the Elements panel
+   * @description Text in the Event listeners tab of the Elements panel.
    */
   passive: 'Passive',
   /**
-   * @description Text in Event Listeners Widget of the Elements panel
+   * @description Text in the Event listeners tab of the Elements panel.
    */
   blocking: 'Blocking',
   /**
-   * @description Tooltip text that appears on the setting when hovering over it in Event Listeners Widget of the Elements panel
+   * @description Tooltip text that appears on the setting when hovering over it in the Event listeners tab of the Elements panel.
    */
   resolveEventListenersBoundWith: 'Resolve event listeners bound with framework',
 } as const;
@@ -240,17 +240,16 @@ export class EventListenersWidget extends UI.Widget.VBox {
     }
 
     return context
-        .evaluate(
-            {
-              expression: 'self',
-              objectGroup: objectGroupName,
-              includeCommandLineAPI: false,
-              silent: true,
-              returnByValue: false,
-              generatePreview: false,
-            },
-            /* userGesture */ false,
-            /* awaitPromise */ false)
+        .evaluateWithSelectedFrameFallback({
+          expression: 'self',
+          objectGroup: objectGroupName,
+          includeCommandLineAPI: false,
+          silent: true,
+          returnByValue: false,
+          generatePreview: false,
+        },
+                                           /* userGesture */ false,
+                                           /* awaitPromise */ false)
         .then(result => {
           if ('object' in result) {
             return result.object;

package/front_end/panels/elements/LayersWidget.ts

@@ -18,15 +18,15 @@ const {render, html, Directives: {ref}} = Lit;
 
 const UIStrings = {
   /**
-   * @description Title of a section in the Element State Pane Widget of the Elements panel.
+   * @description Title of a section in the Layers tab of the Elements panel.
    * The widget shows the layers present in the context of the currently selected node.
-   * */
+   */
   cssLayersTitle: 'CSS layers',
   /**
-   * @description Tooltip text in Element State Pane Widget of the Elements panel.
+   * @description Tooltip text in the Layers tab of the Elements panel.
    * For a button that opens a tool that shows the layers present in the current document.
    */
-  toggleCSSLayers: 'Toggle CSS Layers view',
+  toggleCSSLayers: 'Toggle CSS layers view',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/elements/LayersWidget.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

package/front_end/panels/elements/LayoutPane.ts

@@ -18,39 +18,39 @@ import layoutPaneStyles from './layoutPane.css.js';
 
 const UIStrings = {
   /**
-   * @description Title of the input to select the overlay color for an element using the color picker
+   * @description Title of the input to select the overlay color for an element using the color picker.
    */
   chooseElementOverlayColor: 'Choose the overlay color for this element',
   /**
-   * @description Title of the show element button in the Layout pane of the Elements panel
+   * @description Title of the show element button in the Layout tab of the Elements panel.
    */
   showElementInTheElementsPanel: 'Show element in the Elements panel',
   /**
-   * @description Title of a section on CSS Grid/Grid Lanes tooling
+   * @description Title of a section on CSS Grid/Grid Lanes tooling.
    */
-  gridOrGridLanes: 'Grid / Grid Lanes',
+  gridOrGridLanes: 'Grid / grid lanes',
   /**
-   * @description Title of a section in the Layout Sidebar pane of the Elements panel
+   * @description Title of a section in the Layout tab of the Elements panel.
    */
   overlayDisplaySettings: 'Overlay display settings',
   /**
-   * @description Title of a section in Layout sidebar pane
+   * @description Title of a section in the Layout tab of the Elements panel.
    */
-  gridOrGridLanesOverlays: 'Grid / Grid Lanes overlays',
+  gridOrGridLanesOverlays: 'Grid / grid lanes overlays',
   /**
-   * @description Message in the Layout panel informing users that no CSS Grid/Grid Lanes layouts were found on the page
+   * @description Message in the Layout tab informing users that no CSS Grid/Grid Lanes layouts were found on the page.
    */
   noGridOrGridLanesLayoutsFoundOnThisPage: 'No grid or grid lanes layouts found on this page',
   /**
-   * @description Title of the Flexbox section in the Layout panel
+   * @description Title of the Flexbox section in the Layout tab of the Elements panel.
    */
   flexbox: 'Flexbox',
   /**
-   * @description Title of a section in the Layout panel
+   * @description Title of a section in the Layout tab of the Elements panel.
    */
   flexboxOverlays: 'Flexbox overlays',
   /**
-   * @description Text in the Layout panel, when no flexbox elements are found
+   * @description Text in the Layout tab, when no flexbox elements are found.
    */
   noFlexboxLayoutsFoundOnThisPage: 'No flexbox layouts found on this page',
   /**

package/front_end/panels/elements/MarkerDecorator.ts

@@ -10,11 +10,11 @@ import {PseudoStateMarkerDecorator} from './ElementsPanel.js';
 
 const UIStrings = {
   /**
-   * @description Title of the Marker Decorator of Elements
+   * @description Title of a marker decorator in the Elements panel.
    */
-  domBreakpoint: 'DOM Breakpoint',
+  domBreakpoint: 'DOM breakpoint',
   /**
-   * @description Title of the Marker Decorator of Elements
+   * @description Title of a marker decorator in the Elements panel.
    */
   elementIsHidden: 'Element is hidden',
 } as const;

package/front_end/panels/elements/PlatformFontsWidget.ts

@@ -12,31 +12,31 @@ import platformFontsWidgetStyles from './platformFontsWidget.css.js';
 
 const UIStrings = {
   /**
-   * @description Section title text content in Platform Fonts Widget of the Elements panel
+   * @description Section title text content in the Rendered Fonts section of the Computed styles tab in the Elements panel.
    */
-  renderedFonts: 'Rendered Fonts',
+  renderedFonts: 'Rendered fonts',
   /**
-   * @description Font property title text content in Platform Fonts Widget of the Elements panel
+   * @description Font property title text content in the Rendered Fonts section of the Computed styles tab in the Elements panel. Refers to the CSS `font-family` property (https://developer.mozilla.org/en-US/docs/Web/CSS/font-family).
    */
   familyName: 'Family name',
   /**
-   * @description Font property title text content in Platform Fonts Widget of the Elements panel
+   * @description Font property title text content in the Rendered Fonts section of the Computed styles tab in the Elements panel.
    */
   postScriptName: 'PostScript name',
   /**
-   * @description Font property title text content in Platform Fonts Widget of the Elements panel
+   * @description Font property title text content in the Rendered Fonts section of the Computed styles tab in the Elements panel.
    */
   fontOrigin: 'Font origin',
   /**
-   * @description Text in Platform Fonts Widget of the Elements panel
+   * @description Text in the Rendered Fonts section of the Computed styles tab in the Elements panel.
    */
   networkResource: 'Network resource',
   /**
-   * @description Text in Platform Fonts Widget of the Elements panel
+   * @description Text in the Rendered Fonts section of the Computed styles tab in the Elements panel.
    */
   localFile: 'Local file',
   /**
-   * @description Text in Platform Fonts Widget of the Elements panel. Indicates a number of glyphs (characters) .
+   * @description Text in the Rendered Fonts section of the Computed styles tab in the Elements panel. Indicates a number of glyphs (characters).
    */
   dGlyphs: '{n, plural, =1 {(# glyph)} other {(# glyphs)}}',
 } as const;