[network] Always show "Open in Network panel" context menu item.

Previously we'd only show the "Reveal in Network panel" context menu
item when we had an actual network request recorded for the resource.
While this is technically correct, it leaves the developer wondering
why the menu item isn't showing (the reasons are subtle). So with this
CL we rename the item to "Open in Network panel", and always show it,
but when there's no resource, we show it disabled and with a note
"(missing request)" appended.

Fixed: 372873222
Screenshot: https://i.imgur.com/elaOkCC.png
Change-Id: I8bf64827145aca93bbd2a0def6c22b9e3149315f
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5975683
Reviewed-by: Peter Müller <[email protected]>
Commit-Queue: Benedikt Meurer <[email protected]>

Author: bmeurer

front_end/panels/network/NetworkPanel.ts

@@ -147,9 +147,18 @@ const UIStrings = {
    */
   hitSToReloadAndCaptureFilmstrip: 'Hit {PH1} to reload and capture filmstrip.',
   /**
-   *@description A context menu item in the Network Panel of the Network panel
+   * @description A context menu item that is shown for resources in other panels
+   * to open them in the Network panel.
    */
-  revealInNetworkPanel: 'Reveal in Network panel',
+  openInNetworkPanel: 'Open in Network panel',
+  /**
+   * @description A context menu item that is shown for resources in other panels
+   * to open them in the Network panel, but when there's no associated network
+   * request. This context menu item is always disabled and only provided to give
+   * the developer an idea of why they cannot open the resource in the Network
+   * panel.
+   */
+  openInNetworkPanelMissingRequest: 'Open in Network panel (missing request)',
   /**
    *@description Text in Network Panel that is displayed whilst the recording is in progress.
    */
@@ -757,16 +766,22 @@ export class NetworkPanel extends UI.Panel.Panel implements
       TimelineUtils.NetworkRequest.TimelineNetworkRequest): void {
     const appendRevealItem = (request: SDK.NetworkRequest.NetworkRequest): void => {
       contextMenu.revealSection().appendItem(
-          i18nString(UIStrings.revealInNetworkPanel),
+          i18nString(UIStrings.openInNetworkPanel),
           () => UI.ViewManager.ViewManager.instance()
                     .showView('network')
                     .then(this.networkLogView.resetFilter.bind(this.networkLogView))
                     .then(this.revealAndHighlightRequest.bind(this, request)),
           {jslogContext: 'reveal-in-network'});
     };
+    const appendRevealItemMissingData = (): void => {
+      contextMenu.revealSection().appendItem(i18nString(UIStrings.openInNetworkPanelMissingRequest), () => {}, {
+        disabled: true,
+        jslogContext: 'reveal-in-network',
+      });
+    };
     const appendRevealItemAndSelect = (request: TimelineUtils.NetworkRequest.TimelineNetworkRequest): void => {
       contextMenu.revealSection().appendItem(
-          i18nString(UIStrings.revealInNetworkPanel),
+          i18nString(UIStrings.openInNetworkPanel),
           () => UI.ViewManager.ViewManager.instance()
                     .showView('network')
                     .then(this.networkLogView.resetFilter.bind(this.networkLogView))
@@ -783,13 +798,17 @@ export class NetworkPanel extends UI.Panel.Panel implements
     if (target instanceof SDK.Resource.Resource) {
       if (target.request) {
         appendRevealItem(target.request);
+      } else {
+        appendRevealItemMissingData();
       }
       return;
     }
     if (target instanceof Workspace.UISourceCode.UISourceCode) {
       const resource = Bindings.ResourceUtils.resourceForURL(target.url());
       if (resource && resource.request) {
         appendRevealItem(resource.request);
+      } else {
+        appendRevealItemMissingData();
       }
       return;
     }

front_end/panels/timeline/components/NetworkRequestDetails.ts

@@ -173,7 +173,7 @@ export class NetworkRequestDetails extends HTMLElement {
           return;
         }
         // Add a wrapper class here.
-        // The main reason is the `Reveal in Network panel` option is handled by the context menu provider, which will
+        // The main reason is the `Open in Network panel` option is handled by the context menu provider, which will
         // add this option for all supporting types. And there are a lot of context menu providers that support
         // `SDK.NetworkRequest.NetworkRequest`, for example `Override content` by PersistenceActions, but we so far just
         // want the one to reveal in network panel, so add a new class which will only be supported by Network panel.

front_end/panels/timeline/utils/NetworkRequest.ts

@@ -22,7 +22,7 @@ export function createTimelineNetworkRequest(syntheticNetworkRequest: Trace.Type
 }
 
 // Add a wrapper class here.
-// The reason is the `Reveal in Network panel` option is handled by the context menu provider, which will add this
+// The reason is the `Open in Network panel` option is handled by the context menu provider, which will add this
 // option for all supporting types. And there are a lot of context menu providers that support
 // `SDK.NetworkRequest.NetworkRequest`, for example `Override content` by PersistenceActions, but we so far just want
 // the one to reveal in network panel, so add a new class which will only be supported by Network panel. Also we want to