diff --git a/.gitignore b/.gitignore index 33340f350..bbacc18c4 100644 --- a/.gitignore +++ b/.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 diff --git a/.stylelintrc b/.stylelintrc index b37c43e32..78b767882 100644 --- a/.stylelintrc +++ b/.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", diff --git a/.travis.yml b/.travis.yml index f51d8f4eb..4d0db5924 100644 --- a/.travis.yml +++ b/.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" diff --git a/Gruntfile.js b/Gruntfile.js index 8641f2b07..eb868406a 100644 --- a/Gruntfile.js +++ b/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) diff --git a/README.md b/README.md index 1287a6af4..9cebddaf0 100644 --- a/README.md +++ b/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). diff --git a/config/__init__.py b/config/__init__.py index 238141489..b7eb3b276 100644 --- a/config/__init__.py +++ b/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')] diff --git a/config/environment.py b/config/environment.py index 58e1bcf4d..70d2ac328 100644 --- a/config/environment.py +++ b/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. diff --git a/docs/pr-coding-guidelines.md b/docs/pr-coding-guidelines.md index 4e57f5f25..bac9bb5c3 100644 --- a/docs/pr-coding-guidelines.md +++ b/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. diff --git a/docs/tests.md b/docs/tests.md index e3483676b..3734cc330 100644 --- a/docs/tests.md +++ b/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) diff --git a/grunt-tasks/cssmin.js b/grunt-tasks/cssmin.js index 253e7ae14..8302a727a 100644 --- a/grunt-tasks/cssmin.js +++ b/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" ] diff --git a/grunt-tasks/cssnext.js b/grunt-tasks/cssnext.js index 5958d3a17..2c4bfad6d 100644 --- a/grunt-tasks/cssnext.js +++ b/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" } } }); diff --git a/grunt-tasks/purifycss.js b/grunt-tasks/purifycss.js new file mode 100644 index 000000000..f929f479b --- /dev/null +++ b/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" + } + }); +}; diff --git a/grunt-tasks/watch.js b/grunt-tasks/watch.js index a36d9d7b5..b91af0f6b 100644 --- a/grunt-tasks/watch.js +++ b/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: { diff --git a/package.json b/package.json index fe8a3bae9..0cba2dd08 100644 --- a/package.json +++ b/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" } diff --git a/tests/fixtures/api/issues.2c36ce8c0fec0c185101ba8f6b203f48.json b/tests/fixtures/api/issues.2c36ce8c0fec0c185101ba8f6b203f48.json new file mode 100644 index 000000000..2b58c7c9b --- /dev/null +++ b/tests/fixtures/api/issues.2c36ce8c0fec0c185101ba8f6b203f48.json @@ -0,0 +1,6 @@ +{ + "_fixture": true, + "total_count": 0, + "incomplete_results": false, + "items": [] +} \ No newline at end of file diff --git a/tests/fixtures/api/issues/search.5e5381153d0090cbe83977d63930e858.json b/tests/fixtures/api/issues/search.5e5381153d0090cbe83977d63930e858.json new file mode 100644 index 000000000..98e91f954 --- /dev/null +++ b/tests/fixtures/api/issues/search.5e5381153d0090cbe83977d63930e858.json @@ -0,0 +1,352 @@ +{ + "_fixture": true, + "total_count": 3, + "incomplete_results": false, + "items": [ + { + "url": "https://api.github.com/repos/webcompat/webcompat-tests/issues/1371", + "repository_url": "https://api.github.com/repos/webcompat/webcompat-tests", + "labels_url": "https://api.github.com/repos/webcompat/webcompat-tests/issues/1371/labels{/name}", + "comments_url": "https://api.github.com/repos/webcompat/webcompat-tests/issues/1371/comments", + "events_url": "https://api.github.com/repos/webcompat/webcompat-tests/issues/1371/events", + "html_url": "https://github.com/webcompat/webcompat-tests/issues/1371", + "id": 296904917, + "number": 1371, + "title": "candyforthemassesdbhjsadnasbhjdksbdasbndkbaskbdasbdhasbdas.org - desktop site instead of mobile site", + "user": { + "login": "webcompat-bot", + "id": 8862693, + "avatar_url": "https://avatars3.githubusercontent.com/u/8862693?v=4", + "gravatar_id": "", + "url": "https://api.github.com/users/webcompat-bot", + "html_url": "https://github.com/webcompat-bot", + "followers_url": "https://api.github.com/users/webcompat-bot/followers", + "following_url": "https://api.github.com/users/webcompat-bot/following{/other_user}", + "gists_url": "https://api.github.com/users/webcompat-bot/gists{/gist_id}", + "starred_url": "https://api.github.com/users/webcompat-bot/starred{/owner}{/repo}", + "subscriptions_url": "https://api.github.com/users/webcompat-bot/subscriptions", + "organizations_url": "https://api.github.com/users/webcompat-bot/orgs", + "repos_url": "https://api.github.com/users/webcompat-bot/repos", + "events_url": "https://api.github.com/users/webcompat-bot/events{/privacy}", + "received_events_url": "https://api.github.com/users/webcompat-bot/received_events", + "type": "User", + "site_admin": false + }, + "labels": [ + { + "id": 148714215, + "url": "https://api.github.com/repos/webcompat/webcompat-tests/labels/browser-android", + "name": "browser-android", + "color": "f7c6c7", + "default": false + }, + { + "id": 90454697, + "url": "https://api.github.com/repos/webcompat/webcompat-tests/labels/browser-chrome", + "name": "browser-chrome", + "color": "006b75", + "default": false + }, + { + "id": 182807004, + "url": "https://api.github.com/repos/webcompat/webcompat-tests/labels/browser-firefox", + "name": "browser-firefox", + "color": "d4c5f9", + "default": false + } + ], + "state": "open", + "locked": false, + "assignee": null, + "assignees": [ + + ], + "milestone": { + "url": "https://api.github.com/repos/webcompat/webcompat-tests/milestones/1", + "html_url": "https://github.com/webcompat/webcompat-tests/milestone/1", + "labels_url": "https://api.github.com/repos/webcompat/webcompat-tests/milestones/1/labels", + "id": 2744172, + "number": 1, + "title": "needstriage", + "description": "Issues which needs to be triaged", + "creator": { + "login": "karlcow", + "id": 505230, + "avatar_url": "https://avatars0.githubusercontent.com/u/505230?v=4", + "gravatar_id": "", + "url": "https://api.github.com/users/karlcow", + "html_url": "https://github.com/karlcow", + "followers_url": "https://api.github.com/users/karlcow/followers", + "following_url": "https://api.github.com/users/karlcow/following{/other_user}", + "gists_url": "https://api.github.com/users/karlcow/gists{/gist_id}", + "starred_url": "https://api.github.com/users/karlcow/starred{/owner}{/repo}", + "subscriptions_url": "https://api.github.com/users/karlcow/subscriptions", + "organizations_url": "https://api.github.com/users/karlcow/orgs", + "repos_url": "https://api.github.com/users/karlcow/repos", + "events_url": "https://api.github.com/users/karlcow/events{/privacy}", + "received_events_url": "https://api.github.com/users/karlcow/received_events", + "type": "User", + "site_admin": false + }, + "open_issues": 70, + "closed_issues": 0, + "state": "open", + "created_at": "2017-09-05T03:39:06Z", + "updated_at": "2018-03-01T21:15:19Z", + "due_on": null, + "closed_at": null + }, + "comments": 0, + "created_at": "2018-02-13T22:13:52Z", + "updated_at": "2018-02-20T09:50:55Z", + "closed_at": null, + "author_association": "MEMBER", + "body": "\n\n\n\n**URL**: http://candyforthemasses.org\n\n**Browser / Version**: Firefox 60.0\n**Operating System**: Mac OS X 10.13\n**Tested Another Browser**: Yes\n\n**Problem type**: Desktop site instead of mobile site\n**Description**: nothing, just bored\n**Steps to Reproduce**:\n\n\n\n\n_From [webcompat.com](https://webcompat.com/) with ❤️_", + "score": 1.0 + }, + { + "url": "https://api.github.com/repos/webcompat/webcompat-tests/issues/1367", + "repository_url": "https://api.github.com/repos/webcompat/webcompat-tests", + "labels_url": "https://api.github.com/repos/webcompat/webcompat-tests/issues/1367/labels{/name}", + "comments_url": "https://api.github.com/repos/webcompat/webcompat-tests/issues/1367/comments", + "events_url": "https://api.github.com/repos/webcompat/webcompat-tests/issues/1367/events", + "html_url": "https://github.com/webcompat/webcompat-tests/issues/1367", + "id": 293216830, + "number": 1367, + "title": "candyforthemassesandlongerurlasweneedtotestsomething.org - desktop site instead of mobile site", + "user": { + "login": "webcompat-bot", + "id": 8862693, + "avatar_url": "https://avatars3.githubusercontent.com/u/8862693?v=4", + "gravatar_id": "", + "url": "https://api.github.com/users/webcompat-bot", + "html_url": "https://github.com/webcompat-bot", + "followers_url": "https://api.github.com/users/webcompat-bot/followers", + "following_url": "https://api.github.com/users/webcompat-bot/following{/other_user}", + "gists_url": "https://api.github.com/users/webcompat-bot/gists{/gist_id}", + "starred_url": "https://api.github.com/users/webcompat-bot/starred{/owner}{/repo}", + "subscriptions_url": "https://api.github.com/users/webcompat-bot/subscriptions", + "organizations_url": "https://api.github.com/users/webcompat-bot/orgs", + "repos_url": "https://api.github.com/users/webcompat-bot/repos", + "events_url": "https://api.github.com/users/webcompat-bot/events{/privacy}", + "received_events_url": "https://api.github.com/users/webcompat-bot/received_events", + "type": "User", + "site_admin": false + }, + "labels": [ + { + "id": 148714215, + "url": "https://api.github.com/repos/webcompat/webcompat-tests/labels/browser-android", + "name": "browser-android", + "color": "f7c6c7", + "default": false + }, + { + "id": 90454697, + "url": "https://api.github.com/repos/webcompat/webcompat-tests/labels/browser-chrome", + "name": "browser-chrome", + "color": "006b75", + "default": false + }, + { + "id": 764985357, + "url": "https://api.github.com/repos/webcompat/webcompat-tests/labels/browser-firefou-abc", + "name": "browser-firefou-abc", + "color": "ededed", + "default": false + }, + { + "id": 602787897, + "url": "https://api.github.com/repos/webcompat/webcompat-tests/labels/browser-firefox-mobile-(tablet)", + "name": "browser-firefox-mobile-(tablet)", + "color": "ededed", + "default": false + }, + { + "id": 86614755, + "url": "https://api.github.com/repos/webcompat/webcompat-tests/labels/closed-duplicate", + "name": "closed-duplicate", + "color": "cccccc", + "default": false + }, + { + "id": 584072494, + "url": "https://api.github.com/repos/webcompat/webcompat-tests/labels/type-media", + "name": "type-media", + "color": "ededed", + "default": false + }, + { + "id": 650809601, + "url": "https://api.github.com/repos/webcompat/webcompat-tests/labels/type-stylo", + "name": "type-stylo", + "color": "ededed", + "default": false + } + ], + "state": "open", + "locked": false, + "assignee": null, + "assignees": [ + + ], + "milestone": { + "url": "https://api.github.com/repos/webcompat/webcompat-tests/milestones/1", + "html_url": "https://github.com/webcompat/webcompat-tests/milestone/1", + "labels_url": "https://api.github.com/repos/webcompat/webcompat-tests/milestones/1/labels", + "id": 2744172, + "number": 1, + "title": "needstriage", + "description": "Issues which needs to be triaged", + "creator": { + "login": "karlcow", + "id": 505230, + "avatar_url": "https://avatars0.githubusercontent.com/u/505230?v=4", + "gravatar_id": "", + "url": "https://api.github.com/users/karlcow", + "html_url": "https://github.com/karlcow", + "followers_url": "https://api.github.com/users/karlcow/followers", + "following_url": "https://api.github.com/users/karlcow/following{/other_user}", + "gists_url": "https://api.github.com/users/karlcow/gists{/gist_id}", + "starred_url": "https://api.github.com/users/karlcow/starred{/owner}{/repo}", + "subscriptions_url": "https://api.github.com/users/karlcow/subscriptions", + "organizations_url": "https://api.github.com/users/karlcow/orgs", + "repos_url": "https://api.github.com/users/karlcow/repos", + "events_url": "https://api.github.com/users/karlcow/events{/privacy}", + "received_events_url": "https://api.github.com/users/karlcow/received_events", + "type": "User", + "site_admin": false + }, + "open_issues": 70, + "closed_issues": 0, + "state": "open", + "created_at": "2017-09-05T03:39:06Z", + "updated_at": "2018-03-01T21:15:19Z", + "due_on": null, + "closed_at": null + }, + "comments": 12, + "created_at": "2018-01-31T16:10:45Z", + "updated_at": "2018-02-19T10:02:51Z", + "closed_at": null, + "author_association": "MEMBER", + "body": "\n\n\n\n**URL**: http://candyforthemasses.org\n\n**Browser / Version**: Firefox 60.0\n**Operating System**: Mac OS X 10.13\n**Tested Another Browser**: No\n\n**Problem type**: Desktop site instead of mobile site\n**Description**: There is no candy\n**Steps to Reproduce**:\n1\r\n2\r\n3\n\n\n\n_From [webcompat.com](https://webcompat.com/) with ❤️_", + "score": 1.0 + }, + { + "url": "https://api.github.com/repos/webcompat/webcompat-tests/issues/1103", + "repository_url": "https://api.github.com/repos/webcompat/webcompat-tests", + "labels_url": "https://api.github.com/repos/webcompat/webcompat-tests/issues/1103/labels{/name}", + "comments_url": "https://api.github.com/repos/webcompat/webcompat-tests/issues/1103/comments", + "events_url": "https://api.github.com/repos/webcompat/webcompat-tests/issues/1103/events", + "html_url": "https://github.com/webcompat/webcompat-tests/issues/1103", + "id": 245752612, + "number": 1103, + "title": "example.com - unknown", + "user": { + "login": "brizental", + "id": 25176023, + "avatar_url": "https://avatars2.githubusercontent.com/u/25176023?v=4", + "gravatar_id": "", + "url": "https://api.github.com/users/brizental", + "html_url": "https://github.com/brizental", + "followers_url": "https://api.github.com/users/brizental/followers", + "following_url": "https://api.github.com/users/brizental/following{/other_user}", + "gists_url": "https://api.github.com/users/brizental/gists{/gist_id}", + "starred_url": "https://api.github.com/users/brizental/starred{/owner}{/repo}", + "subscriptions_url": "https://api.github.com/users/brizental/subscriptions", + "organizations_url": "https://api.github.com/users/brizental/orgs", + "repos_url": "https://api.github.com/users/brizental/repos", + "events_url": "https://api.github.com/users/brizental/events{/privacy}", + "received_events_url": "https://api.github.com/users/brizental/received_events", + "type": "User", + "site_admin": false + }, + "labels": [ + { + "id": 148714215, + "url": "https://api.github.com/repos/webcompat/webcompat-tests/labels/browser-android", + "name": "browser-android", + "color": "f7c6c7", + "default": false + }, + { + "id": 602787897, + "url": "https://api.github.com/repos/webcompat/webcompat-tests/labels/browser-firefox-mobile-(tablet)", + "name": "browser-firefox-mobile-(tablet)", + "color": "ededed", + "default": false + }, + { + "id": 124747710, + "url": "https://api.github.com/repos/webcompat/webcompat-tests/labels/browser-ie", + "name": "browser-ie", + "color": "ededed", + "default": false + }, + { + "id": 388130717, + "url": "https://api.github.com/repos/webcompat/webcompat-tests/labels/nsfw", + "name": "nsfw", + "color": "b60205", + "default": false + }, + { + "id": 743991534, + "url": "https://api.github.com/repos/webcompat/webcompat-tests/labels/status-needinfo", + "name": "status-needinfo", + "color": "bfd4f2", + "default": false + } + ], + "state": "open", + "locked": false, + "assignee": null, + "assignees": [ + + ], + "milestone": { + "url": "https://api.github.com/repos/webcompat/webcompat-tests/milestones/1", + "html_url": "https://github.com/webcompat/webcompat-tests/milestone/1", + "labels_url": "https://api.github.com/repos/webcompat/webcompat-tests/milestones/1/labels", + "id": 2744172, + "number": 1, + "title": "needstriage", + "description": "Issues which needs to be triaged", + "creator": { + "login": "karlcow", + "id": 505230, + "avatar_url": "https://avatars0.githubusercontent.com/u/505230?v=4", + "gravatar_id": "", + "url": "https://api.github.com/users/karlcow", + "html_url": "https://github.com/karlcow", + "followers_url": "https://api.github.com/users/karlcow/followers", + "following_url": "https://api.github.com/users/karlcow/following{/other_user}", + "gists_url": "https://api.github.com/users/karlcow/gists{/gist_id}", + "starred_url": "https://api.github.com/users/karlcow/starred{/owner}{/repo}", + "subscriptions_url": "https://api.github.com/users/karlcow/subscriptions", + "organizations_url": "https://api.github.com/users/karlcow/orgs", + "repos_url": "https://api.github.com/users/karlcow/repos", + "events_url": "https://api.github.com/users/karlcow/events{/privacy}", + "received_events_url": "https://api.github.com/users/karlcow/received_events", + "type": "User", + "site_admin": false + }, + "open_issues": 70, + "closed_issues": 0, + "state": "open", + "created_at": "2017-09-05T03:39:06Z", + "updated_at": "2018-03-01T21:15:19Z", + "due_on": null, + "closed_at": null + }, + "comments": 0, + "created_at": "2017-07-26T15:01:51Z", + "updated_at": "2017-11-27T11:26:32Z", + "closed_at": null, + "author_association": "MEMBER", + "body": "\n\n\n\n**URL**: http://example.com\n\n**Browser / Version**: BarFoo\n**Operating System**: Foobar\n**Tested Another Browser**: Unknown\n\n**Problem type**: Unknown\n**Description**: foo\n**Steps to Reproduce**:\nNone\n\n\n\n_From [webcompat.com](https://webcompat.com/) with ❤️_", + "score": 1.0 + } + ] +} \ No newline at end of file diff --git a/tests/functional/_intern.js b/tests/functional/_intern.js index 1f2eeca8b..85a559083 100644 --- a/tests/functional/_intern.js +++ b/tests/functional/_intern.js @@ -4,17 +4,9 @@ "use strict"; +const args = require("yargs").argv; const intern = require("intern").default; -const args = {}; -process.argv.forEach((val, index) => { - if (val.indexOf("=") !== -1) { - args[val.split("=")[0]] = val.split("=")[1]; - } else { - args[index] = val; - } -}); - const siteRoot = args.siteRoot ? args.siteRoot : "http://localhost:5000"; let environments = []; @@ -29,7 +21,7 @@ browsers.forEach(function(b) { }); }); -intern.configure({ +const config = { // Configuration object for webcompat wc: { pageLoadTimeout: args.wcPageLoadTimeout @@ -58,8 +50,16 @@ intern.configure({ filterErrorStack: true, reporters: [args.reporters ? args.reporters : "pretty"], - functionalSuites: ["./tests/functional/*.js"] -}); + functionalSuites: [ + args.functionalSuites ? args.functionalSuites : "./tests/functional/*.js" + ] +}; + +if (args.grep) { + config.grep = new RegExp(args.grep, "i"); +} + +intern.configure(config); intern.run().catch(e => { // This might not throw, BUG filed: https://github.com/theintern/intern/issues/868 diff --git a/tests/functional/comments-auth.js b/tests/functional/comments-auth.js index 896409008..fc7bebf18 100755 --- a/tests/functional/comments-auth.js +++ b/tests/functional/comments-auth.js @@ -62,34 +62,33 @@ registerSuite("Comments (auth)", { "Posting an empty comment fails"() { var originalCommentsLength; var allCommentsLength; - return ( - FunctionalHelpers.openPage(this, url("/issues/100"), ".js-Issue") - .findAllByCssSelector(".js-Issue-comment") - .then(function(elms) { - originalCommentsLength = elms.length; - }) - .end() + return FunctionalHelpers.openPage(this, url("/issues/100"), ".js-Issue") + .findAllByCssSelector(".js-Issue-comment") + .then(function(elms) { + originalCommentsLength = elms.length; + }) + .end() + .execute(() => { // click the comment button - .findByCssSelector(".js-Issue-comment-button") - .click() - .end() - .sleep(2000) - .findAllByCssSelector(".js-Issue-comment") - .then(function(elms) { - allCommentsLength = elms.length; - assert( - originalCommentsLength === allCommentsLength, - "Comment was not successfully left." - ); - }) - ); + $(".js-Issue-comment-button")[0].click(); + }) + .end() + .sleep(2000) + .findAllByCssSelector(".js-Issue-comment") + .then(function(elms) { + allCommentsLength = elms.length; + assert( + originalCommentsLength === allCommentsLength, + "Comment was not successfully left." + ); + }); }, "Add a screenshot to a comment"() { return FunctionalHelpers.openPage( this, url("/issues/100"), - ".wc-Comment-body" + ".comment-header" ) .findById("image") .type("tests/fixtures/green_square.png") @@ -111,10 +110,9 @@ registerSuite("Comments (auth)", { return FunctionalHelpers.openPage( this, url("/issues/100"), - ".wc-Comment-submit" + ".js-Comment-text" ) - .findByCssSelector(".wc-Comment-submit") - .click() + .findByCssSelector(".js-Comment-text") .type("g") .end() .setFindTimeout(2000) @@ -129,10 +127,9 @@ registerSuite("Comments (auth)", { return FunctionalHelpers.openPage( this, url("/issues/100"), - ".wc-Comment-submit" + ".js-Comment-text" ) - .findByCssSelector(".wc-Comment-submit") - .click() + .findByCssSelector(".js-Comment-text") .type("l") .end() .setFindTimeout(2000) diff --git a/tests/functional/contributors-non-auth.js b/tests/functional/contributors-non-auth.js deleted file mode 100755 index 08fa56e21..000000000 --- a/tests/functional/contributors-non-auth.js +++ /dev/null @@ -1,109 +0,0 @@ -"use strict"; -/* 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/. */ -const intern = require("intern").default; -const { assert } = intern.getPlugin("chai"); -const { registerSuite } = intern.getInterface("object"); -const FunctionalHelpers = require("./lib/helpers.js"); - -var url = function(path) { - return intern.config.siteRoot + path; -}; - -registerSuite("Contributors", { - tests: { - "page loads"() { - return FunctionalHelpers.openPage( - this, - url("/contributors"), - ".wc-Hero--contributors" - ) - .findByCssSelector(".js-Hero-title") - .getVisibleText() - .then(function(text) { - assert.include(text, "Welcome aboard!"); - }) - .end(); - }, - - "clicking first section closes it"() { - return FunctionalHelpers.openPage( - this, - url("/contributors"), - ".wc-Hero--contributors" - ) - .findByCssSelector(".contributors__item__title") - .click() - .end() - .findByCssSelector(".contributors__item__content") - .getAttribute("class") - .then(function(className) { - assert.notInclude("is-open", className); - }) - .end() - .findByCssSelector(".js-Hero-svg") - .getAttribute("class") - .then(function(className) { - assert.notEqual("is-active", className); - }) - .end(); - }, - - "clicking section toggles it"() { - return FunctionalHelpers.openPage( - this, - url("/contributors"), - ".wc-Hero--contributors" - ) - .findByCssSelector(".contributors__item__content.is-open") - .isDisplayed() - .then(function(isDisplayed) { - assert.equal(isDisplayed, true); - }) - .end() - .findByCssSelector(".js-Hero-svg.is-active") - .isDisplayed() - .then(function(isDisplayed) { - assert.equal(isDisplayed, true); - }) - .end() - .findByCssSelector(".contributors__item__title") - .click() - .end() - .findByCssSelector(".contributors__item__content") - .getAttribute("class") - .then(function(className) { - assert.notInclude("is-open", className); - }) - .end() - .findByCssSelector(".js-Hero-svg") - .getAttribute("class") - .then(function(className) { - assert.notInclude("is-active", className); - }); - }, - - "toggling section toggles lightbulb"() { - return FunctionalHelpers.openPage( - this, - url("/contributors"), - ".wc-Hero--contributors" - ) - .findByCssSelector(".js-Hero-svg.is-active") - .isDisplayed() - .then(function(isDisplayed) { - assert.equal(isDisplayed, true); - }) - .end() - .findByCssSelector(".contributors__item__title") - .click() - .end() - .findByCssSelector(".js-Hero-svg") - .getAttribute("class") - .then(function(className) { - assert.notInclude("is-active", className); - }); - } - } -}); diff --git a/tests/functional/history-navigation-non-auth.js b/tests/functional/history-navigation-non-auth.js index 10ad45917..5d91979e0 100755 --- a/tests/functional/history-navigation-non-auth.js +++ b/tests/functional/history-navigation-non-auth.js @@ -20,7 +20,7 @@ registerSuite("History navigation", { .click() .end() // check that the page is loaded - .findDisplayedByCssSelector(".wc-IssueList:nth-child(11)") + .findDisplayedByCssSelector(".js-IssueList:nth-child(11)") .end() .getCurrentUrl() .then(function(url) { @@ -28,7 +28,7 @@ registerSuite("History navigation", { }) .goBack() // now check that we're back at the home page. - .findDisplayedByCssSelector(".wc-IssueList:nth-child(1)") + .findDisplayedByCssSelector(".js-IssueList:nth-child(1)") .end() .getCurrentUrl() .then(function(url) { diff --git a/tests/functional/image-uploads-non-auth.js b/tests/functional/image-uploads-non-auth.js index 051b39617..04089e5af 100755 --- a/tests/functional/image-uploads-non-auth.js +++ b/tests/functional/image-uploads-non-auth.js @@ -8,19 +8,22 @@ const { assert } = intern.getPlugin("chai"); const { registerSuite } = intern.getInterface("object"); const FunctionalHelpers = require("./lib/helpers.js"); -var url = intern.config.siteRoot + "/?open=1"; +const url = intern.config.siteRoot + "/issues/new"; + +// This string is executed by calls to `execute()` in various tests +// it postMessages a small green test square. +const POSTMESSAGE_TEST_SQUARE = + 'postMessage("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAIAAABLixI0AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAB3RJTUUH3gYSAig452t/EQAAAClJREFUOMvtzkENAAAMg0A25ZU+E032AQEXoNcApCGFLX5paWlpaWl9dqq9AS6CKROfAAAAAElFTkSuQmCC", "http://localhost:5000")'; registerSuite("Image Uploads (non-auth)", { tests: { "postMessaged dataURI preview"() { return ( - FunctionalHelpers.openPage(this, url, ".js-image-upload-label") + FunctionalHelpers.openPage(this, url, ".js-image-upload") // send a small base64 encoded green test square - .execute( - 'postMessage("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAIAAABLixI0AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAB3RJTUUH3gYSAig452t/EQAAAClJREFUOMvtzkENAAAMg0A25ZU+E032AQEXoNcApCGFLX5paWlpaWl9dqq9AS6CKROfAAAAAElFTkSuQmCC", "http://localhost:5000")' - ) + .execute(POSTMESSAGE_TEST_SQUARE) .sleep(1000) - .findByCssSelector(".js-image-upload-label") + .findByCssSelector(".js-image-upload") .getAttribute("style") .then(function(inlineStyle) { assert.include( @@ -32,17 +35,16 @@ registerSuite("Image Uploads (non-auth)", { .end() ); }, - "postMessaged blob preview"() { return ( - FunctionalHelpers.openPage(this, url, ".js-image-upload-label") + FunctionalHelpers.openPage(this, url, ".js-image-upload") // Build up a green test square in canvas, toBlob that, and then postMessage the blob // see window-helpers.js for more details. .execute(function() { WindowHelpers.getBlob().then(WindowHelpers.sendBlob); }) .sleep(1000) - .findByCssSelector(".js-image-upload-label") + .findByCssSelector(".js-image-upload") .getAttribute("style") .then(function(inlineStyle) { assert.include( @@ -56,12 +58,12 @@ registerSuite("Image Uploads (non-auth)", { }, "uploaded image file preview"() { - return FunctionalHelpers.openPage(this, url, ".js-image-upload-label") + return FunctionalHelpers.openPage(this, url, ".js-image-upload") .findById("image") .type("tests/fixtures/green_square.png") - .sleep(1000) .end() - .findByCssSelector(".js-image-upload-label") + .sleep(1000) + .findByCssSelector(".js-image-upload") .getAttribute("style") .then(function(inlineStyle) { assert.include( @@ -75,11 +77,9 @@ registerSuite("Image Uploads (non-auth)", { "postMessaged dataURI image doesn't upload before form submission"() { return ( - FunctionalHelpers.openPage(this, url, ".js-image-upload-label") + FunctionalHelpers.openPage(this, url, ".js-image-upload") // send a small base64 encoded green test square - .execute( - 'postMessage("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAIAAABLixI0AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAB3RJTUUH3gYSAig452t/EQAAAClJREFUOMvtzkENAAAMg0A25ZU+E032AQEXoNcApCGFLX5paWlpaWl9dqq9AS6CKROfAAAAAElFTkSuQmCC", "http://localhost:5000")' - ) + .execute(POSTMESSAGE_TEST_SQUARE) .sleep(1000) .findByCssSelector("#steps_reproduce") .getProperty("value") @@ -96,7 +96,7 @@ registerSuite("Image Uploads (non-auth)", { "postMessaged blob image doesn't upload before form submission"() { return ( - FunctionalHelpers.openPage(this, url, ".js-image-upload-label") + FunctionalHelpers.openPage(this, url, ".js-image-upload") // Build up a green test square in canvas, toBlob that, and then postMessage the blob .execute(function() { WindowHelpers.getBlob().then(WindowHelpers.sendBlob); @@ -116,11 +116,11 @@ registerSuite("Image Uploads (non-auth)", { }, "uploaded image file doesn't upload before form submission"() { - return FunctionalHelpers.openPage(this, url, ".js-image-upload-label") + return FunctionalHelpers.openPage(this, url, ".js-image-upload") .findById("image") .type("tests/fixtures/green_square.png") - .sleep(1000) .end() + .sleep(1000) .findByCssSelector("#steps_reproduce") .getProperty("value") .then(function(val) { @@ -133,25 +133,44 @@ registerSuite("Image Uploads (non-auth)", { .end(); }, - "remove image upload button"() { + "remove image upload button is shown"() { return ( - FunctionalHelpers.openPage(this, url, ".wc-UploadForm-button") + FunctionalHelpers.openPage(this, url, ".js-remove-upload") // send a small base64 encoded green test square - .execute( - 'postMessage("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAIAAABLixI0AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAB3RJTUUH3gYSAig452t/EQAAAClJREFUOMvtzkENAAAMg0A25ZU+E032AQEXoNcApCGFLX5paWlpaWl9dqq9AS6CKROfAAAAAElFTkSuQmCC", "http://localhost:5000")' - ) + .execute(POSTMESSAGE_TEST_SQUARE) .sleep(1000) - .findByCssSelector(".js-image-upload-label .wc-UploadForm-button") + .findByCssSelector(".js-remove-upload") .isDisplayed() .then(function(isDisplayed) { assert.equal(isDisplayed, true, "Remove button is displayed"); }) .end() - .findByCssSelector(".js-image-upload-label .wc-UploadForm-button") - .click() + .findByCssSelector(".js-image-upload") + .getAttribute("class") + .then(function(className) { + assert.notInclude( + "is-validated", + className, + "parent container got the right class after an image was postMessage'd" + ); + }) + .end() + ); + }, + + "clicking remove image upload button removes preview"() { + return ( + FunctionalHelpers.openPage(this, url, ".js-remove-upload") + // send a small base64 encoded green test square + .execute(POSTMESSAGE_TEST_SQUARE) .sleep(1000) + .execute(() => { + // work around for chrome "Other element would receive the click" + // error + $(".js-remove-upload")[0].click(); + }) .end() - .findByCssSelector(".js-image-upload-label") + .findByCssSelector(".js-image-upload") .getAttribute("style") .then(function(inlineStyle) { assert.notInclude( @@ -161,13 +180,28 @@ registerSuite("Image Uploads (non-auth)", { ); }) .end() - .findByCssSelector("#steps_reproduce") - .getProperty("value") - .then(function(val) { + ); + }, + + "clicking remove image upload button removes image URL"() { + return ( + FunctionalHelpers.openPage(this, url, ".js-remove-upload") + // send a small base64 encoded green test square + .execute(POSTMESSAGE_TEST_SQUARE) + .sleep(1000) + .execute(() => { + // work around for chrome "Other element would receive the click" + // error + $(".js-remove-upload")[0].click(); + }) + .end() + .findByCssSelector(".js-image-upload") + .getAttribute("style") + .then(function(inlineStyle) { assert.notInclude( - val, - "[![Screenshot Description](http://localhost:5000/uploads/", - "The url to the image upload was correctly removed." + inlineStyle, + "data:image/png;base64,iVBOR", + "Preview was removed" ); }) .end() @@ -175,20 +209,19 @@ registerSuite("Image Uploads (non-auth)", { }, "double image select works"() { - return FunctionalHelpers.openPage(this, url, ".wc-UploadForm-button") - .findById("image") - .type("tests/fixtures/green_square.png") + return FunctionalHelpers.openPage(this, url, ".js-remove-upload") + .execute(POSTMESSAGE_TEST_SQUARE) .sleep(1000) - .end() - .findByCssSelector(".js-image-upload-label .wc-UploadForm-button") - .click() + .execute(() => { + $(".js-image-upload")[0].click(); + }) + .execute(POSTMESSAGE_TEST_SQUARE) .sleep(1000) - .end() - .findById("image") - .type("tests/fixtures/green_square.png") - .end() + .execute(() => { + $(".js-image-upload")[0].click(); + }) .sleep(1000) - .findByCssSelector(".js-image-upload-label") + .findByCssSelector(".js-image-upload") .getAttribute("style") .then(function(inlineStyle) { assert.include( diff --git a/tests/functional/index-non-auth.js b/tests/functional/index-non-auth.js index 5a740ddf8..9edd37e0d 100755 --- a/tests/functional/index-non-auth.js +++ b/tests/functional/index-non-auth.js @@ -14,28 +14,31 @@ var url = function(path) { registerSuite("Index", { tests: { "front page loads"() { - return FunctionalHelpers.openPage(this, url("/"), ".js-Hero-title") - .findByCssSelector(".js-Hero-title") + return FunctionalHelpers.openPage(this, url("/"), ".js-hero-title") + .findByCssSelector(".js-hero-title") .getVisibleText() .then(function(text) { - assert.equal(text, "Bug reporting\nfor the internet."); + assert.equal( + text.toLowerCase(), + "Bug reporting\nfor the web.".toLowerCase() + ); }) .end(); }, "reporter addon link is shown"() { - return FunctionalHelpers.openPage(this, url("/"), ".js-Hero-title") - .findByCssSelector(".js-Navbar-link") + return FunctionalHelpers.openPage(this, url("/"), ".js-hero-title") + .findByCssSelector(".js-addon-link") .getVisibleText() .then(function(text) { - assert.include(text, "Download our"); + assert.include(text, "Download"); }) .end(); }, "form toggles open then closed"() { return ( - FunctionalHelpers.openPage(this, url("/"), ".js-Hero-title") + FunctionalHelpers.openPage(this, url("/"), ".js-hero-title") .findByCssSelector("#js-ReportBug") .click() .end() @@ -46,6 +49,11 @@ registerSuite("Index", { assert.equal(isDisplayed, true, "The form is displayed"); }) .end() + .execute(function() { + // scroll up so the driver doesn't get confused and + // click on the addon link + window.scrollTo(0, 0); + }) .findByCssSelector("#js-ReportBug") .click() .end() @@ -60,39 +68,35 @@ registerSuite("Index", { }, "browse issues (needstriage)"() { - return FunctionalHelpers.openPage(this, url("/"), ".js-Hero-title") - .findAllByCssSelector( - "#js-lastIssue .js-IssueList.wc-IssueList--needstriage" - ) + return FunctionalHelpers.openPage(this, url("/"), ".js-hero-title") + .findAllByCssSelector("#js-lastIssue .js-IssueList.label-needstriage") .then(function(elms) { assert.equal(elms.length, 10, "10 issues should be displayed"); }) .end() - .findByCssSelector(".wc-IssueList--needstriage .wc-IssueList-count") + .findByCssSelector(".js-IssueList.label-needstriage .js-issue-number") .getVisibleText() .then(function(text) { assert.match(text, /^Issue\s(\d+)$/, "Issue should have a number"); }) .end() - .findByCssSelector(".wc-IssueList--needstriage .wc-IssueList-header a") + .findByCssSelector(".js-IssueList.label-needstriage .js-issue-desc a") .getAttribute("href") .then(function(text) { assert.match(text, /^\/issues\/\d+$/, "Link should have a number"); }) .end() - .findByCssSelector(".wc-IssueList--needstriage .wc-IssueList-header") + .findByCssSelector(".js-IssueList.label-needstriage .js-issue-desc") .getVisibleText() .then(function(text) { assert.match( text, - /^Issue\s\d+:\s.+$/, + /^Issue\s\d+\n.+/, "Issue should have a non-empty title" ); }) .end() - .findByCssSelector( - ".wc-IssueList--needstriage .wc-IssueList-metadata:nth-child(1)" - ) + .findByCssSelector(".js-IssueList.label-needstriage .js-issue-date") .getVisibleText() .then(function(text) { assert.match( @@ -102,9 +106,7 @@ registerSuite("Index", { ); }) .end() - .findByCssSelector( - ".wc-IssueList--needstriage .wc-IssueList-metadata:nth-child(2)" - ) + .findByCssSelector(".js-issue-desc .js-issue-comments") .getVisibleText() .then(function(text) { assert.match( diff --git a/tests/functional/issue-list-non-auth.js b/tests/functional/issue-list-non-auth.js index d35b6b81a..c43880451 100755 --- a/tests/functional/issue-list-non-auth.js +++ b/tests/functional/issue-list-non-auth.js @@ -20,7 +20,7 @@ registerSuite("Issue-list", { url("/issues"), ".js-SearchIssue-filter" ) - .findAllByCssSelector("button.js-Tag") + .findAllByCssSelector(".js-Tag") .then(function(elms) { assert.equal(elms.length, 6, "All filter buttons are displayed"); }) @@ -42,19 +42,17 @@ registerSuite("Issue-list", { assert.equal(isDisplayed, true, "IssueList item is visible."); }) .end() - .findByCssSelector(".js-IssueList .wc-IssueList-header") - .getVisibleText() - .then(function(text) { - assert.match( - text, - /^Issue\s\d+:\s.+$/, - "Issue should have a non-empty title" + .findByCssSelector(".js-IssueList .js-issue-title") + .isDisplayed() + .then(function(isDisplayed) { + assert.equal( + isDisplayed, + true, + "IssueList item is has non-empty title." ); }) .end() - .findByCssSelector( - ".js-IssueList:nth-child(1) > div:nth-child(1) > p:nth-child(2)" - ) + .findByCssSelector(".js-issue-comments") .getVisibleText() .then(function(text) { assert.match( @@ -62,9 +60,14 @@ registerSuite("Issue-list", { /comments:\s\d+$/i, "Issue should display number of comments" ); + }) + .end() + .findByCssSelector(".js-issue-date") + .getVisibleText() + .then(function(text) { assert.match( text, - /^Opened:\s\d{4}\-\d{2}\-\d{2}.+/, + /^Opened:\s\d{4}\-\d{2}\-\d{2}/, "Issue should display creation date" ); }) @@ -260,7 +263,7 @@ registerSuite("Issue-list", { url("/issues", params), ".js-IssueList:nth-of-type(1)" ) - .findByCssSelector(".js-Dropdown-pagination .js-Dropdown-toggle h1") + .findByCssSelector(".js-Dropdown-pagination .js-Dropdown-label") .getVisibleText() .then(function(text) { assert.equal( @@ -270,7 +273,7 @@ registerSuite("Issue-list", { ); }) .end() - .findAllByCssSelector(".js-Dropdown-sort .js-Dropdown-toggle h1") + .findAllByCssSelector(".js-Dropdown-sort .js-Dropdown-label") .getVisibleText() .then(function(text) { assert.equal( @@ -291,7 +294,7 @@ registerSuite("Issue-list", { url("/issues", params), ".js-IssueList:nth-of-type(1)" ) - .findByCssSelector(".js-Dropdown-pagination .js-Dropdown-toggle h1") + .findByCssSelector(".js-Dropdown-pagination .js-Dropdown-label") .getVisibleText() .then(function(text) { assert.equal( @@ -324,7 +327,7 @@ registerSuite("Issue-list", { ); }) .end() - .findByCssSelector(".js-Dropdown-pagination .js-Dropdown-toggle h1") + .findByCssSelector(".js-Dropdown-pagination .js-Dropdown-label") .getVisibleText() .then(function(text) { assert.equal( @@ -369,7 +372,7 @@ registerSuite("Issue-list", { .click() .end() // find something so we know the page has loaded - .findByCssSelector(".wc-IssueList:nth-of-type(1)") + .findByCssSelector(".js-IssueList:nth-of-type(1)") .end() .getCurrentUrl() .then(function(currUrl) { @@ -394,7 +397,7 @@ registerSuite("Issue-list", { .click() .end() // find something so we know the page has loaded - .findByCssSelector(".wc-IssueList:nth-of-type(1)") + .findByCssSelector(".js-IssueList:nth-of-type(1)") .end() .findByCssSelector('[data-filter="closed"]') .click() @@ -422,7 +425,7 @@ registerSuite("Issue-list", { .click() .end() // find something so we know the page has loaded - .findByCssSelector(".wc-IssueList:nth-of-type(1)") + .findByCssSelector(".js-IssueList:nth-of-type(1)") .end() .findByCssSelector('[data-filter="sitewait"]') .click() diff --git a/tests/functional/issues-auth.js b/tests/functional/issues-auth.js index a1b90bf1f..cc88e5482 100755 --- a/tests/functional/issues-auth.js +++ b/tests/functional/issues-auth.js @@ -25,7 +25,7 @@ registerSuite("Issues (auth)", { return FunctionalHelpers.openPage( this, url("/issues/70"), - ".wc-Issue-commentSubmit" + ".js-Issue-comment-button" ) .findByCssSelector("body") .click() diff --git a/tests/functional/issues-non-auth.js b/tests/functional/issues-non-auth.js index 4f0d7aaf9..c95c2dd85 100755 --- a/tests/functional/issues-non-auth.js +++ b/tests/functional/issues-non-auth.js @@ -15,7 +15,7 @@ registerSuite("Issues", { tests: { "Issue page loads"() { return FunctionalHelpers.openPage(this, url("/issues/100"), ".js-Issue") - .findDisplayedByCssSelector(".wc-Issue-information-header") + .findDisplayedByCssSelector(".js-issue-number") .getVisibleText() .then(function(text) { assert.include(text, "#100", "Issue title displayed"); diff --git a/tests/functional/labels-auth.js b/tests/functional/labels-auth.js index 14296058f..e385756dd 100755 --- a/tests/functional/labels-auth.js +++ b/tests/functional/labels-auth.js @@ -33,6 +33,9 @@ registerSuite("Labels (auth)", { .end() .findByCssSelector(".js-CategoryEditor") .end() + .findByCssSelector(".js-CategoryEditor-close") + .click() + .end() .findByCssSelector(".js-LabelEditorLauncher") .click() .getAttribute("class") @@ -52,7 +55,7 @@ registerSuite("Labels (auth)", { .findByCssSelector("body") .type("l") .end() - .findByCssSelector(".wc-CategoryEditor-search") + .findByCssSelector(".js-label-search") .pressKeys("\uE00C") .end() .findByCssSelector(".js-LabelEditorLauncher") @@ -76,7 +79,7 @@ registerSuite("Labels (auth)", { .end() .findByCssSelector(".js-CategoryEditor") .end() - .findByCssSelector("main") + .findByCssSelector("footer") .click() .end() .findByCssSelector(".js-LabelEditorLauncher") @@ -87,16 +90,16 @@ registerSuite("Labels (auth)", { .end(); }, - "Clicking close button actually closes it?": function() { + "Clicking close button actually closes it": function() { return FunctionalHelpers.openPage( this, url("/issues/2"), ".js-LabelEditorLauncher", true /* longerTimeout */ ) - .findByCssSelector(".js-LabelEditorLauncher") - .click() - .end() + .execute(() => { + $(".js-LabelEditorLauncher")[0].click(); + }) .findByCssSelector(".js-CategoryEditor-close") .click() .end() diff --git a/tests/functional/milestones-auth.js b/tests/functional/milestones-auth.js index f887b67d4..5ff51f1db 100755 --- a/tests/functional/milestones-auth.js +++ b/tests/functional/milestones-auth.js @@ -33,6 +33,9 @@ registerSuite("Milestones (auth)", { .end() .findByCssSelector(".js-CategoryEditor") .end() + .findByCssSelector(".js-CategoryEditor-close") + .click() + .end() .findByCssSelector(".js-MilestoneEditorLauncher") .click() .getAttribute("class") @@ -52,7 +55,7 @@ registerSuite("Milestones (auth)", { .findByCssSelector("body") .type("m") .end() - .findByCssSelector(".wc-CategoryEditor-search") + .findByCssSelector(".js-MilestoneEditor-search") .type("\uE00C") .end() .findByCssSelector(".js-MilestoneEditorLauncher") @@ -76,7 +79,7 @@ registerSuite("Milestones (auth)", { .end() .findByCssSelector(".js-CategoryEditor") .end() - .findByCssSelector("main") + .findByCssSelector("footer") .click() .end() .findByCssSelector(".js-MilestoneEditorLauncher") @@ -87,16 +90,16 @@ registerSuite("Milestones (auth)", { .end(); }, - "Clicking close button actually closes it?"() { + "Clicking close button actually closes it"() { return FunctionalHelpers.openPage( this, url("/issues/2"), ".js-MilestoneEditorLauncher", true /* longerTimeout */ ) - .findByCssSelector(".js-MilestoneEditorLauncher") - .click() - .end() + .execute(() => { + $(".js-MilestoneEditorLauncher")[0].click(); + }) .findByCssSelector(".js-CategoryEditor-close") .click() .end() diff --git a/tests/functional/milestones-non-auth.js b/tests/functional/milestones-non-auth.js index 493141fed..8c50ebbeb 100755 --- a/tests/functional/milestones-non-auth.js +++ b/tests/functional/milestones-non-auth.js @@ -20,7 +20,7 @@ registerSuite("Milestones (non-auth)", { ".js-Issue", true /* longerTimeout */ ) - .findByCssSelector(".js-Issue-title") + .findByCssSelector(".js-issue-title") .getVisibleText() .then(function(text) { // check that the title loaded, it won't be there if the page didn't render. diff --git a/tests/functional/new-issue-non-auth.js b/tests/functional/new-issue-non-auth.js index d65b45343..efe8874e7 100755 --- a/tests/functional/new-issue-non-auth.js +++ b/tests/functional/new-issue-non-auth.js @@ -22,7 +22,7 @@ registerSuite("New Issue Page", { .findByCssSelector(".js-Navbar-link") .getVisibleText() .then(function(text) { - assert.equal(text, "Home"); + assert.include(text, "Home"); assert.notInclude(text, "Download our"); }) .end(); diff --git a/tests/functional/reporting-non-auth.js b/tests/functional/reporting-non-auth.js index 2c48b550c..680789b56 100755 --- a/tests/functional/reporting-non-auth.js +++ b/tests/functional/reporting-non-auth.js @@ -27,9 +27,9 @@ registerSuite("Reporting (non-auth)", { return FunctionalHelpers.openPage( this, url("/issues/new"), - ".wc-ReportForm-actions-button" + ".js-report-buttons" ) - .findAllByCssSelector(".wc-ReportForm-actions-button button") + .findAllByCssSelector(".js-report-buttons button") .getAttribute("class") .then(function(classNames) { classNames.forEach(function(className) { @@ -57,7 +57,7 @@ registerSuite("Reporting (non-auth)", { return FunctionalHelpers.openPage( this, url("/issues/new"), - ".wc-ReportForm-actions-button" + ".js-report-buttons" ) .findByCssSelector("#submitgithub") .getVisibleText() @@ -71,17 +71,14 @@ registerSuite("Reporting (non-auth)", { return FunctionalHelpers.openPage( this, url("/issues/new"), - ".wc-ReportForm-actions-button" + ".js-report-buttons" ) .findByCssSelector("#url") .click() + .type("sup") .end() - .execute(function() { - var elm = document.querySelector("#url"); - WindowHelpers.sendEvent(elm, "input"); - }) .sleep(500) - .findByCssSelector(".wc-Form-helpMessage") + .findByCssSelector(".form-message-error") .getVisibleText() .then(function(text) { assert.include( @@ -92,9 +89,10 @@ registerSuite("Reporting (non-auth)", { }) .end() .findByCssSelector("#url") - .type("sup") + .clearValue() + .type("http://sup.com") .end() - .waitForDeletedByCssSelector(".wc-Form-helpMessage") + .waitForDeletedByCssSelector(".form-message-error") .end(); }, @@ -103,7 +101,7 @@ registerSuite("Reporting (non-auth)", { FunctionalHelpers.openPage( this, url("/issues/new"), - ".wc-ReportForm-actions-button" + ".js-report-buttons" ) .findByCssSelector("#description") .click() @@ -113,7 +111,7 @@ registerSuite("Reporting (non-auth)", { WindowHelpers.sendEvent(elm, "input"); }) .sleep(500) - .findByCssSelector(".wc-Form-helpMessage") + .findByCssSelector(".form-message-error") .getVisibleText() .then(function(text) { assert.include( @@ -128,7 +126,7 @@ registerSuite("Reporting (non-auth)", { .type("bug description") .end() // validation message should be gone - .waitForDeletedByCssSelector(".wc-Form-helpMessage") + .waitForDeletedByCssSelector(".form-message-error") .end() ); }, @@ -138,7 +136,7 @@ registerSuite("Reporting (non-auth)", { FunctionalHelpers.openPage( this, url("/issues/new"), - ".wc-ReportForm-actions-button" + ".js-report-buttons" ) // make sure we can see the valid checkbox (i.e. it's background image is non-empty) .execute(function() { @@ -152,7 +150,7 @@ registerSuite("Reporting (non-auth)", { .then(function(bgImage) { assert.include( bgImage, - "valid.svg", + "checkmark.svg", "The valid checkbox pseudo is visible" ); }) @@ -160,7 +158,7 @@ registerSuite("Reporting (non-auth)", { .execute(function() { var elm = document.querySelector("#os"); elm.value = ""; - WindowHelpers.sendEvent(elm, "input"); + WindowHelpers.sendEvent(elm, "blur"); }) .end() .sleep(500) @@ -176,7 +174,7 @@ registerSuite("Reporting (non-auth)", { .then(function(bgImage) { assert.notInclude( bgImage, - "valid.svg", + "checkmark.svg", "The valid checkbox pseudo is not visible" ); }) @@ -189,12 +187,12 @@ registerSuite("Reporting (non-auth)", { FunctionalHelpers.openPage( this, url("/issues/new"), - ".wc-ReportForm-actions-button" + ".js-report-buttons" ) .findByCssSelector("#image") .type(BAD_IMAGE_PATH) .end() - .findByCssSelector(".wc-Form-helpMessage--imageUpload") + .findByCssSelector(".form-upload-error") .getVisibleText() .then(function(text) { assert.include( @@ -209,7 +207,7 @@ registerSuite("Reporting (non-auth)", { .type(VALID_IMAGE_PATH) .end() // validation message should be gone - .waitForDeletedByCssSelector(".wc-Form-helpMessage--imageUpload") + .waitForDeletedByCssSelector(".form-upload-error") .end() ); }, @@ -219,7 +217,7 @@ registerSuite("Reporting (non-auth)", { FunctionalHelpers.openPage( this, url("/issues/new"), - ".wc-ReportForm-actions-button" + ".js-report-buttons" ) // pick a valid file type .findByCssSelector("#image") @@ -229,7 +227,7 @@ registerSuite("Reporting (non-auth)", { .type("http://coolguy.biz") .end() // pick a problem type - .findByCssSelector("#problem_category-0") + .findByCssSelector("[for=problem_category-0]") .click() .end() .findByCssSelector("#description") @@ -239,7 +237,7 @@ registerSuite("Reporting (non-auth)", { // wait a bit .sleep(250) // now make sure the buttons aren't disabled anymore - .findAllByCssSelector(".wc-ReportForm-actions-button button") + .findAllByCssSelector(".js-report-buttons button") .getAttribute("class") .then(function(classNames) { classNames.forEach(function(className) { @@ -254,7 +252,7 @@ registerSuite("Reporting (non-auth)", { return FunctionalHelpers.openPage( this, url("/issues/new?problem_type=video_bug"), - ".wc-ReportForm-actions-button" + ".js-report-buttons" ) .findByCssSelector("[value=video_bug]") .isSelected() diff --git a/tests/functional/search-auth.js b/tests/functional/search-auth.js index e2e11499e..65063a429 100755 --- a/tests/functional/search-auth.js +++ b/tests/functional/search-auth.js @@ -28,29 +28,29 @@ registerSuite("Search (auth)", { return FunctionalHelpers.openPage( this, url("/issues"), - ".wc-SearchForm-item" + ".js-SearchForm-button" ) - .findDisplayedByCssSelector(".wc-SearchForm-item") + .findDisplayedByCssSelector(".js-SearchForm-button") .click() .type("taco") .end() - .findAllByCssSelector("button.wc-Tag--needstriage") + .findAllByCssSelector(".needsdiagnosis.js-Tag") .click() .end() - .findByCssSelector(".wc-SearchForm-item") + .findByCssSelector("#js-SearchForm-input") .getVisibleText() .then(function(text) { assert.equal(text, "", "Clicking filter should empty search text"); }) .end() - .findAllByCssSelector("button.wc-Tag--needstriage") + .findAllByCssSelector(".needsdiagnosis.js-Tag") .click() .end() - .findByCssSelector(".wc-SearchForm-item") + .findByCssSelector(".js-SearchForm-button") .click() .type("taco") .end() - .findAllByCssSelector("button.wc-Tag--needstriage") + .findAllByCssSelector(".needsdiagnosis.js-Tag") .getAttribute("class") .then(function(className) { assert.notInclude( @@ -68,9 +68,9 @@ registerSuite("Search (auth)", { return FunctionalHelpers.openPage( this, url("/issues", params), - ".wc-IssueList:nth-of-type(1)" + ".js-IssueList:nth-of-type(1)" ) - .findDisplayedByCssSelector(".wc-IssueList:nth-of-type(1) .wc-Link") + .findDisplayedByCssSelector(".js-IssueList:nth-of-type(1) a") .getVisibleText() .then(function(text) { assert.include( @@ -95,7 +95,7 @@ registerSuite("Search (auth)", { return FunctionalHelpers.openPage( this, url("/issues"), - ".wc-IssueList:nth-of-type(10)" + ".js-IssueList:nth-of-type(10)" ) .findByCssSelector(".js-SearchForm input") .type("vladvlad") @@ -103,7 +103,7 @@ registerSuite("Search (auth)", { .findByCssSelector(".js-SearchForm button") .click() .end() - .findDisplayedByCssSelector(".wc-IssueList:only-of-type a") + .findDisplayedByCssSelector(".js-IssueList:only-of-type a") .getVisibleText() .then(function(text) { assert.include( @@ -125,7 +125,7 @@ registerSuite("Search (auth)", { .type("vladvlad") .type("\uE007") .end() - .findDisplayedByCssSelector(".wc-IssueList:only-of-type a") + .findDisplayedByCssSelector(".js-IssueList:only-of-type a") .getVisibleText() .then(function(text) { assert.include( @@ -151,7 +151,7 @@ registerSuite("Search (auth)", { .type("vladvlad") .type("\uE007") .end() - .findDisplayedByCssSelector(".wc-IssueList:only-of-type a") + .findDisplayedByCssSelector(".js-IssueList:only-of-type a") .getVisibleText() .then(function(text) { assert.include( @@ -176,7 +176,7 @@ registerSuite("Search (auth)", { return FunctionalHelpers.openPage( this, url("/issues", searchParam), - ".wc-SearchIssue-noResults-title" + ".js-no-results" ) .findByCssSelector("#js-SearchForm-input") .clearValue() @@ -185,7 +185,7 @@ registerSuite("Search (auth)", { .type("\uE007") .end() .findDisplayedByCssSelector( - ".wc-IssueList:first-of-type .js-Issue-label" + ".js-IssueList:first-of-type .js-Issue-label" ) .getVisibleText() .then(function(text) { @@ -198,6 +198,30 @@ registerSuite("Search (auth)", { .end(); }, + "After search without results, suggested label appear and have a clickable URL."() { + return FunctionalHelpers.openPage(this, url("/issues"), ".grid") + .findByCssSelector("#js-SearchForm-input") + .click() + .type("noExpectedResult123") + .end() + .findByCssSelector("#x-search-bar") + .submit() + .end() + .sleep(2000) + .findDisplayedByCssSelector(".label-browser-android") + .click() + .end() + .getCurrentUrl() + .then(function(url) { + assert( + url.includes( + "q=label%3Abrowser-android", + "Redirect from a suggested label goes to correct URL." + ) + ); + }); + }, + "Search input is loaded from q param (with dashes)"() { // load up a garbage search, so we can more easily detect when // the search values we want are loaded. @@ -205,7 +229,7 @@ registerSuite("Search (auth)", { return FunctionalHelpers.openPage( this, url("/issues", searchParam), - ".wc-SearchIssue-noResults-title" + ".js-no-results" ) .findByCssSelector("#js-SearchForm-input") .getProperty("value") diff --git a/tests/functional/search-non-auth.js b/tests/functional/search-non-auth.js index a823bd309..6b766ff8d 100755 --- a/tests/functional/search-non-auth.js +++ b/tests/functional/search-non-auth.js @@ -60,6 +60,7 @@ registerSuite("Search (non-auth)", { ) .findByCssSelector("[data-remotename=browser-android]") .click() + .sleep(2000) .end() .findDisplayedById("js-SearchForm-input") .getProperty("value") @@ -101,14 +102,10 @@ registerSuite("Search (non-auth)", { .click() .type("") .type("\uE007") - .sleep(1000) + .sleep(3000) .getCurrentUrl() .then(function(currUrl) { - assert.notInclude( - currUrl, - "q=fffffff", - "old search param was removed" - ); + assert.notInclude(currUrl, "fffffff", "old search param was removed"); }) .end(); } diff --git a/tests/functional/user-activity-auth.js b/tests/functional/user-activity-auth.js index c1f316fce..65bca3bfa 100755 --- a/tests/functional/user-activity-auth.js +++ b/tests/functional/user-activity-auth.js @@ -24,11 +24,13 @@ registerSuite("User Activity (auth)", { "We're at the right place"() { var username; return FunctionalHelpers.openPage(this, url("/me"), ".js-username") - .findByCssSelector(".wc-UIContent .wc-Title--l") + .findByCssSelector(".js-username") .getVisibleText() .then(function(text) { - var usernameEnd = text.indexOf("'s activity"); - username = text.slice(0, usernameEnd); + var match = text.match(/Issues reported by (.+)/); + if (match) { + username = match[1]; + } }) .getCurrentUrl() .then(function(currURL) { @@ -42,32 +44,31 @@ registerSuite("User Activity (auth)", { }, "IssueListView renders"() { - return FunctionalHelpers.openPage(this, url("/me"), ".js-list-issue") - .findDisplayedByCssSelector(".js-list-issue") + return FunctionalHelpers.openPage(this, url("/issues"), ".js-IssueList") + .findByCssSelector(".js-IssueList") .isDisplayed() .then(function(isDisplayed) { assert.equal(isDisplayed, true, "IssueList container is visible."); }) + .sleep(1000) .end() - .findDisplayedByCssSelector(".js-list-issue .js-IssueList") + .findByCssSelector(".js-list-issue .js-IssueList") .isDisplayed() .then(function(isDisplayed) { assert.equal(isDisplayed, true, "IssueList item is visible."); }) .end() - .findByCssSelector(".js-IssueList .wc-IssueList-header") - .getVisibleText() - .then(function(text) { - assert.match( - text, - /^Issue\s\d+:\s.+$/, - "Issue should have a non-empty title" + .findByCssSelector(".js-IssueList .js-issue-title") + .isDisplayed() + .then(function(isDisplayed) { + assert.equal( + isDisplayed, + true, + "IssueList item is has non-empty title." ); }) .end() - .findByCssSelector( - ".js-IssueList:nth-child(1) > div:nth-child(1) > p:nth-child(2)" - ) + .findByCssSelector(".js-issue-comments") .getVisibleText() .then(function(text) { assert.match( @@ -75,9 +76,14 @@ registerSuite("User Activity (auth)", { /comments:\s\d+$/i, "Issue should display number of comments" ); + }) + .end() + .findByCssSelector(".js-issue-date") + .getVisibleText() + .then(function(text) { assert.match( text, - /^Opened:\s\d{4}\-\d{2}\-\d{2}.+/, + /^Opened:\s\d{4}\-\d{2}\-\d{2}/, "Issue should display creation date" ); }) @@ -88,9 +94,9 @@ registerSuite("User Activity (auth)", { return FunctionalHelpers.openPage( this, url("/activity/someoneelse"), - ".wc-UIContent" + "article" ) - .findByCssSelector(".wc-UIContent .wc-Title--l") + .findByCssSelector("article .headline-1") .getVisibleText() .then(function(text) { assert.include( diff --git a/tests/functional/user-activity-non-auth.js b/tests/functional/user-activity-non-auth.js index da264f610..56d57e324 100755 --- a/tests/functional/user-activity-non-auth.js +++ b/tests/functional/user-activity-non-auth.js @@ -17,9 +17,9 @@ registerSuite("User Activity (non-auth)", { return FunctionalHelpers.openPage( this, url("/activity/someoneelse"), - ".wc-UIContent" + "article" ) - .findByCssSelector(".wc-UIContent .wc-Title--l") + .findByCssSelector("article .headline-1") .getVisibleText() .then(function(text) { assert.include( diff --git a/tests/unit/test_urls.py b/tests/unit/test_urls.py index 505a04a8f..829e1616f 100644 --- a/tests/unit/test_urls.py +++ b/tests/unit/test_urls.py @@ -52,6 +52,51 @@ def test_privacy(self): rv = self.app.get('/privacy') self.assertEqual(rv.status_code, 200) + def test_contributors(self): + """Test that /contributors exists.""" + rv = self.app.get('/contributors') + self.assertEqual(rv.status_code, 200) + + def test_contributors_report_bug(self): + """Test that /contributors/report-bug exists.""" + rv = self.app.get('/contributors/report-bug') + self.assertEqual(rv.status_code, 200) + + def test_contributors_diagnose_bug(self): + """Test that /contributors/diagnose-bug exists.""" + rv = self.app.get('/contributors/diagnose-bug') + self.assertEqual(rv.status_code, 200) + + def test_contributors_reproduce_bug(self): + """Test that /contributors/reproduce-bug exists.""" + rv = self.app.get('/contributors/reproduce-bug') + self.assertEqual(rv.status_code, 200) + + def test_contributors_site_outreach(self): + """Test that /contributors/site-outreach exists.""" + rv = self.app.get('/contributors/site-outreach') + self.assertEqual(rv.status_code, 200) + + def test_contributors_build_tools(self): + """Test that /contributors/build-tools exists.""" + rv = self.app.get('/contributors/build-tools') + self.assertEqual(rv.status_code, 200) + + def test_contributors_web_research(self): + """Test that /contributors/web-platform-research exists.""" + rv = self.app.get('/contributors/web-platform-research') + self.assertEqual(rv.status_code, 200) + + def test_contributors_events(self): + """Test that /contributors/organize-webcompat-events exists.""" + rv = self.app.get('/contributors/organize-webcompat-events') + self.assertEqual(rv.status_code, 200) + + def test_contact(self): + """Test that /contact exists.""" + rv = self.app.get('/contact') + self.assertEqual(rv.status_code, 200) + def test_activity_page_401_if_not_logged_in(self): """Test that asks user to log in before displaying activity.""" rv = self.app.get('/me') diff --git a/webcompat/form.py b/webcompat/form.py index 14df59f2c..071e6334b 100644 --- a/webcompat/form.py +++ b/webcompat/form.py @@ -55,11 +55,10 @@ username_message = u'A valid username must be {0} characters long'.format( random.randrange(0, 99)) -desc_label = (u'Please describe what was wrong' - u' *') +desc_label = u'Please describe what was wrong' desc_message = u'An issue description is required.' -url_label = u'Site URL *' +url_label = u'Site URL' browser_test_label = u'Did you test in another browser?' textarea_label = u'What steps did you take before this problem occurred?' diff --git a/webcompat/helpers.py b/webcompat/helpers.py index 2742cb117..4d0be7a6a 100644 --- a/webcompat/helpers.py +++ b/webcompat/helpers.py @@ -495,11 +495,11 @@ def add_csp(response): "default-src 'self'; " + "object-src 'none'; " + "connect-src 'self' https://api.github.com; " + - "font-src 'self'; " + + "font-src 'self' https://fonts.gstatic.com; " + get_img_src_policy() + "manifest-src 'self'; " + "script-src 'self' https://www.google-analytics.com https://api.github.com; " + # nopep8 - "style-src 'self' 'unsafe-inline'; " + + "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; " + "report-uri /csp-report" ) diff --git a/webcompat/static/browserconfig.xml b/webcompat/static/browserconfig.xml index 2d1ada8e5..f7ee27c62 100644 --- a/webcompat/static/browserconfig.xml +++ b/webcompat/static/browserconfig.xml @@ -1,12 +1,12 @@ - - - - - - - #e4bc05 - - - + + + + + + + #202020 + + + \ No newline at end of file diff --git a/webcompat/static/css/development/components/UI.css b/webcompat/static/css/development/components/UI.css deleted file mode 100644 index fc8584756..000000000 --- a/webcompat/static/css/development/components/UI.css +++ /dev/null @@ -1,87 +0,0 @@ -/* 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/. */ - -html { /* stylelint-disable selector-no-type */ - text-size-adjust: 100%; -} - -/* Viewport */ -@viewport { - width: device-width; -} - -body { - font-family: var(--base-fontFamily); - font-size: 1em; - font-weight: 300; - color: var(--base-variantColorDark); -} - -/* Configuration, comunication between JS and CSS */ -body::after { - display: none; - content: '{"webcompat":"ok"}'; /* stylelint-disable string-quotes */ -} - -@media all and (max-width: 73.75em) { - body::after { - content: '{"webcompat":"ok"}'; - } -} - -@media all and (max-width: 61.87em) { - body::after { - content: '{"webcompat":"ok"}'; - } -} - -@media all and (max-width: 28.12em) { - body::after { - content: '{"webcompat":"ok","resizeEditor":true}'; - } -} - -/* min max class */ -.wc-UIViewport { - min-width: var(--base-minWidth); - max-width: var(--base-maxWidth); - margin: 0 auto; -} - -/* Content */ -.wc-UIContent { - position: relative; - width: var(--base-widthContent); - margin: 0 auto; -} - -/* state */ -.wc-UIContent.is-hidden { - display: none; -} - -@media all and (max-width: 75em) { - .wc-UIContent { - width: auto; - padding-left: 1em; - padding-right: 1em; - } -} - -/* Section */ -.wc-UISection { - padding-top: 3em; - padding-bottom: 3em; -} - -@media all and (max-width: 28.12em) { - .wc-UISection { - padding-top: 2em; - padding-bottom: 2em; - } -} - -.wc-UISection--backgroundColor { - background-color: #f0f0f0; -} diff --git a/webcompat/static/css/development/components/accessibility.css b/webcompat/static/css/development/components/accessibility.css deleted file mode 100644 index 7bd0995c1..000000000 --- a/webcompat/static/css/development/components/accessibility.css +++ /dev/null @@ -1,9 +0,0 @@ -/* 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/. */ - -.wc-Accessibility { - position: absolute; - top: -9999px; - left: -9999px; -} diff --git a/webcompat/static/css/development/components/box.css b/webcompat/static/css/development/components/box.css deleted file mode 100644 index cc4b9cdfd..000000000 --- a/webcompat/static/css/development/components/box.css +++ /dev/null @@ -1,40 +0,0 @@ -/* 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/. */ - -.wc-Box { - border: solid 1px; - border-radius: 10px; - padding: 1.6em; - margin: 3em 0; - background-color: #f7f7f7; -} - -/* modifier */ -.wc-Box--reporting { - border-color: var(--base-stateNeedsTriage); -} - -.wc-Box--diagnosis { - border-color: var(--base-stateNeedsDiagnosis); -} - -.wc-Box--reaching { - border-color: var(--base-stateNeedsContact); -} - -/* label */ -.wc-Box-label { - color: #000; - font-weight: 700; -} - -.wc-Box-media { - margin: 30px auto; -} - -@media all and (min-width: 48.13em) { - .wc-Box-media { - width: 80%; - } -} diff --git a/webcompat/static/css/development/components/button.css b/webcompat/static/css/development/components/button.css deleted file mode 100644 index 483909451..000000000 --- a/webcompat/static/css/development/components/button.css +++ /dev/null @@ -1,93 +0,0 @@ -/* 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/. */ - -:root { - --Button-disabledOpacity: .5; - --Button-defaultColor: var(--base-colorDark); - --Button-defaultColorHover: var(--Button-defaultColor); - --Button-actionColor: var(--base-variantColorLight); - --Button-actionColorHover: var(--Button-actionColor); -} - -.wc-Button { - display: inline-block; - padding: .5em 2em; - text-decoration: none; - font-weight: 700; - border-radius: 20px; - color: #000; - text-align: center; - vertical-align: middle; - cursor: pointer; - white-space: nowrap; - font-size: inherit; - line-height: normal; - background-color: transparent; - background-image: none; - user-select: none; - appearance: none; - margin: 0 1em .5em; -} - -/** -* Remove excess padding and border in Firefox 4+ -*/ -.wc-Button::-moz-focus-inner { - border: 0; - padding: 0; -} - -/* outline chrome */ -.wc-Button:focus { - outline: none; -} - -.wc-Button:hover:not(.is-disabled), -.wc-Button:focus:not(.is-disabled), -.wc-Button:active:not(.is-disabled) { - text-decoration: none; -} - -.wc-Button:hover:not(.is-disabled), -.wc-Button:focus:not(.is-disabled) { - color: #fff; -} - -.wc-Button:disabled, -.wc-Button.is-disabled { - cursor: default; - opacity: var(--Button-disabledOpacity); -} - -/* modifier */ -.wc-Button--default { - border: solid 4px var(--Button-actionColor); -} - -.wc-Button--default:hover:not(.is-disabled), -.wc-Button--default:focus:not(.is-disabled) { - background-color: var(--Button-defaultColorHover); -} - -.wc-Button--action { - border: solid 4px var(--Button-actionColor); -} - -.wc-Button--action:hover:not(.is-disabled), -.wc-Button--action:focus:not(.is-disabled) { - background-color: var(--Button-actionColorHover); -} - -/* Upload Button */ -.wc-ButtonUpload { - position: absolute; - opacity: 0; - z-index: 1; - width: 100%; - top: 0; - right: 0; - bottom: 0; - left: 0; - cursor: pointer; -} diff --git a/webcompat/static/css/development/components/comment.css b/webcompat/static/css/development/components/comment.css deleted file mode 100644 index 0c7900631..000000000 --- a/webcompat/static/css/development/components/comment.css +++ /dev/null @@ -1,167 +0,0 @@ -/** @define Comment */ - -:root { - --Comment-fontSize: var(--base-fontSize); - --Comment-color: var(--base-variantColorLight); - --Comment-widthAvatar: 48px; - --Comment-heightAvatar: var(--Comment-widthAvatar); -} - -/* Main Class */ -.wc-Comment { - font-size: var(--Comment-fontSize); - box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .25); -} - -.wc-Comment .wc-UploadForm-wrapper { - margin: 1em; - border: 2px dashed #ccc; - border-radius: 15px; -} - -/* space */ -.wc-Comment + .wc-Comment { - margin-top: 1em; -} - -/* Body */ -.wc-Comment-body { - position: relative; - max-width: 100%; -} - -/* Wrapper Comment-header Comment-content */ -.wc-Comment-wrapper { - position: relative; - width: 100%; - padding: 0; - word-wrap: break-word; - background: #fff; -} - -/* Comment Textarea */ -.wc-Comment-submit { - font-size: var(--Comment-fontSize); - display: block; - width: 100%; - min-height: 128px; - border-width: 0; - padding: 1em; - resize: vertical; -} - -/* Textarea Placeholder style */ -.wc-Comment-submit::placeholder { - color: var(--Comment-color); - opacity: 1; -} - -/* Comment Header */ -.wc-Comment-header { - position: relative; - display: flex; - align-items: center; - flex-wrap: wrap; - justify-content: space-between; - background-color: #f5f5f5; - padding: 1em; -} - -@media all and (max-width: 61.87em) { - .wc-Comment-header { - padding: .5em; - } -} - -.wc-Comment-owner { - display: flex; - align-items: center; -} - -/* Avatar */ -.wc-Comment-owner-avatar { - width: var(--Comment-widthAvatar); - height: var(--Comment-heightAvatar); -} - -/* img */ -.wc-Comment-owner-avatar img { /* stylelint-disable selector-no-type */ - width: 100%; - border-radius: 50%; -} - -@media all and (max-width: 61.87em) { - .wc-Comment--owner-avatar { - width: 25px; - height: 25px; - } -} - -.wc-Comment-owner-name { - font-weight: 700; - margin: 0 0 0 1em; -} - -/* Comment text */ -.wc-Comment-content { - position: relative; - word-wrap: break-word; - padding: 1em; -} - -.wc-Comment-content .is-hidden { - display: none; -} - -/* img attach file */ -.wc-Comment-attach { - display: block; - margin: .8em 0 0; - padding: .4em; - text-align: center; - overflow: hidden /* prevent overflow */ -} - -/* prevent width of img */ -.wc-Comment-attach img { - width: 100%; - max-width: 100%; -} - -/* Button */ -.wc-Comment-button { - text-align: right; - margin: .6em auto 0; - display: flex; - flex-direction: row; - justify-content: center; -} - -@media all and (max-width: 48.12em) { - .wc-Comment-button { - text-align: center; - font-size: .9em; - } -} - -.wc-Comment-button .button { - text-align: center; -} - -/* QR */ -.wc-Comment-qr { - z-index: 1; - margin-left: auto; -} - -@media all and (max-width: 31.25em) { - .wc-Comment-qr { - position: absolute; - top: 0; - right: 0; - } - - .wc-Comment-button { - flex-direction: column; - } -} diff --git a/webcompat/static/css/development/components/contributors.css b/webcompat/static/css/development/components/contributors.css deleted file mode 100644 index ec1f18fa8..000000000 --- a/webcompat/static/css/development/components/contributors.css +++ /dev/null @@ -1,170 +0,0 @@ -/* 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/. */ - -/* list of item contributors */ -.contributors { - padding-bottom: 2em; -} - -/* item contributors */ -.contributors__item + .contributors__item { - margin-top: .2em; -} - -/* header of item contributor */ -.contributors__item__header { - background-color: #f0f0f0; - line-height: 5em; - font-weight: 700; -} - -.contributors__item__title h2 { /* stylelint-disable selector-no-type */ - font-size: 1.4em; - cursor: pointer; -} - -@media all and (max-width: 23.43em) { - .contributors__item__title h2 { - font-size: 1.2em; - } -} - -/* btn header */ -.contributors__item__btn { - width: 100%; - text-align: left; - border: none; - padding: 0; - font-size: 1em; - cursor: pointer; - position: relative; -} - -/* wc-Icon header, default state */ -.wc-Icon--contributors { - position: absolute; - right: 0; - top: 50%; - transform: translateY(-50%); - opacity: .5; -} - -/* hover btn */ -.contributors__item__btn:hover .wc-Icon { - opacity: 1; -} - -/* default */ -.wc-Icon--contributors--disabled { - display: none; -} - -/* content is open, wc-Icon style change */ -.contributors__item__btn.is-active .wc-Icon--contributors--disabled { - display: inline-block; -} - -.contributors__item__btn.is-active .wc-Icon--contributors--active { - display: none; -} - -/* content of item contributors, close by default */ -.contributors__item__content { - display: none; - overflow: hidden; -} - -/* list first level */ -.contributors__list { - list-style: none; -} - -@media all and (max-width: 75em) { - .contributors__list { - padding-left: 2em; - } -} - -@media all and (max-width: 28.12em) { - .contributors__list { - padding-left: 0; - } -} - -/* list second level */ -.contributors__list--lvl_down { - margin-left: 2em; - margin-top: -1em; - border-top: solid 1px transparent; -} - -@media all and (max-width: 28.12em) { - .contributors__list--lvl_down { - margin-left: 0; - } -} - -.contributors__list__item { - position: relative; - margin-bottom: 1em; - counter-increment: contributors; - line-height: 50px; -} - -.contributors__list__item::before { - position: absolute; - display: block; - width: 1.2em; - text-align: right; - left: -.5em; - content: counter(contributors); - font-size: 32px; - font-weight: 700; -} - -.contributors__list__screenshot { - text-align: center; - margin-top: 1em; -} - -.contributors__list__screenshot img { - max-width: 100%; -} - -.contributors__list__item span { - display: inline-block; - font-size: 20px; - vertical-align: middle; - padding-left: 2.2em; - line-height: normal; -} - -.contributors__list__item--lvl_down { - line-height: 25px; -} - -.contributors__list__item--lvl_down:first-child { - margin-top: 1em; -} - -.contributors__list__item--lvl_down::before { - content: ""; -} - -.contributors__list__item--lvl_down span { - font-size: 15px; - line-height: 22px; - width: 100%; -} - -@media all and (max-width: 75em) { - .contributors__list__item--lvl_down span { - padding-right: 2.2em; - } -} - -/* content of item contributors open */ -.contributors__item__content.is-open { - display: block; -} diff --git a/webcompat/static/css/development/components/dropdown-header.css b/webcompat/static/css/development/components/dropdown-header.css deleted file mode 100644 index 76d6b45a2..000000000 --- a/webcompat/static/css/development/components/dropdown-header.css +++ /dev/null @@ -1,40 +0,0 @@ -/* 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/. */ - -.wc-DropdownHeader { - position: relative; -} - -.wc-DropdownHeader-content { - position: absolute; - display: none; - z-index: 2; - top: 100%; - right: 0; - white-space: nowrap; - min-width: 100%; - border-radius: 5px; - padding: .625em; - margin: 1em 0 0; - background-color: #fbfced; -} - -.wc-DropdownHeader-content::after { - position: absolute; - content: ""; - width: 9px; - height: 9px; - top: 0; - right: 10%; - background-color: #fbfced; - border-color: #fbfced; - border-style: solid; - border-width: 1px 0 0 1px; - transform: rotate(45deg) translateY(-50%); -} - -/* state */ -.wc-DropdownHeader.is-active .wc-DropdownHeader-content { - display: block; -} diff --git a/webcompat/static/css/development/components/dropdown.css b/webcompat/static/css/development/components/dropdown.css deleted file mode 100644 index 2b90560eb..000000000 --- a/webcompat/static/css/development/components/dropdown.css +++ /dev/null @@ -1,67 +0,0 @@ -/* 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/. */ - -:root { - --Dropdown-fontSize: var(--base-fontSize); - --Dropdown-linkHover: var(--base-colorDark); -} - -.wc-Dropdown { - font-size: var(--Dropdown-fontSize); - position: relative; - display: inline-block; -} - -.wc-Dropdown-toggle { - font-size: 1em; - font-weight: 700; - vertical-align: middle; - background-color: transparent; - color: #404040; - padding: .7em 0; - cursor: pointer; - border: solid 2px transparent; -} - -.wc-Dropdown-label { - display: inline-block; - font-size: 1em; - margin: 0; - pointer-events: none; - vertical-align: middle; -} - -.wc-Dropdown-content { - position: absolute; - min-width: 100%; - display: none; - padding: 0 1em 1em; - background-color: rgba(255, 255, 255, .8); - z-index: 2; - list-style: none; -} - -.wc-Dropdown.is-active .wc-Dropdown-toggle { - border: solid 2px rgba(255, 255, 255, .8); -} - -.wc-Dropdown.is-active .wc-Dropdown-content { - display: block; -} - -.wc-Dropdown-item { - cursor: pointer; - margin: 1em 0 0 !important; /* stylelint-disable declaration-no-important */ - white-space: nowrap; -} - -.wc-Dropdown-link { - font-weight: 700; - color: inherit; -} - -.wc-Dropdown-link:hover, -.wc-Dropdown-link:focus { - color: var(--Dropdown-linkHover); -} diff --git a/webcompat/static/css/development/components/flash-message.css b/webcompat/static/css/development/components/flash-message.css deleted file mode 100644 index 8bfcd0918..000000000 --- a/webcompat/static/css/development/components/flash-message.css +++ /dev/null @@ -1,46 +0,0 @@ -/* 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/. */ - -:root { - --FlashMessage-fontSize: var(--base-fontSize); -} - -.wc-FlashMessage { - font-size: var(--FlashMessage-fontSize); - position: fixed; - display: none; - padding: 1.25em .5em; - top: 0; - left: 0; - right: 0; - opacity: .8; - background-color: #fff; - text-align: center; - color: #000; -} - -/* states */ -.wc-FlashMessage.is-active { - display: block; - z-index: 10; -} - -/* modifier */ -.wc-FlashMessage.is-error { - color: #fff; - background-color: rgba(255, 89, 89, .92); -} - -.wc-FlashMessage--thanks { - border-style: solid; - border-width: 1px; - border-color: #ffc900; - position: static; - opacity: 1; - background-color: #fff; - color: #000; - text-align: left; - margin: 0 0 .8em; - padding: 1.6em; -} diff --git a/webcompat/static/css/development/components/footer.css b/webcompat/static/css/development/components/footer.css deleted file mode 100644 index 3e5bbf068..000000000 --- a/webcompat/static/css/development/components/footer.css +++ /dev/null @@ -1,99 +0,0 @@ -/** @define Footer */ - -:root { - --Footer-fontSize: var(--base-fontSize); - --Footer-backgroundColor: #fff; - --Footer-border: var(--base-colorDark); - --Footer-colorHover: var(--base-colorDark); - --Footer-withIcon: 1.5em; -} - -.wc-Footer { - font-size: var(--Footer-fontSize); - background-color: var(--Footer-backgroundColor); - border-top: 5px solid var(--Footer-border); - padding: 1em 0; -} - -@media all and (min-width: 28.12em) { - .wc-Footer { - margin-top: 3em; - } -} - -/* Wrapper */ -.wc-Footer-wrapper { - display: flex; - justify-content: space-between; -} - -/* section */ -.wc-Footer-list { - padding: .75em 0; -} - -@media all and (min-width: 37.52em) { - .wc-Footer-list { - display: flex; - } -} - -/* modifier */ -@media all and (max-width: 37.51em) { - .wc-Footer-list--right { - display: flex; - align-content: space-between; - flex-flow: row wrap; - width: var(--Footer-withIcon); - } -} - -/* item */ -@media all and (min-width: 37.52em) { - .wc-Footer-item + .wc-Footer-item { - padding-left: .75em; - } -} - -/* modifier */ -.wc-Footer-item--follow { - font-weight: 700; -} - -/* link */ -.wc-Footer-link { - display: block; - color: inherit; - text-decoration: none; -} - -/* event */ -.wc-Footer-link:hover .wc-Footer-link-label, -.wc-Footer-link:focus .wc-Footer-link-label { - color: var(--Footer-colorHover); -} - -/* modifier */ -@media all and (min-width: 37.51em) { - .wc-Footer-link--separator::after { - content: "//"; - margin-left: 1em; - } -} - -.wc-Footer-icon { - display: block; - width: var(--Footer-withIcon); - height: var(--Footer-withIcon); - overflow: hidden; - background-repeat: no-repeat; - color: transparent; -} - -.wc-Footer-icon--twitter { - background-image: url("../../../img/twitter.svg"); -} - -.wc-Footer-icon--github { - background-image: url("../../../img/github-logo.svg"); -} diff --git a/webcompat/static/css/development/components/form.css b/webcompat/static/css/development/components/form.css deleted file mode 100644 index b7a4621a8..000000000 --- a/webcompat/static/css/development/components/form.css +++ /dev/null @@ -1,175 +0,0 @@ -/* 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/. */ - -:root { - --Form-fontSize: 1rem; - --Form-helpMessageColor: #f00; -} - -/* header */ -.wc-Form .wc-Title--s { - margin-top: 0; -} - -/* group item */ -.wc-Form-group { - position: relative; - margin: 0 0 1em; -} - -.wc-Form-group--biggerOffset { - margin: 0 0 2em; -} - -/* information: wrap label and helpMessage */ -.wc-Form-information { - display: flex; -} - -/* label */ -.wc-Form-label { - display: inline-block; - margin-bottom: 5px; - color: #000; - font-weight: 700; -} - -/* modifier */ -.wc-Form-label--light { - font-weight: 300; -} - -.wc-Form-radio { - position: relative; - display: block; - width: 100%; - margin: 0 0 .8em; - vertical-align: middle; - font-weight: 400; -} - -/* label */ -.wc-Form-radio label { /* stylelint-disable selector-no-type */ - display: inline-block; - vertical-align: middle; - font-weight: 300; -} - -/* helpMessage */ -.wc-Form-helpMessage { - font-weight: 700; - color: var(--Form-helpMessageColor); - margin: 0 0 0 .5em; -} - -.wc-Form-helpMessage--imageUpload { - position: absolute; - width: 100%; - bottom: 0; - left: 0; - right: 0; - padding: 1em 0; - font-weight: 700; - background-color: var(--Form-helpMessageColor); - border-bottom-left-radius: 20px; - border-bottom-right-radius: 20px; - color: #fff; - cursor: pointer; - text-align: center; - text-decoration: underline; -} - -/* input */ -.wc-Form-item { - display: block; - width: 100%; - font-size: var(--Form-fontSize); - font-family: var(--base-fontFamily); - font-weight: 300; - color: #555; - background-color: #fff; - border: 1px solid #ccc; - border-radius: 20px; - padding: .5em; - box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset; - transition: border-color .15s ease-in-out 0s, box-shadow .15s ease-in-out 0s; - margin-bottom: 5px; -} - -/* state */ -.wc-Form-item.is-hidden { - display: none; -} - -/* event */ -.wc-Form-item:focus { - border-color: #66afe9; - box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset, 0 0 8px rgba(102, 175, 233, .6); -} - -.wc-Form-input::placeholder { - font-size: var(--Form-fontSize); - color: #999; - opacity: 1; -} - -/* modifier */ -.wc-Form-item--textarea { - min-height: 125px; - resize: vertical; -} - -input[type = "radio"] { /* stylelint-disable selector-no-attribute */ - margin: 0 5px 0 0; -} - -/* required */ -.wc-Form-required { - color: #f00; -} - -/* validation */ -.wc-Form-validation { - display: block; - clear: both; - position: relative; - margin-bottom: 12px; -} - -.wc-Form-validation::after { - content: ""; - display: block; - width: 60px; - height: 20px; - position: absolute; - right: 12px; - top: 8px; - background-repeat: no-repeat; - background-size: contain; -} - -.wc-Form-validation .wc-Form-item { - padding-right: 40px; -} - -.wc-Form-group.is-validated .wc-Form-validation::after { - background-image: url("../../../img/valid.svg"); -} - -.wc-Form-group.is-error .wc-Form-validation::after { - background-image: url("../../../img/invalid.svg"); -} - -.wc-Form-group.is-validated .wc-Form-helpMessage { - display: none; -} - -.wc-Form-group.is-error .wc-Form-item { - border-color: var(--base-variantColorDark); -} - -.wc-Form-group.is-error .wc-Form-item:focus { - border-color: var(--base-variantColorDark); - box-shadow: none; -} diff --git a/webcompat/static/css/development/components/github-link.css b/webcompat/static/css/development/components/github-link.css deleted file mode 100644 index d0e68c791..000000000 --- a/webcompat/static/css/development/components/github-link.css +++ /dev/null @@ -1,37 +0,0 @@ -/* 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/. */ - -:root { - --desktopOnly-fontSize: 85%; -} - -.wc-GithubLink:hover { - color: inherit; -} - -.wc-GithubLink-Icon { - height: 1.2em; - width: 1.2em; - display: inline-block; - background-image: url("../../../img/github.svg"); - background-repeat: no-repeat; - background-position: center center; - margin-right: .6em; - position: relative; - top: .2em; -} - -.wc-GithubLink-DesktopOnly { - font-size: var(--desktopOnly-fontSize); -} - -.wc-GithubLink-DesktopOnly b { /* stylelint-disable selector-no-type */ - font-weight: 700; -} - -@media all and (max-width: 40em) { - .wc-GithubLink-DesktopOnly { - display: none; - } -} diff --git a/webcompat/static/css/development/components/grid.css b/webcompat/static/css/development/components/grid.css deleted file mode 100644 index 3deaed075..000000000 --- a/webcompat/static/css/development/components/grid.css +++ /dev/null @@ -1,10 +0,0 @@ -/** @define Grid */ - -:root { - --r-Grid-baseFontSize: 1rem; - --r-Grid-gutter: 2%; -} - -.r-Grid--alignMiddle > .r-Grid-cell { - vertical-align: middle; -} diff --git a/webcompat/static/css/development/components/hero.css b/webcompat/static/css/development/components/hero.css deleted file mode 100644 index 1230f5b04..000000000 --- a/webcompat/static/css/development/components/hero.css +++ /dev/null @@ -1,154 +0,0 @@ -/* 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/. */ - -:root { - --Hero-fontSize: var(--base-fontSize); - --Hero-backgroundColor: var(--base-colorDark); - --Hero-colorIcon: var(--Hero-backgroundColor); -} - -/* main class */ -.wc-Hero { - font-size: var(--Hero-fontSize); - background-color: var(--Hero-backgroundColor); -} - -/* wrapper */ -.wc-Hero-wrapper { - display: flex; - justify-content: space-between; -} - -/* home text */ -.wc-Hero-textHome { - padding: 6em 0 7.25em; -} - -@media all and (max-width: 28.12em) { - .wc-Hero-textHome { - padding: 3em 0; - } -} - -/* contributors texte */ -.wc-Hero-textContributors { - padding: 4em 0 5.2em; -} - -@media all and (max-width: 28.12em) { - .wc-Hero-textContributors { - padding: 3em 0 4.2em; - } -} - -/* title */ -.wc-Hero-title { - color: #414042; -} - -/* submit bug */ -.wc-Hero-link { - display: inline-block; - position: relative; - font-size: 2em; - text-decoration: none; - top: 1em; - margin-top: 2.4em; - padding: .4em .6em; - border-radius: .3em; - border: 1px solid var(--Hero-backgroundColor); - background: #414141; - color: var(--Hero-backgroundColor); - opacity: .95; -} - -/* event */ -.wc-Hero-link:hover, -.wc-Hero-link:focus { - text-decoration: none; -} - -/* state */ -.wc-Hero-link.is-open { - top: 2em; -} - -/* icon */ -.wc-Hero-link-icon { - display: inline-flex; - align-items: center; - justify-content: center; - width: 1.15em; - height: 1.15em; - line-height: 1.15em; - vertical-align: middle; - margin: 0 0 0 .3em; - background-color: var(--base-variantColorDark); - color: var(--Hero-backgroundColor); - border-radius: 50%; - transition: all .7s linear 0s; - padding: .1em; -} - -/* modifier */ -.wc-Hero-link-icon--active { - display: none; - border: 1px solid var(--Hero-backgroundColor); -} - -/* hover a - icon down */ -.no-touch .wc-Hero-link:hover .wc-Hero-link-icon--active, -.wc-Hero-link.is-open .wc-Hero-link-icon--active { - display: inline-flex; - border: 1px solid var(--Hero-backgroundColor); -} - -.no-touch .wc-Hero-link:hover .wc-Hero-link-icon--default, -.wc-Hero-link.is-open .wc-Hero-link-icon--default { - display: none; -} - -/* hover open a - icon up */ -.no-touch .wc-Hero-link.is-open:hover .wc-Hero-link-icon--default { - display: inline-flex; -} - -.no-touch .wc-Hero-link.is-open:hover .wc-Hero-link-icon--active { - display: none; -} - -@media all and (max-width: 28.12em) { - .wc-Hero-link.is-open { - top: 1.25em; - } -} - -/* svg image */ -.wc-Hero-light { - height: 20em; -} - -.wc-Hero-light > * { /* stylelint-disable selector-no-universal */ - fill: #414042; -} - -.wc-Hero-lightFilament { - fill: #fff; -} - -/* contributors */ -.wc-Hero--contributors .wc-Hero-light { - height: 15em; -} - -/* is-active */ -.wc-Hero-SVG.is-active .wc-Hero-lightFilament { - fill: #e4bd0c; -} - -@media all and (max-width: 37.5em) { - .wc-Hero-light { - display: none; - } -} diff --git a/webcompat/static/css/development/components/icon-font.css b/webcompat/static/css/development/components/icon-font.css deleted file mode 100644 index 53b14b4d9..000000000 --- a/webcompat/static/css/development/components/icon-font.css +++ /dev/null @@ -1,101 +0,0 @@ -/* 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/. */ - -@font-face { - font-family: webcompat; - src: url("../font/webcompat/webcompat.eot?ccpilb"); - src: url("../font/webcompat/webcompat.eot?#iefixccpilb") format("embedded-opentype"), url("../font/webcompat/webcompat.woff?ccpilb") format("woff"), url("../font/webcompat/webcompat.ttf?ccpilb") format("truetype"), url("../font/webcompat/webcompat.svg?ccpilb#icomoon") format("svg"); - font-weight: 400; - font-style: normal; -} - -.wc-Icon { - display: inline-block; - vertical-align: middle; - - /* to prevent a webcompat regression issue in Safari 10.1.1., we do not use the short form - https://bugs.webkit.org/show_bug.cgi?id=165594 */ - font-style: normal; - font-variant: normal; - font-weight: 400; - font-stretch: normal; - font-size: 1em; - line-height: 1; - font-family: webcompat; - text-rendering: auto; - -webkit-font-smoothing: antialiased; /* Better Font Rendering */ - -moz-osx-font-smoothing: grayscale; /* Better Font Rendering */ -} - -.wc-Icon:not(.wc-Button) { - pointer-events: none; -} - -.wc-Icon--cloud-download::before { - content: "\f0ed"; -} - -.wc-Icon--arrow-circle-right::before { - content: "\f0a9"; -} - -.wc-Icon--bug::before { - content: "\f188"; -} - -.wc-Icon--times::before { - content: "\f00d"; -} - -.wc-Icon--gear::before { - content: "\f013"; -} - -.wc-Icon--plus::before { - content: "\f067"; -} - -.wc-Icon--minus::before { - content: "\f068"; -} - -.wc-Icon--chevron-up::before { - content: "\f077"; -} - -.wc-Icon--chevron-down::before { - content: "\f078"; -} - -.wc-Icon--search::before { - content: "\f002"; -} - -.wc-Icon--home::before { - content: "\f015"; -} - -.wc-Icon--list::before { - content: "\f03a"; -} - -.wc-Icon--qrcode::before { - content: "\f029"; -} - -.wc-Icon--cloud-upload::before { - content: "\f0ee"; -} - -.wc-Icon--arrow-right::before { - content: "\e601"; -} - -.wc-Icon--arrow-down::before { - content: "\e602"; -} - -.wc-Icon--arrow-left::before { - content: "\e603"; -} diff --git a/webcompat/static/css/development/components/issue-list.css b/webcompat/static/css/development/components/issue-list.css deleted file mode 100644 index 19e89edb4..000000000 --- a/webcompat/static/css/development/components/issue-list.css +++ /dev/null @@ -1,141 +0,0 @@ -/* 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/. */ - -:root { - --Issue-fontSize: var(--base-fontSize); - --Issue-backgroundColor: #f0f0f0; - --Issue-stateNeedsDiagnosis: var(--base-stateNeedsDiagnosis); - --Issue-stateNeedsContact: var(--base-stateNeedsContact); - --Issue-stateReady: var(--base-stateReady); - --Issue-stateSitewait: var(--base-stateSitewait); - --Issue-stateClosed: var(--base-stateClosed); - --Issue-stateFixed: var(--base-stateFixed); - --Issue-stateWorksForMe: var(--base-stateWorksForMe); - --Issue-stateNeedsTriage: var(--base-stateNeedsTriage); -} - -/* Parent class */ -.wc-IssueList { - display: flex; - align-items: center; - flex-direction: row; - width: 100%; - font-size: var(--Issue-fontSize); - background-color: #fff; - padding: .5em 1em; - margin-bottom: 1em; -} - -@media all and (max-width: 59.37em) { - .wc-IssueList { - flex-direction: column; - } -} - -/* States */ -.wc-IssueList--needstriage { - border-left: 5px solid var(--Issue-stateNeedsTriage); -} - -.wc-IssueList--needsDiagnosis { - border-left: 5px solid var(--Issue-stateNeedsDiagnosis); -} - -.wc-IssueList--needsContact { - border-left: 5px solid var(--Issue-stateNeedsContact); -} - -.wc-IssueList--ready { - border-left: 5px solid var(--Issue-stateReady); -} - -.wc-IssueList--sitewait { - border-left: 5px solid var(--Issue-stateSitewait); -} - -.wc-IssueList--closed { - border-left: 5px solid var(--Issue-stateClosed); -} - -.wc-IssueList--fixed { - border-left: 5px solid var(--Issue-stateFixed); -} - -.wc-IssueList--worksforme { - border-left: 5px solid var(--Issue-stateWorksForMe); -} - -.wc-IssueList--large { - font-size: 1.2em; - border-width: 8px; -} - -/* Header */ -.wc-IssueList-header { - padding: 1em 0 .5em; - word-wrap: break-word; -} - -.wc-IssueList-metadata { - font-size: .8em; - margin-right: .8em; -} - -@media all and (max-width: 28.12em) { - .wc-IssueList-metadata { - display: block; - } -} - -/* Count */ -.wc-IssueList-count { - font-weight: 400; -} - -/* label */ -.wc-IssueList-label { - display: block; - text-align: right; - font-size: .8em; -} - -@media all and (max-width: 59.37em) { - .wc-IssueList-label { - text-align: left; - } -} - -/* status */ -.wc-IssueList-status { - display: block; - text-align: right; - font-size: .8em; -} - -@media all and (max-width: 59.37em) { - .wc-IssueList-status { - text-align: left; - } -} - -/* Section */ -.wc-IssueList-section { - width: 50%; -} - -@media all and (max-width: 59.37em) { - .wc-IssueList-section { - width: 100%; - } - - .wc-IssueList-section + .wc-IssueList-section { - margin-top: 1em; - } -} - -/* Link */ -.wc-IssueList-linkMoreIssues { - text-align: center; - margin: 25px 0 0; -} diff --git a/webcompat/static/css/development/components/issue.css b/webcompat/static/css/development/components/issue.css deleted file mode 100644 index 16dce3820..000000000 --- a/webcompat/static/css/development/components/issue.css +++ /dev/null @@ -1,192 +0,0 @@ -/* 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/. */ - -:root { - --Issue-fontSize: var(--base-fontSize); - --Issue-detailLink: var(--Link-color); - --Issue-detailLinkHover: var(--Link-colorHover); - --Issue-widthComment: 68%; -} - -.wc-Issue { - font-size: var(--Issue-fontSize); -} - -/* header */ -.wc-Issue-information-header { - display: flex; - justify-content: space-between; - padding: .7em 1em; - border-radius: 3px 3px 0 0; -} - -.wc-Issue-information-header--needstriage { - background-color: var(--base-stateNeedsTriage); -} - -.wc-Issue-information-header--needsDiagnosis { - background-color: var(--base-stateNeedsDiagnosis); -} - -.wc-Issue-information-header--needsContact { - background-color: var(--base-stateNeedsContact); -} - -.wc-Issue-information-header--closed { - background-color: var(--base-stateClosed); -} - -.wc-Issue-information-header--ready { - background-color: var(--base-stateReady); -} - -.wc-Issue-information-header--sitewait { - background-color: var(--base-stateSitewait); -} - -.wc-Issue-information-header--fixed { - background-color: var(--base-stateFixed); -} - -.wc-Issue-information-header--worksforme { - background-color: var(--base-stateWorksForMe); -} - -/* content */ -.wc-Issue-information-content { - background-color: #fff; - padding: 1em; -} - -.wc-Issue-information-content + .wc-Issue-information-content { - margin: 2px 0 0; -} - -/* Wrapper title and date issue */ -.wc-Issue-title { - font-size: 1.2em; - line-height: 1em; - margin: 0 0 .5em; - word-wrap: break-word; -} - -@media all and (max-width: 28.12em) { - .wc-Issue-title { - font-size: 1.2em; - } -} - -/* information issue : date / author / number of comment */ -.wc-Issue-create { - font-size: 1em; - margin: 0 0 2em; -} - -/* Date of issue */ -.wc-Issue-date { - display: inline-block; -} - -@media all and (max-width: 28.12em) { - .wc-Issue-date { - font-size: .9em; - } -} - -/* Author */ -.wc-Issue-reporter { - font-weight: 700; -} - -@media all and (min-width: 48.13em) { - .wc-Issue-report, - .wc-Issue-commentList, - .wc-Issue-commentSubmit, - .wc-Issue-information:not(.wc-Issue-information--fullWidth) { - width: var(--Issue-widthComment); - } -} - -/* CommentSubmit */ -.wc-Issue-commentSubmit { - padding-top: 2em; - margin: 2em 0 0; -} - -/* list comment */ -.wc-Issue-commentList { - margin: 1em 0 0; -} - -/* Issue wrapper */ -.wc-Issue-wrapper { - margin: 0 0 0 4.2em; -} - -@media all and (max-width: 73.75em) { - .wc-Issue-wrapper { - margin: 0; - } -} - -/* container details issue */ -.wc-Issue-details { - position: relative; - line-height: 1.5em; -} - -.wc-Issue-labels, -.wc-Issue-milestones { - background-color: #fff; - margin: 2px 0; - padding: 1em; -} - -/* FullScreen CategoryEditor */ -@media all and (max-width: 23.43em) { - .wc-Issue-labels, - .wc-Issue-milestones { - position: relative; - } -} - -/* Link to log in */ -.wc-Issue-login { - margin-top: 2.5em; - text-align: left; -} - -/* wrapper list comment */ -.wc-Issue-comment { - margin: 4em 0 0; -} - -/* categoryeditor wrapper */ -.wc-Issue-categoryEditor { - position: relative; - display: flex; - align-items: center; - justify-content: space-between; - margin: 0 0 .625em; -} - -@media all and (max-width: 23.43em) { - .wc-Issue-categoryEditor { - position: static; /* position of categoryeditor not depend of this class */ - } -} - -@media all and (min-width: 48.13em) { - .wc-Issue-aside { - float: right; - width: 30%; - } -} - -@media all and (min-height: 40em) and (min-width: 48.13em) { - .wc-Issue-aside { - position: sticky; - top: 1em; - } -} diff --git a/webcompat/static/css/development/components/label-editor.css b/webcompat/static/css/development/components/label-editor.css deleted file mode 100644 index 6039e1a2b..000000000 --- a/webcompat/static/css/development/components/label-editor.css +++ /dev/null @@ -1,191 +0,0 @@ -/* 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/. */ - -:root { - --CategoryEditor-fontSize: var(--base-fontSize); -} - -/* Category editor */ -.wc-CategoryEditor { - position: absolute; - font-size: var(--CategoryEditor-fontSize); - display: none; - z-index: 5; - white-space: nowrap; - top: 100%; - left: 0; - margin-left: -11px; /* caret */ - margin-top: 18px; - box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .25); - border-radius: 6px; - background-color: #fff; -} - -@media all and (max-width: 23.43em) { - .wc-CategoryEditor { - position: fixed; - width: 100%; - height: 100%; - top: 0; - left: 0; - transform: none; - margin: 0; - overflow-y: auto; - overflow-x: hidden; - } -} - -/* Caret */ -.wc-CategoryEditor::after { - display: none; - position: absolute; - content: ""; - width: 1.125em; - height: 1.125em; - top: -.625em; - left: 1.06em; - background-color: #fff; - box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .25); - transform: rotate(45deg); - z-index: -1; -} - -@media all and (max-width: 23.43em) { - .wc-CategoryEditor::after { - display: none; - } -} - -/* Category header */ -.wc-CategoryEditor-header { - background-color: #fff; - border-radius: 6px 6px 0 0; - box-shadow: 0 1px 0 rgba(0, 0, 0, .1), 0 2px 3px rgba(0, 0, 0, .05); - padding: .625em; -} - -/* Search */ -.wc-CategoryEditor-search { - display: inline-block; - width: auto; -} - -@media all and (max-width: 23.43em) { - .wc-CategoryEditor-search { - font-size: var(--CategoryEditor-fontSize); - } -} - -/* Button */ -.wc-CategoryEditor-button { - border: none; -} - -/* event */ -.wc-CategoryEditor-button:hover { - text-decoration: underline; -} - -.wc-CategoryEditor-button:focus { - outline-width: 2px; - outline-style: solid; - outline-color: Highlight; -} - -/* list category */ -.wc-CategoryEditor-list { - background-color: #fff; - color: #333; - max-height: 18.75em; - overflow-x: hidden; - overflow-y: auto; - -webkit-overflow-scrolling: touch; -} - -@media all and (max-width: 23.43em) { - .wc-CategoryEditor-list { - max-height: inherit; - } -} - -/* item category */ -.wc-CategoryEditor-list-item { - font-size: 1em; - display: block; - cursor: pointer; - border-top: 1px solid #ddd; - margin: 0; - padding: .5em .3125em; -} - -.wc-CategoryEditor-list-item:last-child { - border-bottom: 1px solid #ddd; -} - -/* event */ -.wc-CategoryEditor-list-item:focus, -.wc-CategoryEditor-list-item.focused { - border-width: 2px; - border-style: solid; - border-color: Highlight; - outline: none; -} - -/* square color */ -.wc-CategoryEditor-list-item-squareColor { - display: inline-block; - margin: 0 .3125em 0 0; - width: 1.5em; - height: 1.5em; - line-height: 1.25em; - text-align: center; - border-radius: 3px; -} - -/* checkbox */ -.wc-CategoryEditor-list-item-checkbox { - margin: 0; - padding: 0; -} - -/* name */ -.wc-CategoryEditor-list-item-name { - display: inline-block; - font-size: .75em; - font-weight: 500; - line-height: 1.25em; -} - -/* Launch Category Editor */ -.wc-CategoryEditorLauncher { - display: none; - border: none; - width: 1.3em; - height: 1.3em; - font-size: 1.4em; - padding: 0; - opacity: .8; -} - -/* display caret and category only if button is-active */ -.wc-CategoryEditorLauncher.is-active + .wc-CategoryEditor::after, -.wc-CategoryEditorLauncher.is-active + .wc-CategoryEditor { - display: block; -} - -.wc-CategoryEditor-launcher:hover { - opacity: 1; -} - -.wc-CategoryEditor-launcher::before { - content: "\f013"; -} - -.wc-CategoryEditor-launcher.is-active::before { - content: "\f00d"; -} - -.wc-Issue-categoryEditor-button .wc-CategoryEditorLauncher { - pointer-events: auto; -} diff --git a/webcompat/static/css/development/components/label.css b/webcompat/static/css/development/components/label.css deleted file mode 100644 index 7222c1cd1..000000000 --- a/webcompat/static/css/development/components/label.css +++ /dev/null @@ -1,55 +0,0 @@ -/* 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/. */ - -:root { - --Label-fontSize: .75rem; -} - -.wc-Label { - font-size: var(--Label-fontSize); - vertical-align: middle; - color: #fff; - border-radius: 4px; - font-weight: 700; -} - -@media all and (min-width: 48.13em) { - .wc-Label { - display: block; - padding: .375rem .625rem; - } -} - -@media all and (max-width: 48.12em) { - .wc-Label { - display: inline-block; - line-height: 1; - padding: .4em; - } -} - -/* Labels */ -.wc-Label--large { - font-size: 1.2em; - color: #000; - padding-right: 0; - padding-left: 0; - margin-right: .1em; -} - -@media all and (max-width: 48.12em) { - .wc-Label--badge { - margin-left: 1em; - } - - .wc-Label--badge + .wc-Label--badge { - margin-left: .7em; - } -} - -@media all and (min-width: 48.13em) { - .wc-Label--badge + .wc-Label--badge { - margin-top: .625em; - } -} diff --git a/webcompat/static/css/development/components/labels.css b/webcompat/static/css/development/components/labels.css deleted file mode 100644 index 73d762f8c..000000000 --- a/webcompat/static/css/development/components/labels.css +++ /dev/null @@ -1,27 +0,0 @@ -/* 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/. */ - -:root { - --Labels-colorHover: var(--base-colorDark); -} - -.wc-Labels { - display: inline-block; - border-width: 0 0 3px; - border-style: solid; - font-weight: 700; - border-color: transparent; - opacity: .7; - text-decoration: none; - color: inherit; -} - -/* state */ -.wc-Labels:hover, -.wc-Labels:focus { - text-decoration: none; - opacity: 1; - border-color: #414042; - color: var(--Labels-colorHover); -} diff --git a/webcompat/static/css/development/components/link.css b/webcompat/static/css/development/components/link.css deleted file mode 100644 index 851b3202f..000000000 --- a/webcompat/static/css/development/components/link.css +++ /dev/null @@ -1,20 +0,0 @@ -/* 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/. */ - -:root { - --Link-color: #000; - --Link-colorHover: var(--base-colorDark); -} - -.wc-Link { - color: var(--Link-color); - text-decoration: underline; -} - -/* event */ -.wc-Link:hover, -.wc-Link:focus { - color: var(--Link-colorHover); - text-decoration: none; -} diff --git a/webcompat/static/css/development/components/loader.css b/webcompat/static/css/development/components/loader.css deleted file mode 100644 index 72ec07164..000000000 --- a/webcompat/static/css/development/components/loader.css +++ /dev/null @@ -1,41 +0,0 @@ -/* 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/. */ - -.wc-Loader { - display: none; - position: fixed; - background-image: url("../../../img/loader.gif"); - z-index: 10; - background-color: rgba(255, 255, 255, 0); - top: 0; - left: 0; - right: 0; - bottom: 0; - background-position: center center; - background-repeat: no-repeat; -} - -/* states */ -.wc-Loader.is-active { - display: block; - background-color: rgba(255, 255, 255, .8); -} - -.wc-Upload-Loader { - display: none; - position: absolute; - right: 4%; - top: 27%; - width: 24px; - height: 24px; -} - -.wc-Upload-Loader.is-active { - display: block; -} - -.wc-Issue-Loader { - right: 1%; - top: 12%; -} diff --git a/webcompat/static/css/development/components/markdown.css b/webcompat/static/css/development/components/markdown.css deleted file mode 100644 index 556dccbcc..000000000 --- a/webcompat/static/css/development/components/markdown.css +++ /dev/null @@ -1,170 +0,0 @@ -/* 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/. */ - -:root { - --Markdown-fontSize: 1rem; - --Markdown-color: #000; - --Markdown-colorHover: var(--base-colorDark); - --Markdown-bgColorNSFW: var(--base-colorDark); - --Markdown-colorNSFW: var(--base-background); -} - -.wc-Markdown { - font-size: var(--Markdown-fontSize); - line-height: 1.7em; -} - -/* state */ -.wc-Markdown .is-hidden { - display: none; -} - -/* all element */ -.wc-Markdown * { /* stylelint-disable selector-no-universal */ - font-size: var(--Markdown-fontSize) !important; /* stylelint-disable declaration-no-important */ - overflow: hidden; -} - -/* link */ -.wc-Markdown a { /* stylelint-disable selector-no-type */ - color: var(--Markdown-color); - text-decoration: underline; - word-wrap: break-word; -} - -/* event */ -.wc-Markdown a:hover, -.wc-Markdown a:focus { - color: var(--Markdown-colorHover); -} - -.wc-Markdown strong { - font-weight: 700 !important; -} - -/* Markdown img */ -.wc-Markdown img { - display: block; - max-width: 100%; - max-height: 100%; -} - -.wc-Markdown .wc-Comment-content-nsfw { - position: relative; -} - -.wc-Markdown .wc-Comment-content-nsfw::after { - display: block; - content: "Click to show image"; - cursor: pointer; - text-align: center; - color: var(--Markdown-colorNSFW); - background: var(--Markdown-bgColorNSFW); - width: 50%; - padding: 1em; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} - -.wc-Markdown .wc-Comment-content-nsfw img { - filter: blur(50px); -} - -.wc-Markdown .wc-Comment-content-nsfw--display img { - filter: blur(0); -} - -.wc-Markdown .wc-Comment-content-nsfw--display::after { - display: none; -} - -/* list style */ -.wc-Markdown ul, -.wc-Markdown ol { - list-style: inside; -} - -.wc-Markdown li { - margin-bottom: 1em; -} - -/* ol */ -.wc-Markdown ol { - list-style-type: decimal; -} - -/* pre / code */ -.wc-Markdown code { /* stylelint-disable no-duplicate-selectors */ - font-family: monospace; - font-size: 90%; - white-space: normal; -} - -.wc-Markdown p > code { - color: inherit; - background-color: #f5f5f5; - padding: .25em; - white-space: normal; -} - -.wc-Markdown pre, -.wc-Markdown code { - padding: 0 1em; - margin: 1.5em 0; - overflow: auto; - background: #f5f2f0; -} - -.wc-Markdown pre > code { - white-space: pre !important; -} - -/* title */ -.wc-Markdown h1 { - font-size: 2em; - font-weight: 600; - margin: 1em 0; -} - -.wc-Markdown h2 { - font-size: 1.5em; - font-weight: 600; - margin: 1em 0; -} - -.wc-Markdown h3 { - font-size: 1.2em; - font-weight: 600; - margin: 1em 0; -} - -/* paragraph */ -.wc-Markdown p { - overflow: hidden; - margin: 0; -} - -.wc-Markdown p + p { - margin-top: 1em; -} - -.wc-Markdown p:not(.is-hidden) + p { - font-size: 1em; - margin-top: 2em; -} - -/* blockquote */ -.wc-Markdown blockquote { - border-left: 4px solid var(--base-colorDark); - padding: 0 1em; - margin: 1em 0; - color: #6a6a6a; -} - -/* GitHub username */ -.wc-Markdown .github__username { - font-weight: 700; -} diff --git a/webcompat/static/css/development/components/navbar.css b/webcompat/static/css/development/components/navbar.css deleted file mode 100644 index fb42bd015..000000000 --- a/webcompat/static/css/development/components/navbar.css +++ /dev/null @@ -1,121 +0,0 @@ -/* 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/. */ - -:root { - --Navbar-fontSize: var(--base-fontSize); - --Navbar-backgroundColor: var(--base-colorDark); -} - -.wc-Navbar { - font-size: var(--Navbar-fontSize); - background-color: var(--Navbar-backgroundColor); - padding: 1.25em .5em; -} - -.wc-Navbar-container { - display: flex; - justify-content: space-between; - align-items: center; -} - -.wc-Navbar-link, -.wc-Navbar-linkDropdown { - display: inline-block; - color: #414042; - font-weight: 700; - text-decoration: none; - cursor: pointer; -} - -.wc-Navbar-linkDropdown { - display: block; -} - -.wc-Navbar-link:hover, -.wc-Navbar-link:focus { - color: #fff; -} - -.wc-Navbar-linkDropdown:hover { - text-decoration: underline; -} - -/* space between */ -.wc-Navbar-link + .wc-Navbar-link { - margin-left: 1em; -} - -@media all and (max-width: 30em) { - .wc-Navbar-link + .wc-Navbar-link { - margin-left: .5em; - } -} - -/* label */ -.wc-Navbar-link-label { - display: inline-block; - vertical-align: middle; - margin-left: .3em; -} - -@media all and (max-width: 47.25em) { - .wc-Navbar-link-label { - position: absolute; - top: -9999px; - left: -9999px; - } -} - -/* icon */ -.wc-Navbar-link-icon { - font-size: 1.2em; - display: inline-block; - background-repeat: no-repeat; - background-position: center center; - position: relative; -} - -/* "Contribute" link icon */ -.wc-Icon--contribute { - background-image: url("../../../img/contribute.svg"); - height: 1.7em; - width: 1.4em; - top: .1em; -} - -.wc-Navbar-link:hover .wc-Icon--contribute, -.wc-Navbar-link:focus .wc-Icon--contribute { - background-image: url("../../../img/contribute-white.svg"); -} - -/* avatar */ -.wc-Navbar-avatar { - height: 20px; - display: inline-block; - border-radius: 3px; - vertical-align: middle; - margin-left: .3em; -} - -/* link download addon browser */ -.wc-Navbar-linkDownload-label { - vertical-align: middle; -} - -/* .is-hidden class added when add-on is already installed */ -.wc-Navbar-link.is-hidden { - display: none; -} - -@media all and (max-width: 30em) { - .wc-Navbar-linkDownload-label-word { - display: none; - } -} - -@media all and (min-width: 30em) { - .wc-Navbar-linkDownload-icon { - display: none; - } -} diff --git a/webcompat/static/css/development/components/pagination.css b/webcompat/static/css/development/components/pagination.css deleted file mode 100644 index 7b2cbb4ed..000000000 --- a/webcompat/static/css/development/components/pagination.css +++ /dev/null @@ -1,38 +0,0 @@ -/* 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/. */ - -:root { - --Pagination-fontSize: var(--base-fontSize); - --Pagination-colorHover: var(--base-colorDark); -} - -.wc-Pagination { - font-size: var(--Pagination-fontSize); - text-align: right; -} - -.wc-Pagination-link { - display: inline-block; - cursor: pointer; - color: inherit; - vertical-align: middle; - padding: .7em 0; - font-weight: 700; - font-size: 1em; - margin-top: .2em; - text-decoration: none; -} - -/* event */ -.wc-Pagination-link:hover:not(.is-disabled) { - color: var(--Pagination-colorHover); -} - -.wc-Pagination-link.is-hidden { - display: none; -} - -.wc-Pagination-link + .wc-Pagination-link { - margin-left: 1em; -} diff --git a/webcompat/static/css/development/components/report-form.css b/webcompat/static/css/development/components/report-form.css deleted file mode 100644 index b16e03362..000000000 --- a/webcompat/static/css/development/components/report-form.css +++ /dev/null @@ -1,27 +0,0 @@ -/* 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/. */ - -.wc-HomePage .wc-ReportForm { - display: none; -} - -/* state */ -.wc-ReportForm.is-opened { - display: block; -} - -/* actions */ -.wc-ReportForm-actions { - display: flex; - text-align: center; - justify-content: center; - flex-wrap: wrap; - margin-top: 1em; -} - -@media all and (min-width: 30.75em) { - .wc-ReportForm-actions-button + .wc-ReportForm-actions-button { - margin-left: .6em; - } -} diff --git a/webcompat/static/css/development/components/reset.css b/webcompat/static/css/development/components/reset.css deleted file mode 100644 index 91b539644..000000000 --- a/webcompat/static/css/development/components/reset.css +++ /dev/null @@ -1,24 +0,0 @@ -/* 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/. */ - -img { /* stylelint-disable selector-no-type */ - max-width: 100%; -} - -button { - cursor: pointer; -} - -fieldset { - border: none; - margin: 0; - padding: 0; -} - -input, -textarea { - font-family: var(--base-fontFamily); - font-size: 1rem; - font-weight: 300; -} diff --git a/webcompat/static/css/development/components/search-bar.css b/webcompat/static/css/development/components/search-bar.css deleted file mode 100644 index b8781301c..000000000 --- a/webcompat/static/css/development/components/search-bar.css +++ /dev/null @@ -1,66 +0,0 @@ -/* 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/. */ - -:root { - --SearchBar-fontSize: 1rem; - --SearchBar-background: #fff; -} - -.wc-SearchBar { - position: relative; - min-height: 1.4375em; -} - -.wc-SearchBar-face { - position: absolute; - top: 0; - left: 0; - width: 100%; - transition: all .5s ease 0s; - backface-visibility: hidden; -} - -.wc-SearchBar-face--front { - z-index: 2; -} - -/* state */ -.wc-SearchBar.is-active .wc-SearchBar-face--front { - transform: rotateX(180deg); -} - -.wc-SearchBar-face--back { - display: flex; - align-items: center; - flex-direction: row; - backface-visibility: hidden; - transform: rotateX(-180deg); - background-color: var(--SearchBar-background); - padding: .4em; - border-radius: 4px; - z-index: 3; -} - -.wc-SearchBar-input { - font-size: var(--SearchBar-fontSize); - flex: 1; - margin: 0 1em; - background-color: var(--SearchBar-background); - padding: .3125em; - width: 100%; - border: none; -} - -.wc-SearchBar-icon { - line-height: 0; -} - -.wc-SearchBar-icon--button { - cursor: pointer; -} - -/* state */ -.wc-SearchBar.is-active .wc-SearchBar-face--back { - transform: rotateX(0); -} diff --git a/webcompat/static/css/development/components/search-form.css b/webcompat/static/css/development/components/search-form.css deleted file mode 100644 index e9170b70e..000000000 --- a/webcompat/static/css/development/components/search-form.css +++ /dev/null @@ -1,40 +0,0 @@ -/* 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/. */ - -.wc-SearchForm { - background-color: #f7f7f7; - padding-top: 1.5em; - padding-bottom: 1.5em; -} - -.wc-SearchForm-content { - display: flex; -} - -.wc-SearchForm-item { - background-color: #f7f7f7; - width: 100%; - font-size: 1.5em; - font-weight: 400; - border: none; -} - -.wc-SearchForm-item::placeholder { - color: #999898; - font-weight: 400; - font-size: .8em; -} - -/* button */ -.wc-SearchForm-button { - width: 1.5em; - font-size: 1.5em; - cursor: pointer; - opacity: .8; -} - -/* event */ -.wc-SearchForm-button:hover { - opacity: 1; -} diff --git a/webcompat/static/css/development/components/search-issue.css b/webcompat/static/css/development/components/search-issue.css deleted file mode 100644 index 05ad7f83e..000000000 --- a/webcompat/static/css/development/components/search-issue.css +++ /dev/null @@ -1,73 +0,0 @@ -/* 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/. */ - -:root { - --SearchIssue-fontSize: var(--base-fontSize); -} - -/* Main class */ -.wc-SearchIssue { - font-size: var(--SearchIssue-fontSize); - padding: 0 0 1em; -} - -.wc-SearchIssue-subtitle { - padding: 3em 0 0; -} - -/* Sorting issues */ -.wc-SearchIssue-sorting { - padding: 0 0 .5em; -} - -/* drodpown */ -.wc-SearchIssue-pagination { - padding: 0 0 .5em; -} - -/* no resultats */ -.wc-SearchIssue-noResults { - font-size: 1.5em; -} - -/* title */ -.wc-SearchIssue-noResults-title { - font-weight: 600; - margin-bottom: 1em; -} - -/* list */ -.wc-SearchIssue-noResults-list { - list-style-position: inside; - margin: 0 0 1em 1em; - font-size: .7em; -} - -/* list item */ -.wc-SearchIssue-noResults-list-item { - padding: .3em 0; -} - -/* modifier : label */ -.wc-SearchIssue-noResults-list-item--label { - list-style: none; - padding-top: .8em; -} - -/* labels item */ -.wc-SearchIssue-noResults-list-labelsItem { - display: inline-block; -} - -/* Github link */ -.wc-SearchIssue-github { - display: flex; - justify-content: flex-end; - align-items: center; - margin: 3em 0 0; -} - -.wc-SearchIssue-github .wc-Link { - padding: 0 .3em; -} diff --git a/webcompat/static/css/development/components/style-variable.css b/webcompat/static/css/development/components/style-variable.css deleted file mode 100644 index aa5924e16..000000000 --- a/webcompat/static/css/development/components/style-variable.css +++ /dev/null @@ -1,24 +0,0 @@ -/* 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/. */ - -:root { - --base-color: #333; - --base-background: #fff; - --base-fontFamily: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - --base-fontSize: 1rem; - --base-minWidth: 20rem; - --base-maxWidth: 120rem; - --base-widthContent: 73.75rem; - --base-colorDark: #ffc900; /* Dark Yellow */ - --base-variantColorDark: #404040; /* Dark Gray */ - --base-variantColorLight: #c2c2c2; /* Dark Light */ - --base-stateNeedsTriage: #f90; /* orange */ - --base-stateNeedsDiagnosis: #efce82; /* light brown */ - --base-stateNeedsContact: #b9edce; /* light green */ - --base-stateReady: #7abce1; /* light blue */ - --base-stateSitewait: #b0daf0; /* light blue */ - --base-stateClosed: #c5d1d5; /* light gray */ - --base-stateFixed: #dda0dd; /* light purple */ - --base-stateWorksForMe: #cfb53b; /* light yellow */ -} diff --git a/webcompat/static/css/development/components/tag.css b/webcompat/static/css/development/components/tag.css deleted file mode 100644 index 94e382bfe..000000000 --- a/webcompat/static/css/development/components/tag.css +++ /dev/null @@ -1,138 +0,0 @@ -/* 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/. */ - -:root { - --Tag-fontSize: var(--base-fontSize); -} - -/* wc-Taging issues */ -.wc-Tag { - font-size: var(--Tag-fontSize); - display: inline-block; - vertical-align: middle; - border: solid 1px; - padding: .4em; - margin: 0 .8em .4em 0; - color: #404040; -} - -/* modifier */ -.wc-Tag--filter { - cursor: pointer; -} - -.wc-Tag--label { - color: #fff; - padding: .36em 1.19em; -} - -@media all and (max-width: 28.12em) { - .wc-Tag--label { - font-size: .8em; - } -} - -/* Tag needs triage */ -.wc-Tag--needstriage { - border-color: var(--base-stateNeedsTriage); -} - -/* event */ -.wc-Tag--needstriage.wc-Tag--filter:hover, -.wc-Tag--needstriage.wc-Tag--filter:focus, -.wc-Tag--needstriage.is-active, -.wc-Tag--needstriage.wc-Tag--label { - background-color: var(--base-stateNeedsTriage); -} - -/* Tag needsDiagnosis */ -.wc-Tag--needsDiagnosis { - border-color: var(--base-stateNeedsDiagnosis); -} - -/* event */ -.wc-Tag--needsDiagnosis.wc-Tag--filter:hover, -.wc-Tag--needsDiagnosis.wc-Tag--filter:focus, -.wc-Tag--needsDiagnosis.is-active, -.wc-Tag--needsDiagnosis.wc-Tag--label { - background-color: var(--base-stateNeedsDiagnosis); -} - -/* Tag needsContact */ -.wc-Tag--needsContact { - border-color: var(--base-stateNeedsContact); -} - -/* event */ -.wc-Tag--needsContact.wc-Tag--filter:hover, -.wc-Tag--needsContact.wc-Tag--filter:focus, -.wc-Tag--needsContact.is-active, -.wc-Tag--needsContact.wc-Tag--label { - background-color: var(--base-stateNeedsContact); -} - -/* Tag ready */ -.wc-Tag--ready { - border-color: var(--base-stateReady); -} - -/* event */ -.wc-Tag--ready.wc-Tag--filter:hover, -.wc-Tag--ready.wc-Tag--filter:focus, -.wc-Tag--ready.is-active, -.wc-Tag--ready.wc-Tag--label { - background-color: var(--base-stateReady); -} - -/* Tag sitewait */ -.wc-Tag--sitewait { - border-color: var(--base-stateSitewait); -} - -/* event */ -.wc-Tag--sitewait.wc-Tag--filter:hover, -.wc-Tag--sitewait.wc-Tag--filter:focus, -.wc-Tag--sitewait.is-active, -.wc-Tag--sitewait.wc-Tag--label { - background-color: var(--base-stateSitewait); -} - -/* Tag close */ -.wc-Tag--close { - border-color: var(--base-stateClosed); -} - -/* event */ -.wc-Tag--close.wc-Tag--filter:hover, -.wc-Tag--close.wc-Tag--filter:focus, -.wc-Tag--close.is-active, -.wc-Tag--close.wc-Tag--label { - background-color: var(--base-stateClosed); -} - -/* Tag Fixed */ -.wc-Tag--fixed { - border-color: var(--base-stateFixed); -} - -/* event */ -.wc-Tag--fixed.wc-Tag--filter:hover, -.wc-Tag--fixed.wc-Tag--filter:focus, -.wc-Tag--fixed.is-active, -.wc-Tag--fixed.wc-Tag--label { - background-color: var(--base-stateFixed); -} - -/* Tag Appears to work */ -.wc-Tag--worksforme { - border-color: var(--base-stateWorksForMe); -} - -/* event */ -.wc-Tag--worksforme.wc-Tag--filter:hover, -.wc-Tag--worksforme.wc-Tag--filter:focus, -.wc-Tag--worksforme.is-active, -.wc-Tag--worksforme.wc-Tag--label { - background-color: var(--base-stateWorksForMe); -} diff --git a/webcompat/static/css/development/components/threesteps.css b/webcompat/static/css/development/components/threesteps.css deleted file mode 100644 index fbca52ad9..000000000 --- a/webcompat/static/css/development/components/threesteps.css +++ /dev/null @@ -1,90 +0,0 @@ -/* 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/. */ - -:root { - --Threesteps-fonSize: 1rem; - --Threesteps-backgroundColor: #fff; -} - -.wc-Threesteps { - padding: 1em 0; - display: flex; - flex-direction: row; -} - -/* item */ -.wc-Threesteps-item { - display: flex; - align-items: flex-start; - font-size: var(--Threesteps-fonSize); - margin: 0 0 .5em; -} - -/* Number */ -.wc-Threesteps-item-number { - font-size: 2em; - font-weight: 700; - padding: 0 .75em 0 .5em; -} - -.wc-bug-report-icon { - transform: scale(1.25); - transform-origin: top; -} - -.wc-bug-diagnosis-icon { - transform: scale(1.25); - transform-origin: center; -} - -@media all and (max-width: 59.37em) { - .wc-Threesteps-item-number { - padding-right: .5em; - } -} - -@media all and (max-width: 48.12em) { - .wc-Threesteps-item-number { - padding-bottom: 0; - } -} - -/* text */ -.wc-Threesteps-item-text { - margin: 0; - padding: 0; -} - -.wc-Report { - padding: 0; - margin: 0; -} - -/* icon */ -.wc-Threesteps-item-icon { - font-size: 2em; - font-weight: 700; - padding: 0 .75em 0 .5em; - flex: 0 0 3.5em; - max-height: 3.5em; - display: flex; - vertical-align: top; - align-self: center; -} - -@media all and (max-width: 59.37em) { - .wc-Threesteps-item-icon { - padding-right: .5em; - flex: 0 0 3em; - max-height: 3em; - } -} - -@media all and (max-width: 48.12em) { - .wc-Threesteps-item-icon { - padding-bottom: 0; - flex: 0 0 2.5em; - max-height: 2.5em; - } -} diff --git a/webcompat/static/css/development/components/title.css b/webcompat/static/css/development/components/title.css deleted file mode 100644 index 201e9db99..000000000 --- a/webcompat/static/css/development/components/title.css +++ /dev/null @@ -1,39 +0,0 @@ -/* 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/. */ - -.wc-Title { - margin: 0; - font-size: inherit; -} - -/* size xl */ -.wc-Title--xl { - font-size: 3.5em; - font-weight: 700; -} - -@media all and (max-width: 48.12em) { - .wc-Title--xl { - font-size: 3em; - } -} - -/* size l */ -.wc-Title--l { - font-size: 2em; - font-weight: 600; - margin-bottom: 1em; -} - -/* size m */ -.wc-Title--m { - font-size: 1.5em; -} - -/* size s */ -.wc-Title--s { - font-size: 1.25em; - margin: .75em 0 1em; - font-weight: 700; -} diff --git a/webcompat/static/css/development/components/upload-form.css b/webcompat/static/css/development/components/upload-form.css deleted file mode 100644 index 727a1653a..000000000 --- a/webcompat/static/css/development/components/upload-form.css +++ /dev/null @@ -1,107 +0,0 @@ -/* 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/. */ - -:root { - --UploadForm-backgroundColorButton: var(--base-colorDark); -} - -.wc-UploadForm { - display: flex; - position: relative; - text-align: center; - min-height: 250px; - cursor: pointer; - z-index: 3; - overflow: hidden; -} - -/* modifier homepage uploadform */ -.wc-UploadForm--homePage { - border: dashed 1px rgb(204, 204, 204); - border-radius: 20px; -} - -/* modifier new comment of existing bug */ -.wc-UploadForm--new { - display: flex; - background-color: #404040; - min-height: 35px; -} - -/* Form upload wrapper */ -.wc-UploadForm-wrapper { - z-index: 2; - padding: 1rem; - align-content: center; - align-items: center; - flex: 1 0 0; -} - -/* state */ -.wc-UploadForm-wrapper.is-hidden, -.wc-UploadForm-icon.is-hidden, -.wc-UploadForm-label.is-hidden { - display: none; -} - -/* icon */ -.wc-UploadForm-icon { - font-size: 6.2em; - margin: 0 0 16px; - color: #c8c8c8; -} - -/* label */ -.wc-UploadForm-label { - position: relative; - display: inline-block; - margin-bottom: 5px; - color: #ccc; - font-weight: 700; - cursor: pointer; - text-decoration: underline; -} - -/* modifier new label of existing bug */ -.wc-UploadForm-label--uploadForm { - font-size: .8125em; - font-weight: 400; - text-decoration: none; -} - -/* link */ -.wc-UploadForm-label--link { - color: #ffc900; - font-weight: 600; - text-decoration: underline; -} - -/* Upload button */ -.wc-UploadForm-button { - position: absolute; - width: 100%; - bottom: 0; - left: 0; - right: 0; - padding: 1em 0; - font-weight: 700; - background-color: var(--UploadForm-backgroundColorButton); - border-bottom-left-radius: 20px; - border-bottom-right-radius: 20px; - cursor: pointer; - text-align: center; - text-decoration: underline; - transform: translateY(0); - transition: transform .2s linear 0s; - - /* workaround for mult dnd - allows selection of image remove btn when an - image is displayed otherwise change for #1571 would make the default click - result in an upload file dialog */ - z-index: 10; -} - -/* state */ -.wc-UploadForm-button.is-hidden { - transform: translateY(100%); -} diff --git a/webcompat/static/css/development/components/utilities.css b/webcompat/static/css/development/components/utilities.css deleted file mode 100644 index f0a49b18b..000000000 --- a/webcompat/static/css/development/components/utilities.css +++ /dev/null @@ -1,15 +0,0 @@ -/* 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/. */ - -.wc-ResetOffset { - margin: 0; -} - -.wc-ResetOffsetBottom { - margin-bottom: 0; -} - -.wc-ResetOffsetTop { - margin-top: 0; -} diff --git a/webcompat/static/css/development/main.css b/webcompat/static/css/development/main.css deleted file mode 100644 index 306e1d140..000000000 --- a/webcompat/static/css/development/main.css +++ /dev/null @@ -1,54 +0,0 @@ -/* 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/. */ - -/* Vendor */ -@import "vendor/prism"; -@import "cssrecipes-reset/index"; -@import "cssrecipes-grid/index"; -@import "components/grid"; -@import "cssrecipes-utils/lib/all"; -@import "cssrecipes-utils/lib/max"; -@import "cssrecipes-utils/lib/min"; -@import "cssrecipes-custom-media-queries/index"; -@import "cssrecipes-defaults/lib/border-collapse"; -@import "cssrecipes-defaults/lib/box-sizing"; -@import "cssrecipes-defaults/lib/document-remove-margin-padding"; -@import "cssrecipes-defaults/lib/hidden"; - -/* Component */ -@import "components/style-variable"; -@import "components/reset"; -@import "components/UI"; -@import "components/icon-font"; -@import "components/navbar"; -@import "components/footer"; -@import "components/button"; -@import "components/comment"; -@import "components/label-editor"; -@import "components/form"; -@import "components/issue-list"; -@import "components/dropdown"; -@import "components/flash-message"; -@import "components/hero"; -@import "components/tag"; -@import "components/pagination"; -@import "components/labels"; -@import "components/title"; -@import "components/loader"; -@import "components/box"; -@import "components/report-form"; -@import "components/issue"; -@import "components/search-bar"; -@import "components/dropdown-header"; -@import "components/search-issue"; -@import "components/search-form"; -@import "components/threesteps"; -@import "components/link"; -@import "components/github-link"; -@import "components/utilities"; -@import "components/accessibility"; -@import "components/label"; -@import "components/upload-form"; -@import "components/contributors"; -@import "components/markdown"; diff --git a/webcompat/static/css/development/vendor/prism.css b/webcompat/static/css/development/vendor/prism.css deleted file mode 100644 index 2f4e2c4ca..000000000 --- a/webcompat/static/css/development/vendor/prism.css +++ /dev/null @@ -1,130 +0,0 @@ -/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript */ -/** - * prism.js default theme for JavaScript, CSS and HTML - * Based on dabblet (http://dabblet.com) - * @author Lea Verou - */ - -code[class*="language-"], -pre[class*="language-"] { - color: black; - text-shadow: 0 1px white; - font-family: Consolas, Monaco, 'Andale Mono', monospace; - direction: ltr; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - - - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; -} - -pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, -code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { - text-shadow: none; - background: #b3d4fc; -} - -pre[class*="language-"]::selection, pre[class*="language-"] ::selection, -code[class*="language-"]::selection, code[class*="language-"] ::selection { - text-shadow: none; - background: #b3d4fc; -} - -@media print { - code[class*="language-"], - pre[class*="language-"] { - text-shadow: none; - } -} - -/* Code blocks */ -pre[class*="language-"] { - padding: 1em; - margin: .5em 0; - overflow: auto; -} - -:not(pre) > code[class*="language-"], -pre[class*="language-"] { - background: #f5f2f0; -} - -/* Inline code */ -:not(pre) > code[class*="language-"] { - padding: .1em; - border-radius: .3em; -} - -.token.comment, -.token.prolog, -.token.doctype, -.token.cdata { - color: slategray; -} - -.token.punctuation { - color: #999; -} - -.namespace { - opacity: .7; -} - -.token.property, -.token.tag, -.token.boolean, -.token.number, -.token.constant, -.token.symbol { - color: #905; -} - -.token.selector, -.token.attr-name, -.token.string, -.token.builtin { - color: #690; -} - -.token.operator, -.token.entity, -.token.url, -.language-css .token.string, -.style .token.string, -.token.variable { - color: #a67f59; - background: hsla(0,0%,100%,.5); -} - -.token.atrule, -.token.attr-value, -.token.keyword { - color: #07a; -} - -.token.function { - color: #DD4A68; -} - -.token.regex, -.token.important { - color: #e90; -} - -.token.important { - font-weight: bold; -} - -.token.entity { - cursor: help; -} - diff --git a/webcompat/static/css/lib/a11y-en.css b/webcompat/static/css/lib/a11y-en.css new file mode 100644 index 000000000..d1da71c14 --- /dev/null +++ b/webcompat/static/css/lib/a11y-en.css @@ -0,0 +1,561 @@ +html{counter-reset:error warning obsolete advice} + +html::after{background-image:linear-gradient(to bottom, transparent, transparent 1.4em,#911 1.4em,#911 1.6em,transparent 1.6em,transparent 2.9em,gold 2.9em,gold 3.1em,transparent 3.1em,transparent 4.4em,#4169e1 4.4em,#4169e1 4.6em,transparent 4.6em,transparent 5.9em,#6b8e23 5.9em,#6b8e23 6.1em,transparent 6.1em, transparent 100%);content:"Errors" ": " counter(error) "\a" "Warnings" ": " counter(warning) "\a" "Obsoletes" ": " counter(obsolete) "\a" "Advices" ": " counter(advice) "\a";background-color:#000;background-position:0.5em 0;background-repeat:no-repeat;background-size:0.5em 100%;bottom:1em;color:#fff;font:700 18px/1.5 "Arial", "Nimbus Sans L", sans-serif;left:1em;padding:0.75em 1em 0.75em 1.5em;position:fixed;right:auto;top:auto;white-space:pre;z-index:2147483647} + +head{display:block} + +head *{display:none} + +[class=""],[class=" "]{counter-increment:advice;outline:4px solid #6b8e23 !important;outline-offset:-4px} + +[class=""]::before,[class=" "]::before{border-bottom:1px solid !important;border-radius:0 !important;bottom:auto !important;font:400 normal 16px/1.5 monospace !important;height:auto !important;left:0 !important;opacity:0;padding:1em 0;pointer-events:none !important;position:fixed !important;text-align:center !important;text-decoration:none !important;text-transform:none !important;top:0 !important;transform:translateY(-100%) translateZ(0) !important;transition:transform 0.3s ease-in !important;white-space:pre;width:100vw !important;content:"♥ Empty [class]" !important;background:#f6fce9 !important;border-color:#96bf40 !important;color:#4b6020 !important;z-index:2147483644 !important} + +[class=""]:hover::before,[class=""]:focus::before,[class=" "]:hover::before,[class=" "]:focus::before{opacity:1;transform:translateY(0) translateZ(0) !important} + +area[class=""],area[class=" "],base[class=""],base[class=" "],br[class=""],br[class=" "],col[class=""],col[class=" "],command[class=""],command[class=" "],embed[class=""],embed[class=" "],hr[class=""],hr[class=" "],img[class=""],img[class=" "],input[class=""],input[class=" "],keygen[class=""],keygen[class=" "],link[class=""],link[class=" "],meta[class=""],meta[class=" "],param[class=""],param[class=" "],source[class=""],source[class=" "],track[class=""],track[class=" "],wbr[class=""],wbr[class=" "],textarea[class=""],textarea[class=" "],select[class=""],select[class=" "],svg[class=""],svg[class=" "],audio[class=""],audio[class=" "],video[class=""],video[class=" "],iframe[class=""],iframe[class=" "]{counter-increment:advice;outline:4px solid #6b8e23 !important;outline-offset:-4px;background-color:rgba(107,142,35,0.25) !important} + +area[class=""] ~ ::after,area[class=" "] ~ ::after,base[class=""] ~ ::after,base[class=" "] ~ ::after,br[class=""] ~ ::after,br[class=" "] ~ ::after,col[class=""] ~ ::after,col[class=" "] ~ ::after,command[class=""] ~ ::after,command[class=" "] ~ ::after,embed[class=""] ~ ::after,embed[class=" "] ~ ::after,hr[class=""] ~ ::after,hr[class=" "] ~ ::after,img[class=""] ~ ::after,img[class=" "] ~ ::after,input[class=""] ~ ::after,input[class=" "] ~ ::after,keygen[class=""] ~ ::after,keygen[class=" "] ~ ::after,link[class=""] ~ ::after,link[class=" "] ~ ::after,meta[class=""] ~ ::after,meta[class=" "] ~ ::after,param[class=""] ~ ::after,param[class=" "] ~ ::after,source[class=""] ~ ::after,source[class=" "] ~ ::after,track[class=""] ~ ::after,track[class=" "] ~ ::after,wbr[class=""] ~ ::after,wbr[class=" "] ~ ::after,textarea[class=""] ~ ::after,textarea[class=" "] ~ ::after,select[class=""] ~ ::after,select[class=" "] ~ ::after,svg[class=""] ~ ::after,svg[class=" "] ~ ::after,audio[class=""] ~ ::after,audio[class=" "] ~ ::after,video[class=""] ~ ::after,video[class=" "] ~ ::after,iframe[class=""] ~ ::after,iframe[class=" "] ~ ::after{border-bottom:1px solid !important;border-radius:0 !important;bottom:auto !important;font:400 normal 16px/1.5 monospace !important;height:auto !important;left:0 !important;opacity:0;padding:1em 0;pointer-events:none !important;position:fixed !important;text-align:center !important;text-decoration:none !important;text-transform:none !important;top:0 !important;transform:translateY(-100%) translateZ(0) !important;transition:transform 0.3s ease-in !important;white-space:pre;width:100vw !important;content:"♥ Empty [class]" !important;background:#f6fce9 !important;border-color:#96bf40 !important;color:#4b6020 !important;z-index:2147483644 !important} + +area[class=""]:hover ~ ::after,area[class=""]:focus ~ ::after,area[class=" "]:hover ~ ::after,area[class=" "]:focus ~ ::after,base[class=""]:hover ~ ::after,base[class=""]:focus ~ ::after,base[class=" "]:hover ~ ::after,base[class=" "]:focus ~ ::after,br[class=""]:hover ~ ::after,br[class=""]:focus ~ ::after,br[class=" "]:hover ~ ::after,br[class=" "]:focus ~ ::after,col[class=""]:hover ~ ::after,col[class=""]:focus ~ ::after,col[class=" "]:hover ~ ::after,col[class=" "]:focus ~ ::after,command[class=""]:hover ~ ::after,command[class=""]:focus ~ ::after,command[class=" "]:hover ~ ::after,command[class=" "]:focus ~ ::after,embed[class=""]:hover ~ ::after,embed[class=""]:focus ~ ::after,embed[class=" "]:hover ~ ::after,embed[class=" "]:focus ~ ::after,hr[class=""]:hover ~ ::after,hr[class=""]:focus ~ ::after,hr[class=" "]:hover ~ ::after,hr[class=" "]:focus ~ ::after,img[class=""]:hover ~ ::after,img[class=""]:focus ~ ::after,img[class=" "]:hover ~ ::after,img[class=" "]:focus ~ ::after,input[class=""]:hover ~ ::after,input[class=""]:focus ~ ::after,input[class=" "]:hover ~ ::after,input[class=" "]:focus ~ ::after,keygen[class=""]:hover ~ ::after,keygen[class=""]:focus ~ ::after,keygen[class=" "]:hover ~ ::after,keygen[class=" "]:focus ~ ::after,link[class=""]:hover ~ ::after,link[class=""]:focus ~ ::after,link[class=" "]:hover ~ ::after,link[class=" "]:focus ~ ::after,meta[class=""]:hover ~ ::after,meta[class=""]:focus ~ ::after,meta[class=" "]:hover ~ ::after,meta[class=" "]:focus ~ ::after,param[class=""]:hover ~ ::after,param[class=""]:focus ~ ::after,param[class=" "]:hover ~ ::after,param[class=" "]:focus ~ ::after,source[class=""]:hover ~ ::after,source[class=""]:focus ~ ::after,source[class=" "]:hover ~ ::after,source[class=" "]:focus ~ ::after,track[class=""]:hover ~ ::after,track[class=""]:focus ~ ::after,track[class=" "]:hover ~ ::after,track[class=" "]:focus ~ ::after,wbr[class=""]:hover ~ ::after,wbr[class=""]:focus ~ ::after,wbr[class=" "]:hover ~ ::after,wbr[class=" "]:focus ~ ::after,textarea[class=""]:hover ~ ::after,textarea[class=""]:focus ~ ::after,textarea[class=" "]:hover ~ ::after,textarea[class=" "]:focus ~ ::after,select[class=""]:hover ~ ::after,select[class=""]:focus ~ ::after,select[class=" "]:hover ~ ::after,select[class=" "]:focus ~ ::after,svg[class=""]:hover ~ ::after,svg[class=""]:focus ~ ::after,svg[class=" "]:hover ~ ::after,svg[class=" "]:focus ~ ::after,audio[class=""]:hover ~ ::after,audio[class=""]:focus ~ ::after,audio[class=" "]:hover ~ ::after,audio[class=" "]:focus ~ ::after,video[class=""]:hover ~ ::after,video[class=""]:focus ~ ::after,video[class=" "]:hover ~ ::after,video[class=" "]:focus ~ ::after,iframe[class=""]:hover ~ ::after,iframe[class=""]:focus ~ ::after,iframe[class=" "]:hover ~ ::after,iframe[class=" "]:focus ~ ::after{opacity:1;transform:translateY(0) translateZ(0) !important} + +[id=""],[id=" "]{counter-increment:advice;outline:4px solid #6b8e23 !important;outline-offset:-4px} + +[id=""]::before,[id=" "]::before{border-bottom:1px solid !important;border-radius:0 !important;bottom:auto !important;font:400 normal 16px/1.5 monospace !important;height:auto !important;left:0 !important;opacity:0;padding:1em 0;pointer-events:none !important;position:fixed !important;text-align:center !important;text-decoration:none !important;text-transform:none !important;top:0 !important;transform:translateY(-100%) translateZ(0) !important;transition:transform 0.3s ease-in !important;white-space:pre;width:100vw !important;content:"♥ Empty [id]" !important;background:#f6fce9 !important;border-color:#96bf40 !important;color:#4b6020 !important;z-index:2147483644 !important} + +[id=""]:hover::before,[id=""]:focus::before,[id=" "]:hover::before,[id=" "]:focus::before{opacity:1;transform:translateY(0) translateZ(0) !important} + +area[id=""],area[id=" "],base[id=""],base[id=" "],br[id=""],br[id=" "],col[id=""],col[id=" "],command[id=""],command[id=" "],embed[id=""],embed[id=" "],hr[id=""],hr[id=" "],img[id=""],img[id=" "],input[id=""],input[id=" "],keygen[id=""],keygen[id=" "],link[id=""],link[id=" "],meta[id=""],meta[id=" "],param[id=""],param[id=" "],source[id=""],source[id=" "],track[id=""],track[id=" "],wbr[id=""],wbr[id=" "],textarea[id=""],textarea[id=" "],select[id=""],select[id=" "],svg[id=""],svg[id=" "],audio[id=""],audio[id=" "],video[id=""],video[id=" "],iframe[id=""],iframe[id=" "]{counter-increment:advice;outline:4px solid #6b8e23 !important;outline-offset:-4px;background-color:rgba(107,142,35,0.25) !important} + +area[id=""] ~ ::after,area[id=" "] ~ ::after,base[id=""] ~ ::after,base[id=" "] ~ ::after,br[id=""] ~ ::after,br[id=" "] ~ ::after,col[id=""] ~ ::after,col[id=" "] ~ ::after,command[id=""] ~ ::after,command[id=" "] ~ ::after,embed[id=""] ~ ::after,embed[id=" "] ~ ::after,hr[id=""] ~ ::after,hr[id=" "] ~ ::after,img[id=""] ~ ::after,img[id=" "] ~ ::after,input[id=""] ~ ::after,input[id=" "] ~ ::after,keygen[id=""] ~ ::after,keygen[id=" "] ~ ::after,link[id=""] ~ ::after,link[id=" "] ~ ::after,meta[id=""] ~ ::after,meta[id=" "] ~ ::after,param[id=""] ~ ::after,param[id=" "] ~ ::after,source[id=""] ~ ::after,source[id=" "] ~ ::after,track[id=""] ~ ::after,track[id=" "] ~ ::after,wbr[id=""] ~ ::after,wbr[id=" "] ~ ::after,textarea[id=""] ~ ::after,textarea[id=" "] ~ ::after,select[id=""] ~ ::after,select[id=" "] ~ ::after,svg[id=""] ~ ::after,svg[id=" "] ~ ::after,audio[id=""] ~ ::after,audio[id=" "] ~ ::after,video[id=""] ~ ::after,video[id=" "] ~ ::after,iframe[id=""] ~ ::after,iframe[id=" "] ~ ::after{border-bottom:1px solid !important;border-radius:0 !important;bottom:auto !important;font:400 normal 16px/1.5 monospace !important;height:auto !important;left:0 !important;opacity:0;padding:1em 0;pointer-events:none !important;position:fixed !important;text-align:center !important;text-decoration:none !important;text-transform:none !important;top:0 !important;transform:translateY(-100%) translateZ(0) !important;transition:transform 0.3s ease-in !important;white-space:pre;width:100vw !important;content:"♥ Empty [id]" !important;background:#f6fce9 !important;border-color:#96bf40 !important;color:#4b6020 !important;z-index:2147483644 !important} + +area[id=""]:hover ~ ::after,area[id=""]:focus ~ ::after,area[id=" "]:hover ~ ::after,area[id=" "]:focus ~ ::after,base[id=""]:hover ~ ::after,base[id=""]:focus ~ ::after,base[id=" "]:hover ~ ::after,base[id=" "]:focus ~ ::after,br[id=""]:hover ~ ::after,br[id=""]:focus ~ ::after,br[id=" "]:hover ~ ::after,br[id=" "]:focus ~ ::after,col[id=""]:hover ~ ::after,col[id=""]:focus ~ ::after,col[id=" "]:hover ~ ::after,col[id=" "]:focus ~ ::after,command[id=""]:hover ~ ::after,command[id=""]:focus ~ ::after,command[id=" "]:hover ~ ::after,command[id=" "]:focus ~ ::after,embed[id=""]:hover ~ ::after,embed[id=""]:focus ~ ::after,embed[id=" "]:hover ~ ::after,embed[id=" "]:focus ~ ::after,hr[id=""]:hover ~ ::after,hr[id=""]:focus ~ ::after,hr[id=" "]:hover ~ ::after,hr[id=" "]:focus ~ ::after,img[id=""]:hover ~ ::after,img[id=""]:focus ~ ::after,img[id=" "]:hover ~ ::after,img[id=" "]:focus ~ ::after,input[id=""]:hover ~ ::after,input[id=""]:focus ~ ::after,input[id=" "]:hover ~ ::after,input[id=" "]:focus ~ ::after,keygen[id=""]:hover ~ ::after,keygen[id=""]:focus ~ ::after,keygen[id=" "]:hover ~ ::after,keygen[id=" "]:focus ~ ::after,link[id=""]:hover ~ ::after,link[id=""]:focus ~ ::after,link[id=" "]:hover ~ ::after,link[id=" "]:focus ~ ::after,meta[id=""]:hover ~ ::after,meta[id=""]:focus ~ ::after,meta[id=" "]:hover ~ ::after,meta[id=" "]:focus ~ ::after,param[id=""]:hover ~ ::after,param[id=""]:focus ~ ::after,param[id=" "]:hover ~ ::after,param[id=" "]:focus ~ ::after,source[id=""]:hover ~ ::after,source[id=""]:focus ~ ::after,source[id=" "]:hover ~ ::after,source[id=" "]:focus ~ ::after,track[id=""]:hover ~ ::after,track[id=""]:focus ~ ::after,track[id=" "]:hover ~ ::after,track[id=" "]:focus ~ ::after,wbr[id=""]:hover ~ ::after,wbr[id=""]:focus ~ ::after,wbr[id=" "]:hover ~ ::after,wbr[id=" "]:focus ~ ::after,textarea[id=""]:hover ~ ::after,textarea[id=""]:focus ~ ::after,textarea[id=" "]:hover ~ ::after,textarea[id=" "]:focus ~ ::after,select[id=""]:hover ~ ::after,select[id=""]:focus ~ ::after,select[id=" "]:hover ~ ::after,select[id=" "]:focus ~ ::after,svg[id=""]:hover ~ ::after,svg[id=""]:focus ~ ::after,svg[id=" "]:hover ~ ::after,svg[id=" "]:focus ~ ::after,audio[id=""]:hover ~ ::after,audio[id=""]:focus ~ ::after,audio[id=" "]:hover ~ ::after,audio[id=" "]:focus ~ ::after,video[id=""]:hover ~ ::after,video[id=""]:focus ~ ::after,video[id=" "]:hover ~ ::after,video[id=" "]:focus ~ ::after,iframe[id=""]:hover ~ ::after,iframe[id=""]:focus ~ ::after,iframe[id=" "]:hover ~ ::after,iframe[id=" "]:focus ~ ::after{opacity:1;transform:translateY(0) translateZ(0) !important} + +main:not(:first-of-type){counter-increment:advice;outline:4px solid #6b8e23 !important;outline-offset:-4px} + +main:not(:first-of-type)::before{border-bottom:1px solid !important;border-radius:0 !important;bottom:auto !important;font:400 normal 16px/1.5 monospace !important;height:auto !important;left:0 !important;opacity:0;padding:1em 0;pointer-events:none !important;position:fixed !important;text-align:center !important;text-decoration:none !important;text-transform:none !important;top:0 !important;transform:translateY(-100%) translateZ(0) !important;transition:transform 0.3s ease-in !important;white-space:pre;width:100vw !important;content:"♥ Second
" !important;background:#f6fce9 !important;border-color:#96bf40 !important;color:#4b6020 !important;z-index:2147483644 !important} + +main:not(:first-of-type):hover::before,main:not(:first-of-type):focus::before{opacity:1;transform:translateY(0) translateZ(0) !important} + +figcaption:not(:only-of-type){counter-increment:advice;outline:4px solid #6b8e23 !important;outline-offset:-4px} + +figcaption:not(:only-of-type)::before{border-bottom:1px solid !important;border-radius:0 !important;bottom:auto !important;font:400 normal 16px/1.5 monospace !important;height:auto !important;left:0 !important;opacity:0;padding:1em 0;pointer-events:none !important;position:fixed !important;text-align:center !important;text-decoration:none !important;text-transform:none !important;top:0 !important;transform:translateY(-100%) translateZ(0) !important;transition:transform 0.3s ease-in !important;white-space:pre;width:100vw !important;content:"♥ Second
" !important;background:#f6fce9 !important;border-color:#96bf40 !important;color:#4b6020 !important;z-index:2147483644 !important} + +figcaption:not(:only-of-type):hover::before,figcaption:not(:only-of-type):focus::before{opacity:1;transform:translateY(0) translateZ(0) !important} + +figcaption:not(:first-child):not(:last-child){counter-increment:advice;outline:4px solid #6b8e23 !important;outline-offset:-4px} + +figcaption:not(:first-child):not(:last-child)::before{border-bottom:1px solid !important;border-radius:0 !important;bottom:auto !important;font:400 normal 16px/1.5 monospace !important;height:auto !important;left:0 !important;opacity:0;padding:1em 0;pointer-events:none !important;position:fixed !important;text-align:center !important;text-decoration:none !important;text-transform:none !important;top:0 !important;transform:translateY(-100%) translateZ(0) !important;transition:transform 0.3s ease-in !important;white-space:pre;width:100vw !important;content:"♥ Wrong order for
" !important;background:#f6fce9 !important;border-color:#96bf40 !important;color:#4b6020 !important;z-index:2147483644 !important} + +figcaption:not(:first-child):not(:last-child):hover::before,figcaption:not(:first-child):not(:last-child):focus::before{opacity:1;transform:translateY(0) translateZ(0) !important} + +[href^="mailto"]{counter-increment:advice;outline:4px solid #6b8e23 !important;outline-offset:-4px} + +[href^="mailto"]::before{border-bottom:1px solid !important;border-radius:0 !important;bottom:auto !important;font:400 normal 16px/1.5 monospace !important;height:auto !important;left:0 !important;opacity:0;padding:1em 0;pointer-events:none !important;position:fixed !important;text-align:center !important;text-decoration:none !important;text-transform:none !important;top:0 !important;transform:translateY(-100%) translateZ(0) !important;transition:transform 0.3s ease-in !important;white-space:pre;width:100vw !important;content:"♥ Is this email valid?" !important;background:#f6fce9 !important;border-color:#96bf40 !important;color:#4b6020 !important;z-index:2147483644 !important} + +[href^="mailto"]:hover::before,[href^="mailto"]:focus::before{opacity:1;transform:translateY(0) translateZ(0) !important} + +[href^="tel"]{counter-increment:advice;outline:4px solid #6b8e23 !important;outline-offset:-4px} + +[href^="tel"]::before{border-bottom:1px solid !important;border-radius:0 !important;bottom:auto !important;font:400 normal 16px/1.5 monospace !important;height:auto !important;left:0 !important;opacity:0;padding:1em 0;pointer-events:none !important;position:fixed !important;text-align:center !important;text-decoration:none !important;text-transform:none !important;top:0 !important;transform:translateY(-100%) translateZ(0) !important;transition:transform 0.3s ease-in !important;white-space:pre;width:100vw !important;content:"♥ Is this phone number valid?" !important;background:#f6fce9 !important;border-color:#96bf40 !important;color:#4b6020 !important;z-index:2147483644 !important} + +[href^="tel"]:hover::before,[href^="tel"]:focus::before{opacity:1;transform:translateY(0) translateZ(0) !important} + +a[role="button"]{counter-increment:advice;outline:4px solid #6b8e23 !important;outline-offset:-4px} + +a[role="button"]::before{border-bottom:1px solid !important;border-radius:0 !important;bottom:auto !important;font:400 normal 16px/1.5 monospace !important;height:auto !important;left:0 !important;opacity:0;padding:1em 0;pointer-events:none !important;position:fixed !important;text-align:center !important;text-decoration:none !important;text-transform:none !important;top:0 !important;transform:translateY(-100%) translateZ(0) !important;transition:transform 0.3s ease-in !important;white-space:pre;width:100vw !important;content:"♥ Button [role] on a link" !important;background:#f6fce9 !important;border-color:#96bf40 !important;color:#4b6020 !important;z-index:2147483644 !important} + +a[role="button"]:hover::before,a[role="button"]:focus::before{opacity:1;transform:translateY(0) translateZ(0) !important} + +[target$="blank"]{counter-increment:advice;outline:4px solid #6b8e23 !important;outline-offset:-4px} + +[target$="blank"]::before{border-bottom:1px solid !important;border-radius:0 !important;bottom:auto !important;font:400 normal 16px/1.5 monospace !important;height:auto !important;left:0 !important;opacity:0;padding:1em 0;pointer-events:none !important;position:fixed !important;text-align:center !important;text-decoration:none !important;text-transform:none !important;top:0 !important;transform:translateY(-100%) translateZ(0) !important;transition:transform 0.3s ease-in !important;white-space:pre;width:100vw !important;content:"♥ Link opening a new tab" !important;background:#f6fce9 !important;border-color:#96bf40 !important;color:#4b6020 !important;z-index:2147483644 !important} + +[target$="blank"]:hover::before,[target$="blank"]:focus::before{opacity:1;transform:translateY(0) translateZ(0) !important} + +[download],[href$=".pdf"]:not(link),[href$=".doc"]:not(link),[href$=".png"]:not(link),[href$=".jpg"]:not(link),[href$=".gif"]:not(link),[href$=".mp3"]:not(link),[href$=".mp4"]:not(link),[href$=".mov"]:not(link),[href$=".ogg"]:not(link),[href$=".xls"]:not(link),[href$=".txt"]:not(link),[href$=".zip"]:not(link),[href$=".rar"]:not(link),[href$=".docx"]:not(link){counter-increment:advice;outline:4px solid #6b8e23 !important;outline-offset:-4px} + +[download]::before,[href$=".pdf"]:not(link)::before,[href$=".doc"]:not(link)::before,[href$=".png"]:not(link)::before,[href$=".jpg"]:not(link)::before,[href$=".gif"]:not(link)::before,[href$=".mp3"]:not(link)::before,[href$=".mp4"]:not(link)::before,[href$=".mov"]:not(link)::before,[href$=".ogg"]:not(link)::before,[href$=".xls"]:not(link)::before,[href$=".txt"]:not(link)::before,[href$=".zip"]:not(link)::before,[href$=".rar"]:not(link)::before,[href$=".docx"]:not(link)::before{border-bottom:1px solid !important;border-radius:0 !important;bottom:auto !important;font:400 normal 16px/1.5 monospace !important;height:auto !important;left:0 !important;opacity:0;padding:1em 0;pointer-events:none !important;position:fixed !important;text-align:center !important;text-decoration:none !important;text-transform:none !important;top:0 !important;transform:translateY(-100%) translateZ(0) !important;transition:transform 0.3s ease-in !important;white-space:pre;width:100vw !important;content:"♥ Downloadable file: are format and size displayed?" !important;background:#f6fce9 !important;border-color:#96bf40 !important;color:#4b6020 !important;z-index:2147483644 !important} + +[download]:hover::before,[download]:focus::before,[href$=".pdf"]:not(link):hover::before,[href$=".pdf"]:not(link):focus::before,[href$=".doc"]:not(link):hover::before,[href$=".doc"]:not(link):focus::before,[href$=".png"]:not(link):hover::before,[href$=".png"]:not(link):focus::before,[href$=".jpg"]:not(link):hover::before,[href$=".jpg"]:not(link):focus::before,[href$=".gif"]:not(link):hover::before,[href$=".gif"]:not(link):focus::before,[href$=".mp3"]:not(link):hover::before,[href$=".mp3"]:not(link):focus::before,[href$=".mp4"]:not(link):hover::before,[href$=".mp4"]:not(link):focus::before,[href$=".mov"]:not(link):hover::before,[href$=".mov"]:not(link):focus::before,[href$=".ogg"]:not(link):hover::before,[href$=".ogg"]:not(link):focus::before,[href$=".xls"]:not(link):hover::before,[href$=".xls"]:not(link):focus::before,[href$=".txt"]:not(link):hover::before,[href$=".txt"]:not(link):focus::before,[href$=".zip"]:not(link):hover::before,[href$=".zip"]:not(link):focus::before,[href$=".rar"]:not(link):hover::before,[href$=".rar"]:not(link):focus::before,[href$=".docx"]:not(link):hover::before,[href$=".docx"]:not(link):focus::before{opacity:1;transform:translateY(0) translateZ(0) !important} + +[role="main"] ~ [role="main"],[role="search"] ~ [role="search"],[role="banner"] ~ [role="banner"],[role="contentinfo"] ~ [role="contentinfo"]{counter-increment:advice;outline:4px solid #6b8e23 !important;outline-offset:-4px} + +[role="main"] ~ [role="main"]::before,[role="search"] ~ [role="search"]::before,[role="banner"] ~ [role="banner"]::before,[role="contentinfo"] ~ [role="contentinfo"]::before{border-bottom:1px solid !important;border-radius:0 !important;bottom:auto !important;font:400 normal 16px/1.5 monospace !important;height:auto !important;left:0 !important;opacity:0;padding:1em 0;pointer-events:none !important;position:fixed !important;text-align:center !important;text-decoration:none !important;text-transform:none !important;top:0 !important;transform:translateY(-100%) translateZ(0) !important;transition:transform 0.3s ease-in !important;white-space:pre;width:100vw !important;content:"♥ Second " attr(role) " role" !important;background:#f6fce9 !important;border-color:#96bf40 !important;color:#4b6020 !important;z-index:2147483644 !important} + +[role="main"] ~ [role="main"]:hover::before,[role="main"] ~ [role="main"]:focus::before,[role="search"] ~ [role="search"]:hover::before,[role="search"] ~ [role="search"]:focus::before,[role="banner"] ~ [role="banner"]:hover::before,[role="banner"] ~ [role="banner"]:focus::before,[role="contentinfo"] ~ [role="contentinfo"]:hover::before,[role="contentinfo"] ~ [role="contentinfo"]:focus::before{opacity:1;transform:translateY(0) translateZ(0) !important} + +[id*="search"]:not([role="search"]),[class*="search"]:not([role="search"]){counter-increment:advice;outline:4px solid #6b8e23 !important;outline-offset:-4px} + +[id*="search"]:not([role="search"])::before,[class*="search"]:not([role="search"])::before{border-bottom:1px solid !important;border-radius:0 !important;bottom:auto !important;font:400 normal 16px/1.5 monospace !important;height:auto !important;left:0 !important;opacity:0;padding:1em 0;pointer-events:none !important;position:fixed !important;text-align:center !important;text-decoration:none !important;text-transform:none !important;top:0 !important;transform:translateY(-100%) translateZ(0) !important;transition:transform 0.3s ease-in !important;white-space:pre;width:100vw !important;content:"♥ Is search role defined?" !important;background:#f6fce9 !important;border-color:#96bf40 !important;color:#4b6020 !important;z-index:2147483644 !important} + +[id*="search"]:not([role="search"]):hover::before,[id*="search"]:not([role="search"]):focus::before,[class*="search"]:not([role="search"]):hover::before,[class*="search"]:not([role="search"]):focus::before{opacity:1;transform:translateY(0) translateZ(0) !important} + +input[id*="search"]:not([role="search"]),input[class*="search"]:not([role="search"]){counter-increment:advice;outline:4px solid #6b8e23 !important;outline-offset:-4px;background-color:rgba(107,142,35,0.25) !important} + +input[id*="search"]:not([role="search"]) ~ ::after,input[class*="search"]:not([role="search"]) ~ ::after{border-bottom:1px solid !important;border-radius:0 !important;bottom:auto !important;font:400 normal 16px/1.5 monospace !important;height:auto !important;left:0 !important;opacity:0;padding:1em 0;pointer-events:none !important;position:fixed !important;text-align:center !important;text-decoration:none !important;text-transform:none !important;top:0 !important;transform:translateY(-100%) translateZ(0) !important;transition:transform 0.3s ease-in !important;white-space:pre;width:100vw !important;content:"♥ Is search role defined?" !important;background:#f6fce9 !important;border-color:#96bf40 !important;color:#4b6020 !important;z-index:2147483644 !important} + +input[id*="search"]:not([role="search"]):hover ~ ::after,input[id*="search"]:not([role="search"]):focus ~ ::after,input[class*="search"]:not([role="search"]):hover ~ ::after,input[class*="search"]:not([role="search"]):focus ~ ::after{opacity:1;transform:translateY(0) translateZ(0) !important} + +[required],[aria-required]{counter-increment:advice;outline:4px solid #6b8e23 !important;outline-offset:-4px;background-color:rgba(107,142,35,0.25) !important} + +[required] ~ ::after,[aria-required] ~ ::after{border-bottom:1px solid !important;border-radius:0 !important;bottom:auto !important;font:400 normal 16px/1.5 monospace !important;height:auto !important;left:0 !important;opacity:0;padding:1em 0;pointer-events:none !important;position:fixed !important;text-align:center !important;text-decoration:none !important;text-transform:none !important;top:0 !important;transform:translateY(-100%) translateZ(0) !important;transition:transform 0.3s ease-in !important;white-space:pre;width:100vw !important;content:"♥ Required field: is it explicit?" !important;background:#f6fce9 !important;border-color:#96bf40 !important;color:#4b6020 !important;z-index:2147483644 !important} + +[required]:hover ~ ::after,[required]:focus ~ ::after,[aria-required]:hover ~ ::after,[aria-required]:focus ~ ::after{opacity:1;transform:translateY(0) translateZ(0) !important} + +input[required],input[aria-required],select[required],select[aria-required],textarea[required],textarea[aria-required]{counter-increment:advice;outline:4px solid #6b8e23 !important;outline-offset:-4px;background-color:rgba(107,142,35,0.25) !important} + +input[required] ~ ::after,input[aria-required] ~ ::after,select[required] ~ ::after,select[aria-required] ~ ::after,textarea[required] ~ ::after,textarea[aria-required] ~ ::after{border-bottom:1px solid !important;border-radius:0 !important;bottom:auto !important;font:400 normal 16px/1.5 monospace !important;height:auto !important;left:0 !important;opacity:0;padding:1em 0;pointer-events:none !important;position:fixed !important;text-align:center !important;text-decoration:none !important;text-transform:none !important;top:0 !important;transform:translateY(-100%) translateZ(0) !important;transition:transform 0.3s ease-in !important;white-space:pre;width:100vw !important;content:"♥ Required field: is it explicit?" !important;background:#f6fce9 !important;border-color:#96bf40 !important;color:#4b6020 !important;z-index:2147483644 !important} + +input[required]:hover ~ ::after,input[required]:focus ~ ::after,input[aria-required]:hover ~ ::after,input[aria-required]:focus ~ ::after,select[required]:hover ~ ::after,select[required]:focus ~ ::after,select[aria-required]:hover ~ ::after,select[aria-required]:focus ~ ::after,textarea[required]:hover ~ ::after,textarea[required]:focus ~ ::after,textarea[aria-required]:hover ~ ::after,textarea[aria-required]:focus ~ ::after{opacity:1;transform:translateY(0) translateZ(0) !important} + +[hidden]:not(:empty),[aria-hidden="true"]:not(:empty){counter-increment:advice;outline:4px solid #6b8e23 !important;outline-offset:-4px} + +[hidden]:not(:empty)::before,[aria-hidden="true"]:not(:empty)::before{border-bottom:1px solid !important;border-radius:0 !important;bottom:auto !important;font:400 normal 16px/1.5 monospace !important;height:auto !important;left:0 !important;opacity:0;padding:1em 0;pointer-events:none !important;position:fixed !important;text-align:center !important;text-decoration:none !important;text-transform:none !important;top:0 !important;transform:translateY(-100%) translateZ(0) !important;transition:transform 0.3s ease-in !important;white-space:pre;width:100vw !important;content:"♥ Hidden element" !important;background:#f6fce9 !important;border-color:#96bf40 !important;color:#4b6020 !important;z-index:2147483644 !important} + +[hidden]:not(:empty):hover::before,[hidden]:not(:empty):focus::before,[aria-hidden="true"]:not(:empty):hover::before,[aria-hidden="true"]:not(:empty):focus::before{opacity:1;transform:translateY(0) translateZ(0) !important} + +area[hidden]:not(:empty),area[aria-hidden="true"]:not(:empty),base[hidden]:not(:empty),base[aria-hidden="true"]:not(:empty),br[hidden]:not(:empty),br[aria-hidden="true"]:not(:empty),col[hidden]:not(:empty),col[aria-hidden="true"]:not(:empty),command[hidden]:not(:empty),command[aria-hidden="true"]:not(:empty),embed[hidden]:not(:empty),embed[aria-hidden="true"]:not(:empty),hr[hidden]:not(:empty),hr[aria-hidden="true"]:not(:empty),img[hidden]:not(:empty),img[aria-hidden="true"]:not(:empty),input[hidden]:not(:empty),input[aria-hidden="true"]:not(:empty),keygen[hidden]:not(:empty),keygen[aria-hidden="true"]:not(:empty),link[hidden]:not(:empty),link[aria-hidden="true"]:not(:empty),meta[hidden]:not(:empty),meta[aria-hidden="true"]:not(:empty),param[hidden]:not(:empty),param[aria-hidden="true"]:not(:empty),source[hidden]:not(:empty),source[aria-hidden="true"]:not(:empty),track[hidden]:not(:empty),track[aria-hidden="true"]:not(:empty),wbr[hidden]:not(:empty),wbr[aria-hidden="true"]:not(:empty),textarea[hidden]:not(:empty),textarea[aria-hidden="true"]:not(:empty),select[hidden]:not(:empty),select[aria-hidden="true"]:not(:empty),svg[hidden]:not(:empty),svg[aria-hidden="true"]:not(:empty),audio[hidden]:not(:empty),audio[aria-hidden="true"]:not(:empty),video[hidden]:not(:empty),video[aria-hidden="true"]:not(:empty),iframe[hidden]:not(:empty),iframe[aria-hidden="true"]:not(:empty){counter-increment:advice;outline:4px solid #6b8e23 !important;outline-offset:-4px;background-color:rgba(107,142,35,0.25) !important} + +area[hidden]:not(:empty) ~ ::after,area[aria-hidden="true"]:not(:empty) ~ ::after,base[hidden]:not(:empty) ~ ::after,base[aria-hidden="true"]:not(:empty) ~ ::after,br[hidden]:not(:empty) ~ ::after,br[aria-hidden="true"]:not(:empty) ~ ::after,col[hidden]:not(:empty) ~ ::after,col[aria-hidden="true"]:not(:empty) ~ ::after,command[hidden]:not(:empty) ~ ::after,command[aria-hidden="true"]:not(:empty) ~ ::after,embed[hidden]:not(:empty) ~ ::after,embed[aria-hidden="true"]:not(:empty) ~ ::after,hr[hidden]:not(:empty) ~ ::after,hr[aria-hidden="true"]:not(:empty) ~ ::after,img[hidden]:not(:empty) ~ ::after,img[aria-hidden="true"]:not(:empty) ~ ::after,input[hidden]:not(:empty) ~ ::after,input[aria-hidden="true"]:not(:empty) ~ ::after,keygen[hidden]:not(:empty) ~ ::after,keygen[aria-hidden="true"]:not(:empty) ~ ::after,link[hidden]:not(:empty) ~ ::after,link[aria-hidden="true"]:not(:empty) ~ ::after,meta[hidden]:not(:empty) ~ ::after,meta[aria-hidden="true"]:not(:empty) ~ ::after,param[hidden]:not(:empty) ~ ::after,param[aria-hidden="true"]:not(:empty) ~ ::after,source[hidden]:not(:empty) ~ ::after,source[aria-hidden="true"]:not(:empty) ~ ::after,track[hidden]:not(:empty) ~ ::after,track[aria-hidden="true"]:not(:empty) ~ ::after,wbr[hidden]:not(:empty) ~ ::after,wbr[aria-hidden="true"]:not(:empty) ~ ::after,textarea[hidden]:not(:empty) ~ ::after,textarea[aria-hidden="true"]:not(:empty) ~ ::after,select[hidden]:not(:empty) ~ ::after,select[aria-hidden="true"]:not(:empty) ~ ::after,svg[hidden]:not(:empty) ~ ::after,svg[aria-hidden="true"]:not(:empty) ~ ::after,audio[hidden]:not(:empty) ~ ::after,audio[aria-hidden="true"]:not(:empty) ~ ::after,video[hidden]:not(:empty) ~ ::after,video[aria-hidden="true"]:not(:empty) ~ ::after,iframe[hidden]:not(:empty) ~ ::after,iframe[aria-hidden="true"]:not(:empty) ~ ::after{border-bottom:1px solid !important;border-radius:0 !important;bottom:auto !important;font:400 normal 16px/1.5 monospace !important;height:auto !important;left:0 !important;opacity:0;padding:1em 0;pointer-events:none !important;position:fixed !important;text-align:center !important;text-decoration:none !important;text-transform:none !important;top:0 !important;transform:translateY(-100%) translateZ(0) !important;transition:transform 0.3s ease-in !important;white-space:pre;width:100vw !important;content:"♥ Hidden element" !important;background:#f6fce9 !important;border-color:#96bf40 !important;color:#4b6020 !important;z-index:2147483644 !important} + +area[hidden]:not(:empty):hover ~ ::after,area[hidden]:not(:empty):focus ~ ::after,area[aria-hidden="true"]:not(:empty):hover ~ ::after,area[aria-hidden="true"]:not(:empty):focus ~ ::after,base[hidden]:not(:empty):hover ~ ::after,base[hidden]:not(:empty):focus ~ ::after,base[aria-hidden="true"]:not(:empty):hover ~ ::after,base[aria-hidden="true"]:not(:empty):focus ~ ::after,br[hidden]:not(:empty):hover ~ ::after,br[hidden]:not(:empty):focus ~ ::after,br[aria-hidden="true"]:not(:empty):hover ~ ::after,br[aria-hidden="true"]:not(:empty):focus ~ ::after,col[hidden]:not(:empty):hover ~ ::after,col[hidden]:not(:empty):focus ~ ::after,col[aria-hidden="true"]:not(:empty):hover ~ ::after,col[aria-hidden="true"]:not(:empty):focus ~ ::after,command[hidden]:not(:empty):hover ~ ::after,command[hidden]:not(:empty):focus ~ ::after,command[aria-hidden="true"]:not(:empty):hover ~ ::after,command[aria-hidden="true"]:not(:empty):focus ~ ::after,embed[hidden]:not(:empty):hover ~ ::after,embed[hidden]:not(:empty):focus ~ ::after,embed[aria-hidden="true"]:not(:empty):hover ~ ::after,embed[aria-hidden="true"]:not(:empty):focus ~ ::after,hr[hidden]:not(:empty):hover ~ ::after,hr[hidden]:not(:empty):focus ~ ::after,hr[aria-hidden="true"]:not(:empty):hover ~ ::after,hr[aria-hidden="true"]:not(:empty):focus ~ ::after,img[hidden]:not(:empty):hover ~ ::after,img[hidden]:not(:empty):focus ~ ::after,img[aria-hidden="true"]:not(:empty):hover ~ ::after,img[aria-hidden="true"]:not(:empty):focus ~ ::after,input[hidden]:not(:empty):hover ~ ::after,input[hidden]:not(:empty):focus ~ ::after,input[aria-hidden="true"]:not(:empty):hover ~ ::after,input[aria-hidden="true"]:not(:empty):focus ~ ::after,keygen[hidden]:not(:empty):hover ~ ::after,keygen[hidden]:not(:empty):focus ~ ::after,keygen[aria-hidden="true"]:not(:empty):hover ~ ::after,keygen[aria-hidden="true"]:not(:empty):focus ~ ::after,link[hidden]:not(:empty):hover ~ ::after,link[hidden]:not(:empty):focus ~ ::after,link[aria-hidden="true"]:not(:empty):hover ~ ::after,link[aria-hidden="true"]:not(:empty):focus ~ ::after,meta[hidden]:not(:empty):hover ~ ::after,meta[hidden]:not(:empty):focus ~ ::after,meta[aria-hidden="true"]:not(:empty):hover ~ ::after,meta[aria-hidden="true"]:not(:empty):focus ~ ::after,param[hidden]:not(:empty):hover ~ ::after,param[hidden]:not(:empty):focus ~ ::after,param[aria-hidden="true"]:not(:empty):hover ~ ::after,param[aria-hidden="true"]:not(:empty):focus ~ ::after,source[hidden]:not(:empty):hover ~ ::after,source[hidden]:not(:empty):focus ~ ::after,source[aria-hidden="true"]:not(:empty):hover ~ ::after,source[aria-hidden="true"]:not(:empty):focus ~ ::after,track[hidden]:not(:empty):hover ~ ::after,track[hidden]:not(:empty):focus ~ ::after,track[aria-hidden="true"]:not(:empty):hover ~ ::after,track[aria-hidden="true"]:not(:empty):focus ~ ::after,wbr[hidden]:not(:empty):hover ~ ::after,wbr[hidden]:not(:empty):focus ~ ::after,wbr[aria-hidden="true"]:not(:empty):hover ~ ::after,wbr[aria-hidden="true"]:not(:empty):focus ~ ::after,textarea[hidden]:not(:empty):hover ~ ::after,textarea[hidden]:not(:empty):focus ~ ::after,textarea[aria-hidden="true"]:not(:empty):hover ~ ::after,textarea[aria-hidden="true"]:not(:empty):focus ~ ::after,select[hidden]:not(:empty):hover ~ ::after,select[hidden]:not(:empty):focus ~ ::after,select[aria-hidden="true"]:not(:empty):hover ~ ::after,select[aria-hidden="true"]:not(:empty):focus ~ ::after,svg[hidden]:not(:empty):hover ~ ::after,svg[hidden]:not(:empty):focus ~ ::after,svg[aria-hidden="true"]:not(:empty):hover ~ ::after,svg[aria-hidden="true"]:not(:empty):focus ~ ::after,audio[hidden]:not(:empty):hover ~ ::after,audio[hidden]:not(:empty):focus ~ ::after,audio[aria-hidden="true"]:not(:empty):hover ~ ::after,audio[aria-hidden="true"]:not(:empty):focus ~ ::after,video[hidden]:not(:empty):hover ~ ::after,video[hidden]:not(:empty):focus ~ ::after,video[aria-hidden="true"]:not(:empty):hover ~ ::after,video[aria-hidden="true"]:not(:empty):focus ~ ::after,iframe[hidden]:not(:empty):hover ~ ::after,iframe[hidden]:not(:empty):focus ~ ::after,iframe[aria-hidden="true"]:not(:empty):hover ~ ::after,iframe[aria-hidden="true"]:not(:empty):focus ~ ::after{opacity:1;transform:translateY(0) translateZ(0) !important} + +[placeholder]:not([title]):not([aria-label]):not([aria-labelledby]){counter-increment:advice;outline:4px solid #6b8e23 !important;outline-offset:-4px;background-color:rgba(107,142,35,0.25) !important} + +[placeholder]:not([title]):not([aria-label]):not([aria-labelledby]) ~ ::after{border-bottom:1px solid !important;border-radius:0 !important;bottom:auto !important;font:400 normal 16px/1.5 monospace !important;height:auto !important;left:0 !important;opacity:0;padding:1em 0;pointer-events:none !important;position:fixed !important;text-align:center !important;text-decoration:none !important;text-transform:none !important;top:0 !important;transform:translateY(-100%) translateZ(0) !important;transition:transform 0.3s ease-in !important;white-space:pre;width:100vw !important;content:"♥ Placeholder can’t replace