npm - chrome-devtools-frontend - Versions diffs - 1.0.1386602 → 1.0.1402249 - Mend

chrome-devtools-frontend 1.0.1386602 → 1.0.1402249

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1404) hide show

package/front_end/ui/components/docs/{shortcut_dialog/basic.html → dialog/shortcut_dialog.html} RENAMED Viewed

@@ -23,6 +23,6 @@
   <body>
     <div id="container"></div>
-    <script src="./basic.js" type="module"></script>
+    <script src="./shortcut_dialog.js" type="module"></script>
   </body>
 </html>

package/front_end/ui/components/docs/{shortcut_dialog/basic.ts → dialog/shortcut_dialog.ts} RENAMED Viewed

@@ -2,9 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-import * as ComponentHelpers from '../../../../../front_end/ui/components/helpers/helpers.js';
-import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';  // eslint-disable-line rulesdir/es_modules_import
-import * as Dialogs from '../../../../ui/components/dialogs/dialogs.js';
+import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';  // eslint-disable-line rulesdir/es-modules-import
+import * as Dialogs from '../../dialogs/dialogs.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
 await ComponentHelpers.ComponentServerSetup.setup();
 await FrontendHelpers.initializeGlobalVars();
@@ -14,11 +14,11 @@ shortcutDialog.data = {
   shortcuts: [
     {
       title: 'First Shortcut Title',
-      bindings: ['Ctrl+E'],
+      bindings: [['Ctrl+E']],
     },
     {
       title: 'Second Shortcut Title',
-      bindings: ['Ctrl+Enter', 'F8'],
+      bindings: [['Ctrl', 'Enter'], ['F8']],
     },
   ],
 };

package/front_end/ui/components/docs/menu/basic.ts CHANGED Viewed

@@ -35,7 +35,6 @@ const menu = new Menus.Menu.Menu();
 menu.origin = button;
 menu.open = false;
 menu.showDivider = true;
-menu.showConnector = true;
 menuItems.forEach(item => {
   const menuItem = new Menus.Menu.MenuItem();

package/front_end/ui/components/docs/performance_panel/basic.ts CHANGED Viewed

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 import * as Common from '../../../../core/common/common.js';
-import * as Root from '../../../../core/root/root.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import * as Bindings from '../../../../models/bindings/bindings.js';
 import * as Workspace from '../../../../models/workspace/workspace.js';
@@ -102,10 +101,6 @@ const traceUrl = params.get('loadTimelineFromURL');
 const nodeMode = params.get('isNode');
 const isNodeMode = nodeMode === 'true' ? true : false;
-// These are both enabled by default in Chrome M131 and will be removed in M132.
-Root.Runtime.experiments.setEnabled(Root.Runtime.ExperimentName.TIMELINE_INSIGHTS, true);
-Root.Runtime.experiments.setEnabled(Root.Runtime.ExperimentName.TIMELINE_ANNOTATIONS, true);
 const timeline = Timeline.TimelinePanel.TimelinePanel.instance({forceNew: true, isNode: isNodeMode});
 const container = document.getElementById('container');
 if (!container) {

package/front_end/ui/components/docs/performance_panel/timeline_history_manager.ts CHANGED Viewed

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-import * as Root from '../../../../core/root/root.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as Timeline from '../../../../panels/timeline/timeline.js';
 import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
@@ -13,8 +12,6 @@ import * as ComponentSetup from '../../helpers/helpers.js';
 await FrontendHelpers.initializeGlobalVars();
 await ComponentSetup.ComponentServerSetup.setup();
-Root.Runtime.experiments.setEnabled(Root.Runtime.ExperimentName.TIMELINE_OBSERVATIONS, true);
 UI.ActionRegistration.registerActionExtension({
   actionId: 'timeline.show-history',
   category: UI.ActionRegistration.ActionCategory.PERFORMANCE,

package/front_end/ui/components/docs/radio_button/basic.html ADDED Viewed

@@ -0,0 +1,23 @@
+<!--
+  Copyright 2024 The Chromium Authors. All rights reserved.
+  Use of this source code is governed by a BSD-style license that can be
+  found in the LICENSE file.
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Basic Radio Button example</title>
+  </head>
+  <body>
+    <div id="container">
+    </div>
+    <script type="module" src="./basic.js"></script>
+    <style>
+      fieldset { label { display: block; } }
+    </style>
+  </body>
+</html>

package/front_end/ui/components/docs/radio_button/basic.ts ADDED Viewed

@@ -0,0 +1,50 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+import * as UI from '../../../legacy/legacy.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
+await ComponentHelpers.ComponentServerSetup.setup();
+function radioExample({name, tabbable, disabled}: {
+  name: string,
+  tabbable: boolean,
+  disabled: boolean,
+}): HTMLElement {
+  const example = document.createElement('fieldset');
+  example.style.marginTop = '20px';
+  const legend = document.createElement('legend');
+  legend.textContent = name;
+  const list = document.createElement('div');
+  for (let i = 0; i < 3; ++i) {
+    const {label, radio} = UI.UIUtils.createRadioButton(name, `Option #${i + 1}`, name);
+    radio.tabIndex = tabbable ? 0 : -1;
+    radio.disabled = disabled;
+    radio.checked = i === 0;
+    list.append(label);
+  }
+  example.append(legend, list);
+  return example;
+}
+function init(): void {
+  const container = document.getElementById('container');
+  if (!container) {
+    return;
+  }
+  container.style.padding = '42px 42px';
+  container.style.margin = '42px 42px';
+  container.style.border = '1px solid rgb(0 0 0 / 20%)';
+  // Basic
+  container.appendChild(radioExample({name: 'basic', tabbable: true, disabled: false}));
+  // Not tab reachable
+  container.appendChild(radioExample({name: 'not-table-reachable', tabbable: false, disabled: false}));
+  // Disabled
+  container.appendChild(radioExample({name: 'disabled', tabbable: true, disabled: true}));
+}
+init();

package/front_end/ui/components/docs/recorder_control_button/basic.ts CHANGED Viewed

@@ -4,7 +4,7 @@
 import * as ComponentHelpers from '../../../../../front_end/ui/components/helpers/helpers.js';
 import * as RecorderComponents from '../../../../panels/recorder/components/components.js';
-import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';  // eslint-disable-line rulesdir/es_modules_import
+import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';  // eslint-disable-line rulesdir/es-modules-import
 await ComponentHelpers.ComponentServerSetup.setup();
 await FrontendHelpers.initializeGlobalVars();

package/front_end/ui/components/docs/recorder_create_recording_view/basic.ts CHANGED Viewed

@@ -4,7 +4,7 @@
 import * as ComponentHelpers from '../../../../../front_end/ui/components/helpers/helpers.js';
 import * as RecorderComponents from '../../../../panels/recorder/components/components.js';
-import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';  // eslint-disable-line rulesdir/es_modules_import
+import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';  // eslint-disable-line rulesdir/es-modules-import
 await ComponentHelpers.ComponentServerSetup.setup();
 await FrontendHelpers.initializeGlobalVars();

package/front_end/ui/components/docs/recorder_recording_list_view/basic.ts CHANGED Viewed

@@ -4,7 +4,7 @@
 import * as ComponentHelpers from '../../../../../front_end/ui/components/helpers/helpers.js';
 import * as RecorderComponents from '../../../../panels/recorder/components/components.js';
-import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';  // eslint-disable-line rulesdir/es_modules_import
+import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';  // eslint-disable-line rulesdir/es-modules-import
 await ComponentHelpers.ComponentServerSetup.setup();
 await FrontendHelpers.initializeGlobalVars();

package/front_end/ui/components/docs/recorder_recording_view/basic.ts CHANGED Viewed

@@ -5,7 +5,7 @@
 import * as ComponentHelpers from '../../../../../front_end/ui/components/helpers/helpers.js';
 import * as RecorderComponents from '../../../../panels/recorder/components/components.js';
 import * as Models from '../../../../panels/recorder/models/models.js';
-import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';  // eslint-disable-line rulesdir/es_modules_import
+import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';  // eslint-disable-line rulesdir/es-modules-import
 await ComponentHelpers.ComponentServerSetup.setup();
 await FrontendHelpers.initializeGlobalVars();

package/front_end/ui/components/docs/recorder_select_button/basic.ts CHANGED Viewed

@@ -7,7 +7,7 @@ import * as LitHtml from '../../../../../front_end/ui/lit-html/lit-html.js';
 import * as RecorderComponents from '../../../../panels/recorder/components/components.js';
 import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
-const {html} = LitHtml;  // eslint-disable-line rulesdir/es_modules_import
+const {html} = LitHtml;  // eslint-disable-line rulesdir/es-modules-import
 await ComponentHelpers.ComponentServerSetup.setup();
 await FrontendHelpers.initializeGlobalVars();

package/front_end/ui/components/docs/recorder_split_view/basic.ts CHANGED Viewed

@@ -5,7 +5,7 @@
 import '../../../../panels/recorder/components/components.js';
 import * as ComponentHelpers from '../../../../../front_end/ui/components/helpers/helpers.js';
-import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';  // eslint-disable-line rulesdir/es_modules_import
+import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';  // eslint-disable-line rulesdir/es-modules-import
 await ComponentHelpers.ComponentServerSetup.setup();
 await FrontendHelpers.initializeGlobalVars();

package/front_end/ui/components/docs/recorder_start_view/basic.ts CHANGED Viewed

@@ -4,7 +4,7 @@
 import * as ComponentHelpers from '../../../../../front_end/ui/components/helpers/helpers.js';
 import * as RecorderComponents from '../../../../panels/recorder/components/components.js';
-import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';  // eslint-disable-line rulesdir/es_modules_import
+import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';  // eslint-disable-line rulesdir/es-modules-import
 await ComponentHelpers.ComponentServerSetup.setup();
 await FrontendHelpers.initializeGlobalVars();

package/front_end/ui/components/docs/select_menu/basic.ts CHANGED Viewed

@@ -75,7 +75,7 @@ const menus = [
     ],
     buttonTitle: 'Show dialog',
     position: Dialogs.Dialog.DialogVerticalPosition.BOTTOM,
-    showConnector: true,
+    showArrow: true,
   },
   {
     items: [
@@ -103,7 +103,7 @@ const menus = [
     ],
     buttonTitle: 'Show dialog',
     position: Dialogs.Dialog.DialogVerticalPosition.TOP,
-    showConnector: true,
+    showArrow: true,
     hasGroups: true,
   },
   {
@@ -148,12 +148,11 @@ menus.forEach((menu, i) => {
     selectMenu.buttonTitle = menu.buttonTitle;
   }
   selectMenu.position = menu.position || Dialogs.Dialog.DialogVerticalPosition.BOTTOM;
-  selectMenu.showConnector = Boolean(menu.showConnector);
   const firstMenuGroup = new Menus.SelectMenu.SelectMenuGroup();
   firstMenuGroup.name = 'Group 1';
   const secondMenuGroup = new Menus.SelectMenu.SelectMenuGroup();
   secondMenuGroup.name = 'Group 2';
-  selectMenu.showArrow = Boolean(menu.showArrow) || Boolean(menu.showConnector);
+  selectMenu.showArrow = Boolean(menu.showArrow);
   selectMenu.disabled = Boolean(menu.disabled);
   menu.items.forEach((item, j) => {
     const selectMenuItem = new Menus.Menu.MenuItem();

package/front_end/ui/components/docs/slider/basic.html ADDED Viewed

@@ -0,0 +1,20 @@
+<!--
+  Copyright 2024 The Chromium Authors. All rights reserved.
+  Use of this source code is governed by a BSD-style license that can be
+  found in the LICENSE file.
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Basic Slider example</title>
+  </head>
+  <body>
+    <div id="container">
+    </div>
+    <script type="module" src="./basic.js"></script>
+  </body>
+</html>

package/front_end/ui/components/docs/slider/basic.ts ADDED Viewed

@@ -0,0 +1,62 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+import * as UI from '../../../legacy/legacy.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
+await ComponentHelpers.ComponentServerSetup.setup();
+function sliderExample({min, max, tabIndex, disabled}: {
+  min: number,
+  max: number,
+  tabIndex: number,
+  disabled: boolean,
+}): HTMLElement {
+  const example = document.createElement('div');
+  example.style.marginTop = '20px';
+  const minExplanation = document.createElement('div');
+  const maxExplanation = document.createElement('div');
+  const valueExplanation = document.createElement('div');
+  const disabledExplanation = document.createElement('div');
+  const tabbableExplanation = document.createElement('div');
+  const component = UI.UIUtils.createSlider(min, max, tabIndex);
+  component.disabled = disabled;
+  minExplanation.textContent = `min: ${min}`;
+  maxExplanation.textContent = `max: ${max}`;
+  valueExplanation.textContent = `value: ${component.value}`;
+  disabledExplanation.textContent = `is disabled? ${component.disabled}`;
+  tabbableExplanation.textContent = `is tabbable? ${component.tabIndex >= 0}`;
+  component.addEventListener('change', () => {
+    valueExplanation.textContent = `value: ${component.value}`;
+  });
+  example.appendChild(component);
+  example.appendChild(minExplanation);
+  example.appendChild(maxExplanation);
+  example.appendChild(valueExplanation);
+  example.appendChild(disabledExplanation);
+  example.appendChild(tabbableExplanation);
+  return example;
+}
+function init(): void {
+  const container = document.getElementById('container');
+  if (!container) {
+    return;
+  }
+  container.style.padding = '42px 42px';
+  container.style.margin = '42px 42px';
+  container.style.border = '1px solid rgb(0 0 0 / 20%)';
+  // Basic
+  container.appendChild(sliderExample({min: 0, max: 100, tabIndex: 0, disabled: false}));
+  // Not tab reachable
+  container.appendChild(sliderExample({min: 0, max: 100, tabIndex: -1, disabled: false}));
+  // Disabled
+  container.appendChild(sliderExample({min: 0, max: 100, tabIndex: 0, disabled: true}));
+}
+init();

package/front_end/ui/components/expandable_list/ExpandableList.test.ts CHANGED Viewed

@@ -24,7 +24,7 @@ describe('ExpandableList', () => {
     // checks that list is not expanded initially
     let rows = list.shadowRoot.querySelectorAll('.row');
-    assert.strictEqual(rows.length, 1);
+    assert.lengthOf(rows, 1);
     const iconSpan = list.shadowRoot.querySelector<HTMLElement>('span.arrow-icon');
     assert.isNotNull(iconSpan);
     assert.isFalse(iconSpan?.classList.contains('expanded'));
@@ -38,7 +38,7 @@ describe('ExpandableList', () => {
     // checks that list is expanded
     assert.isTrue(iconSpan?.classList.contains('expanded'));
     rows = list.shadowRoot.querySelectorAll('.row');
-    assert.strictEqual(rows.length, 2);
+    assert.lengthOf(rows, 2);
   });
   it('does not render when given 0 rows', async () => {
@@ -51,7 +51,7 @@ describe('ExpandableList', () => {
     // checks that list is not rendered
     const rows = list.shadowRoot.querySelectorAll('.row');
-    assert.strictEqual(rows.length, 0);
+    assert.lengthOf(rows, 0);
     const iconSpan = list.shadowRoot.querySelector<HTMLElement>('span.arrow-icon');
     assert.isNull(iconSpan);
   });
@@ -68,7 +68,7 @@ describe('ExpandableList', () => {
     // checks that list contains 1 row
     const rows = list.shadowRoot.querySelectorAll('.row');
-    assert.strictEqual(rows.length, 1);
+    assert.lengthOf(rows, 1);
     // checks that list does not render button for expanding
     const iconSpan = list.shadowRoot.querySelector<HTMLElement>('span.arrow-icon');

package/front_end/ui/components/helpers/helpers.test.ts CHANGED Viewed

@@ -3,14 +3,12 @@
 // found in the LICENSE file.
 import * as LitHtml from '../../lit-html/lit-html.js';
-import * as Coordinator from '../render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../render_coordinator/render_coordinator.js';
 import * as ComponentHelpers from './helpers.js';
 const {html} = LitHtml;
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 const TestElement = class extends HTMLElement {
   renderCount = 0;
   renderAsyncCount = 0;
@@ -93,7 +91,7 @@ describe('ComponentHelpers', () => {
       void ComponentHelpers.ScheduledRender.scheduleRender(element, element.renderBound);
       void ComponentHelpers.ScheduledRender.scheduleRender(element, element.renderBound);
-      await coordinator.done();
+      await RenderCoordinator.done();
       assert.strictEqual(element.renderCount, 1);
     });
@@ -105,7 +103,7 @@ describe('ComponentHelpers', () => {
         await element.renderAsyncBound();
       });
-      await coordinator.done();
+      await RenderCoordinator.done();
       assert.strictEqual(element.renderAsyncCount, 2);
     });
@@ -117,7 +115,7 @@ describe('ComponentHelpers', () => {
         element.renderBound();
       });
-      await coordinator.done();
+      await RenderCoordinator.done();
       assert.strictEqual(element.renderCount, 2);
     });
   });

package/front_end/ui/components/helpers/scheduled-render.ts CHANGED Viewed

@@ -1,13 +1,14 @@
 // Copyright 2021 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-import * as Coordinator from '../render_coordinator/render_coordinator.js';
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
+import * as RenderCoordinator from '../render_coordinator/render_coordinator.js';
 const pendingRenders = new WeakSet<HTMLElement>();
 const activeRenders = new WeakSet<HTMLElement>();
 const subsequentRender = new WeakMap<HTMLElement, () => void>();
 const wrappedCallbacks = new WeakMap<() => void, () => void>();
 export async function scheduleRender(component: HTMLElement, callback: () => void): Promise<void> {
   // If scheduleRender is called when there is already a render scheduled for this
   // component, store the callback against the renderer for after the current
@@ -47,7 +48,7 @@ export async function scheduleRender(component: HTMLElement, callback: () => voi
   }
   // Track that there is render rendering, wait for it to finish, and stop tracking.
-  await coordinator.write(wrappedCallback);
+  await RenderCoordinator.write(wrappedCallback);
   // If during the render there was another schedule render call, get
   // the callback and schedule it to happen now.

package/front_end/ui/components/highlighting/HighlightManager.test.ts CHANGED Viewed

@@ -36,15 +36,15 @@ describe('HighlightManager', () => {
   it('correctly translates ranges', () => {
     // "text"
     //    ^^
-    assert.deepStrictEqual(toText(walk('text').nextRange(2, 2)), 'xt');
+    assert.deepEqual(toText(walk('text').nextRange(2, 2)), 'xt');
     // "abcdef"
     //    ^ ^
-    assert.deepStrictEqual(toText(walk('abc<p>def</p>').nextRange(2, 3)), 'cde');
+    assert.deepEqual(toText(walk('abc<p>def</p>').nextRange(2, 3)), 'cde');
     // "abcdefghi"
     //    ^    ^
-    assert.deepStrictEqual(toText(walk('abc<p>def</p>ghi').nextRange(2, 6)), 'cdefgh');
+    assert.deepEqual(toText(walk('abc<p>def</p>ghi').nextRange(2, 6)), 'cdefgh');
     // ""
     //  ^
@@ -67,9 +67,9 @@ describe('HighlightManager', () => {
     // "abcdefghi"
     //  ^^^^^^^^^
     const walker = walk('abc<p>def</p>ghi');
-    assert.deepStrictEqual(toText(walker.nextRange(0, 3)), 'abc');
-    assert.deepStrictEqual(toText(walker.nextRange(3, 3)), 'def');
-    assert.deepStrictEqual(toText(walker.nextRange(6, 3)), 'ghi');
+    assert.deepEqual(toText(walker.nextRange(0, 3)), 'abc');
+    assert.deepEqual(toText(walker.nextRange(3, 3)), 'def');
+    assert.deepEqual(toText(walker.nextRange(6, 3)), 'ghi');
   });
   it('correctly highlights ranges', () => {
@@ -84,6 +84,6 @@ describe('HighlightManager', () => {
     ]);
     const highlight = CSS.highlights.get(Highlighting.HighlightManager.HIGHLIGHT_REGISTRY);
     assert.strictEqual(highlight?.size, 3);
-    assert.deepStrictEqual(Array.from(highlight!.keys()), ranges);
+    assert.deepEqual(Array.from(highlight!.keys()), ranges);
   });
 });

package/front_end/ui/components/icon_button/FileSourceIcon.ts CHANGED Viewed

@@ -16,7 +16,6 @@ export interface FileSourceIconData {
 }
 export class FileSourceIcon extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-file-source-icon`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #iconType: string;

package/front_end/ui/components/icon_button/IconButton.test.ts CHANGED Viewed

@@ -44,7 +44,7 @@ describe('IconButton', () => {
     const {shadowRoot} = renderIconButton({clickHandler: () => {}, groups: [defaultIcon]});
     const icons = extractIconGroups(shadowRoot);
-    assert.strictEqual(icons.length, 1);
+    assert.lengthOf(icons, 1);
     assert.deepEqual(icons.map(c => c.label), ['1']);
     const iconNames = icons.map(c => 'iconName' in c.iconData ? c.iconData.iconName : undefined);
     assert.deepEqual(iconNames, ['cross-circle']);
@@ -64,7 +64,7 @@ describe('IconButton', () => {
     });
     const icons = extractIconGroups(shadowRoot);
-    assert.strictEqual(icons.length, 2);
+    assert.lengthOf(icons, 2);
     assert.deepEqual(icons.map(c => c.label), ['1', '12']);
     const iconNames = icons.map(c => 'iconName' in c.iconData ? c.iconData.iconName : undefined);
     assert.deepEqual(iconNames, ['cross-circle', 'warning']);
@@ -75,7 +75,7 @@ describe('IconButton', () => {
       const {shadowRoot} = renderIconButton({clickHandler: () => {}, groups: [defaultIcon], compact: true});
       const icons = extractIconGroups(shadowRoot);
-      assert.strictEqual(icons.length, 1);
+      assert.lengthOf(icons, 1);
       assert.deepEqual(icons.map(c => c.label), [null]);
       const iconNames = icons.map(c => 'iconName' in c.iconData ? c.iconData.iconName : undefined);
       assert.deepEqual(iconNames, ['cross-circle']);
@@ -96,7 +96,7 @@ describe('IconButton', () => {
       });
       const icons = extractIconGroups(shadowRoot);
-      assert.strictEqual(icons.length, 1);
+      assert.lengthOf(icons, 1);
       assert.deepEqual(icons.map(c => c.label), [null]);
       const iconNames = icons.map(c => 'iconName' in c.iconData ? c.iconData.iconName : undefined);
       assert.deepEqual(iconNames, ['cross-circle']);
@@ -117,7 +117,7 @@ describe('IconButton', () => {
     });
     const icons = extractIconGroups(shadowRoot);
-    assert.strictEqual(icons.length, 1);
+    assert.lengthOf(icons, 1);
     assert.deepEqual(icons.map(c => c.label), ['1']);
     const iconNames = icons.map(c => 'iconName' in c.iconData ? c.iconData.iconName : undefined);
     assert.deepEqual(iconNames, ['cross-circle']);
@@ -138,7 +138,7 @@ describe('IconButton', () => {
     });
     const icons = extractIconGroups(shadowRoot);
-    assert.strictEqual(icons.length, 1);
+    assert.lengthOf(icons, 1);
     const icon = icons[0];
     assert.strictEqual(icon.iconData.height, '2ex');
     assert.strictEqual(icon.iconData.width, '3ex');
@@ -159,7 +159,7 @@ describe('IconButton', () => {
       });
       const iconsBefore = extractIconGroups(shadowRoot);
-      assert.strictEqual(iconsBefore.length, 2);
+      assert.lengthOf(iconsBefore, 2);
       assert.deepEqual(iconsBefore.map(c => c.label), ['1', '31']);
       const iconNamesBefore = iconsBefore.map(c => 'iconName' in c.iconData ? c.iconData.iconName : undefined);
       assert.deepEqual(iconNamesBefore, ['cross-circle', 'warning']);
@@ -168,7 +168,7 @@ describe('IconButton', () => {
       component.data = {...data, groups: data.groups.map((group, index) => ({...group, text: `${index}`}))};
       const iconsAfter = extractIconGroups(shadowRoot);
-      assert.strictEqual(iconsAfter.length, 2);
+      assert.lengthOf(iconsAfter, 2);
       assert.deepEqual(iconsAfter.map(c => c.label), ['0', '1']);
       const iconNamesAfter = iconsAfter.map(c => 'iconName' in c.iconData ? c.iconData.iconName : undefined);
       assert.deepEqual(iconNamesAfter, ['cross-circle', 'warning']);

package/front_end/ui/components/icon_button/icon.css CHANGED Viewed

@@ -32,7 +32,7 @@ span {
   display: block;
   width: 100%;
   height: 100%;
-  background-color: currentColor;
+  background-color: currentcolor;
   mask: var(--icon-url) center / contain no-repeat;
   /* Default to a (scaled) 1x1 filled mask image, so that the `Icon` renders as transparent until a "name" is set */