[webmcp] Extend JSON editor for non-CDP commands

This adds some properties to control whether to show the target selector
and command name, as well as a setter for the metadata.

Also adds an UNKNOWN parameter type which takes raw json.

Bug: 494516094
Change-Id: I8bef6342332512ed56f5fd2b0870fdd1fd862130
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7761663
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Commit-Queue: Philip Pfaffe <pfaffe@chromium.org>

Author: pfaffe

front_end/panels/protocol_monitor/JSONEditor.test.ts

@@ -1041,6 +1041,35 @@ describeWithEnvironment('JSONEditor', () => {
 
          assert.deepEqual(response.parameters, expectedParameters);
        });
+
+    it('should format unknown parameters as parsed JSON if they contain JSON, or verbatim otherwise', async () => {
+      const jsonEditor = renderJSONEditor();
+      jsonEditor.command = 'Test.test';
+      jsonEditor.parameters = [
+        {
+          name: 'anyOfProp1',
+          type: ProtocolMonitor.JSONEditor.ParameterType.UNKNOWN,
+          description: 'test',
+          optional: false,
+          value: '{"a": 1}',
+        },
+        {
+          name: 'anyOfProp2',
+          type: ProtocolMonitor.JSONEditor.ParameterType.UNKNOWN,
+          description: 'test',
+          optional: false,
+          value: 'raw string',
+        },
+      ];
+      await jsonEditor.updateComplete;
+
+      const expectedParameters = {
+        anyOfProp1: {a: 1},
+        anyOfProp2: 'raw string',
+      };
+
+      assert.deepEqual(jsonEditor.getParameters(), expectedParameters);
+    });
   });
 
   describe('Verify the type of the entered value', () => {
@@ -1311,6 +1340,38 @@ describeWithEnvironment('JSONEditor', () => {
     assert.deepEqual(numberOfInputs, 4);
   });
 
+  describe('UI Visibility Properties', () => {
+    it('hides the target selector when displayTargetSelector is false', async () => {
+      const jsonEditor = renderJSONEditor();
+      jsonEditor.displayTargetSelector = false;
+      jsonEditor.performUpdate();
+      await jsonEditor.updateComplete;
+
+      const targetSelector = jsonEditor.contentElement.querySelector('.target-selector');
+      assert.isNull(targetSelector);
+    });
+
+    it('hides the command input when displayCommandInput is false', async () => {
+      const jsonEditor = renderJSONEditor();
+      jsonEditor.displayCommandInput = false;
+      jsonEditor.performUpdate();
+      await jsonEditor.updateComplete;
+
+      const commandInput = jsonEditor.contentElement.querySelector('.command');
+      assert.isNull(commandInput);
+    });
+
+    it('sets the command via commandToDisplay', async () => {
+      const jsonEditor = renderJSONEditor();
+      jsonEditor.commandToDisplay = 'Test.testCommand';
+      await jsonEditor.updateComplete;
+
+      assert.strictEqual(jsonEditor.command, 'Test.testCommand');
+      const input = jsonEditor.contentElement.querySelector('devtools-suggestion-input');
+      assert.strictEqual((input as SuggestionInput.SuggestionInput.SuggestionInput).value, 'Test.testCommand');
+    });
+  });
+
   describe('Command suggestion filter', () => {
     it('filters the commands by substring match', async () => {
       assert(ProtocolMonitor.JSONEditor.suggestionFilter('Test', 'Tes'));

front_end/panels/protocol_monitor/JSONEditor.ts

@@ -64,6 +64,7 @@ export const enum ParameterType {
   BOOLEAN = 'boolean',
   ARRAY = 'array',
   OBJECT = 'object',
+  UNKNOWN = 'unknown',
 }
 
 interface BaseParameter {
@@ -100,7 +101,13 @@ interface ObjectParameter extends BaseParameter {
   value?: Parameter[];
 }
 
-export type Parameter = ArrayParameter|NumberParameter|StringParameter|BooleanParameter|ObjectParameter;
+interface UnknownParameter extends BaseParameter {
+  type: ParameterType.UNKNOWN;
+  value?: string;
+}
+
+export type Parameter =
+    ArrayParameter|NumberParameter|StringParameter|BooleanParameter|ObjectParameter|UnknownParameter;
 
 export interface Command {
   command: string;
@@ -128,6 +135,8 @@ interface ViewInput {
   onParameterKeydown: (event: KeyboardEvent) => void;
   onParameterKeyBlur: (event: Event) => void;
   onParameterValueBlur: (event: Event) => void;
+  displayTargetSelector?: boolean;
+  displayCommandInput?: boolean;
 }
 
 export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
@@ -149,6 +158,7 @@ const defaultValueByType = new Map<string, string|number|boolean>([
   ['string', ''],
   ['number', 0],
   ['boolean', false],
+  ['unknown', ''],
 ]);
 
 const DUMMY_DATA = 'dummy';
@@ -176,6 +186,8 @@ export class JSONEditor extends Common.ObjectWrapper.eventMixin<EventTypes, type
   #targetId?: string;
   #hintPopoverHelper?: UI.PopoverHelper.PopoverHelper;
   #view: View;
+  displayTargetSelector = true;
+  displayCommandInput = true;
 
   constructor(element: HTMLElement, view = DEFAULT_VIEW) {
     super(element, {useShadowDom: true});
@@ -240,6 +252,10 @@ export class JSONEditor extends Common.ObjectWrapper.eventMixin<EventTypes, type
     }
   }
 
+  set commandToDisplay(command: string) {
+    this.displayCommand(command, {});
+  }
+
   get targetId(): string|undefined {
     return this.#targetId;
   }
@@ -312,6 +328,13 @@ export class JSONEditor extends Common.ObjectWrapper.eventMixin<EventTypes, type
           }
           return nestedArrayParameters.length === 0 ? [] : nestedArrayParameters;
         }
+        case ParameterType.UNKNOWN: {
+          try {
+            return JSON.parse(parameter.value as string);
+          } catch {
+            return parameter.value;
+          }
+        }
         default: {
           return parameter.value;
         }
@@ -967,6 +990,8 @@ export class JSONEditor extends Common.ObjectWrapper.eventMixin<EventTypes, type
       computeDropdownValues: (parameter: Parameter) => {
         return this.#computeDropdownValues(parameter);
       },
+      displayTargetSelector: this.displayTargetSelector,
+      displayCommandInput: this.displayCommandInput,
     };
     const viewOutput = {};
     this.#view(viewInput, viewOutput, this.contentElement);
@@ -1229,7 +1254,8 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
   render(html`
     <div class="wrapper" @keydown=${input.onKeydown} jslog=${VisualLogging.pane('command-editor').track({resize: true})}>
       <div class="editor-wrapper">
-        ${renderTargetSelectorRow(input)}
+        ${input.displayTargetSelector !== false ? renderTargetSelectorRow(input) : nothing}
+        ${input.displayCommandInput !== false ? html`
         <div class="row attribute padded">
           <div class="command">command<span class="separator">:</span></div>
           <devtools-suggestion-input
@@ -1241,7 +1267,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
             @blur=${input.onCommandInputBlur}
             class=${classMap({'json-input': true})}
           ></devtools-suggestion-input>
-        </div>
+        </div>` : nothing}
         ${input.parameters.length ? html`
         <div class="row attribute padded">
           <div>parameters<span class="separator">:</span></div>