[devtools] Add Url and Path Column to Network Log

This patch adds url and path as available columns to
the network log view and allows the name to be removed
because it is not needed if the user decides to show
the path or the whole url.

Bug: chromium:993366
Change-Id: Ib4600d1631bd436cb3c8b8e79b3709dddc38b166
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1809161Reviewed-by: Yang Guo <yangguo@chromium.org>
Commit-Queue: Jan Scheffler <janscheffler@chromium.org>
Cr-Commit-Position: refs/heads/master@{#698891}

third_party/blink/renderer/devtools/front_end/langpacks/shared_strings.grdp

@@ -4,6 +4,9 @@
   <message name="IDS_DEVTOOLS_007c41a9025be2c8e14b496ed3ee00f8" desc="Text to save an item">
     Save…
   </message>
+  <message name="IDS_DEVTOOLS_02a3a357710cc2a5dfdfb74ed012fb59" desc="Text in Timeline UIUtils of the Performance panel">
+    Url
+  </message>
   <message name="IDS_DEVTOOLS_0511551e6cf7d61acd9b62f9304efa93" desc="Tooltip text that appears on the setting to preserve log when hovering over the item">
     Do not clear log on page reload / navigation
   </message>

third_party/blink/renderer/devtools/front_end/network/NetworkDataGridNode.js

@@ -688,6 +688,12 @@ Network.NetworkRequestNode = class extends Network.NetworkNode {
       case 'name':
         this._renderNameCell(cell);
         break;
+      case 'path':
+        this._setTextAndTitle(cell, this._request.pathname);
+        break;
+      case 'url':
+        this._setTextAndTitle(cell, this._request.url());
+        break;
       case 'method':
         this._setTextAndTitle(cell, this._request.requestMethod);
         break;

third_party/blink/renderer/devtools/front_end/network/NetworkLogViewColumns.js

@@ -654,11 +654,16 @@ Network.NetworkLogViewColumns._defaultColumns = [
     subtitle: Common.UIString('Path'),
     visible: true,
     weight: 20,
-    hideable: false,
     nonSelectable: false,
     alwaysVisible: true,
     sortingFunction: Network.NetworkRequestNode.NameComparator
   },
+  {
+    id: 'path',
+    title: ls`Path`,
+    sortingFunction: Network.NetworkRequestNode.RequestPropertyComparator.bind(null, 'path')
+  },
+  {id: 'url', title: ls`Url`, sortingFunction: Network.NetworkRequestNode.RequestPropertyComparator.bind(null, 'url')},
   {
     id: 'method',
     title: Common.UIString('Method'),

third_party/blink/renderer/devtools/front_end/sdk/NetworkRequest.js

@@ -626,6 +626,13 @@ SDK.NetworkRequest = class extends Common.Object {
     return lastSlashIndex !== -1 ? path.substring(0, lastSlashIndex) : '';
   }
 
+  /**
+   * @return {string}
+   */
+  get pathname() {
+    return this._parsedURL.path;
+  }
+
   /**
    * @return {!Common.ResourceType}
    */

third_party/blink/renderer/devtools/front_end/timeline/timeline_strings.grdp

@@ -18,9 +18,6 @@
   <message name="IDS_DEVTOOLS_01ea16e89d02c33ef2a6a5db67665e0a" desc="Text in Timeline Flame Chart Data Provider of the Performance panel">
     Main — <ph name="TRACK_URL">$1s<ex>example.com</ex></ph>
   </message>
-  <message name="IDS_DEVTOOLS_02a3a357710cc2a5dfdfb74ed012fb59" desc="Text in Timeline UIUtils of the Performance panel">
-    Url
-  </message>
   <message name="IDS_DEVTOOLS_04cbdd8baeb482d9ff2e48b186479a06" desc="Text in Timeline UIUtils of the Performance panel">
     Streaming Wasm Response
   </message>