[DevTools] Application>Cache Storage: show query of urls and tooltip

Bug: 951414
Change-Id: I2c52dfeead4963868154ffc8ea9394f6d7bd7221
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1566120Reviewed-by: Erik Luo <luoe@chromium.org>
Commit-Queue: Haihong Li (Harley) <hhli@chromium.org>
Cr-Commit-Position: refs/heads/master@{#652236}

third_party/blink/renderer/devtools/front_end/resources/ServiceWorkerCacheViews.js

@@ -122,7 +122,7 @@ Resources.ServiceWorkerCacheView = class extends UI.SimpleView {
   _createDataGrid() {
     const columns = /** @type {!Array<!DataGrid.DataGrid.ColumnDescriptor>} */ ([
       {id: 'number', title: '#', sortable: false, width: '3px'},
-      {id: 'path', title: Common.UIString('Path'), weight: 4, sortable: true},
+      {id: 'name', title: Common.UIString('Name'), weight: 4, sortable: true},
       {id: 'responseType', title: ls`Response-Type`, weight: 1, align: DataGrid.DataGrid.Align.Right, sortable: true},
       {id: 'contentType', title: Common.UIString('Content-Type'), weight: 1, sortable: true}, {
         id: 'contentLength',
@@ -158,7 +158,7 @@ Resources.ServiceWorkerCacheView = class extends UI.SimpleView {
     const accending = this._dataGrid.isSortOrderAscending();
     const columnId = this._dataGrid.sortColumnId();
     let comparator;
-    if (columnId === 'path')
+    if (columnId === 'name')
       comparator = (a, b) => a._path.localeCompare(b._path);
     else if (columnId === 'contentType')
       comparator = (a, b) => a.data.mimeType.localeCompare(b.data.mimeType);
@@ -387,9 +387,11 @@ Resources.ServiceWorkerCacheView.DataGridNode = class extends DataGrid.DataGridN
   constructor(number, request, responseType) {
     super(request);
     this._number = number;
-    this._path = Common.ParsedURL.extractPath(request.url());
-    if (!this._path)
-      this._path = request.url();
+    const parsed = new Common.ParsedURL(request.url());
+    if (parsed.isValid)
+      this._name = request.url().trimURL(parsed.domain());
+    else
+      this._name = request.url();
     this._request = request;
     this._responseType = responseType;
   }
@@ -404,8 +406,8 @@ Resources.ServiceWorkerCacheView.DataGridNode = class extends DataGrid.DataGridN
     let value;
     if (columnId === 'number') {
       value = String(this._number);
-    } else if (columnId === 'path') {
-      value = this._path;
+    } else if (columnId === 'name') {
+      value = this._name;
     } else if (columnId === 'responseType') {
       if (this._responseType === 'opaqueResponse')
         value = 'opaque';
@@ -421,6 +423,7 @@ Resources.ServiceWorkerCacheView.DataGridNode = class extends DataGrid.DataGridN
       value = new Date(this._request.endTime * 1000).toLocaleString();
     }
     DataGrid.DataGrid.setElementText(cell, value || '', true);
+    cell.title = this._request.url();
     return cell;
   }
 };

third_party/blink/web_tests/http/tests/devtools/cache-storage/cache-data-expected.txt

@@ -17,7 +17,7 @@ Dumping CacheStorage tree:
         totalCount: 3
     cache: testCache2 - http://127.0.0.1:8000
         0, /1, default, text/plain, 0
-        1, /2, default, text/plain, 0
+        1, /2?query=19940123, default, text/plain, 0
         2, /H/22, default, text/plain, 0
         3, /L/11, default, text/plain, 0
         4, /T, default, text/javascript, 0
@@ -31,7 +31,7 @@ Dumping CacheStorage tree with URL path filter string "2"
         0, /2, default, text/plain, 0
         totalCount: 1
     cache: testCache2 - http://127.0.0.1:8000
-        0, /2, default, text/plain, 0
+        0, /2?query=19940123, default, text/plain, 0
         1, /H/22, default, text/plain, 0
         totalCount: 2
     cache: testCache3 - http://127.0.0.1:8000

third_party/blink/web_tests/http/tests/devtools/cache-storage/cache-data.js

@@ -30,10 +30,10 @@
         .then(ApplicationTestRunner.addCacheEntry.bind(this, 'testCache1', 'http://fake.request.com/2', 'Not Found'))
         .then(ApplicationTestRunner.addCacheEntryWithBlobType.bind(this, 'testCache1', 'http://fake.request.com/T', 'image/png'))
         .then(ApplicationTestRunner.addCacheEntry.bind(this, 'testCache2', 'http://fake.request.com/1', 'OK'))
-        .then(ApplicationTestRunner.addCacheEntry.bind(this, 'testCache2', 'http://fake.request.com/2', 'Not Found'))
+        .then(ApplicationTestRunner.addCacheEntry.bind(this, 'testCache2', 'http://fake.request.com/2?query=19940123', 'Not Found'))
         .then(ApplicationTestRunner.addCacheEntry.bind(this, 'testCache2', 'http://fake.request.com/L/11', 'OK'))
         .then(ApplicationTestRunner.addCacheEntry.bind(this, 'testCache2', 'http://fake.request.com/H/22', 'OK'))
-        // Note: tesrCache1, testCache2 both have entries from '.../T' but these two entries have different blob types intentionally
+        // Note: testCache1, testCache2 both have entries from '.../T' but these two entries have different blob types intentionally
         .then(ApplicationTestRunner.addCacheEntryWithBlobType.bind(this, 'testCache2', 'http://fake.request.com/T', 'text/javascript'))
         .then(ApplicationTestRunner.addCacheEntryWithNoCorsRequest.bind(this, 'testCache3', TestRunner.url('../resources/image.png')))
         .then(ApplicationTestRunner.addCacheEntryWithVarsResponse.bind(this, 'testCache3', 'http://fake.request.com/vars'))