Bug 1013909 - Make CSS Coverage smarter in its handling of compressed style sheets; r=harth

browser/devtools/styleeditor/StyleEditorUI.jsm

@@ -317,7 +317,7 @@ StyleEditorUI.prototype = {
       }
       NetUtil.asyncFetch(file, (stream, status) => {
         if (!Components.isSuccessCode(status)) {
-          this.emit("error", LOAD_ERROR);
+          this.emit("error", { key: LOAD_ERROR });
           return;
         }
         let source = NetUtil.readInputStreamToString(stream, stream.available());
@@ -347,13 +347,11 @@ StyleEditorUI.prototype = {
    *
    * @param  {string} event
    *         Event name
-   * @param  {string} errorCode
-   *         Code represeting type of error
-   * @param  {string} message
-   *         The full error message
+   * @param  {data} data
+   *         The event data
    */
-  _onError: function(event, errorCode, message) {
-    this.emit("error", errorCode, message);
+  _onError: function(event, data) {
+    this.emit("error", data);
   },
 
   /**
@@ -501,15 +499,29 @@ StyleEditorUI.prototype = {
 
           editor.onShow();
 
+          this.emit("editor-selected", editor);
+
+          // Is there any CSS coverage markup to include?
           csscoverage.getUsage(this._target).then(usage => {
             let href = editor.styleSheet.href || editor.styleSheet.nodeHref;
             usage.createEditorReport(href).then(data => {
               editor.removeAllUnusedRegions();
-              editor.addUnusedRegions(data.reports);
+
+              if (data.reports.length > 0) {
+                // So there is some coverage markup, but can we apply it?
+                let text = editor.sourceEditor.getText() + "\r";
+                // If the CSS text contains a '}' with some non-whitespace
+                // after then we assume this is compressed CSS and stop
+                // marking-up.
+                if (!/}\s*\S+\s*\r/.test(text)) {
+                  editor.addUnusedRegions(data.reports);
+                }
+                else {
+                  this.emit("error", { key: "error-compressed", level: "info" });
+                }
+              }
             });
           }, console.error);
-
-          this.emit("editor-selected", editor);
         }.bind(this)).then(null, Cu.reportError);
       }.bind(this)
     });

browser/devtools/styleeditor/StyleEditorUtil.jsm

@@ -22,7 +22,8 @@ Cu.import("resource://gre/modules/Services.jsm");
 
 const PROPERTIES_URL = "chrome://browser/locale/devtools/styleeditor.properties";
 
-const console = Services.console;
+const require = Cu.import("resource://gre/modules/devtools/Loader.jsm", {}).devtools.require;
+const console = require("resource://gre/modules/devtools/Console.jsm").console;
 const gStringBundle = Services.strings.createBundle(PROPERTIES_URL);
 
 
@@ -36,12 +37,17 @@ const gStringBundle = Services.strings.createBundle(PROPERTIES_URL);
  */
 this._ = function _(aName)
 {
-
-  if (arguments.length == 1) {
-    return gStringBundle.GetStringFromName(aName);
+  try {
+    if (arguments.length == 1) {
+      return gStringBundle.GetStringFromName(aName);
+    }
+    let rest = Array.prototype.slice.call(arguments, 1);
+    return gStringBundle.formatStringFromName(aName, rest, rest.length);
+  }
+  catch (ex) {
+    console.error(ex);
+    throw new Error("L10N error. '" + aName + "' is missing from " + PROPERTIES_URL);
   }
-  let rest = Array.prototype.slice.call(arguments, 1);
-  return gStringBundle.formatStringFromName(aName, rest, rest.length);
 }
 
 /**

browser/devtools/styleeditor/StyleSheetEditor.jsm

@@ -231,7 +231,7 @@ StyleSheetEditor.prototype = {
         return source;
       });
     }, e => {
-      this.emit("error", LOAD_ERROR, this.styleSheet.href);
+      this.emit("error", { key: LOAD_ERROR, append: this.styleSheet.href });
       throw e;
     })
   },
@@ -320,8 +320,8 @@ StyleSheetEditor.prototype = {
    *         Event type
    * @param  {string} errorCode
    */
-  _onError: function(event, errorCode) {
-    this.emit("error", errorCode);
+  _onError: function(event, data) {
+    this.emit("error", data);
   },
 
   /**
@@ -502,7 +502,7 @@ StyleSheetEditor.prototype = {
           if (callback) {
             callback(null);
           }
-          this.emit("error", SAVE_ERROR);
+          this.emit("error", { key: SAVE_ERROR });
           return;
         }
         FileUtils.closeSafeFileOutputStream(ostream);

browser/devtools/styleeditor/styleeditor-panel.js

@@ -83,27 +83,29 @@ StyleEditorPanel.prototype = {
    *
    * @param  {string} event
    *         Type of event
-   * @param  {string} code
-   *         Error code of error to report
-   * @param  {string} message
-   *         Extra message to append to error message
+   * @param  {string} data
+   *         The parameters to customize the error message
    */
-  _showError: function(event, code, message) {
+  _showError: function(event, data) {
     if (!this._toolbox) {
       // could get an async error after we've been destroyed
       return;
     }
 
-    let errorMessage = _(code);
-    if (message) {
-      errorMessage += " " + message;
+    let errorMessage = _(data.key);
+    if (data.append) {
+      errorMessage += " " + data.append;
     }
 
     let notificationBox = this._toolbox.getNotificationBox();
     let notification = notificationBox.getNotificationWithValue("styleeditor-error");
+    let level = (data.level === "info") ?
+                notificationBox.PRIORITY_INFO_LOW :
+                notificationBox.PRIORITY_CRITICAL_LOW;
+
     if (!notification) {
-      notificationBox.appendNotification(errorMessage,
-        "styleeditor-error", "", notificationBox.PRIORITY_CRITICAL_LOW);
+      notificationBox.appendNotification(errorMessage, "styleeditor-error",
+                                         "", level);
     }
   },
 

browser/locales/en-US/chrome/browser/devtools/styleeditor.properties

@@ -38,6 +38,10 @@ error-load=Style sheet could not be loaded.
 # LOCALIZATION NOTE  (error-save): This is shown when saving fails.
 error-save=Style sheet could not be saved.
 
+# LOCALIZATION NOTE  (error-compressed): This is shown when we can't show
+# coverage information because the css source is compressed.
+error-compressed=Can't show coverage information for compressed stylesheets
+
 # LOCALIZATION NOTE  (importStyleSheet.title): This is the file picker title,
 # when you import a style sheet into the Style Editor.
 importStyleSheet.title=Import style sheet