[issues] Prepare the front-end for AffectedRequest change.

We are going to change the `browser_protocol.pdl` in a follow-up
back-end CL to make the `url` field of `AffectedRequest` mandatory and
the `requestId` field optional. This will remove the confusion with
issues for early CORS errors that happen before the `ResourceLoader` is
created, and for which we simply don't have a request ID (and will never
have one).

With this CL, the front-end works independent of whether the `requestId`
is provided or not, and can even deal with absent `url` fields (which
will not happen anymore after the back-end CL is landed).

Drive-by-fix: Tweak the CSS a bit, to ensure that the `<button>`
inherits the correct text settings.

Bug: 385693302
Change-Id: Ib529fd081e582fdaa5bea40cd902cd182b30b9a2
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6111100
Reviewed-by: Andres Olivares <[email protected]>
Commit-Queue: Benedikt Meurer <[email protected]>
Auto-Submit: Benedikt Meurer <[email protected]>
Commit-Queue: Andres Olivares <[email protected]>

Author: bmeurer

front_end/ui/components/request_link_icon/RequestLinkIcon.ts

@@ -153,18 +153,17 @@ export class RequestLinkIcon extends HTMLElement {
     return i18nString(UIStrings.requestUnavailableInTheNetwork);
   }
 
-  #getUrlForDisplaying(): Platform.DevToolsPath.UrlString|undefined {
-    if (!this.#request) {
-      return this.#affectedRequest?.url as Platform.DevToolsPath.UrlString;
+  #getUrlForDisplaying(): string|undefined {
+    if (!this.#displayURL) {
+      return undefined;
+    }
+    if (this.#request) {
+      return this.#request.url();
     }
-    return this.#request.url();
+    return this.#affectedRequest?.url;
   }
 
   #maybeRenderURL(): LitHtml.LitTemplate {
-    if (!this.#displayURL) {
-      return LitHtml.nothing;
-    }
-
     const url = this.#getUrlForDisplaying();
     if (!url) {
       return LitHtml.nothing;
@@ -174,23 +173,29 @@ export class RequestLinkIcon extends HTMLElement {
       return html`<span title=${url}>${this.#urlToDisplay}</span>`;
     }
 
-    const filename = extractShortPath(url);
+    const filename = extractShortPath(url as Platform.DevToolsPath.UrlString);
     return html`<span aria-label=${i18nString(UIStrings.shortenedURL)} title=${url}>${filename}</span>`;
   }
 
   async #render(): Promise<void> {
     return coordinator.write(() => {
-      // clang-format off
-      LitHtml.render(html`
-      <button class=${LitHtml.Directives.classMap({link: Boolean(this.#request)})}
-              title=${this.#getTooltip()}
-              jslog=${VisualLogging.link('request').track({click: true})}
-              @click=${this.handleClick}>
-        <devtools-icon name="arrow-up-down-circle"></devtools-icon>
-        ${this.#maybeRenderURL()}
-      </button>`,
-      this.#shadow, {host: this});
-      // clang-format on
+      // By default we render just the URL for the request link. If we also know
+      // the concrete network request, or at least its request ID, we surround
+      // the URL with a button, that opens the request in the Network panel.
+      let template = this.#maybeRenderURL();
+      if (this.#request || this.#affectedRequest?.requestId) {
+        // clang-format off
+        template = html`
+          <button class=${LitHtml.Directives.classMap({link: Boolean(this.#request)})}
+                  title=${this.#getTooltip()}
+                  jslog=${VisualLogging.link('request').track({click: true})}
+                  @click=${this.handleClick}>
+            <devtools-icon name="arrow-up-down-circle"></devtools-icon>
+            ${template}
+          </button>`;
+        // clang-format on
+      }
+      LitHtml.render(template, this.#shadow, {host: this});
     });
   }
 }

front_end/ui/components/request_link_icon/requestLinkIcon.css

@@ -21,6 +21,9 @@ button {
   background: transparent;
   margin: 0;
   padding: 0;
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
 
   &.link {
     cursor: pointer;