chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/front_end/ui/legacy/components/data_grid/ShowMoreDataGridNode.ts

@@ -51,8 +51,8 @@ const UIStrings = {
    */
   showDAfter: 'Show {PH1} after',
   /**
-   *@description In a data grid, for a list of items with omitted items, display all omitted items
-   *@example {50} PH1
+   * @description In a data grid, for a list of items with omitted items, display all omitted items
+   * @example {50} PH1
    */
   showAllD: 'Show all {PH1}',
 } as const;

package/front_end/ui/legacy/components/data_grid/ViewportDataGrid.ts

@@ -15,14 +15,17 @@ export class ViewportDataGrid<T> extends Common.ObjectWrapper.eventMixin<EventTy
     DataGridImpl)<ViewportDataGridNode<T>> {
   private readonly onScrollBound: (event: Event|null) => void;
   private visibleNodes: Array<ViewportDataGridNode<T>>;
-  /** A datagrid preference to express that the grid represents an updating log of rows (eg Network panel request log, websocket messages).
+  /**
+   * A datagrid preference to express that the grid represents an updating log of rows (eg Network panel request log, websocket messages).
    * If `true`, the datagrid will mostly keep the scroll at the bottom, so new items are visible.
    * If the data is sorted descending (eg Performance Call Tree, heap snapshot), keep the default of `false`.
    */
   enableAutoScrollToBottom = false;
-  /** When true, the datagrid will manipulate the scrollTop to focus on the bottom, mostly so new additions are visible.
+  /**
+   * When true, the datagrid will manipulate the scrollTop to focus on the bottom, mostly so new additions are visible.
    * Some actions will unset this, like revealing or expanding a particular node.
-   * Only matters if enableAutoScrollToBottom is true. */
+   * Only matters if enableAutoScrollToBottom is true.
+   */
   keepScrollingToBottom = false;
   private updateIsFromUser: boolean;
   private lastScrollTop: number;

package/front_end/ui/legacy/components/data_grid/dataGrid.css

@@ -9,6 +9,11 @@
   border: 1px solid var(--sys-color-divider) !important; /* stylelint-disable-line declaration-no-important */
   /* See: crbug.com/1152736 for color variable migration. */
   line-height: 120%;
+
+  :focus-visible {
+    outline: 2px solid var(--sys-color-state-focus-ring);
+    outline-offset: -2px;
+  }
 }
 
 .data-grid table {
@@ -130,8 +135,8 @@
   border-left-width: 0;
 }
 
-.data-grid tr.selected td,
-.data-grid tr.selected th {
+.data-grid:focus-within tr.selected td,
+.data-grid:focus-within tr.selected th {
   border-left-color: var(--sys-color-divider-on-tonal-container);
 }
 
@@ -253,7 +258,8 @@
 }
 
 .data-grid.no-selection:focus-visible {
-  border: 1px solid var(--sys-color-state-focus-ring) !important; /* stylelint-disable-line declaration-no-important */
+  outline: 2px solid var(--sys-color-state-focus-ring);
+  outline-offset: -2px;
 }
 
 .data-grid:focus tbody tr.selected {

package/front_end/ui/legacy/components/inline_editor/BezierEditor.ts

@@ -29,7 +29,7 @@ export class BezierEditor extends Common.ObjectWrapper.eventMixin<EventTypes, ty
   private debouncedStartPreviewAnimation: () => void;
 
   constructor(model: AnimationTimingModel) {
-    super(true);
+    super({useShadowDom: true});
     this.registerRequiredCSS(bezierEditorStyles);
 
     this.model = model;

package/front_end/ui/legacy/components/inline_editor/BezierUI.ts

@@ -31,7 +31,7 @@ export class BezierUI {
   static drawVelocityChart(bezier: UI.Geometry.CubicBezier, path: Element, width: number): void {
     const height = Height;
     let pathBuilder: Array<string|number>|Array<string|number> = ['M', 0, height];
-    /** @const */ const sampleSize = 1 / 40;
+    /** @constant */ const sampleSize = 1 / 40;
 
     let prev = bezier.evaluateAt(0);
     for (let t = sampleSize; t < 1 + sampleSize; t += sampleSize) {

package/front_end/ui/legacy/components/inline_editor/CSSAngle.test.ts

@@ -6,17 +6,17 @@ import {renderElementIntoDOM} from '../../../../testing/DOMHelpers.js';
 
 import * as InlineEditor from './inline_editor.js';
 
-const assertPopoverOpen = (root: ShadowRoot) => {
+const assertPopoverOpen = (root: HTMLElement) => {
   const popover = root.querySelector('.popover');
   assert.exists(popover);
 };
 
-const assertPopoverClosed = (root: ShadowRoot) => {
+const assertPopoverClosed = (root: HTMLElement) => {
   const popover = root.querySelector('.popover');
   assert.notExists(popover);
 };
 
-const assertAndGetSwatch = (root: ShadowRoot) => {
+const assertAndGetSwatch = (root: HTMLElement) => {
   const swatch = root.querySelector<HTMLElement>('devtools-css-angle-swatch');
   if (!swatch) {
     assert.fail('swatch was not rendered');
@@ -25,7 +25,7 @@ const assertAndGetSwatch = (root: ShadowRoot) => {
   return swatch;
 };
 
-const togglePopover = (root: ShadowRoot) => {
+const togglePopover = (root: HTMLElement) => {
   const swatch = assertAndGetSwatch(root);
   swatch?.click();
 };
@@ -53,13 +53,13 @@ describe('CSSAngle', () => {
     renderElementIntoDOM(component);
     component.data = initialData;
 
-    assert.isNotNull(component.shadowRoot);
+    assert.isNotNull(component);
 
-    assertPopoverClosed(component.shadowRoot);
-    togglePopover(component.shadowRoot);
-    assertPopoverOpen(component.shadowRoot);
-    togglePopover(component.shadowRoot);
-    assertPopoverClosed(component.shadowRoot);
+    assertPopoverClosed(component);
+    togglePopover(component);
+    assertPopoverOpen(component);
+    togglePopover(component);
+    assertPopoverClosed(component);
   });
 
   it('can fire events when toggling the popover', () => {
@@ -73,14 +73,14 @@ describe('CSSAngle', () => {
       isPopoverOpen = popoverToggledEvent.data.open;
     });
 
-    assert.isNotNull(component.shadowRoot);
+    assert.isNotNull(component);
 
-    assertPopoverClosed(component.shadowRoot);
-    togglePopover(component.shadowRoot);
-    assertPopoverOpen(component.shadowRoot);
+    assertPopoverClosed(component);
+    togglePopover(component);
+    assertPopoverOpen(component);
     assert.isTrue(isPopoverOpen, 'external isPopoverOpen flag not synced');
-    togglePopover(component.shadowRoot);
-    assertPopoverClosed(component.shadowRoot);
+    togglePopover(component);
+    assertPopoverClosed(component);
     assert.isFalse(isPopoverOpen, 'external isPopoverOpen flag not synced');
   });
 
@@ -89,7 +89,7 @@ describe('CSSAngle', () => {
     renderElementIntoDOM(component);
     component.data = initialData;
 
-    assert.isNotNull(component.shadowRoot);
+    assert.isNotNull(component);
 
     let cssAngleText = initialData.angleText;
     component.addEventListener('unitchanged', (event: Event) => {
@@ -97,7 +97,7 @@ describe('CSSAngle', () => {
       cssAngleText = data.value;
     });
 
-    const swatch = assertAndGetSwatch(component.shadowRoot);
+    const swatch = assertAndGetSwatch(component);
     if (!swatch) {
       return;
     }
@@ -111,7 +111,7 @@ describe('CSSAngle', () => {
     renderElementIntoDOM(component);
     component.data = initialData;
 
-    assert.isNotNull(component.shadowRoot);
+    assert.isNotNull(component);
 
     let cssAngleText = initialData.angleText;
     component.addEventListener('valuechanged', (event: Event) => {
@@ -119,8 +119,8 @@ describe('CSSAngle', () => {
       cssAngleText = data.value;
     });
 
-    togglePopover(component.shadowRoot);
-    const angleContainer = component.shadowRoot.querySelector('.css-angle');
+    togglePopover(component);
+    const angleContainer = component.querySelector('.css-angle');
     if (!angleContainer) {
       assert.fail('angle container was not rendered');
       return;
@@ -146,13 +146,13 @@ describe('CSSAngle', () => {
         assert.strictEqual(popoverEvent.data.open, shouldPopoverEventBeOpen);
       });
 
-      assert.isNotNull(component.shadowRoot);
+      assert.isNotNull(component);
 
-      assertPopoverClosed(component.shadowRoot);
+      assertPopoverClosed(component);
       shouldPopoverEventBeOpen = true;
-      togglePopover(component.shadowRoot);
+      togglePopover(component);
       shouldPopoverEventBeOpen = false;
-      togglePopover(component.shadowRoot);
+      togglePopover(component);
     });
 
     it('parses CSS properties with angles correctly', () => {

package/front_end/ui/legacy/components/inline_editor/CSSAngle.ts

@@ -6,6 +6,7 @@
 import './CSSAngleEditor.js';
 import './CSSAngleSwatch.js';
 
+import * as Platform from '../../../../core/platform/platform.js';
 import * as Lit from '../../../lit/lit.js';
 
 import cssAngleStyles from './cssAngle.css.js';
@@ -60,7 +61,6 @@ const DefaultAngle = {
 };
 
 export class CSSAngle extends HTMLElement {
-  private readonly shadow = this.attachShadow({mode: 'open'});
   private angle: Angle = DefaultAngle;
   private displayedAngle: Angle = DefaultAngle;
   private propertyValue = '';
@@ -96,10 +96,10 @@ export class CSSAngle extends HTMLElement {
     }
 
     if (!this.angleElement) {
-      this.angleElement = this.shadow.querySelector<HTMLElement>('.css-angle');
+      this.angleElement = this.querySelector<HTMLElement>('.css-angle');
     }
     if (!this.swatchElement) {
-      this.swatchElement = this.shadow.querySelector<HTMLElement>('devtools-css-angle-swatch');
+      this.swatchElement = this.querySelector<HTMLElement>('devtools-css-angle-swatch');
     }
     if (!this.angleElement || !this.swatchElement) {
       return;
@@ -182,7 +182,7 @@ export class CSSAngle extends HTMLElement {
     }
   }
 
-  private onMiniIconClick(event: MouseEvent): void {
+  private onMiniIconClick(event: MouseEvent|KeyboardEvent): void {
     event.stopPropagation();
     if (event.shiftKey && !this.popoverOpen) {
       this.displayNextUnit();
@@ -198,6 +198,10 @@ export class CSSAngle extends HTMLElement {
 
   private onKeydown(event: KeyboardEvent): void {
     if (!this.popoverOpen) {
+      if (Platform.KeyboardUtilities.isEnterOrSpaceKey(event)) {
+        this.onMiniIconClick(event);
+        event.preventDefault();
+      }
       return;
     }
 
@@ -238,7 +242,9 @@ export class CSSAngle extends HTMLElement {
         </div>
         ${this.popoverOpen ? this.renderPopover() : null}
       </div>
-    `, this.shadow, {host: this});
+    `, this, {
+      host: this,
+    });
     // clang-format on
   }
 

package/front_end/ui/legacy/components/inline_editor/CSSShadowEditor.ts

@@ -13,15 +13,15 @@ import cssShadowEditorStyles from './cssShadowEditor.css.js';
 
 const UIStrings = {
   /**
-   *@description Text that refers to some types
+   * @description Text that refers to some types
    */
   type: 'Type',
   /**
-   *@description Text in CSSShadow Editor of the inline editor in the Styles tab
+   * @description Text in CSSShadow Editor of the inline editor in the Styles tab
    */
   xOffset: 'X offset',
   /**
-   *@description Text in CSSShadow Editor of the inline editor in the Styles tab
+   * @description Text in CSSShadow Editor of the inline editor in the Styles tab
    */
   yOffset: 'Y offset',
   /**
@@ -30,7 +30,7 @@ const UIStrings = {
    */
   blur: 'Blur',
   /**
-   *@description Text in CSSShadow Editor of the inline editor in the Styles tab
+   * @description Text in CSSShadow Editor of the inline editor in the Styles tab
    */
   spread: 'Spread',
 } as const;
@@ -111,7 +111,7 @@ export class CSSShadowEditor extends Common.ObjectWrapper.eventMixin<EventTypes,
   private canvasOrigin!: UI.Geometry.Point;
   private changedElement?: HTMLInputElement|null;
   constructor() {
-    super(true);
+    super({useShadowDom: true});
     this.registerRequiredCSS(cssShadowEditorStyles);
     this.contentElement.tabIndex = 0;
     this.contentElement.setAttribute(

package/front_end/ui/legacy/components/inline_editor/ColorSwatch.test.ts

@@ -18,22 +18,16 @@ import type * as UI from '../../legacy.js';
 import * as InlineEditor from './inline_editor.js';
 
 function assertSwatch(
-    swatch: InlineEditor.ColorSwatch.ColorSwatch,
-    expected: {backgroundColor?: string, colorTextInSlot?: string, tooltip?: string}) {
+    swatch: InlineEditor.ColorSwatch.ColorSwatch, expected: {backgroundColor?: string, tooltip?: string}) {
   const swatchEl = swatch.shadowRoot!.querySelector('.color-swatch');
   assert.instanceOf(swatchEl, HTMLElement);
   const swatchInnerEl = swatch.shadowRoot!.querySelector('.color-swatch-inner');
   assert.instanceOf(swatchInnerEl, HTMLElement);
-  const slotEl = swatch.shadowRoot!.querySelector('slot');
-  assert.instanceOf(slotEl, HTMLElement);
 
   if (expected.backgroundColor) {
     assert.strictEqual(
         swatchInnerEl.style.backgroundColor, expected.backgroundColor, 'The swatch has the correct color');
   }
-  if (expected.colorTextInSlot) {
-    assert.strictEqual(slotEl.textContent, expected.colorTextInSlot, 'The slot shows the correct default color');
-  }
   if (expected.tooltip) {
     assert.strictEqual(swatchEl.getAttribute('title'), expected.tooltip, 'The tooltip is correct');
   }
@@ -58,14 +52,12 @@ describeWithLocale('ColorSwatch', () => {
 
     assertSwatch(swatch, {
       backgroundColor: 'red',
-      colorTextInSlot: 'red',
     });
 
     swatch.renderColor(new Common.Color.Legacy([1, .5, .2, .5], Common.Color.Format.RGBA));
 
     assertSwatch(swatch, {
       backgroundColor: 'rgba(255, 128, 51, 0.5)',
-      colorTextInSlot: 'rgb(255 128 51 / 50%)',
     });
   });
 

package/front_end/ui/legacy/components/inline_editor/ColorSwatch.ts

@@ -15,13 +15,24 @@ const {html} = Lit;
 
 const UIStrings = {
   /**
-   *@description Icon element title in Color Swatch of the inline editor in the Styles tab
+   * @description Icon element title in Color Swatch of the inline editor in the Styles tab
    */
   shiftclickToChangeColorFormat: 'Shift-click to change color format',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/inline_editor/ColorSwatch.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+export class ColorFormatChangedEvent extends Event {
+  static readonly eventName = 'colorformatchanged';
+
+  data: {color: Common.Color.Color};
+
+  constructor(color: Common.Color.Color) {
+    super(ColorFormatChangedEvent.eventName, {});
+    this.data = {color};
+  }
+}
+
 export class ColorChangedEvent extends Event {
   static readonly eventName = 'colorchanged';
 
@@ -52,6 +63,8 @@ export class ColorSwatch extends HTMLElement {
     if (tooltip) {
       this.tooltip = tooltip;
     }
+    this.tabIndex = -1;
+    this.addEventListener('keydown', e => this.onActivate(e));
   }
 
   static isColorSwatch(element: Element): element is ColorSwatch {
@@ -98,24 +111,32 @@ export class ColorSwatch extends HTMLElement {
     // clang-format off
     // Note that we use a <slot> with a default value here to display the color text. Consumers of this component are
     // free to append any content to replace what is being shown here.
-    Lit.render(html`
-      <style>${colorSwatchStyles}</style>
-      <span class=${colorSwatchClasses} title=${this.tooltip}>
-        <span class="color-swatch-inner" style="background-color: ${color.asString()};"
-              jslog=${VisualLogging.showStyleEditor('color').track({click: true})}
-              @click=${this.onClick} @mousedown=${this.consume} @dblclick=${this.consume}>
-        </span>
-      </span>
-      <slot><span>${this.getText()}</span></slot>`,
+    // Note also that whitespace between nodes is removed on purpose to avoid pushing these elements apart. Do not
+    // re-format the HTML code.
+    Lit.render(
+      html`<style>${colorSwatchStyles}</style><span
+          class=${colorSwatchClasses}
+          title=${this.tooltip}><span
+            class="color-swatch-inner"
+            style="background-color: ${color.asString()};"
+            jslog=${VisualLogging.showStyleEditor('color').track({click: true})}
+            @click=${this.onActivate}
+            @mousedown=${this.consume}
+            @dblclick=${this.consume}></span></span>`,
       this.shadow, {host: this});
     // clang-format on
   }
 
-  private onClick(e: KeyboardEvent): void {
+  private onActivate(e: KeyboardEvent|MouseEvent): void {
     if (this.readonly) {
       return;
     }
 
+    if ((e instanceof KeyboardEvent && e.key !== 'Enter' && e.key !== ' ') ||
+        (e instanceof MouseEvent && e.button > 1)) {
+      return;
+    }
+
     if (e.shiftKey) {
       e.stopPropagation();
       this.showFormatPicker(e);
@@ -123,6 +144,7 @@ export class ColorSwatch extends HTMLElement {
     }
 
     this.dispatchEvent(new ClickEvent());
+    this.consume(e);
   }
 
   private consume(e: Event): void {
@@ -134,14 +156,6 @@ export class ColorSwatch extends HTMLElement {
     this.dispatchEvent(new ColorChangedEvent(color));
   }
 
-  setColorText(color: Common.Color.Color): void {
-    this.firstElementChild?.remove();
-    this.renderColor(color);
-    const span = this.appendChild(document.createElement('span'));
-    span.appendChild(document.createTextNode(color.getAuthoredText() ?? color.asString()));
-    this.dispatchEvent(new ColorChangedEvent(color));
-  }
-
   private showFormatPicker(e: Event): void {
     if (!this.color) {
       return;
@@ -149,7 +163,7 @@ export class ColorSwatch extends HTMLElement {
 
     const contextMenu = new ColorPicker.FormatPickerContextMenu.FormatPickerContextMenu(this.color);
     void contextMenu.show(e, color => {
-      this.setColorText(color);
+      this.dispatchEvent(new ColorFormatChangedEvent(color));
     });
   }
 }
@@ -163,6 +177,7 @@ declare global {
 
   interface HTMLElementEventMap {
     [ColorChangedEvent.eventName]: ColorChangedEvent;
+    [ColorFormatChangedEvent.eventName]: ColorFormatChangedEvent;
     [ClickEvent.eventName]: Event;
   }
 }

package/front_end/ui/legacy/components/inline_editor/FontEditor.ts

@@ -18,47 +18,47 @@ import * as FontEditorUtils from './FontEditorUtils.js';
 
 const UIStrings = {
   /**
-   *@description Font editor label for font family selector
+   * @description Font editor label for font family selector
    */
   fontFamily: 'Font Family',
   /**
-   *@description Section header for CSS property inputs
+   * @description Section header for CSS property inputs
    */
   cssProperties: 'CSS Properties',
   /**
-   *@description Font size slider label for Font Editor
+   * @description Font size slider label for Font Editor
    */
   fontSize: 'Font Size',
   /**
-   *@description Line height slider label for Font Editor
+   * @description Line height slider label for Font Editor
    */
   lineHeight: 'Line Height',
   /**
-   *@description Font weight slider label for Font Editor
+   * @description Font weight slider label for Font Editor
    */
   fontWeight: 'Font Weight',
   /**
-   *@description Label for letter-spacing labels
+   * @description Label for letter-spacing labels
    */
   spacing: 'Spacing',
   /**
-   *@description Label for numbered fallback selectors
-   *@example {2} PH1
+   * @description Label for numbered fallback selectors
+   * @example {2} PH1
    */
   fallbackS: 'Fallback {PH1}',
   /**
-   *@description Announcement for deleting an empty font family selector in the Font Editor
-   *@example {2} PH1
+   * @description Announcement for deleting an empty font family selector in the Font Editor
+   * @example {2} PH1
    */
   thereIsNoValueToDeleteAtIndexS: 'There is no value to delete at index: {PH1}',
   /**
-   *@description Announcement when deleting a font selector in the Font Editor
-   *@example {2} PH1
+   * @description Announcement when deleting a font selector in the Font Editor
+   * @example {2} PH1
    */
   fontSelectorDeletedAtIndexS: 'Font Selector deleted at index: {PH1}',
   /**
-   *@description Label for Font Editor button to delete font family/fallback selectors
-   *@example {Fallback 1} PH1
+   * @description Label for Font Editor button to delete font family/fallback selectors
+   * @example {Fallback 1} PH1
    */
   deleteS: 'Delete {PH1}',
   /**
@@ -68,23 +68,23 @@ const UIStrings = {
    */
   PleaseEnterAValidValueForSText: '* Please enter a valid value for {PH1} text input',
   /**
-   *@description Error text in Font Editor
-   *@example {font-size} PH1
+   * @description Error text in Font Editor
+   * @example {font-size} PH1
    */
   thisPropertyIsSetToContainUnits:
       'This property is set to contain units but does not have a defined corresponding unitsArray: {PH1}',
   /**
-   *@description Label for slider input in the Font Editor.
-   *@example {font-size} PH1
+   * @description Label for slider input in the Font Editor.
+   * @example {font-size} PH1
    */
   sSliderInput: '{PH1} Slider Input',
   /**
-   *@description Accessible label for a text input for a property in the Font Editor.
-   *@example {font-size} PH1
+   * @description Accessible label for a text input for a property in the Font Editor.
+   * @example {font-size} PH1
    */
   sTextInput: '{PH1} Text Input',
   /**
-   *@description Font Editor units text box label
+   * @description Font Editor units text box label
    */
   units: 'Units',
   /**
@@ -94,8 +94,8 @@ const UIStrings = {
    */
   sUnitInput: '{PH1} Unit Input',
   /**
-   *@description Text used in the Font Editor for the key values selector
-   *@example {font-size} PH1
+   * @description Text used in the Font Editor for the key values selector
+   * @example {font-size} PH1
    */
   sKeyValueSelector: '{PH1} Key Value Selector',
   /**
@@ -108,11 +108,11 @@ const UIStrings = {
    */
   sToggleInputType: '{PH1} toggle input type',
   /**
-   *@description Label for Font Editor alert in CSS Properties section when toggling inputs
+   * @description Label for Font Editor alert in CSS Properties section when toggling inputs
    */
   selectorInputMode: 'Selector Input Mode',
   /**
-   *@description Label for Font Editor alert in CSS Properties section when toggling inputs
+   * @description Label for Font Editor alert in CSS Properties section when toggling inputs
    */
   sliderInputMode: 'Slider Input Mode',
 } as const;
@@ -126,7 +126,7 @@ export class FontEditor extends Common.ObjectWrapper.eventMixin<EventTypes, type
   private fontsList: Array<Map<string, string[]>>|null;
 
   constructor(propertyMap: Map<string, string>) {
-    super(true);
+    super({useShadowDom: true});
     this.registerRequiredCSS(fontEditorStyles);
     this.propertyMap = propertyMap;
     this.contentElement.tabIndex = 0;
@@ -263,7 +263,7 @@ export class FontEditor extends Common.ObjectWrapper.eventMixin<EventTypes, type
     let fontSelectorObject: FontEditor.FontSelectorObject = this.fontSelectors[index];
     const isPrimary = index === 0;
     if (fontSelectorObject.input.value === '' && !isGlobalValue) {
-      UI.ARIAUtils.alert(i18nString(UIStrings.thereIsNoValueToDeleteAtIndexS, {PH1: index}));
+      UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.thereIsNoValueToDeleteAtIndexS, {PH1: index}));
       return;
     }
     if (isPrimary) {
@@ -289,7 +289,7 @@ export class FontEditor extends Common.ObjectWrapper.eventMixin<EventTypes, type
           this.updateFontSelectorList();
         }
       }
-      UI.ARIAUtils.alert(i18nString(UIStrings.fontSelectorDeletedAtIndexS, {PH1: index}));
+      UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.fontSelectorDeletedAtIndexS, {PH1: index}));
     }
     this.onFontSelectorChanged();
     this.resizePopout();
@@ -734,7 +734,8 @@ class FontPropertyInputs {
   private createTypeToggle(field: Element, jslogContext: string): void {
     const displaySwitcher = field.createChild('div', 'spectrum-switcher');
     const icon = new IconButton.Icon.Icon();
-    icon.data = {iconName: 'fold-more', color: 'var(--icon-default)', width: '16px', height: '16px'};
+    icon.name = 'fold-more';
+    icon.classList.add('medium');
     displaySwitcher.appendChild(icon);
     UI.UIUtils.setTitle(displaySwitcher, i18nString(UIStrings.sToggleInputType, {PH1: this.propertyName}));
     displaySwitcher.tabIndex = 0;
@@ -754,7 +755,7 @@ class FontPropertyInputs {
       this.unitInput.hidden = true;
       this.selectorInput.hidden = false;
       this.showSliderMode = false;
-      UI.ARIAUtils.alert(i18nString(UIStrings.selectorInputMode));
+      UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.selectorInputMode));
     } else {
       // Show sliderinput type
       this.sliderInput.hidden = false;
@@ -762,7 +763,7 @@ class FontPropertyInputs {
       this.unitInput.hidden = false;
       this.selectorInput.hidden = true;
       this.showSliderMode = true;
-      UI.ARIAUtils.alert(i18nString(UIStrings.sliderInputMode));
+      UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.sliderInputMode));
     }
   }
 

package/front_end/ui/legacy/components/inline_editor/FontEditorUnitConverter.ts

@@ -30,7 +30,7 @@ async function getEmMultiplier(isFontSizeProperty?: boolean): Promise<number> {
 async function getRemMultiplier(): Promise<number> {
   const selectedNode = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
   const htmlNode = findHtmlNode(selectedNode);
-  if (!htmlNode || !htmlNode.id) {
+  if (!htmlNode?.id) {
     return 16;
   }
   const [model] =