[DevTools] Add support for filtering blob urls in NetworkLog

Bug: 607240
Change-Id: I2595c44cdb80a9abc9098bd66fb38145b697a6d0
Reviewed-on: https://chromium-review.googlesource.com/c/1447231
Commit-Queue: Joey Arhar <jarhar@chromium.org>
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Cr-Commit-Position: refs/heads/master@{#628407}

third_party/blink/renderer/devtools/front_end/common/ParsedURL.js

@@ -46,10 +46,17 @@ Common.ParsedURL = class {
     this.folderPathComponents = '';
     this.lastPathComponent = '';
 
-    const match = url.match(Common.ParsedURL._urlRegex());
+    const isBlobUrl = this.url.startsWith('blob:');
+    const urlToMatch = isBlobUrl ? url.substring(5) : url;
+    const match = urlToMatch.match(Common.ParsedURL._urlRegex());
     if (match) {
       this.isValid = true;
-      this.scheme = match[2].toLowerCase();
+      if (isBlobUrl) {
+        this._blobInnerScheme = match[2].toLowerCase();
+        this.scheme = 'blob';
+      } else {
+        this.scheme = match[2].toLowerCase();
+      }
       this.user = match[3];
       this.host = match[4];
       this.port = match[5];
@@ -61,6 +68,10 @@ Common.ParsedURL = class {
         this.scheme = 'data';
         return;
       }
+      if (this.url.startsWith('blob:')) {
+        this.scheme = 'blob';
+        return;
+      }
       if (this.url === 'about:blank') {
         this.scheme = 'about';
         return;
@@ -296,6 +307,8 @@ Common.ParsedURL = class {
 
     if (this.isDataURL())
       return this.dataURLDisplayName();
+    if (this.isBlobURL())
+      return this.url;
     if (this.isAboutBlank())
       return this.url;
 
@@ -333,6 +346,13 @@ Common.ParsedURL = class {
     return this.scheme === 'data';
   }
 
+  /**
+   * @return {boolean}
+   */
+  isBlobURL() {
+    return this.url.startsWith('blob:');
+  }
+
   /**
    * @return {string}
    */
@@ -355,7 +375,8 @@ Common.ParsedURL = class {
   securityOrigin() {
     if (this.isDataURL())
       return 'data:';
-    return this.scheme + '://' + this.domain();
+    const scheme = this.isBlobURL() ? this._blobInnerScheme : this.scheme;
+    return scheme + '://' + this.domain();
   }
 
   /**

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

@@ -116,6 +116,7 @@ Network.NetworkLogView = class extends UI.VBox {
     this._dataURLFilterUI = new UI.CheckboxFilterUI(
         'hide-data-url', Common.UIString('Hide data URLs'), true, this._networkHideDataURLSetting);
     this._dataURLFilterUI.addEventListener(UI.FilterUI.Events.FilterChanged, this._filterChanged.bind(this), this);
+    this._dataURLFilterUI.element().title = ls`Hides data: and blob: URLs`;
     filterBar.addFilter(this._dataURLFilterUI);
 
     const filterItems =
@@ -1351,7 +1352,7 @@ Network.NetworkLogView = class extends UI.VBox {
     const categoryName = request.resourceType().category().title;
     if (!this._resourceCategoryFilterUI.accept(categoryName))
       return false;
-    if (this._dataURLFilterUI.checked() && request.parsedURL.isDataURL())
+    if (this._dataURLFilterUI.checked() && (request.parsedURL.isDataURL() || request.parsedURL.isBlobURL()))
       return false;
     if (request.statusText === 'Service Worker Fallback Required')
       return false;

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

@@ -553,6 +553,9 @@ SDK.NetworkRequest = class extends Common.Object {
     if (this._parsedURL.isDataURL()) {
       this._name = this._parsedURL.dataURLDisplayName();
       this._path = '';
+    } else if (this._parsedURL.isBlobURL()) {
+      this._name = this._parsedURL.url;
+      this._path = '';
     } else if (this._parsedURL.isAboutBlank()) {
       this._name = this._parsedURL.url;
       this._path = '';

third_party/blink/web_tests/http/tests/devtools/network/network-filters-expected.txt

@@ -39,4 +39,10 @@ Found results: 1
 filterText: -is:from-cache
 Found results: 3
 
+hide data URLs unchecked
+Found results: 6
+
+hide data URLs checked
+Found results: 4
+
 

third_party/blink/web_tests/http/tests/devtools/network/network-filters.js

@@ -9,17 +9,20 @@
 
   await NetworkTestRunner.clearNetworkCache();
 
+  async function makeFetchPromise(url) {
+    return new Promise(resolve => {
+      NetworkTestRunner.makeFetch(url, {}, resolve);
+    });
+  }
+
   NetworkTestRunner.recordNetwork();
 
-  NetworkTestRunner.makeFetch('resources/style.css', {}, ensureAllResources);
-  NetworkTestRunner.makeFetch('resources/abe.png', {}, () => {
-    // Ensures result is cached.
-    NetworkTestRunner.makeFetch('resources/abe.png', {}, ensureAllResources);
-    ensureAllResources();
-  });
-  NetworkTestRunner.makeFetch('missing/foo.bar', {}, ensureAllResources);
+  await makeFetchPromise('resources/style.css');
+  await makeFetchPromise('resources/abe.png');
+  await makeFetchPromise('resources/abe.png');  // Ensure result is cached.
+  await makeFetchPromise('missing/foo.bar');
 
-  var filterChecks = [
+  const filterChecks = [
     '-.css',
     '-.png',
     'css',
@@ -35,34 +38,44 @@
     '-is:from-cache',
   ];
 
-  var resourceCount = 0;
-  var totalResourceCount = 4;
-  function ensureAllResources() {
-    if (++resourceCount >= totalResourceCount)
-      checkFilters();
+  for (const filterText of filterChecks) {
+    TestRunner.addResult('filterText: ' + filterText);
+    setNetworkLogFilter(filterText);
+    printNetworkLog();
   }
+  setNetworkLogFilter('');
+
+  await TestRunner.evaluateInPageAsync(
+      `fetch('data:;base64,c2VuZGluZyB0aGlzIHV0Zi04IHN0cmluZyBhcyBhIGJpbmFyeSBtZXNzYWdlLi4u')`);
+  await TestRunner.evaluateInPageAsync(
+      `fetch(URL.createObjectURL(new Blob(new Uint8Array([1, 2, 3, 4]))))`);
+  UI.panels.network._networkLogView._filterChanged(null);
 
-  function checkFilters() {
-    for (var filterText of filterChecks) {
-      TestRunner.addResult('filterText: ' + filterText);
-      setNetworkLogFilter(filterText);
+  TestRunner.addResult('hide data URLs unchecked');
+  printNetworkLog();
 
-      var nodes = UI.panels.network._networkLogView.flatNodesList();
-      var foundNodesCount = 0;
-      for (var i = 0; i < nodes.length; i++) {
-        if (!nodes[i][Network.NetworkLogView._isFilteredOutSymbol])
-          foundNodesCount++;
-      }
+  UI.panels.network._networkLogView._dataURLFilterUI.setChecked(true);
+  UI.panels.network._networkLogView._filterChanged(null);
+  TestRunner.addResult('hide data URLs checked');
+  printNetworkLog();
 
-      TestRunner.addResult('Found results: ' + foundNodesCount);
-      TestRunner.addResult('');
+  TestRunner.completeTest();
+
+  function printNetworkLog() {
+    const nodes = UI.panels.network._networkLogView.flatNodesList();
+    let foundNodesCount = 0;
+    for (let i = 0; i < nodes.length; i++) {
+      if (!nodes[i][Network.NetworkLogView._isFilteredOutSymbol])
+        foundNodesCount++;
     }
-    TestRunner.completeTest();
+
+    TestRunner.addResult('Found results: ' + foundNodesCount);
+    TestRunner.addResult('');
   }
 
   /**
-     * @param {string} value
-     */
+   * @param {string} value
+   */
   function setNetworkLogFilter(value) {
     UI.panels.network._networkLogView._textFilterUI.setValue(value);
     UI.panels.network._networkLogView._filterChanged(null);  // event not used in this method, so passing null