Fix for JSONView not updating when selecting another report

After a previous CL (https://crrev.com/c/6859315), the content of the
JSONView did not update when `input.focusedReport` changes. To fix
this, the widget needs to have a setter method for updating the JSON.

This CL creates a child class of `SearchableView` which has such a
setter.

Bug: 407750294
Change-Id: I6bc59379d883bbf2a4e6bc87c0a2b91845ce4e5d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7000090
Auto-Submit: Wolfgang Beyer <[email protected]>
Reviewed-by: Danil Somsikov <[email protected]>
Commit-Queue: Danil Somsikov <[email protected]>

Author: wolfib

front_end/panels/application/ReportingApiView.test.ts

@@ -4,9 +4,11 @@
 
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
+import {assertScreenshot, renderElementIntoDOM} from '../../testing/DOMHelpers.js';
 import {createTarget} from '../../testing/EnvironmentHelpers.js';
 import {describeWithMockConnection} from '../../testing/MockConnection.js';
 import {createViewFunctionStub} from '../../testing/ViewFunctionHelpers.js';
+import * as UI from '../../ui/legacy/legacy.js';
 
 import * as Application from './application.js';
 
@@ -217,4 +219,56 @@ describeWithMockConnection('ReportingApiView', () => {
     await view.nextInput;
     assert.strictEqual(view.input.focusedReport, reports[0]);
   });
+
+  describe('view', () => {
+    let target!: HTMLElement;
+    let stub: sinon.SinonStub;
+
+    beforeEach(async () => {
+      const original = Date.prototype.toLocaleString;
+      stub = sinon.stub(Date.prototype, 'toLocaleString').callsFake(function(this: Date) {
+        return original.call(this, 'en-US', {timeZone: 'UTC'});
+      });
+
+      const container = document.createElement('div');
+      renderElementIntoDOM(container);
+      const widget = new UI.Widget.Widget();
+      widget.markAsRoot();
+      widget.show(container);
+      target = widget.element;
+      target.style.display = 'flex';
+      target.style.width = '780px';
+      target.style.height = '400px';
+    });
+
+    afterEach(() => {
+      stub.restore();
+    });
+
+    it('updates report details', async () => {
+      Application.ReportingApiView.DEFAULT_VIEW(
+          {
+            hasReports: true,
+            hasEndpoints: false,
+            endpoints: new Map(),
+            reports,
+            focusedReport: reports[0],
+            onReportSelected: () => {},
+          },
+          undefined, target);
+      await assertScreenshot('application/report_details.png');
+
+      Application.ReportingApiView.DEFAULT_VIEW(
+          {
+            hasReports: true,
+            hasEndpoints: false,
+            endpoints: new Map(),
+            reports,
+            focusedReport: reports[1],
+            onReportSelected: () => {},
+          },
+          undefined, target);
+      await assertScreenshot('application/report_details_updated.png');
+    });
+  });
 });

front_end/panels/application/ReportingApiView.ts

@@ -56,12 +56,11 @@ interface ViewInput {
   onReportSelected: (id: string) => void;
 }
 
-type View = (input: ViewInput, output: object, target: HTMLElement) => void;
-
-export const DEFAULT_VIEW: View = (input, _output, target) => {
+export const DEFAULT_VIEW = (input: ViewInput, output: undefined, target: HTMLElement): void => {
   if (input.hasReports || input.hasEndpoints) {
     // clang-format off
     render(html`
+      <style>${UI.inspectorCommonStyles}</style>
       <devtools-split-view sidebar-position="second" sidebar-initial-size="150" jslog=${
           VisualLogging.pane('reporting-api')}>
         ${input.hasReports ? html`
@@ -73,9 +72,9 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
             </div>
             <div slot="sidebar" class="vbox" jslog=${VisualLogging.pane('preview').track({resize: true})}>
               ${input.focusedReport ? html`
-                <devtools-widget .widgetConfig=${widgetConfig(
-                  element => SourceFrame.JSONView.JSONView.createViewSync(input.focusedReport?.body || '', element)
-                )}></devtools-widget>
+                <devtools-widget .widgetConfig=${widgetConfig(SourceFrame.JSONView.SearchableJsonView, {
+                  jsonObject: input.focusedReport.body,
+                })}></devtools-widget>
               ` : html`
                 <devtools-widget .widgetConfig=${widgetConfig(UI.EmptyWidget.EmptyWidget, {
                   header: i18nString(UIStrings.noReportSelected),
@@ -112,6 +111,8 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
   }
 };
 
+type View = typeof DEFAULT_VIEW;
+
 export class ReportingApiView extends UI.Widget.VBox implements
     SDK.TargetManager.SDKModelObserver<SDK.NetworkManager.NetworkManager> {
   #endpoints: Map<string, Protocol.Network.ReportingApiEndpoint[]>;
@@ -164,7 +165,7 @@ export class ReportingApiView extends UI.Widget.VBox implements
       focusedReport: this.#focusedReport,
       onReportSelected: this.#onReportSelected.bind(this),
     };
-    this.#view(viewInput, {}, this.element);
+    this.#view(viewInput, undefined, this.element);
   }
 
   #onEndpointsChangedForOrigin({data}: {data: Protocol.Network.ReportingApiEndpointsChangedForOriginEvent}): void {

front_end/ui/legacy/SearchableView.ts

@@ -139,7 +139,7 @@ function createClearButton(jslogContext: string): Buttons.Button.Button {
   return button;
 }
 export class SearchableView extends VBox {
-  private searchProvider: Searchable;
+  protected searchProvider: Searchable;
   private replaceProvider: Replaceable|null;
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

front_end/ui/legacy/components/source_frame/JSONView.ts

@@ -20,6 +20,7 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/source_frame/JSONView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
 export class JSONView extends UI.Widget.VBox implements UI.SearchableView.Searchable {
   private initialized: boolean;
   private readonly parsedJSON: ParsedJSON;
@@ -67,6 +68,10 @@ export class JSONView extends UI.Widget.VBox implements UI.SearchableView.Search
     return searchableView;
   }
 
+  setSearchableView(searchableView: UI.SearchableView.SearchableView): void {
+    this.searchableView = searchableView;
+  }
+
   private static parseJSON(text: string|null): Promise<ParsedJSON|null> {
     let returnObj: ParsedJSON<string>|null = null;
     if (text) {
@@ -280,3 +285,26 @@ export class ParsedJSON<T extends unknown = unknown> {
     this.suffix = suffix;
   }
 }
+
+export class SearchableJsonView extends UI.SearchableView.SearchableView {
+  #jsonView: JSONView;
+
+  constructor(element: HTMLElement) {
+    const jsonView = new JSONView(new ParsedJSON('', '', ''));
+    super(jsonView, null, undefined, element);
+    this.#jsonView = jsonView;
+    this.setPlaceholder(i18nString(UIStrings.find));
+    jsonView.setSearchableView(this);
+    jsonView.show(this.element);
+    jsonView.element.tabIndex = 0;
+  }
+
+  set jsonObject(obj: Object) {
+    const jsonView = new JSONView(new ParsedJSON(obj, '', ''));
+    this.#jsonView.detach();
+    this.#jsonView = jsonView;
+    this.searchProvider = jsonView;
+    jsonView.show(this.element);
+    this.requestUpdate();
+  }
+}