Merge pull request #2039 from webcompat/refactor

The BIG Refactor

Author: Mike Taylor

.gitignore

@@ -13,6 +13,7 @@ uploads/
 .vscode/
 config/secrets.py
 package-lock.json
+tmp/
 
 # The data folder contains information that shouldn't live in version control.
 data/*
@@ -26,8 +27,7 @@ webcompat/static/js/issue-list.js
 webcompat/static/js/user-activity.js
 webcompat/static/js/templates.js
 webcompat/**/*.min.js
-webcompat/**/*.min.css
-webcompat/**/*.dev.css
+webcompat/**/**/*.min.css
 
 #selenium server
 *.jar

.stylelintrc

@@ -8,8 +8,8 @@
         "color-hex-length": "short",
         "color-named": "never",
         "selector-no-qualifying-type":  [ true, {"ignore": "attribute"} ],
-        "selector-no-id": true,
-        "selector-no-attribute": true,
+        "selector-max-id": 1,
+        "selector-max-attribute": 1,
         "selector-combinator-space-after": "always",
         "selector-attribute-quotes": "always",
         "selector-attribute-operator-space-before": "always",
@@ -23,7 +23,6 @@
         "value-no-vendor-prefix": true,
         "number-leading-zero": "never",
         "function-url-quotes": "always",
-        "function-url-data-uris": "never",
         "font-weight-notation": "numeric",
         "font-family-name-quotes": "always-where-recommended",
         "comment-whitespace-inside": "always",
@@ -42,8 +41,8 @@
         "selector-pseudo-element-colon-notation": "double",
         "selector-pseudo-class-parentheses-space-inside": "never",
         "selector-no-vendor-prefix": true,
-        "selector-no-universal": true,
-        "selector-no-type": true,
+        "selector-max-universal": 1,
+        "selector-max-type": 1,
         "media-feature-range-operator-space-before": "always",
         "media-feature-range-operator-space-after": "always",
         "media-feature-parentheses-space-inside": "never",

.travis.yml

@@ -55,4 +55,4 @@ before_script:
 # now run the tests!
 script:
   - nosetests
-  - node ./tests/functional/_intern.js reporters="runner"
+  - npm run test:js -- --reporters="runner"

Gruntfile.js

@@ -29,7 +29,8 @@ module.exports = function(grunt) {
     "concat",
     "uglify",
     "postcss",
-    "cssmin"
+    "cssmin",
+    "purifycss"
   ]);
 
   // Task used before doing a deploy (same as default, but does image optimization)

README.md

@@ -35,20 +35,4 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 ### Icons
 
-All icons are public domain or licensed from The Noun Project.
-
-[Lightbulb icon](http://thenounproject.com/term/light-bulb/5370/) designed by Jean-Philippe Cabaroc. (Licensed)
-
-[Bee icon](http://thenounproject.com/term/bee/26569/) designed by Peter Silk. (Licensed)
-
-[Arrow icon](http://thenounproject.com/term/arrow/5438/) designed by Jamison Wieser. (Licensed)
-
-[Form icon](http://thenounproject.com/term/list/14362/) designed by banoshi. (Licensed)
-
-[Diagnose bugs icon](https://thenounproject.com/rockicon/collection/office-line/?i=450639) designed by Rockicon (Licensed)
-
-[Reach out to sites icon](https://thenounproject.com/term/heart-care/518087/) designed by ProSymbols.  (Licensed)
-
-[Lightswitch](http://thenounproject.com/term/light-switch/2235/) designed by Jeremy Lloyd.  (Public domain)
-
-[Contribute icon](https://thenounproject.com/search/?q=group&i=876004) designed by Tjaša Kimovec. (Licensed)
+All icons are from the [Feather icon set](https://github.com/feathericons/feather#feather) and published under the [MIT License](https://github.com/feathericons/feather/blob/master/LICENSE).

config/__init__.py

@@ -124,8 +124,8 @@ def convert_milestones(milestones_content):
 Category = namedtuple('Category', ['name', 'dataAttribute', 'label'])
 CATEGORIES = []
 cat_labels = [('needstriage', 'needstriage', 'Needs Triage'),
-              ('needsDiagnosis', 'needsdiagnosis', 'Needs Diagnosis'),
-              ('needsContact', 'needscontact', 'Needs Contact'),
+              ('needsdiagnosis', 'needsdiagnosis', 'Needs Diagnosis'),
+              ('needscontact', 'needscontact', 'Needs Contact'),
               ('ready', 'contactready', 'Ready for Outreach'),
               ('sitewait', 'sitewait', 'Site Contacted'),
               ('close', 'closed', 'Closed')]

config/environment.py

@@ -25,18 +25,18 @@
 # BUG STATUS
 # The id will be initialized when the app is started.
 STATUSES = {
-    u'needstriage': {'id': 0, 'order': 1, 'state': 'open', 'color': '#ff9900'},
-    u'needsdiagnosis': {'id': 0, 'order': 2, 'state': 'open', 'color': '#ff8364'},
-    u'needscontact': {'id': 0, 'order': 3, 'state': 'open', 'color': '#e11d21'},
-    u'contactready': {'id': 0, 'order': 4, 'state': 'open', 'color': '#a1ebbf'},
-    u'sitewait': {'id': 0, 'order': 5, 'state': 'open', 'color': '#006b75'},
-    u'duplicate': {'id': 0, 'order': 1, 'state': 'closed', 'color': '#cccccc'},
-    u'fixed': {'id': 0, 'order': 2, 'state': 'closed', 'color': '#009800'},
-    u'incomplete': {'id': 0, 'order': 3, 'state': 'closed', 'color': '#d93f0b'},
-    u'invalid': {'id': 0, 'order': 4, 'state': 'closed', 'color': '#e6e6e6'},
-    u'non-compat': {'id': 0, 'order': 5, 'state': 'closed', 'color': '#b60205'},
-    u'wontfix': {'id': 0, 'order': 6, 'state': 'closed', 'color': '#000000'},
-    u'worksforme': {'id': 0, 'order': 7, 'state': 'closed', 'color': '#d4c5f9'}
+    u'needstriage': {'id': 0, 'order': 1, 'state': 'open'},
+    u'needsdiagnosis': {'id': 0, 'order': 2, 'state': 'open'},
+    u'needscontact': {'id': 0, 'order': 3, 'state': 'open'},
+    u'contactready': {'id': 0, 'order': 4, 'state': 'open'},
+    u'sitewait': {'id': 0, 'order': 5, 'state': 'open'},
+    u'duplicate': {'id': 0, 'order': 1, 'state': 'closed'},
+    u'fixed': {'id': 0, 'order': 2, 'state': 'closed'},
+    u'incomplete': {'id': 0, 'order': 3, 'state': 'closed'},
+    u'invalid': {'id': 0, 'order': 4, 'state': 'closed'},
+    u'non-compat': {'id': 0, 'order': 5, 'state': 'closed'},
+    u'wontfix': {'id': 0, 'order': 6, 'state': 'closed'},
+    u'worksforme': {'id': 0, 'order': 7, 'state': 'closed'}
     }
 
 # We don't need to compute for every requests.

docs/pr-coding-guidelines.md

@@ -159,7 +159,7 @@ In order to avoid errors during a Pull Request, `npm run lint` will be executed
 `npm run lint` checks all relevant JavaScript and CSS files and displays, if something needs to be fixed.
 
 If you get an error displayed, there are two ways to fix it.
-1. You can run `npm run fix` automatically (only for JavaScript), which is great for small issues like missing spaces or lines in various files.
+1. You can run `npm run lint:fix` automatically, which is great for small issues like missing spaces or lines in various files.
 2. You can correct it manually as every error message includes the file and line of the error as well as the rule which was violated will be displayed..
 
 Hopefully this will help you clear up a few struggles.

docs/tests.md

@@ -80,10 +80,6 @@ npm run start:test
 In a separate terminal window or tab, run the tests:
 
 ```bash
-node_modules/.bin/intern-runner config=tests/intern
-
-or
-
 npm run test:js
 ```
 
@@ -97,18 +93,24 @@ Shortly after running this command, you should see the browser open and various
 
 To run a single test suite, where foo.js is the file found in the `tests/functional` directory:
 
+Note: the extra `--` is how you pass arguments to the npm script. Don't forget it!
+
 ```bash
-node_modules/.bin/intern-runner config=tests/intern functionalSuites=tests/functional/foo.js 
+npm run test:js -- --functionalSuites=tests/functional/foo.js
 ```
 
-Right now the tests are running in Firefox as a default. You can specify which browsers you want to test with using the `browsers` argument. Like this:
+To filter which tests *within* a single test suite you run, you can use the `--grep` argument:
 
 ```bash
-npm run test:js browsers=chrome,firefox
+npm run test:js -- --functionalSuites=tests/functional/foo.js --grep=tacos
+```
+
+This will run any test within the foo.js suite that has "tacos" in its name.
 
-or
+Right now the tests are running in Firefox as a default. You can specify which browsers you want to test with using the `browsers` argument. Like this:
 
-node_modules/.bin/intern-runner config=tests/intern browsers=safari,firefox
+```bash
+npm run test:js -- --browsers=chrome,firefox
 ```
 
 For a list of the recognized browser names, just refer to [Browser enum](http://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_Browser.html)

grunt-tasks/cssmin.js

@@ -10,7 +10,7 @@ module.exports = function(grunt) {
     combine: {
       files: {
         // output
-        "<%= cssPath %>/webcompat.min.css": [
+        "<%= cssPath %>/dist/webcompat.min.css": [
           // input
           "<%= cssPath %>/webcompat.dev.css"
         ]

grunt-tasks/cssnext.js

@@ -23,7 +23,7 @@ module.exports = function(grunt) {
     },
     dist: {
       files: {
-        "<%= cssPath %>/webcompat.dev.css": "<%= cssPath %>/development/main.css"
+        "<%= cssPath %>/dist/webcompat.min.css": "<%= cssPath %>/webcompat.dev.css"
       }
     }
   });

grunt-tasks/purifycss.js

@@ -0,0 +1,22 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+module.exports = function(grunt) {
+  grunt.config("purifycss", {
+    options: {
+      rejected: true,
+      info: true
+    },
+    target: {
+      src: [
+        "webcompat/templates/*.html",
+        "webcompat/templates/**/*.html",
+        "webcompat/templates/**/*.jst",
+        "webcompat/static/js/*.js"
+      ],
+      css: ["webcompat/static/css/*.css", "webcompat/static/css/src/*.css"],
+      dest: "tmp/purestyles.css"
+    }
+  });
+};

grunt-tasks/watch.js

@@ -5,7 +5,7 @@
 module.exports = function(grunt) {
   grunt.config("watch", {
     css: {
-      files: "<%= cssPath %>/development/**/*.css",
+      files: "<%= cssPath %>/**/*.css",
       tasks: ["postcss"]
     },
     templates: {

package.json

@@ -21,7 +21,8 @@
     "cssrecipes-reset": "^0.5.0",
     "cssrecipes-utils": "^0.6.2",
     "suitcss-utils-align": "^1.0.0",
-    "suitcss-utils-display": "^1.0.2"
+    "suitcss-utils-display": "^1.0.2",
+    "yargs": "^11.0.0"
   },
   "devDependencies": {
     "eslint": "~3.19.0",
@@ -37,6 +38,7 @@
     "grunt-contrib-uglify": "^2.3.0",
     "grunt-contrib-watch": "^1.0.0",
     "grunt-postcss": "^0.8.0",
+    "grunt-purifycss": "^0.1.2",
     "husky": "^0.13.4",
     "intern": "^4.1.4",
     "lint-staged": "^3.6.1",
@@ -48,19 +50,26 @@
     "postcss-reporter": "^3.0.0",
     "postcss-url": "^5.1.2",
     "prettier": "1.1.0",
-    "stylelint": "^7.13.0",
-    "stylelint-config-standard": "^16.0.0"
+    "stylelint": "^8.4.0",
+    "stylelint-config-standard": "^18.0.0",
+    "svg-sprite-generator": "0.0.7",
+    "svgo": "^0.7.2"
   },
   "scripts": {
     "setup": "npm run virtualenv && npm install && npm run config",
+    "clean:css": "grunt purifycss --min",
     "watch": "grunt watch",
     "build": "grunt",
+    "build:svg": "npm run build:svg:clean-svg && npm run build:svg:svg-sprite && rm -rf ./webcompat/static/img/svg/tmp",
+    "build:svg:clean-svg": "svgo -f ./webcompat/static/img/svg/icons -o ./webcompat/static/img/svg/tmp",
+    "build:svg:svg-sprite": "svg-sprite-generate -d ./webcompat/static/img/svg/tmp -o ./webcompat/static/img/svg/sprite.svg",
     "jst": "grunt jst",
-    "lint": "npm run lint:JS && npm run lint:CSS",
-    "lint:JS": "eslint ./Gruntfile.js ./tests ./grunt-tasks ./webcompat/static/js/lib",
-    "lint:CSS": "stylelint './webcompat/static/css/development/**/*.css'",
-    "fix": "npm run lint:fix:JS",
-    "lint:fix:JS": "eslint --fix ./Gruntfile.js ./tests ./grunt-tasks ./webcompat/static/js/lib",
+    "lint": "npm run lint:js && npm run lint:css",
+    "lint:js": "eslint ./Gruntfile.js ./tests ./grunt-tasks ./webcompat/static/js/lib",
+    "lint:css": "stylelint './webcompat/static/css/src/**/*.css' './webcompat/static/css/webcompat.dev.css'",
+    "lint:fix": "npm run lint:fix:js && npm run lint:fix:css",
+    "lint:fix:js": "eslint --fix ./Gruntfile.js ./tests ./grunt-tasks ./webcompat/static/js/lib",
+    "lint:fix:css": "stylelint './webcompat/static/css/src/**/*.css' './webcompat/static/css/webcompat.dev.css' --fix",
     "imagemin": "grunt imagemin",
     "prestart": "npm run build",
     "start": "source env/bin/activate || . env/bin/activate && python run.py",
@@ -75,8 +84,8 @@
     "test:python": "nosetests"
   },
   "lint-staged": {
-    "*.js": "lint:JS",
-    "*.css": "lint:CSS"
+    "*.js": "lint:js",
+    "*.css": "lint:css"
   },
   "license": "MPL-2.0"
 }

tests/fixtures/api/issues.2c36ce8c0fec0c185101ba8f6b203f48.json

@@ -0,0 +1,6 @@
+{
+	"_fixture": true,
+	"total_count": 0,
+	"incomplete_results": false,
+	"items": []
+}