Web Inspector: Truncate data URIs
authornvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 21 Aug 2015 02:34:34 +0000 (02:34 +0000)
committernvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 21 Aug 2015 02:34:34 +0000 (02:34 +0000)
https://bugs.webkit.org/show_bug.cgi?id=148212

Reviewed by Timothy Hatcher.

* UserInterface/Base/URLUtilities.js:
(parseURL):
Exit early to avoid an expensive RegExp match on a potentially very large data URI.

(parseQueryString):
Fix typo.

(WebInspector.displayNameForURL):
(WebInspector.truncateURL):
By default, only show first and last 3 characters of data URIs.

* UserInterface/Models/Resource.js:
(WebInspector.Resource.prototype.get displayURL):
For tooltips, show first and last 32 characters of data URIs.

* UserInterface/Models/SourceCodeLocation.js:
(WebInspector.SourceCodeLocation.prototype._locationString):
* UserInterface/Views/ResourceTreeElement.js:
(WebInspector.ResourceTreeElement.prototype._updateToolTip):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@188739 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Base/URLUtilities.js
Source/WebInspectorUI/UserInterface/Models/Resource.js
Source/WebInspectorUI/UserInterface/Models/SourceCodeLocation.js
Source/WebInspectorUI/UserInterface/Views/ResourceTreeElement.js

index 69e41e9..c09cdf4 100644 (file)
@@ -1,3 +1,30 @@
+2015-08-20  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        Web Inspector: Truncate data URIs
+        https://bugs.webkit.org/show_bug.cgi?id=148212
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Base/URLUtilities.js:
+        (parseURL):
+        Exit early to avoid an expensive RegExp match on a potentially very large data URI.
+
+        (parseQueryString):
+        Fix typo.
+
+        (WebInspector.displayNameForURL):
+        (WebInspector.truncateURL):
+        By default, only show first and last 3 characters of data URIs.
+
+        * UserInterface/Models/Resource.js:
+        (WebInspector.Resource.prototype.get displayURL):
+        For tooltips, show first and last 32 characters of data URIs.
+
+        * UserInterface/Models/SourceCodeLocation.js:
+        (WebInspector.SourceCodeLocation.prototype._locationString):
+        * UserInterface/Views/ResourceTreeElement.js:
+        (WebInspector.ResourceTreeElement.prototype._updateToolTip):
+
 2015-08-20  Devin Rousso  <drousso@apple.com>
 
         Web Inspector: Add flex alignment section to Visual sidebar
index 4177476..5f7907c 100644 (file)
@@ -74,6 +74,9 @@ function parseURL(url)
 {
     url = url ? url.trim() : "";
 
+    if (url.startsWith("data:"))
+        return {scheme: "data", host: null, port: null, path: null, queryString: null, fragment: null, lastPathComponent: null};
+
     var match = url.match(/^([^:]+):\/\/([^\/:]*)(?::([\d]+))?(?:(\/[^#]*)(?:#(.*))?)?$/i);
     if (!match)
         return {scheme: null, host: null, port: null, path: null, queryString: null, fragment: null, lastPathComponent: null};
@@ -169,7 +172,7 @@ function parseQueryString(queryString, arrayResult)
     function decode(string)
     {
         try {
-            // Replace "+" with " " then decode precent encoded values.
+            // Replace "+" with " " then decode percent encoded values.
             return decodeURIComponent(string.replace(/\+/g, " "));
         } catch (e) {
             return string;
@@ -191,6 +194,9 @@ function parseQueryString(queryString, arrayResult)
 
 WebInspector.displayNameForURL = function(url, urlComponents)
 {
+    if (url.startsWith("data:"))
+        return WebInspector.truncateURL(url);
+
     if (!urlComponents)
         urlComponents = parseURL(url);
 
@@ -204,6 +210,27 @@ WebInspector.displayNameForURL = function(url, urlComponents)
     return displayName || WebInspector.displayNameForHost(urlComponents.host) || url;
 };
 
+WebInspector.truncateURL = function(url, multiline = false, dataURIMaxSize = 6)
+{
+    if (!url.startsWith("data:"))
+        return url;
+
+    const dataIndex = url.indexOf(",") + 1;
+    let header = url.slice(0, dataIndex);
+    if (multiline)
+        header += "\n";
+
+    const data = url.slice(dataIndex);
+    if (data.length < dataURIMaxSize)
+        return header + data;
+
+    const firstChunk = data.slice(0, Math.ceil(dataURIMaxSize / 2));
+    const ellipsis = "\u2026";
+    const middleChunk = multiline ? `\n${ellipsis}\n` : ellipsis;
+    const lastChunk = data.slice(-Math.floor(dataURIMaxSize / 2));
+    return header + firstChunk + middleChunk + lastChunk;
+};
+
 WebInspector.displayNameForHost = function(host)
 {
     // FIXME <rdar://problem/11237413>: This should decode punycode hostnames.
index 0f0e619..12178e6 100644 (file)
@@ -135,6 +135,13 @@ WebInspector.Resource = class Resource extends WebInspector.SourceCode
         return WebInspector.displayNameForURL(this._url, this.urlComponents);
     }
 
+    get displayURL()
+    {
+        const isMultiLine = true;
+        const dataURIMaxSize = 64;
+        return WebInspector.truncateURL(this._url, isMultiLine, dataURIMaxSize);
+    }
+
     get initiatorSourceCodeLocation()
     {
         return this._initiatorSourceCodeLocation;
index 75692ae..ebc0386 100644 (file)
@@ -333,8 +333,9 @@ WebInspector.SourceCodeLocation = class SourceCodeLocation extends WebInspector.
 
         case WebInspector.SourceCodeLocation.NameStyle.Short:
         case WebInspector.SourceCodeLocation.NameStyle.Full:
-            var lineSuffix = sourceCode.url ? ":" + lineString : WebInspector.UIString(" (line %s)").format(lineString);
-            return prefix + (nameStyle === WebInspector.SourceCodeLocation.NameStyle.Full && sourceCode.url ? sourceCode.url : sourceCode.displayName) + lineSuffix;
+            const displayURL = sourceCode.displayURL;
+            const lineSuffix = displayURL ? ":" + lineString : WebInspector.UIString(" (line %s)").format(lineString);
+            return prefix + (nameStyle === WebInspector.SourceCodeLocation.NameStyle.Full && displayURL ? displayURL : sourceCode.displayName) + lineSuffix;
 
         default:
             console.error("Unknown nameStyle: " + nameStyle);
index 7bfd0d0..75670d7 100644 (file)
@@ -170,7 +170,7 @@ WebInspector.ResourceTreeElement = class ResourceTreeElement extends WebInspecto
 
     _updateToolTip()
     {
-        this.tooltip = this._resource.url;
+        this.tooltip = this._resource.displayURL;
     }
 
     _urlDidChange(event)