chrome-devtools-frontend 1.0.1386602 → 1.0.1418433

package/front_end/panels/protocol_monitor/{components/JSONEditor.test.ts → JSONEditor.test.ts}

@@ -2,39 +2,32 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Host from '../../../core/host/host.js';
+import * as Host from '../../core/host/host.js';
 import {
   dispatchClickEvent,
   dispatchKeyDownEvent,
   dispatchMouseMoveEvent,
-  getEventPromise,
   raf,
-  renderElementIntoDOM,
-} from '../../../testing/DOMHelpers.js';
-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 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';
+  renderElementIntoDOM
+} from '../../testing/DOMHelpers.js';
+import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
+import {expectCall} from '../../testing/ExpectStubCall.js';
+import * as Menus from '../../ui/components/menus/menus.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 ProtocolComponents from './components.js';
-
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
+import * as ProtocolMonitor from './protocol_monitor.js';
 
 describeWithEnvironment('JSONEditor', () => {
   const renderJSONEditor = () => {
-    const jsonEditor = new ProtocolComponents.JSONEditor.JSONEditor();
-    jsonEditor.metadataByCommand = new Map();
-    jsonEditor.typesByName = new Map();
-    jsonEditor.enumsByName = new Map();
-    jsonEditor.connectedCallback();
-    renderElementIntoDOM(jsonEditor);
+    const jsonEditor = new ProtocolMonitor.JSONEditor.JSONEditor(new Map(), new Map(), new Map());
+    jsonEditor.markAsRoot();
+    jsonEditor.show(renderElementIntoDOM(document.createElement('main')));
     return jsonEditor;
   };
 
-  const populateMetadata = async (jsonEditor: ProtocolComponents.JSONEditor.JSONEditor) => {
+  const populateMetadata = async (jsonEditor: ProtocolMonitor.JSONEditor.JSONEditor) => {
     const mockDomain = [
       {
         domain: 'Test',
@@ -234,7 +227,7 @@ describeWithEnvironment('JSONEditor', () => {
   };
 
   const renderSuggestionBox = async (
-      command: string, jsonEditor: ProtocolComponents.JSONEditor.JSONEditor,
+      command: string, jsonEditor: ProtocolMonitor.JSONEditor.JSONEditor,
       enumsByName?: Map<string, Record<string, string>>) => {
     jsonEditor.command = command;
     if (enumsByName) {
@@ -243,7 +236,7 @@ describeWithEnvironment('JSONEditor', () => {
     jsonEditor.populateParametersForCommandWithDefaultValues();
     await jsonEditor.updateComplete;
 
-    const inputs = jsonEditor.renderRoot.querySelectorAll('devtools-suggestion-input');
+    const inputs = jsonEditor.contentElement.querySelectorAll('devtools-suggestion-input');
     // inputs[0] corresponds to the devtools-suggestion-input of the command
     const suggestionInput = inputs[1];
     // Reset the value to empty string because for boolean it will be set to false by default and the correct suggestions will not show
@@ -274,7 +267,7 @@ describeWithEnvironment('JSONEditor', () => {
   const renderEditorForCommand = async(command: string, parameters: {[paramName: string]: unknown}): Promise<{
     inputs: NodeListOf<SuggestionInput.SuggestionInput.SuggestionInput>,
     displayedCommand: string,
-    jsonEditor: ProtocolComponents.JSONEditor.JSONEditor,
+    jsonEditor: ProtocolMonitor.JSONEditor.JSONEditor,
   }> => {
     const typesByName = new Map();
     typesByName.set('string', [
@@ -290,7 +283,7 @@ describeWithEnvironment('JSONEditor', () => {
     jsonEditor.displayCommand(command, parameters);
 
     await jsonEditor.updateComplete;
-    const shadowRoot = jsonEditor.renderRoot;
+    const shadowRoot = jsonEditor.contentElement;
     const inputs = shadowRoot.querySelectorAll('devtools-suggestion-input');
     const displayedCommand = jsonEditor.command;
     return {inputs, displayedCommand, jsonEditor};
@@ -304,10 +297,10 @@ describeWithEnvironment('JSONEditor', () => {
     jsonEditor.populateParametersForCommandWithDefaultValues();
     await jsonEditor.updateComplete;
 
-    const param = jsonEditor.renderRoot.querySelector('[data-paramId]');
+    const param = jsonEditor.contentElement.querySelector('[data-paramId]');
     await renderHoveredElement(param);
 
-    const setDefaultValueButton = jsonEditor.renderRoot.querySelector('devtools-button');
+    const setDefaultValueButton = jsonEditor.contentElement.querySelector('devtools-button');
     if (!setDefaultValueButton) {
       throw new Error('No button');
     }
@@ -318,7 +311,7 @@ describeWithEnvironment('JSONEditor', () => {
 
     await jsonEditor.updateComplete;
 
-    const input = jsonEditor.renderRoot.querySelectorAll('devtools-suggestion-input');
+    const input = jsonEditor.contentElement.querySelectorAll('devtools-suggestion-input');
     const paramInput = input[1];
 
     if (!paramInput) {
@@ -338,7 +331,7 @@ describeWithEnvironment('JSONEditor', () => {
     await jsonEditor.updateComplete;
 
     // inputs[0] corresponds to the devtools-suggestion-input of the command
-    const input = jsonEditor.renderRoot.querySelectorAll('devtools-suggestion-input')[1];
+    const input = jsonEditor.contentElement.querySelectorAll('devtools-suggestion-input')[1];
     if (!input) {
       throw Error('No editable content displayed');
     }
@@ -347,7 +340,7 @@ describeWithEnvironment('JSONEditor', () => {
     input.focus();
     input.blur();
     await jsonEditor.updateComplete;
-    const warningIcon = jsonEditor.renderRoot.querySelector('devtools-icon');
+    const warningIcon = jsonEditor.contentElement.querySelector('devtools-icon');
     if (!warningIcon) {
       throw Error('No icon displayed');
     }
@@ -369,7 +362,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 +378,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 +398,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',
@@ -425,10 +418,10 @@ describeWithEnvironment('JSONEditor', () => {
          jsonEditor.displayCommand(command, parameters);
 
          await jsonEditor.updateComplete;
-         const shadowRoot = jsonEditor.renderRoot;
+         const shadowRoot = jsonEditor.contentElement;
          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 +429,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 +439,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 +449,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 +463,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 +472,7 @@ describeWithEnvironment('JSONEditor', () => {
       const {command, parameters} = ProtocolMonitor.ProtocolMonitor.parseCommandInput(JSON.stringify(cdpCommand));
       const {displayedCommand} = await renderEditorForCommand(command, parameters);
 
-      assert.deepStrictEqual(displayedCommand, '');
+      assert.deepEqual(displayedCommand, '');
     });
   });
 
@@ -492,7 +485,7 @@ describeWithEnvironment('JSONEditor', () => {
       jsonEditor.parameters = [
         {
           name: 'test',
-          type: ProtocolComponents.JSONEditor.ParameterType.STRING,
+          type: ProtocolMonitor.JSONEditor.ParameterType.STRING,
           description: 'test',
           optional: false,
           value: 'test',
@@ -502,12 +495,14 @@ describeWithEnvironment('JSONEditor', () => {
       split.setMainWidget(dataGrid);
       split.setSidebarWidget(editorWidget);
       split.toggleSidebar();
-      await coordinator.done();
+      split.markAsRoot();
+      split.show(renderElementIntoDOM(document.createElement('main')));
+      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"}}');
+      const toolbarInput =
+          dataGrid.element.shadowRoot!.querySelector('.protocol-monitor-bottom-toolbar')!.querySelector(
+              '.toolbar-input-prompt');
+      assert.deepEqual(toolbarInput!.innerHTML, '{"command":"Test.test","parameters":{"test":"test"}}');
     });
 
     it('should update the selected target inside the input bar', async () => {
@@ -526,10 +521,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 +540,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', () => {
@@ -568,17 +563,17 @@ describeWithEnvironment('JSONEditor', () => {
           typeRef: 'string',
           description: 'test.',
         },
-      ] as ProtocolComponents.JSONEditor.Parameter[];
+      ] as ProtocolMonitor.JSONEditor.Parameter[];
       const jsonEditor = renderJSONEditor();
 
       jsonEditor.parameters = inputParameters;
       await jsonEditor.updateComplete;
-      const param = jsonEditor.renderRoot.querySelector('[data-paramId]');
+      const param = jsonEditor.contentElement.querySelector('[data-paramId]');
 
       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 () => {
@@ -589,13 +584,13 @@ describeWithEnvironment('JSONEditor', () => {
       jsonEditor.command = cdpCommand;
       await jsonEditor.updateComplete;
 
-      const command = jsonEditor.renderRoot.querySelector('.command');
+      const command = jsonEditor.contentElement.querySelector('.command');
       await renderHoveredElement(command);
 
       const popupContent = serializePopupContent();
 
       const expectedPopupContent = 'Description1.Returns:Test1LearnMore';
-      assert.deepStrictEqual(popupContent, expectedPopupContent);
+      assert.deepEqual(popupContent, expectedPopupContent);
     });
   });
 
@@ -611,7 +606,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 +618,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 () => {
@@ -641,10 +636,10 @@ describeWithEnvironment('JSONEditor', () => {
 
       await jsonEditor.updateComplete;
 
-      const param = jsonEditor.renderRoot.querySelector('[data-paramId]');
+      const param = jsonEditor.contentElement.querySelector('[data-paramId]');
       await renderHoveredElement(param);
 
-      const addParamButton = jsonEditor.renderRoot.querySelector('devtools-button[title="Add a parameter"]');
+      const addParamButton = jsonEditor.contentElement.querySelector('devtools-button[title="Add a parameter"]');
       if (!addParamButton) {
         throw new Error('No button');
       }
@@ -655,7 +650,7 @@ describeWithEnvironment('JSONEditor', () => {
 
       await jsonEditor.updateComplete;
 
-      const inputs = jsonEditor.renderRoot.querySelectorAll('devtools-suggestion-input');
+      const inputs = jsonEditor.contentElement.querySelectorAll('devtools-suggestion-input');
       // inputs[0] corresponds to the devtools-suggestion-input of the command
       const suggestionInput = inputs[1];
       // Reset the value to empty string because for boolean it will be set to false by default and the correct suggestions will not show
@@ -675,7 +670,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 +690,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 +702,7 @@ describeWithEnvironment('JSONEditor', () => {
 
       const suggestions = await renderSuggestionBox(command, jsonEditor);
 
-      assert.deepStrictEqual(suggestions, []);
+      assert.deepEqual(suggestions, []);
     });
   });
 
@@ -720,7 +715,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 +725,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 +736,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',
@@ -767,11 +762,11 @@ describeWithEnvironment('JSONEditor', () => {
          jsonEditor.populateParametersForCommandWithDefaultValues();
          await jsonEditor.updateComplete;
 
-         const param = jsonEditor.renderRoot.querySelector('[data-paramId]');
+         const param = jsonEditor.contentElement.querySelector('[data-paramId]');
          await renderHoveredElement(param);
 
          const showDefaultValuesButton =
-             jsonEditor.renderRoot.querySelector('devtools-button[title="Add a parameter"]');
+             jsonEditor.contentElement.querySelector('devtools-button[title="Add a parameter"]');
          if (!showDefaultValuesButton) {
            throw new Error('No button');
          }
@@ -784,9 +779,9 @@ describeWithEnvironment('JSONEditor', () => {
          await jsonEditor.updateComplete;
 
          // The -1 is need to not take into account the input for the command
-         const numberOfInputs = jsonEditor.renderRoot.querySelectorAll('devtools-suggestion-input').length - 1;
+         const numberOfInputs = jsonEditor.contentElement.querySelectorAll('devtools-suggestion-input').length - 1;
 
-         assert.deepStrictEqual(numberOfInputs, 2);
+         assert.deepEqual(numberOfInputs, 2);
        });
   });
 
@@ -806,11 +801,11 @@ describeWithEnvironment('JSONEditor', () => {
          const {command, parameters} = ProtocolMonitor.ProtocolMonitor.parseCommandInput(JSON.stringify(cdpCommand));
          const {jsonEditor} = await renderEditorForCommand(command, parameters);
 
-         const param = jsonEditor.renderRoot.querySelector('[data-paramId=\'test3\']');
+         const param = jsonEditor.contentElement.querySelector('[data-paramId=\'test3\']');
 
          await renderHoveredElement(param);
 
-         const setDefaultValueButton = jsonEditor.renderRoot.querySelector('devtools-button');
+         const setDefaultValueButton = jsonEditor.contentElement.querySelector('devtools-button');
 
          if (!setDefaultValueButton) {
            throw new Error('No button');
@@ -822,12 +817,12 @@ describeWithEnvironment('JSONEditor', () => {
 
          await jsonEditor.updateComplete;
 
-         const input = jsonEditor.renderRoot.querySelectorAll('devtools-suggestion-input');
+         const input = jsonEditor.contentElement.querySelectorAll('devtools-suggestion-input');
          const values = [input[1].value, input[2].value];
 
          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 () => {
@@ -846,15 +841,15 @@ describeWithEnvironment('JSONEditor', () => {
       ];
 
       const jsonEditor = renderJSONEditor();
-      jsonEditor.parameters = inputParameters as ProtocolComponents.JSONEditor.Parameter[];
+      jsonEditor.parameters = inputParameters as ProtocolMonitor.JSONEditor.Parameter[];
       await jsonEditor.updateComplete;
 
-      const param = jsonEditor.renderRoot.querySelector('[data-paramId=\'arrayParam\']');
+      const param = jsonEditor.contentElement.querySelector('[data-paramId=\'arrayParam\']');
 
       await renderHoveredElement(param);
 
       const setDefaultValueButton =
-          jsonEditor.renderRoot.querySelector('devtools-button[title="Reset to default value"]');
+          jsonEditor.contentElement.querySelector('devtools-button[title="Reset to default value"]');
 
       if (!setDefaultValueButton) {
         throw new Error('No button');
@@ -868,7 +863,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 () => {
@@ -893,10 +888,11 @@ describeWithEnvironment('JSONEditor', () => {
       jsonEditor.populateParametersForCommandWithDefaultValues();
       await jsonEditor.updateComplete;
 
-      const param = jsonEditor.renderRoot.querySelector('[data-paramId]');
+      const param = jsonEditor.contentElement.querySelector('[data-paramId]');
       await renderHoveredElement(param);
 
-      const showDefaultValuesButton = jsonEditor.renderRoot.querySelector('devtools-button[title="Add a parameter"]');
+      const showDefaultValuesButton =
+          jsonEditor.contentElement.querySelector('devtools-button[title="Add a parameter"]');
       if (!showDefaultValuesButton) {
         throw new Error('No button');
       }
@@ -909,7 +905,7 @@ describeWithEnvironment('JSONEditor', () => {
       await jsonEditor.updateComplete;
 
       await renderHoveredElement(param);
-      const clearButton = jsonEditor.renderRoot.querySelector('devtools-button[title="Reset to default value"]');
+      const clearButton = jsonEditor.contentElement.querySelector('devtools-button[title="Reset to default value"]');
 
       if (!clearButton) {
         throw new Error('No clear button');
@@ -922,9 +918,9 @@ describeWithEnvironment('JSONEditor', () => {
 
       await jsonEditor.updateComplete;
       // The -1 is need to not take into account the input for the command
-      const numberOfInputs = jsonEditor.renderRoot.querySelectorAll('devtools-suggestion-input').length - 1;
+      const numberOfInputs = jsonEditor.contentElement.querySelectorAll('devtools-suggestion-input').length - 1;
 
-      assert.deepStrictEqual(numberOfInputs, 0);
+      assert.deepEqual(numberOfInputs, 0);
     });
   });
 
@@ -950,10 +946,10 @@ describeWithEnvironment('JSONEditor', () => {
       };
 
       const jsonEditor = renderJSONEditor();
-      jsonEditor.parameters = inputParameters as ProtocolComponents.JSONEditor.Parameter[];
+      jsonEditor.parameters = inputParameters as ProtocolMonitor.JSONEditor.Parameter[];
       await jsonEditor.updateComplete;
 
-      const shadowRoot = jsonEditor.renderRoot;
+      const shadowRoot = jsonEditor.contentElement;
 
       const parameterIndex = 0;
       const deleteButtons = shadowRoot.querySelectorAll('devtools-button[title="Delete parameter"]');
@@ -962,7 +958,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 () => {
@@ -975,10 +971,10 @@ describeWithEnvironment('JSONEditor', () => {
       jsonEditor.populateParametersForCommandWithDefaultValues();
       await jsonEditor.updateComplete;
 
-      const param = jsonEditor.renderRoot.querySelector('[data-paramId]');
+      const param = jsonEditor.contentElement.querySelector('[data-paramId]');
       await renderHoveredElement(param);
 
-      const addParamButton = jsonEditor.renderRoot.querySelector('devtools-button[title="Add a parameter"]');
+      const addParamButton = jsonEditor.contentElement.querySelector('devtools-button[title="Add a parameter"]');
       if (!addParamButton) {
         throw new Error('No button');
       }
@@ -994,9 +990,9 @@ describeWithEnvironment('JSONEditor', () => {
       await jsonEditor.updateComplete;
 
       // The -1 is need to not take into account the input for the command
-      const numberOfInputs = jsonEditor.renderRoot.querySelectorAll('devtools-suggestion-input').length - 1;
+      const numberOfInputs = jsonEditor.contentElement.querySelectorAll('devtools-suggestion-input').length - 1;
 
-      assert.deepStrictEqual(numberOfInputs, 2);
+      assert.deepEqual(numberOfInputs, 2);
     });
   });
 
@@ -1075,14 +1071,15 @@ describeWithEnvironment('JSONEditor', () => {
            },
          };
 
-         jsonEditor.parameters = inputParameters as ProtocolComponents.JSONEditor.Parameter[];
-         const responsePromise = getEventPromise(jsonEditor, ProtocolComponents.JSONEditor.SubmitEditorEvent.eventName);
+         jsonEditor.parameters = inputParameters as ProtocolMonitor.JSONEditor.Parameter[];
+
+         const promise = jsonEditor.once(ProtocolMonitor.JSONEditor.Events.SUBMIT_EDITOR);
 
-         dispatchKeyDownEvent(jsonEditor, {key: 'Enter', ctrlKey: true, metaKey: true});
+         dispatchKeyDownEvent(jsonEditor.contentElement, {key: 'Enter', ctrlKey: true, metaKey: true});
 
-         const response = await responsePromise as ProtocolComponents.JSONEditor.SubmitEditorEvent;
+         const response = await promise;
 
-         assert.deepStrictEqual(response.data.parameters, expectedParameters);
+         assert.deepEqual(response.parameters, expectedParameters);
        });
 
     it('should return the parameters in a format understandable by the ProtocolMonitor when sending a command via the send button',
@@ -1092,7 +1089,7 @@ describeWithEnvironment('JSONEditor', () => {
          jsonEditor.parameters = [
            {
              name: 'testName',
-             type: ProtocolComponents.JSONEditor.ParameterType.STRING,
+             type: ProtocolMonitor.JSONEditor.ParameterType.STRING,
              description: 'test',
              optional: false,
              value: 'testValue',
@@ -1100,21 +1097,22 @@ describeWithEnvironment('JSONEditor', () => {
          ];
          await jsonEditor.updateComplete;
 
-         const toolbar = jsonEditor.renderRoot.querySelector('devtools-pm-toolbar');
+         const toolbar = jsonEditor.contentElement.querySelector('devtools-toolbar');
          if (!toolbar) {
            throw Error('No toolbar found !');
          }
-         const event = new ProtocolComponents.Toolbar.SendCommandEvent();
-         const responsePromise = getEventPromise(jsonEditor, ProtocolComponents.JSONEditor.SubmitEditorEvent.eventName);
 
-         toolbar.dispatchEvent(event);
-         const response = await responsePromise as ProtocolComponents.JSONEditor.SubmitEditorEvent;
+         const promise = jsonEditor.once(ProtocolMonitor.JSONEditor.Events.SUBMIT_EDITOR);
+
+         dispatchClickEvent(toolbar.querySelector('devtools-button[title^="Send command"]')!);
+
+         const response = await promise;
 
          const expectedParameters = {
            testName: 'testValue',
          };
 
-         assert.deepStrictEqual(response.data.parameters, expectedParameters);
+         assert.deepEqual(response.parameters, expectedParameters);
        });
   });
 
@@ -1150,11 +1148,11 @@ describeWithEnvironment('JSONEditor', () => {
     jsonEditor.command = cdpCommand;
     await jsonEditor.updateComplete;
 
-    const inputs = jsonEditor.renderRoot.querySelectorAll('devtools-suggestion-input');
-    const addButtons = jsonEditor.renderRoot.querySelectorAll('devtools-button[title="Add a parameter"]');
+    const inputs = jsonEditor.contentElement.querySelectorAll('devtools-suggestion-input');
+    const addButtons = jsonEditor.contentElement.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 () => {
@@ -1163,12 +1161,12 @@ describeWithEnvironment('JSONEditor', () => {
     const targetId = 'target1';
     const event = new Menus.SelectMenu.SelectMenuItemSelectedEvent('target1');
 
-    const shadowRoot = jsonEditor.renderRoot;
+    const shadowRoot = jsonEditor.contentElement;
     const selectMenu = shadowRoot.querySelector('devtools-select-menu');
     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 () => {
@@ -1177,7 +1175,7 @@ describeWithEnvironment('JSONEditor', () => {
     jsonEditor.parameters = [
       {
         name: 'test',
-        type: ProtocolComponents.JSONEditor.ParameterType.STRING,
+        type: ProtocolMonitor.JSONEditor.ParameterType.STRING,
         description: 'test',
         optional: false,
         value: 'test',
@@ -1188,12 +1186,11 @@ describeWithEnvironment('JSONEditor', () => {
         Host.InspectorFrontendHost.InspectorFrontendHostInstance,
         'copyText',
         ));
-    const toolbar = jsonEditor.renderRoot.querySelector('devtools-pm-toolbar');
+    const toolbar = jsonEditor.contentElement.querySelector('devtools-toolbar');
     if (!toolbar) {
       throw Error('No toolbar found !');
     }
-    const event = new ProtocolComponents.Toolbar.CopyCommandEvent();
-    toolbar.dispatchEvent(event);
+    dispatchClickEvent(toolbar.querySelector('devtools-button[title="Copy command"]')!);
     const [text] = await copyText;
 
     assert.strictEqual(JSON.stringify({command: 'Test.test', parameters: {test: 'test'}}), text);
@@ -1250,11 +1247,11 @@ describeWithEnvironment('JSONEditor', () => {
     jsonEditor.command = command;
     jsonEditor.populateParametersForCommandWithDefaultValues();
     await jsonEditor.updateComplete;
-    const shadowRoot = jsonEditor.renderRoot;
+    const shadowRoot = jsonEditor.contentElement;
     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',
@@ -1281,12 +1278,12 @@ describeWithEnvironment('JSONEditor', () => {
        jsonEditor.command = command;
        jsonEditor.populateParametersForCommandWithDefaultValues();
        await jsonEditor.updateComplete;
-       const shadowRoot = jsonEditor.renderRoot;
+       const shadowRoot = jsonEditor.contentElement;
        const parameters = shadowRoot.querySelector('.parameter');
 
        await renderHoveredElement(parameters);
 
-       const addParamButton = jsonEditor.renderRoot.querySelector('devtools-button[title="Add custom property"]');
+       const addParamButton = jsonEditor.contentElement.querySelector('devtools-button[title="Add custom property"]');
        if (!addParamButton) {
          throw new Error('No button');
        }
@@ -1329,12 +1326,12 @@ describeWithEnvironment('JSONEditor', () => {
        editors[4].blur();
        await jsonEditor.updateComplete;
 
-       const responsePromise = getEventPromise(jsonEditor, ProtocolComponents.JSONEditor.SubmitEditorEvent.eventName);
+       const promise = jsonEditor.once(ProtocolMonitor.JSONEditor.Events.SUBMIT_EDITOR);
 
        // We send the command
-       dispatchKeyDownEvent(jsonEditor, {key: 'Enter', ctrlKey: true, metaKey: true});
+       dispatchKeyDownEvent(jsonEditor.contentElement, {key: 'Enter', ctrlKey: true, metaKey: true});
 
-       const response = await responsePromise as ProtocolComponents.JSONEditor.SubmitEditorEvent;
+       const response = await promise;
 
        const expectedParameters = {
          NoTypeRef: {
@@ -1343,7 +1340,7 @@ describeWithEnvironment('JSONEditor', () => {
          },
        };
 
-       assert.deepStrictEqual(response.data.parameters, expectedParameters);
+       assert.deepEqual(response.parameters, expectedParameters);
      });
 
   it('should show the custom editor for an object param that has no type ref', async () => {
@@ -1354,12 +1351,12 @@ describeWithEnvironment('JSONEditor', () => {
     jsonEditor.command = command;
     jsonEditor.populateParametersForCommandWithDefaultValues();
     await jsonEditor.updateComplete;
-    const shadowRoot = jsonEditor.renderRoot;
+    const shadowRoot = jsonEditor.contentElement;
     const parameters = shadowRoot.querySelector('.parameter');
 
     await renderHoveredElement(parameters);
 
-    const addParamButton = jsonEditor.renderRoot.querySelector('devtools-button[title="Add custom property"]');
+    const addParamButton = jsonEditor.contentElement.querySelector('devtools-button[title="Add custom property"]');
     if (!addParamButton) {
       throw new Error('No button');
     }
@@ -1376,16 +1373,16 @@ describeWithEnvironment('JSONEditor', () => {
     await jsonEditor.updateComplete;
     // The -1 is need to not take into account the input for the command
 
-    const numberOfInputs = jsonEditor.renderRoot.querySelectorAll('devtools-suggestion-input').length - 1;
+    const numberOfInputs = jsonEditor.contentElement.querySelectorAll('devtools-suggestion-input').length - 1;
 
-    assert.deepStrictEqual(numberOfInputs, 4);
+    assert.deepEqual(numberOfInputs, 4);
   });
 
   describe('Command suggestion filter', () => {
     it('filters the commands by substring match', async () => {
-      assert(ProtocolComponents.JSONEditor.suggestionFilter('Test', 'Tes'));
-      assert(ProtocolComponents.JSONEditor.suggestionFilter('Test', 'est'));
-      assert(!ProtocolComponents.JSONEditor.suggestionFilter('Test', 'dest'));
+      assert(ProtocolMonitor.JSONEditor.suggestionFilter('Test', 'Tes'));
+      assert(ProtocolMonitor.JSONEditor.suggestionFilter('Test', 'est'));
+      assert(!ProtocolMonitor.JSONEditor.suggestionFilter('Test', 'dest'));
     });
   });
 });