Bug 1360868 - Properly formatted data URLs in source links. r=gl

MozReview-Commit-ID: 7loVwUynHhw

devtools/shared/inspector/css-logic.js

@@ -9,6 +9,8 @@
 const { getRootBindingParent } = require("devtools/shared/layout/utils");
 const { getTabPrefs } = require("devtools/shared/indentation");
 
+const MAX_DATA_URL_LENGTH = 40;
+
 /*
  * About the objects defined in this file:
  * - CssLogic contains style information about a view context. It provides
@@ -109,6 +111,13 @@ exports.shortSource = function (sheet) {
     return exports.l10n("rule.sourceInline");
   }
 
+  // If the sheet is a data URL, return a trimmed version of it.
+  let dataUrl = sheet.href.trim().match(/^data:.*?,((?:.|\r|\n)*)$/);
+  if (dataUrl) {
+    return dataUrl[1].length > MAX_DATA_URL_LENGTH ?
+      `${dataUrl[1].substr(0, MAX_DATA_URL_LENGTH - 1)}…` : dataUrl[1];
+  }
+
   // We try, in turn, the filename, filePath, query string, whole thing
   let url = {};
   try {
@@ -129,8 +138,7 @@ exports.shortSource = function (sheet) {
     return url.query;
   }
 
-  let dataUrl = sheet.href.match(/^(data:[^,]*),/);
-  return dataUrl ? dataUrl[1] : sheet.href;
+  return sheet.href;
 };
 
 const TAB_CHARS = "\t";