chrome-devtools-frontend 1.0.1386602 → 1.0.1402249

package/front_end/panels/protocol_monitor/components/JSONEditor.test.ts

@@ -14,15 +14,13 @@ import {
 import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
 import {expectCall} from '../../../testing/ExpectStubCall.js';
 import * as Menus from '../../../ui/components/menus/menus.js';
-import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import type * as SuggestionInput from '../../../ui/components/suggestion_input/suggestion_input.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as ProtocolMonitor from '../protocol_monitor.js';
 
 import * as ProtocolComponents from './components.js';
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 describeWithEnvironment('JSONEditor', () => {
   const renderJSONEditor = () => {
     const jsonEditor = new ProtocolComponents.JSONEditor.JSONEditor();
@@ -369,7 +367,7 @@ describeWithEnvironment('JSONEditor', () => {
          const parameterRecorderInput = inputs[1];
          const value = parameterRecorderInput.renderRoot.textContent?.replaceAll(/\s/g, '');
          const expectedValue = 'test';
-         assert.deepStrictEqual(value, expectedValue);
+         assert.deepEqual(value, expectedValue);
        });
 
     it('should show the command written in the input bar inside the editor when parameters are arrays with the correct value',
@@ -385,7 +383,7 @@ describeWithEnvironment('JSONEditor', () => {
          const parameterRecorderInput = inputs[1];
          const value = parameterRecorderInput.renderRoot.textContent?.replaceAll(/\s/g, '');
          const expectedValue = 'test';
-         assert.deepStrictEqual(value, expectedValue);
+         assert.deepEqual(value, expectedValue);
        });
 
     it('should show the command written in the input bar inside the editor when parameters are object with the correct value',
@@ -405,7 +403,7 @@ describeWithEnvironment('JSONEditor', () => {
          const parameterRecorderInput = inputs[1];
          const value = parameterRecorderInput.renderRoot.textContent?.replaceAll(/\s/g, '');
          const expectedValue = 'test1';
-         assert.deepStrictEqual(value, expectedValue);
+         assert.deepEqual(value, expectedValue);
        });
 
     it('should should every parameter of a command as undefined even if some parameters have not been entered inside the input bar',
@@ -428,7 +426,7 @@ describeWithEnvironment('JSONEditor', () => {
          const shadowRoot = jsonEditor.renderRoot;
          const displayedParameters = shadowRoot.querySelectorAll('.parameter');
          // Two parameters (test and test2) should be displayed because in the metadata, Test.test5 accepts two parameters
-         assert.deepStrictEqual(displayedParameters.length, 2);
+         assert.lengthOf(displayedParameters, 2);
        });
     it('does not output parameters if the input is invalid json', async () => {
       const cdpCommand = '"command": "Test.test", "parameters":';
@@ -436,7 +434,7 @@ describeWithEnvironment('JSONEditor', () => {
 
       const {inputs} = await renderEditorForCommand(command, parameters);
 
-      assert.deepStrictEqual(inputs.length, Object.keys(parameters).length + 1);
+      assert.deepEqual(inputs.length, Object.keys(parameters).length + 1);
     });
 
     it('does not output parameters if the parameters field is not an object', async () => {
@@ -446,7 +444,7 @@ describeWithEnvironment('JSONEditor', () => {
 
       const {inputs} = await renderEditorForCommand(command, parameters);
 
-      assert.deepStrictEqual(inputs.length, Object.keys(parameters).length + 1);
+      assert.deepEqual(inputs.length, Object.keys(parameters).length + 1);
     });
 
     it('does not output parameters if there is no parameter inserted in the input bar', async () => {
@@ -456,7 +454,7 @@ describeWithEnvironment('JSONEditor', () => {
 
       const {inputs} = await renderEditorForCommand(command, parameters);
 
-      assert.deepStrictEqual(inputs.length, Object.keys(parameters).length + 1);
+      assert.deepEqual(inputs.length, Object.keys(parameters).length + 1);
     });
 
     it('checks that the command input field remains empty when there is no command parameter entered', async () => {
@@ -470,7 +468,7 @@ describeWithEnvironment('JSONEditor', () => {
 
       const {displayedCommand} = await renderEditorForCommand(command, parameters);
 
-      assert.deepStrictEqual(displayedCommand, '');
+      assert.deepEqual(displayedCommand, '');
     });
 
     it('checks that the command input field remains if the command is not supported', async () => {
@@ -479,7 +477,7 @@ describeWithEnvironment('JSONEditor', () => {
       const {command, parameters} = ProtocolMonitor.ProtocolMonitor.parseCommandInput(JSON.stringify(cdpCommand));
       const {displayedCommand} = await renderEditorForCommand(command, parameters);
 
-      assert.deepStrictEqual(displayedCommand, '');
+      assert.deepEqual(displayedCommand, '');
     });
   });
 
@@ -502,12 +500,12 @@ describeWithEnvironment('JSONEditor', () => {
       split.setMainWidget(dataGrid);
       split.setSidebarWidget(editorWidget);
       split.toggleSidebar();
-      await coordinator.done();
+      await RenderCoordinator.done();
 
       // The first input bar corresponds to the filter bar, so we query the second one which corresponds to the CDP one.
       const toolbarInput = dataGrid.element.shadowRoot?.querySelectorAll('.toolbar')[1].shadowRoot?.querySelector(
           '.toolbar-input-prompt');
-      assert.deepStrictEqual(toolbarInput?.innerHTML, '{"command":"Test.test","parameters":{"test":"test"}}');
+      assert.deepEqual(toolbarInput?.innerHTML, '{"command":"Test.test","parameters":{"test":"test"}}');
     });
 
     it('should update the selected target inside the input bar', async () => {
@@ -526,10 +524,10 @@ describeWithEnvironment('JSONEditor', () => {
       split.setSidebarWidget(editorWidget);
 
       split.toggleSidebar();
-      await coordinator.done();
+      await RenderCoordinator.done();
 
       // Should be index 1 because the targetId equals "value2" which corresponds to the index number 1
-      assert.deepStrictEqual(selector.selectedIndex(), 1);
+      assert.deepEqual(selector.selectedIndex(), 1);
     });
 
     // Flaky test.
@@ -545,12 +543,12 @@ describeWithEnvironment('JSONEditor', () => {
           split.setSidebarWidget(editorWidget);
           split.toggleSidebar();
 
-          await coordinator.done();
+          await RenderCoordinator.done();
 
           // The first input bar corresponds to the filter bar, so we query the second one which corresponds to the CDP one.
           const toolbarInput = dataGrid.element.shadowRoot?.querySelectorAll('.toolbar')[1].shadowRoot?.querySelector(
               '.toolbar-input-prompt');
-          assert.deepStrictEqual(toolbarInput?.innerHTML, '');
+          assert.deepEqual(toolbarInput?.innerHTML, '');
         });
   });
   describe('Descriptions', () => {
@@ -578,7 +576,7 @@ describeWithEnvironment('JSONEditor', () => {
       await renderHoveredElement(param);
       const popupContent = serializePopupContent();
       const expectedPopupContent = 'test.Type:arrayLearnMore';
-      assert.deepStrictEqual(popupContent, expectedPopupContent);
+      assert.deepEqual(popupContent, expectedPopupContent);
     });
 
     it('should show the popup with the correct description for the description of command', async () => {
@@ -595,7 +593,7 @@ describeWithEnvironment('JSONEditor', () => {
       const popupContent = serializePopupContent();
 
       const expectedPopupContent = 'Description1.Returns:Test1LearnMore';
-      assert.deepStrictEqual(popupContent, expectedPopupContent);
+      assert.deepEqual(popupContent, expectedPopupContent);
     });
   });
 
@@ -611,7 +609,7 @@ describeWithEnvironment('JSONEditor', () => {
       await populateMetadata(jsonEditor);
 
       const suggestions = await renderSuggestionBox(command, jsonEditor, enumsByName);
-      assert.deepStrictEqual(suggestions, ['test', 'test1', 'test2']);
+      assert.deepEqual(suggestions, ['test', 'test1', 'test2']);
     });
 
     it('should display suggestion box with correct suggestions when the parameter is a boolean', async () => {
@@ -623,7 +621,7 @@ describeWithEnvironment('JSONEditor', () => {
 
       const suggestions = await renderSuggestionBox(command, jsonEditor);
 
-      assert.deepStrictEqual(suggestions, ['false', 'true']);
+      assert.deepEqual(suggestions, ['false', 'true']);
     });
 
     it('should show the suggestion box for enum parameters nested inside arrays', async () => {
@@ -675,7 +673,7 @@ describeWithEnvironment('JSONEditor', () => {
         return (item.textContent.replaceAll(/\s/g, ''));
       });
 
-      assert.deepStrictEqual(suggestions, ['test', 'test1', 'test2']);
+      assert.deepEqual(suggestions, ['test', 'test1', 'test2']);
     });
 
     it('should update the values inside the suggestion box when the command changes', async () => {
@@ -695,7 +693,7 @@ describeWithEnvironment('JSONEditor', () => {
 
       const newSuggestions = await renderSuggestionBox(newCommand, jsonEditor, enumsByName);
 
-      assert.deepStrictEqual(newSuggestions, ['newtest', 'newtest1', 'newtest2']);
+      assert.deepEqual(newSuggestions, ['newtest', 'newtest1', 'newtest2']);
     });
 
     it('should not display suggestion box when the parameter is neither a string or a boolean', async () => {
@@ -707,7 +705,7 @@ describeWithEnvironment('JSONEditor', () => {
 
       const suggestions = await renderSuggestionBox(command, jsonEditor);
 
-      assert.deepStrictEqual(suggestions, []);
+      assert.deepEqual(suggestions, []);
     });
   });
 
@@ -720,7 +718,7 @@ describeWithEnvironment('JSONEditor', () => {
 
          const expectedPlaceholder = '<empty_string>';
 
-         assert.deepStrictEqual(placeholder, expectedPlaceholder);
+         assert.deepEqual(placeholder, expectedPlaceholder);
        });
 
     it('should show 0 as a value inside input when clicking on plus button for optional number parameter', async () => {
@@ -730,7 +728,7 @@ describeWithEnvironment('JSONEditor', () => {
 
       const expectedValue = 0;
 
-      assert.deepStrictEqual(value, expectedValue);
+      assert.deepEqual(value, expectedValue);
     });
 
     it('should show false as a value inside input when clicking on plus button for optional boolean parameter',
@@ -741,7 +739,7 @@ describeWithEnvironment('JSONEditor', () => {
 
          const expectedValue = false;
 
-         assert.deepStrictEqual(value, expectedValue);
+         assert.deepEqual(value, expectedValue);
        });
 
     it('should show the keys with default values when clicking of plus button for optional object parameters',
@@ -786,7 +784,7 @@ describeWithEnvironment('JSONEditor', () => {
          // The -1 is need to not take into account the input for the command
          const numberOfInputs = jsonEditor.renderRoot.querySelectorAll('devtools-suggestion-input').length - 1;
 
-         assert.deepStrictEqual(numberOfInputs, 2);
+         assert.deepEqual(numberOfInputs, 2);
        });
   });
 
@@ -827,7 +825,7 @@ describeWithEnvironment('JSONEditor', () => {
 
          const expectedValues = ['', ''];
 
-         assert.deepStrictEqual(values, expectedValues);
+         assert.deepEqual(values, expectedValues);
        });
 
     it('should reset the value of array parameter to empty array when clicking on clear button', async () => {
@@ -868,7 +866,7 @@ describeWithEnvironment('JSONEditor', () => {
 
       const value = jsonEditor.parameters[0].value;
 
-      assert.deepStrictEqual(value, []);
+      assert.deepEqual(value, []);
     });
 
     it('should reset the value of optional object parameter to undefined after clicking on clear button', async () => {
@@ -924,7 +922,7 @@ describeWithEnvironment('JSONEditor', () => {
       // The -1 is need to not take into account the input for the command
       const numberOfInputs = jsonEditor.renderRoot.querySelectorAll('devtools-suggestion-input').length - 1;
 
-      assert.deepStrictEqual(numberOfInputs, 0);
+      assert.deepEqual(numberOfInputs, 0);
     });
   });
 
@@ -962,7 +960,7 @@ describeWithEnvironment('JSONEditor', () => {
       }
 
       const resultedParams = jsonEditor.getParameters();
-      assert.deepStrictEqual(expectedParams, resultedParams);
+      assert.deepEqual(expectedParams, resultedParams);
     });
 
     it('should add parameters when clicking on "Plus" button for array parameters', async () => {
@@ -996,7 +994,7 @@ describeWithEnvironment('JSONEditor', () => {
       // The -1 is need to not take into account the input for the command
       const numberOfInputs = jsonEditor.renderRoot.querySelectorAll('devtools-suggestion-input').length - 1;
 
-      assert.deepStrictEqual(numberOfInputs, 2);
+      assert.deepEqual(numberOfInputs, 2);
     });
   });
 
@@ -1082,7 +1080,7 @@ describeWithEnvironment('JSONEditor', () => {
 
          const response = await responsePromise as ProtocolComponents.JSONEditor.SubmitEditorEvent;
 
-         assert.deepStrictEqual(response.data.parameters, expectedParameters);
+         assert.deepEqual(response.data.parameters, expectedParameters);
        });
 
     it('should return the parameters in a format understandable by the ProtocolMonitor when sending a command via the send button',
@@ -1114,7 +1112,7 @@ describeWithEnvironment('JSONEditor', () => {
            testName: 'testValue',
          };
 
-         assert.deepStrictEqual(response.data.parameters, expectedParameters);
+         assert.deepEqual(response.data.parameters, expectedParameters);
        });
   });
 
@@ -1153,8 +1151,8 @@ describeWithEnvironment('JSONEditor', () => {
     const inputs = jsonEditor.renderRoot.querySelectorAll('devtools-suggestion-input');
     const addButtons = jsonEditor.renderRoot.querySelectorAll('devtools-button[title="Add a parameter"]');
 
-    assert.deepStrictEqual(inputs.length, 1);
-    assert.deepStrictEqual(addButtons.length, 0);
+    assert.lengthOf(inputs, 1);
+    assert.lengthOf(addButtons, 0);
   });
 
   it('checks that the selection of a target works', async () => {
@@ -1168,7 +1166,7 @@ describeWithEnvironment('JSONEditor', () => {
     selectMenu?.dispatchEvent(event);
     const expectedId = jsonEditor.targetId;
 
-    assert.deepStrictEqual(targetId, expectedId);
+    assert.deepEqual(targetId, expectedId);
   });
 
   it('should copy the CDP command to clipboard via copy event', async () => {
@@ -1254,7 +1252,7 @@ describeWithEnvironment('JSONEditor', () => {
     const parameters = shadowRoot.querySelectorAll('.parameter');
     // This expected value is equal to 6 because there are 5 different parameters inside typesByName + 1
     // for the name of the parameter (traceConfig)
-    assert.deepStrictEqual(parameters.length, 6);
+    assert.lengthOf(parameters, 6);
   });
 
   it('should return the parameters in a format understandable by the ProtocolMonitor when sending a command with object parameter that has no typeRef found in map',
@@ -1343,7 +1341,7 @@ describeWithEnvironment('JSONEditor', () => {
          },
        };
 
-       assert.deepStrictEqual(response.data.parameters, expectedParameters);
+       assert.deepEqual(response.data.parameters, expectedParameters);
      });
 
   it('should show the custom editor for an object param that has no type ref', async () => {
@@ -1378,7 +1376,7 @@ describeWithEnvironment('JSONEditor', () => {
 
     const numberOfInputs = jsonEditor.renderRoot.querySelectorAll('devtools-suggestion-input').length - 1;
 
-    assert.deepStrictEqual(numberOfInputs, 4);
+    assert.deepEqual(numberOfInputs, 4);
   });
 
   describe('Command suggestion filter', () => {

package/front_end/panels/protocol_monitor/components/JSONEditor.ts

@@ -827,7 +827,6 @@ export class JSONEditor extends LitElement {
             .showArrow=${true}
             .sideButton=${false}
             .showSelectedItem=${true}
-            .showConnector=${false}
             .position=${Dialogs.Dialog.DialogVerticalPosition.BOTTOM}
             .buttonTitle=${targetLabel || ''}
             jslog=${VisualLogging.dropDown('targets').track({click: true})}

package/front_end/panels/recorder/RecorderController.test.ts

@@ -2,21 +2,19 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/* eslint-disable rulesdir/es_modules_import */
+/* eslint-disable rulesdir/es-modules-import */
 
 import {
   describeWithEnvironment,
   setupActionRegistry,
 } from '../../testing/EnvironmentHelpers.js';
-import * as Coordinator from '../../ui/components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../../ui/components/render_coordinator/render_coordinator.js';
 
 import * as Components from './components/components.js';
 import * as Models from './models/models.js';
 import {RecorderActions} from './recorder-actions/recorder-actions.js';
 import {RecorderController} from './recorder.js';
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 describeWithEnvironment('RecorderController', () => {
   setupActionRegistry();
 
@@ -39,7 +37,7 @@ describeWithEnvironment('RecorderController', () => {
     controller.setCurrentPageForTesting(RecorderController.Pages.RECORDING_PAGE);
     controller.setCurrentRecordingForTesting(recording);
     controller.connectedCallback();
-    await coordinator.done();
+    await RenderCoordinator.done();
     return controller;
   }
 
@@ -52,12 +50,12 @@ describeWithEnvironment('RecorderController', () => {
           RecorderController.Pages.CREATE_RECORDING_PAGE,
       );
       controller.connectedCallback();
-      await coordinator.done();
+      await RenderCoordinator.done();
 
       const createRecordingView = controller.shadowRoot?.querySelector(
           'devtools-create-recording-view',
       );
-      assert.ok(createRecordingView);
+      assert.isOk(createRecordingView);
       createRecordingView?.dispatchEvent(
           new Components.CreateRecordingView.RecordingCancelledEvent(),
       );
@@ -74,9 +72,9 @@ describeWithEnvironment('RecorderController', () => {
       const recordingView = controller.shadowRoot?.querySelector(
           'devtools-recording-view',
       );
-      assert.ok(recordingView);
+      assert.isOk(recordingView);
       recordingView?.dispatchEvent(event);
-      await coordinator.done();
+      await RenderCoordinator.done();
     }
 
     beforeEach(() => {
@@ -100,7 +98,7 @@ describeWithEnvironment('RecorderController', () => {
       );
 
       const flow = controller.getUserFlow();
-      assert.deepStrictEqual(flow, {
+      assert.deepEqual(flow, {
         title: 'test',
         steps: [
           {
@@ -133,7 +131,7 @@ describeWithEnvironment('RecorderController', () => {
       );
 
       const flow = controller.getUserFlow();
-      assert.deepStrictEqual(flow, {
+      assert.deepEqual(flow, {
         title: 'test',
         steps: [
           {
@@ -161,7 +159,7 @@ describeWithEnvironment('RecorderController', () => {
       );
 
       const flow = controller.getUserFlow();
-      assert.deepStrictEqual(flow, {
+      assert.deepEqual(flow, {
         title: 'test',
         steps: [
           {
@@ -186,7 +184,7 @@ describeWithEnvironment('RecorderController', () => {
       );
 
       const flow = controller.getUserFlow();
-      assert.deepStrictEqual(flow, {title: 'test', steps: []});
+      assert.deepEqual(flow, {title: 'test', steps: []});
     });
 
     it('should adding a new step before a step with a breakpoint update the breakpoint indexes correctly', async () => {

package/front_end/panels/recorder/RecorderController.ts

@@ -1038,10 +1038,11 @@ export class RecorderController extends LitElement {
   }
 
   #getShortcutsInfo(): Dialogs.ShortcutDialog.Shortcut[] {
-    const getBindingForAction = (action: Actions.RecorderActions): string[] => {
+    const getBindingForAction = (action: Actions.RecorderActions): string[][] => {
       const shortcuts = UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutsForAction(action);
-
-      return shortcuts.map(shortcut => shortcut.title());
+      const shortcutsWithSplitBindings =
+          shortcuts.map(shortcut => shortcut.title().split(/[\s+]+/).map(word => word.trim()));
+      return shortcutsWithSplitBindings;
     };
 
     return [
@@ -1053,7 +1054,7 @@ export class RecorderController extends LitElement {
         title: i18nString(UIStrings.replayRecording),
         bindings: getBindingForAction(Actions.RecorderActions.REPLAY_RECORDING),
       },
-      {title: i18nString(UIStrings.copyShortcut), bindings: [`${Host.Platform.isMac() ? '⌘ C' : 'Ctrl+C'}`]},
+      {title: i18nString(UIStrings.copyShortcut), bindings: Host.Platform.isMac() ? [['⌘', 'C']] : [['Ctrl', 'C']]},
       {
         title: i18nString(UIStrings.toggleCode),
         bindings: getBindingForAction(Actions.RecorderActions.TOGGLE_CODE_VIEW),
@@ -1284,7 +1285,6 @@ export class RecorderController extends LitElement {
               .origin=${this.#getExportMenuButton}
               .showDivider=${false}
               .showSelectedItem=${false}
-              .showConnector=${false}
               .open=${this.exportMenuExpanded}
             >
               <devtools-menu-group .name=${i18nString(

package/front_end/panels/recorder/components/CreateRecordingView.test.ts

@@ -30,11 +30,11 @@ describeWithEnvironment('CreateRecordingView', () => {
     const input = view.shadowRoot?.querySelector(
                       '#user-flow-name',
                       ) as HTMLInputElement;
-    assert.ok(input);
+    assert.isOk(input);
     const button = view.shadowRoot?.querySelector(
                        'devtools-control-button',
                        ) as Components.ControlButton.ControlButton;
-    assert.ok(button);
+    assert.isOk(button);
     const onceClicked = new Promise<Components.CreateRecordingView.RecordingStartedEvent>(
         resolve => {
           view.addEventListener('recordingstarted', resolve, {once: true});
@@ -78,11 +78,11 @@ describeWithEnvironment('CreateRecordingView', () => {
     let input = view.shadowRoot?.querySelector(
                     '#selector-attribute',
                     ) as HTMLInputElement;
-    assert.ok(input);
+    assert.isOk(input);
     const button = view.shadowRoot?.querySelector(
                        'devtools-control-button',
                        ) as Components.ControlButton.ControlButton;
-    assert.ok(button);
+    assert.isOk(button);
     const onceClicked = new Promise<Components.CreateRecordingView.RecordingStartedEvent>(
         resolve => {
           view.addEventListener('recordingstarted', resolve, {once: true});
@@ -96,7 +96,7 @@ describeWithEnvironment('CreateRecordingView', () => {
     input = view.shadowRoot?.querySelector(
                 '#selector-attribute',
                 ) as HTMLInputElement;
-    assert.ok(input);
+    assert.isOk(input);
     assert.strictEqual(input.value, 'data-custom-attribute');
   });
 
@@ -106,11 +106,11 @@ describeWithEnvironment('CreateRecordingView', () => {
     let checkboxes = view.shadowRoot?.querySelectorAll(
                          '.selector-type input[type=checkbox]',
                          ) as NodeListOf<HTMLInputElement>;
-    assert.strictEqual(checkboxes.length, 5);
+    assert.lengthOf(checkboxes, 5);
     const button = view.shadowRoot?.querySelector(
                        'devtools-control-button',
                        ) as Components.ControlButton.ControlButton;
-    assert.ok(button);
+    assert.isOk(button);
     const onceClicked = new Promise<Components.CreateRecordingView.RecordingStartedEvent>(
         resolve => {
           view.addEventListener('recordingstarted', resolve, {once: true});
@@ -120,7 +120,7 @@ describeWithEnvironment('CreateRecordingView', () => {
     button.dispatchEvent(new Event('click'));
     const event = await onceClicked;
 
-    assert.deepStrictEqual(event.selectorTypesToRecord, [
+    assert.deepEqual(event.selectorTypesToRecord, [
       'aria',
       'text',
       'xpath',
@@ -131,7 +131,7 @@ describeWithEnvironment('CreateRecordingView', () => {
     checkboxes = view.shadowRoot?.querySelectorAll(
                      '.selector-type input[type=checkbox]',
                      ) as NodeListOf<HTMLInputElement>;
-    assert.strictEqual(checkboxes.length, 5);
+    assert.lengthOf(checkboxes, 5);
     assert.isFalse(checkboxes[0].checked);
     assert.isTrue(checkboxes[1].checked);
     assert.isTrue(checkboxes[2].checked);

package/front_end/panels/recorder/components/CreateRecordingView.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/* eslint-disable rulesdir/inject_checkbox_styles */
+/* eslint-disable rulesdir/inject-checkbox-styles */
 
 import '../../../ui/legacy/legacy.js';
 import '../../../ui/components/icon_button/icon_button.js';

package/front_end/panels/recorder/components/RecordingListView.test.ts

@@ -7,12 +7,10 @@ import {
   describeWithEnvironment,
   setupActionRegistry,
 } from '../../../testing/EnvironmentHelpers.js';
-import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 
 import * as Components from './components.js';
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 describeWithEnvironment('RecordingListView', () => {
   setupActionRegistry();
 
@@ -20,9 +18,9 @@ describeWithEnvironment('RecordingListView', () => {
     const view = new Components.RecordingListView.RecordingListView();
     renderElementIntoDOM(view);
     view.recordings = [{storageName: 'storage-test', name: 'test'}];
-    await coordinator.done();
+    await RenderCoordinator.done();
     const recording = view.shadowRoot?.querySelector('.row') as HTMLDivElement;
-    assert.ok(recording);
+    assert.isOk(recording);
     const eventSent = new Promise<Components.RecordingListView.OpenRecordingEvent>(
         resolve => {
           view.addEventListener('openrecording', resolve, {once: true});
@@ -37,11 +35,11 @@ describeWithEnvironment('RecordingListView', () => {
     const view = new Components.RecordingListView.RecordingListView();
     renderElementIntoDOM(view);
     view.recordings = [{storageName: 'storage-test', name: 'test'}];
-    await coordinator.done();
+    await RenderCoordinator.done();
     const deleteButton = view.shadowRoot?.querySelector(
                              '.delete-recording-button',
                              ) as HTMLButtonElement;
-    assert.ok(deleteButton);
+    assert.isOk(deleteButton);
     const eventSent = new Promise<Components.RecordingListView.DeleteRecordingEvent>(
         resolve => {
           view.addEventListener('deleterecording', resolve, {once: true});
@@ -56,11 +54,11 @@ describeWithEnvironment('RecordingListView', () => {
     const view = new Components.RecordingListView.RecordingListView();
     renderElementIntoDOM(view);
     view.recordings = [{storageName: 'storage-test', name: 'test'}];
-    await coordinator.done();
+    await RenderCoordinator.done();
     const deleteButton = view.shadowRoot?.querySelector(
                              '.delete-recording-button',
                              ) as HTMLDivElement;
-    assert.ok(deleteButton);
+    assert.isOk(deleteButton);
     let forceResolve: Function|undefined;
     const eventSent = new Promise<Components.RecordingListView.OpenRecordingEvent>(
         resolve => {