Use rules or config consistently

_locales/en/messages.json

@@ -349,24 +349,33 @@
     "message": "Install update",
     "description": "Label for the button to install an update for a single style"
   },
-  "linterConfigTitle": {
+  "linterConfigPopupTitle": {
-    "message": "Open a popup to configure the linter rules",
+    "message": "Set $linter$ rules configuration",
-    "description": "Tooltip on an icon to indicate it opens a popup with linter configuration settings"
+    "description": "Stylelint or CSSLint popup header",
+    "placeholders": {
+      "linter": {
+        "content": "$1"
+      }
+    }
+  },
+  "linterConfigTooltip": {
+    "message": "Click to configure this linter",
+    "description": "Icon tooltip to indicate that it opens a popup with the selected linter configuration"
   },
   "linterCSSLintSettings": {
-    "message": "(Set rules: 0 = disabled; 1 = warning; 2 = error)",
+    "message": "(Set rule as: 0 = disabled; 1 = warning; 2 = error)",
     "description": "CSSLint rule config values"
   },
-  "linterInvalidRuleError": {
+  "linterInvalidConfigError": {
-    "message": "Not saved due to these invalid rules:",
+    "message": "Not saved due to these invalid configuration settings:",
-    "description": "Invalid linter rules will show a message followed by a list of invalid rules"
+    "description": "Invalid linter config will show a message followed by a list of invalid entries"
   },
   "linterIssues": {
     "message": "Issues",
     "description": "Label for the CSS linter issues block on the style edit page"
   },
   "linterIssuesHelp": {
-    "message": "The issues found by $link$ rules:",
+    "message": "These issues were found by $link$:",
     "description": "Help popup message for the selected CSS linter issues block on the style edit page",
     "placeholders": {
       "link": {
@@ -376,7 +385,7 @@
   },
   "linterJSONError": {
     "message": "Invalid JSON format",
-    "description": "Setting linter rules with invalid JSON message"
+    "description": "Setting linter config with invalid JSON"
   },
   "linterResetMessage": {
     "message": "To undo accidental reset, press Ctrl-Z (or Cmd-Z) in the text box",
@@ -384,16 +393,7 @@
   },
   "linterRulesLink": {
     "message": "See a full list of rules",
-    "description": "Stylelint or CSSLint rules label added before a link"
+    "description": "Stylelint or CSSLint rules label added immediately before a link"
-  },
-  "linterRulesTitle": {
-    "message": "Set rules for $linter$",
-    "description": "Stylelint or CSSLint popup header",
-    "placeholders": {
-      "linter": {
-        "content": "$1"
-      }
-    }
   },
   "manageFilters": {
     "message": "Filters",

edit.html

@@ -189,7 +189,7 @@
             <option value="stylelint">Stylelint</option>
             <option value="null" i18n-text="genericDisabledLabel"></option>
           </select>
-          <span class="linter-settings" i18n-title="linterConfigTitle">
+          <span class="linter-settings" i18n-title="linterConfigTooltip">
             <svg id="linter-settings" class="svg-icon settings">
               <use xlink:href="#svg-icon-settings"/>
             </svg>&nbsp;

edit/csslint-config.js

@@ -4,7 +4,7 @@
  * CSSLint Config values
  * 0 = disabled; 1 = warning; 2 = error
  */
-window.csslintDefaultRuleConfig = {
+window.csslintDefaultConfig = {
   // Default warnings
   'display-property-grouping': 1,
   'duplicate-properties': 1,

edit/lint.js

@@ -1,6 +1,6 @@
 /* global CodeMirror messageBox */
 /* global editors makeSectionVisible showCodeMirrorPopup showHelp */
-/* global stylelintDefaultConfig csslintDefaultRuleConfig onDOMscripted injectCSS require */
+/* global stylelintDefaultConfig csslintDefaultConfig onDOMscripted injectCSS require */
 'use strict';
 
 function initLint() {
@@ -13,25 +13,25 @@ function initLint() {
   if ('ontouchstart' in document.body) {
     $('#lint h2').addEventListener('click', toggleLintReport);
   }
-  // initialize storage of rules
+  // initialize storage of linter config
-  BG.chromeSync.getValue('editorStylelintRules').then(rules => setStylelintRules(rules));
+  BG.chromeSync.getValue('editorStylelintConfig').then(config => setStylelintConfig(config));
-  BG.chromeSync.getValue('editorCSSLintRules').then(config => setCSSLintRules(config));
+  BG.chromeSync.getValue('editorCSSLintConfig').then(config => setCSSLintConfig(config));
 }
 
-function setStylelintRules(rules) {
+function setStylelintConfig(config) {
-  // can't use default parameters, because rules may be null
+  // can't use default parameters, because config may be null
-  if (Object.keys(rules || []).length === 0 && typeof stylelintDefaultConfig !== 'undefined') {
+  if (Object.keys(config || []).length === 0 && typeof stylelintDefaultConfig !== 'undefined') {
-    rules = deepCopy(stylelintDefaultConfig.rules);
+    config = deepCopy(stylelintDefaultConfig.rules);
   }
-  BG.chromeSync.setValue('editorStylelintRules', rules);
+  BG.chromeSync.setValue('editorStylelintConfig', config);
-  return rules;
+  return config;
 }
 
-function setCSSLintRules(config) {
+function setCSSLintConfig(config) {
-  if (Object.keys(config || []).length === 0 && typeof csslintDefaultRuleConfig !== 'undefined') {
+  if (Object.keys(config || []).length === 0 && typeof csslintDefaultConfig !== 'undefined') {
-    config = Object.assign({}, csslintDefaultRuleConfig);
+    config = Object.assign({}, csslintDefaultConfig);
   }
-  BG.chromeSync.setValue('editorCSSLintRules', config);
+  BG.chromeSync.setValue('editorCSSLintConfig', config);
   return config;
 }
 
@@ -226,7 +226,7 @@ function showLintHelp() {
     header = t('linterIssuesHelp', makeLink(url, 'stylelint'));
     template = rule => `<li>${makeLink(url + rule, rule)}</li>`;
   }
-  // to-do: change this to a generator
+  // Only show rules with issues in the popup
   $$('#lint td[role="severity"]').forEach(el => {
     const rule = el.dataset.rule;
     if (!rules.includes(rule)) {
@@ -266,21 +266,21 @@ function checkLinter(linter = prefs.get('editor.linter')) {
   return linter;
 }
 
-function checkRules(linter, rules) {
+function checkConfigRules(linter, config) {
   const invalid = [];
   const linterRules = linter === 'stylelint'
     ? Object.keys(window.stylelint.rules)
     : window.CSSLint.getRules().map(rule => rule.id);
-  Object.keys(rules).forEach(rule => {
+  Object.keys(config).forEach(setting => {
-    if (!linterRules.includes(rule)) {
+    if (!linterRules.includes(setting)) {
-      invalid.push(rule);
+      invalid.push(setting);
     }
   });
   return invalid;
 }
 
-function stringifyRules(rules) {
+function stringifyConfig(config) {
-  return JSON.stringify(rules, null, 2)
+  return JSON.stringify(config, null, 2)
     .replace(/,\n\s+\{\n\s+("severity":\s"\w+")\n\s+\}/g, ', {$1}');
 }
 
@@ -290,17 +290,17 @@ function setupLinterSettingsEvents(popup) {
     const linter = checkLinter(event.target.dataset.linter);
     const json = tryJSONparse(popup.codebox.getValue());
     if (json) {
-      const invalid = checkRules(linter, json);
+      const invalid = checkConfigRules(linter, json);
       if (invalid.length) {
         return showLinterErrorMessage(
           linter,
-          t('linterInvalidRuleError') + `<ul><li>${invalid.join('</li><li>')}</li></ul>`
+          t('linterInvalidConfigError') + `<ul><li>${invalid.join('</li><li>')}</li></ul>`
         );
       }
       if (linter === 'stylelint') {
-        setStylelintRules(json);
+        setStylelintConfig(json);
       } else {
-        setCSSLintRules(json);
+        setCSSLintConfig(json);
       }
       updateLinter(linter);
       showSavedMessage();
@@ -312,15 +312,15 @@ function setupLinterSettingsEvents(popup) {
   $('.reset', popup).addEventListener('click', event => {
     event.preventDefault();
     const linter = checkLinter(event.target.dataset.linter);
-    let rules;
+    let config;
     if (linter === 'stylelint') {
-      setStylelintRules();
+      setStylelintConfig();
-      rules = stylelintDefaultConfig.rules;
+      config = stylelintDefaultConfig.rules;
     } else {
-      setCSSLintRules();
+      setCSSLintConfig();
-      rules = csslintDefaultRuleConfig;
+      config = csslintDefaultConfig;
     }
-    popup.codebox.setValue(stringifyRules(rules));
+    popup.codebox.setValue(stringifyConfig(config));
     popup.codebox.focus();
   });
   $('.cancel', popup).addEventListener('click', event => {
@@ -333,20 +333,20 @@ function openStylelintSettings() {
   const linter = prefs.get('editor.linter');
   BG.chromeSync.getValue(
     linter === 'stylelint'
-      ? 'editorStylelintRules'
+      ? 'editorStylelintConfig'
-      : 'editorCSSLintRules'
+      : 'editorCSSLintConfig'
-  ).then(rules => {
+  ).then(config => {
-    if (!rules || rules.length === 0) {
+    if (!config || config.length === 0) {
-      rules = linter === 'stylelint'
+      config = linter === 'stylelint'
-        ? setStylelintRules(rules)
+        ? setStylelintConfig(config)
-        : setCSSLintRules(rules);
+        : setCSSLintConfig(config);
     }
-    const rulesString = stringifyRules(rules);
+    const configString = stringifyConfig(config);
-    setupLinterPopup(rulesString);
+    setupLinterPopup(configString);
   });
 }
 
-function setupLinterPopup(rules) {
+function setupLinterPopup(config) {
   const linter = prefs.get('editor.linter');
   const linterTitle = linter === 'stylelint' ? 'Stylelint' : 'CSSLint';
   function makeButton(className, text, options = {}) {
@@ -365,7 +365,7 @@ function setupLinterPopup(rules) {
     cm.setOption('mode', 'application/json');
     cm.setOption('lint', 'json');
   }
-  const popup = showCodeMirrorPopup(t('linterRulesTitle', linterTitle), $element({
+  const popup = showCodeMirrorPopup(t('linterConfigPopupTitle', linterTitle), $element({
     appendChild: [
       $element({
         tag: 'p',
@@ -373,7 +373,7 @@ function setupLinterPopup(rules) {
           t('linterRulesLink') + ' ',
           makeLink(
             linter === 'stylelint'
-              ? 'https://stylelint.io/demo/'
+              ? 'https://stylelint.io/user-guide/rules/'
               : 'https://github.com/CSSLint/csslint/wiki/Rules-by-ID',
             linterTitle
           ),
@@ -398,7 +398,7 @@ function setupLinterPopup(rules) {
   ];
   contents.insertBefore(popup.codebox.display.wrapper, contents.firstElementChild);
   popup.codebox.focus();
-  popup.codebox.setValue(rules);
+  popup.codebox.setValue(config);
   popup.codebox.clearHistory();
   onDOMscripted(loadJSON).then(() => setJSONMode(popup.codebox));
   setupLinterSettingsEvents(popup);

vendor-overwrites/codemirror/addon/lint/css-lint.js

@@ -4,7 +4,7 @@
 // Depends on csslint.js from https://github.com/stubbornella/csslint
 
 /* global CodeMirror require define */
-/* global CSSLint stylelint stylelintDefaultConfig csslintDefaultRuleConfig */
+/* global CSSLint stylelint stylelintDefaultConfig csslintDefaultConfig */
 'use strict';
 
 (mod => {
@@ -25,10 +25,10 @@
       return found;
     }
     /* STYLUS: hack start (part 1) */
-    return BG.chromeSync.getValue('editorCSSLintRules').then((config = csslintDefaultRuleConfig) => {
+    return BG.chromeSync.getValue('editorCSSLintConfig').then(config => {
-      // csslintDefaultRuleConfig stored in csslint-config.js & loaded by edit/lint.js
+      // csslintDefaultConfig stored in csslint-config.js & loaded by edit/lint.js
-      if (Object.keys(config).length === 0) {
+      if (Object.keys(config || []).length === 0) {
-        config = Object.assign({}, csslintDefaultRuleConfig);
+        config = Object.assign({}, csslintDefaultConfig);
       }
       const results = CSSLint.verify(text, config);
       const messages = results.messages;
@@ -73,9 +73,9 @@
     const found = [];
     window.stylelint = require('stylelint');
     if (window.stylelint) {
-      return BG.chromeSync.getValue('editorStylelintRules').then((rules = stylelintDefaultConfig.rules) => {
+      return BG.chromeSync.getValue('editorStylelintConfig').then(rules => {
         // stylelintDefaultConfig stored in stylelint-config.js & loaded by edit/lint.js
-        if (Object.keys(rules).length === 0) {
+        if (Object.keys(rules || []).length === 0) {
           rules = stylelintDefaultConfig.rules;
         }
         return stylelint.lint({