Show both reports and endpoints for report API tab

With the empty state update in https://crrev.com/c/6233913 we only
showed reports, but actually endpoints may independently show up.

This reverts parts of the previous change and makes sure to show both
views for reports and endpoints.

Before: https://i.imgur.com/PLg6pYF.png
After: https://i.imgur.com/hMmQt9g.png
Bug: 325443331
Change-Id: I0bc7ffe8a5e66d248daf3fa14a3741a9eb0cd1ec
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6244432
Reviewed-by: Kateryna Prokopenko <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>

Author: ktran

front_end/panels/application/ReportingApiView.ts

@@ -32,15 +32,11 @@ export class ReportingApiView extends UI.SplitWidget.SplitWidget {
       reportingApiEndpointsView.contentElement.appendChild(this.endpointsGrid);
       this.setMainWidget(reportingApiReportsView);
       this.setSidebarWidget(reportingApiEndpointsView);
-      this.hideSidebar();
       void networkManager.enableReportingApi();
     }
   }
 
   private onEndpointsChangedForOrigin(data: Protocol.Network.ReportingApiEndpointsChangedForOriginEvent): void {
-    if (this.showMode() !== UI.SplitWidget.ShowMode.BOTH) {
-      this.showBoth();
-    }
     this.endpoints.set(data.origin, data.endpoints);
     this.endpointsGrid.data = {endpoints: this.endpoints};
   }

front_end/panels/application/components/ReportsGrid.ts

@@ -116,8 +116,8 @@ export class ReportsGrid extends HTMLElement {
     // clang-format off
     render(html`
       <div class="reporting-container" jslog=${VisualLogging.section('reports')}>
+        <div class="reporting-header">${i18n.i18n.lockedString('Reports')}</div>
         ${this.#reports.length > 0 ? html`
-          <div class="reporting-header">${i18n.i18n.lockedString('Reports')}</div>
           <devtools-data-grid striped @select=${this.#onSelect}>
             <table>
               <tr>