Install styles from *.user.css file

_locales/en/messages.json

@@ -7,6 +7,10 @@
     "message": "Add Style",
     "description": "Title of the page for adding styles"
   },
+  "alphaChannel": {
+    "message": "Opacity",
+    "description": "Label of color's opacity"
+  },
   "appliesAdd": {
     "message": "Add",
     "description": "Label for the button to add an 'applies' entry"
@@ -36,6 +40,14 @@
     "message": "Applies to",
     "description": "Label for 'applies to' fields on the edit/add screen"
   },
+  "appliesLineWidgetLabel": {
+    "message": "Display 'Applies to' info",
+    "description": "Label for the checkbox to display applies-to information in the single editor"
+  },
+  "appliesLineWidgetWarning": {
+    "message": "Does not work with minified CSS",
+    "description": "A warning that applies-to information won't show properly with minified CSS"
+  },
   "appliesRegexpOption": {
     "message": "URLs matching the regexp",
     "description": "Option to make the style apply to the entered string as a regular expression"
@@ -64,6 +76,10 @@
     "message": "Apply all updates",
     "description": "Label for the button to apply all detected updates"
   },
+  "author": {
+    "message": "Author",
+    "description": "Label for the style author"
+  },
   "backupButtons": {
     "message": "Backup",
     "description": "Heading for backup"
@@ -83,6 +99,10 @@
   "updateCheckHistory": {
     "message": "History of update checks"
   },
+  "configureStyle": {
+    "message": "Configure",
+    "description": "Label for the button to configure userstyle"
+  },
   "checkForUpdate": {
     "message": "Check for update",
     "description": "Label for the button to check a single style for an update"
@@ -167,6 +187,14 @@
     "message": "No",
     "description": "'No' button in a confirm dialog"
   },
+  "confirmDefault": {
+    "message": "Use default",
+    "description": "'Set to default' button in a confirm dialog"
+  },
+  "confirmSave": {
+    "message": "Save",
+    "description": "'Save' button in a confirm dialog"
+  },
   "confirmStop": {
     "message": "Stop",
     "description": "'Stop' button in a confirm dialog"
@@ -175,6 +203,10 @@
     "message": "Yes",
     "description": "'Yes' button in a confirm dialog"
   },
+  "confirmClose": {
+    "message": "Close",
+    "description": "'Close' button in a confirm dialog"
+  },
   "dbError": {
     "message": "An error has occurred using the Stylus database. Would you like to visit a web page with possible solutions?",
     "description": "Prompt when a DB error is encountered"
@@ -257,6 +289,26 @@
     "message": "Export",
     "description": "Label for the button to export a style ('edit' page) or all styles ('manage' page)"
   },
+  "externalLink": {
+    "message": "External link",
+    "description": "Label for external links"
+  },
+  "externalHomepage": {
+    "message": "Homepage",
+    "description": "Label for the external link to style's homepage"
+  },
+  "externalSupport": {
+    "message": "Support",
+    "description": "Label for the external link to style's support site"
+  },
+  "externalFeedback": {
+    "message": "Feedback",
+    "description": "Label for the external link to send feedback for the style"
+  },
+  "externalUsercssDocument": {
+    "message": "Documentation for Usercss",
+    "description": "Label for the external link to usercss documentation"
+  },
   "filteredStyles": {
     "message": "$numShown$ shown of $numTotal$ total",
     "description": "TL note - make this message short",
@@ -345,10 +397,48 @@
     "message": "Discard contents of current style and overwrite it with the imported style",
     "description": "Label for the button to import and overwrite current style"
   },
+  "installButton": {
+    "message": "Install",
+    "description": "Label for install button"
+  },
+  "installButtonInstalled": {
+    "message": "Installed",
+    "description": "Text displayed when the style is successfully installed"
+  },
+  "installButtonUpdate": {
+    "message": "Update",
+    "description": "Label for update button"
+  },
+  "installButtonReinstall": {
+    "message": "Reinstall",
+    "description": "Label for reinstall button"
+  },
   "installUpdate": {
     "message": "Install update",
     "description": "Label for the button to install an update for a single style"
   },
+  "installUpdateFrom": {
+    "message": "Currently the style is updated from $url$",
+    "description": "Label to describe where the style gets update",
+    "placeholders": {
+      "url": {
+        "content": "$1"
+      }
+    }
+  },
+  "installUpdateFromLabel": {
+    "message": "Install update from $url$",
+    "description": "Label for the checkbox to save current URL for update check",
+    "placeholders": {
+      "url": {
+        "content": "$1"
+      }
+    }
+  },
+  "license": {
+    "message": "License",
+    "description": "Label for the license"
+  },
   "linterConfigPopupTitle": {
     "message": "Set $linter$ rules configuration",
     "description": "Stylelint or CSSLint popup header",
@@ -366,6 +456,15 @@
     "message": "(Set rule as: 0 = disabled; 1 = warning; 2 = error)",
     "description": "CSSLint rule config values"
   },
+  "linterCSSLintIncompatible": {
+    "message": "CSSLint doesn't support $preprocessorname$ preprocessor",
+    "description": "The label to display when the preprocessor isn't compatible with CSSLint",
+    "placeholders": {
+      "preprocessorname": {
+        "content": "$1"
+      }
+    }
+  },
   "linterInvalidConfigError": {
     "message": "Not saved due to these invalid configuration settings:",
     "description": "Invalid linter config will show a message followed by a list of invalid entries"
@@ -395,6 +494,10 @@
     "message": "See a full list of rules",
     "description": "Stylelint or CSSLint rules label added immediately before a link"
   },
+  "liveReloadLabel": {
+    "message": "Live reload",
+    "description": "The label of live-reload feature"
+  },
   "manageFilters": {
     "message": "Filters",
     "description": "Label for filters container"
@@ -483,6 +586,10 @@
     "message": "More Options",
     "description": "Subheading for options section on manage page."
   },
+  "parseUsercssError": {
+    "message": "Stylus failed to parse usercss:",
+    "description": "The error message to show when stylus failed to parse usercss"
+  },
   "popupManageTooltip": {
     "message": "Shift-click or right-click opens manager with styles applicable for current site",
     "description": "Tooltip for the 'Manage' button in the popup."
@@ -629,6 +736,56 @@
       }
     }
   },
+  "styleInstallOverwrite" : {
+    "message": "'$stylename$' is already installed. Overwrite?\nVersion: $oldVersion$ -> $newVersion$",
+    "description": "Confirmation when re-installing a style",
+    "placeholders": {
+      "stylename": {
+        "content": "$1"
+      },
+      "oldVersion": {
+        "content": "$2"
+      },
+      "newVersion": {
+        "content": "$3"
+      }
+    }
+  },
+  "styleInstallFailed": {
+    "message": "Failed to install userstyle!\n$error$",
+    "description": "Warning when installation failed",
+    "placeholders": {
+      "error": {
+        "content": "$1"
+      }
+    }
+  },
+  "styleMetaErrorCheckbox": {
+    "message": "Invalid @var checkbox: value must be 0 or 1",
+    "description": "Error displayed when the value of @var checkbox is invalid"
+  },
+  "styleMetaErrorColor": {
+    "message": "$color$ is not a valid color",
+    "description": "Error displayed when the value of @var color is invalid",
+    "placeholders": {
+      "color": {
+        "content": "$1"
+      }
+    }
+  },
+  "styleMetaErrorSelectValueMismatch": {
+    "message": "Invalid @select: value doesn't exist in the list",
+    "description": "Error displayed when the value of @select is invalid"
+  },
+  "styleMissingMeta": {
+    "message": "Missing metadata @$key$",
+    "description": "Error displayed when a mandatory metadata is missing",
+    "placeholders": {
+      "key": {
+        "content": "$1"
+      }
+    }
+  },
   "styleMissingName": {
     "message": "Enter a name.",
     "description": "Error displayed when user saves without providing a name"
@@ -645,6 +802,10 @@
     "message": "Mozilla Format",
     "description": "Heading for the section with buttons to import/export Mozilla format of the style"
   },
+  "styleFromMozillaFormatError": {
+    "message": "Failed to import from Mozilla format",
+    "description": "Label for the import error"
+  },
   "styleFromMozillaFormatPrompt": {
     "message": "Paste the Mozilla-format code",
     "description": "Prompt in the dialog displayed after clicking 'Import from Mozilla format' button"
@@ -666,6 +827,10 @@
       }
     }
   },
+  "styleUpdateDiscardChanges": {
+    "message": "The style is changed outside of the editor. Would you like to reload the style?",
+    "description": "Confirmation to update the style in the editor"
+  },
   "stylusUnavailableForURL": {
     "message": "Stylus doesn't work on pages like this.",
     "description": "Note in the toolbar pop-up when on a URL Stylus can't affect"
@@ -743,6 +908,10 @@
     "message": "Updates installed:",
     "description": "Text that displays when an update is installed on options page. Followed by the number of currently installed updates."
   },
+  "versionInvalidOlder": {
+    "message": "The version is older then installed style.",
+    "description": "Displayed when the version of style is older then installed one"
+  },
   "writeStyleFor": {
     "message": "Write style for: ",
     "description": "Label for toolbar pop-up that precedes the links to write a new style"
@@ -805,6 +974,9 @@
   "optionsAdvancedContextDelete": {
     "message": "Add 'Delete' in editor context menu"
   },
+  "optionsAdvancedNewStyleInUsercss": {
+    "message": "Write new style as usercss"
+  },
   "optionsActions": {
     "message": "Actions"
   },

background/background.js

@@ -1,5 +1,6 @@
 /* global dbExec, getStyles, saveStyle */
 /* global handleCssTransitionBug */
+/* global usercssHelper openEditor */
 'use strict';
 
 // eslint-disable-next-line no-var
@@ -302,6 +303,14 @@ function onRuntimeMessage(request, sender, sendResponse) {
       saveStyle(request).then(sendResponse);
       return KEEP_CHANNEL_OPEN;
 
+    case 'saveUsercss':
+      usercssHelper.save(request, true).then(sendResponse);
+      return KEEP_CHANNEL_OPEN;
+
+    case 'buildUsercss':
+      usercssHelper.build(request, true).then(sendResponse);
+      return KEEP_CHANNEL_OPEN;
+
     case 'healthCheck':
       dbExec()
         .then(() => sendResponse(true))
@@ -313,5 +322,36 @@ function onRuntimeMessage(request, sender, sendResponse) {
         .then(sendResponse)
         .catch(() => sendResponse(null));
       return KEEP_CHANNEL_OPEN;
+
+    case 'openUsercssInstallPage':
+      usercssHelper.openInstallPage(sender.tab.id, request).then(sendResponse);
+      return KEEP_CHANNEL_OPEN;
+
+    case 'closeTab':
+      closeTab(sender.tab.id, request).then(sendResponse);
+      return KEEP_CHANNEL_OPEN;
+
+    case 'openEditor':
+      openEditor(request.id);
+      return;
   }
 }
+
+function closeTab(tabId, request) {
+  return new Promise(resolve => {
+    if (request.tabId) {
+      tabId = request.tabId;
+    }
+    chrome.tabs.remove(tabId, () => {
+      const {lastError} = chrome.runtime;
+      if (lastError) {
+        resolve({
+          status: 'error',
+          error: lastError.message || String(lastError)
+        });
+        return;
+      }
+      resolve({status: 'success'});
+    });
+  });
+}

background/storage.js

@@ -381,20 +381,29 @@ function saveStyle(style) {
   }
   let existed;
   let codeIsUpdated;
-  if (reason === 'update' || reason === 'update-digest') {
-    return calcStyleDigest(style).then(digest => {
-      style.originalDigest = digest;
-      return decide();
-    });
+
+  return maybeCalcDigest()
+    .then(maybeImportFix)
+    .then(decide);
+
+  function maybeCalcDigest() {
+    if (reason === 'update' || reason === 'update-digest') {
+      return calcStyleDigest(style).then(digest => {
+        style.originalDigest = digest;
+      });
+    }
+    return Promise.resolve();
   }
-  if (reason === 'import') {
-    style.originalDigest = style.originalDigest || style.styleDigest; // TODO: remove in the future
-    delete style.styleDigest; // TODO: remove in the future
-    if (typeof style.originalDigest !== 'string' || style.originalDigest.length !== 40) {
-      delete style.originalDigest;
+
+  function maybeImportFix() {
+    if (reason === 'import') {
+      style.originalDigest = style.originalDigest || style.styleDigest; // TODO: remove in the future
+      delete style.styleDigest; // TODO: remove in the future
+      if (typeof style.originalDigest !== 'string' || style.originalDigest.length !== 40) {
+        delete style.originalDigest;
+      }
     }
   }
-  return decide();
 
   function decide() {
     if (id !== null) {
@@ -712,7 +721,8 @@ function normalizeStyleSections({sections}) {
 
 
 function calcStyleDigest(style) {
-  const jsonString = JSON.stringify(normalizeStyleSections(style));
+  const jsonString = style.usercssData ?
+    style.sourceCode : JSON.stringify(normalizeStyleSections(style));
   const text = new TextEncoder('utf-8').encode(jsonString);
   return crypto.subtle.digest('SHA-1', text).then(hex);