From fd1d5ce621f50739ead9bead4762fac8be57f2f8 Mon Sep 17 00:00:00 2001 From: Ksenia Berezina Date: Fri, 10 Jul 2020 18:18:46 -0400 Subject: [PATCH] Fixes #3378 - IE 11 fixes --- .babelrc | 5 +++- package.json | 9 ++++--- postcss.config.js | 9 +++++++ tests/functional/reporting-auth.js | 2 +- .../reporting-issue-wizard-non-auth.js | 4 +-- webcompat/static/css/src/issue-wizard.css | 2 ++ webcompat/static/css/src/nav.css | 1 + .../js/lib/wizard/steps/sub-category.js | 7 +++-- webcompat/static/js/lib/wizard/ui-utils.js | 5 +--- webpack/webpack.common.js | 27 ++++--------------- webpack/webpack.prod.js | 14 +++++++++- 11 files changed, 47 insertions(+), 38 deletions(-) create mode 100644 postcss.config.js diff --git a/.babelrc b/.babelrc index 8a8342c4f..8e5c659fb 100644 --- a/.babelrc +++ b/.babelrc @@ -1,4 +1,5 @@ { + "sourceType": "unambiguous", "presets": [ [ "@babel/preset-env", @@ -7,7 +8,9 @@ "modules": false, "targets": { "esmodules": true - } + }, + "corejs": "3", + "useBuiltIns": "usage" } ] ] diff --git a/package.json b/package.json index 770aab674..a1732c969 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ }, "dependencies": { "amd-to-commonjs-codemod": "^1.2.0", + "core-js": "^3.6.5", "cssrecipes-custom-media-queries": "0.3.0", "cssrecipes-defaults": "^0.5.0", "cssrecipes-grid": "^1.0.0", @@ -42,8 +43,10 @@ "lint-staged": "^10.0.8", "mini-css-extract-plugin": "^0.9.0", "optimize-css-assets-webpack-plugin": "^5.0.3", + "postcss-import": "^12.0.1", "postcss-loader": "^3.0.0", "postcss-preset-env": "^6.7.0", + "postcss-url": "^8.0.0", "prettier": "2.0.5", "sinon": "^9.0.1", "stylelint": "^13.1.0", @@ -64,10 +67,10 @@ "build:svg:svg-sprite": "svg-sprite-generate -d ./webcompat/static/img/svg/tmp -o ./webcompat/static/img/svg/sprite.svg", "lint": "npm run lint:js && npm run lint:css && npm run lint:python", "lint:python": "pycodestyle --ignore=E402,W504 webcompat/ tests/ config/", - "lint:js": "npx eslint ./webpack ./tests ./webcompat/static/js/lib", + "lint:js": "npx eslint ./webpack ./tests ./webcompat/static/js/lib postcss.config.js", "lint:css": "npx 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": "npx eslint --fix ./webpack ./tests ./webcompat/static/js/lib", + "lint:fix:js": "npx eslint --fix ./webpack ./tests ./webcompat/static/js/lib postcss.config.js", "lint:fix:css": "npx stylelint './webcompat/static/css/src/**/*.css' './webcompat/static/css/webcompat.dev.css' --fix", "prestart": "npm run build", "start": "source env/bin/activate || . env/bin/activate && flask run", @@ -90,7 +93,7 @@ }, "lint-staged": { "*.js": [ - "npx eslint ./webpack ./tests ./webcompat/static/js/lib", + "npx eslint ./webpack ./tests ./webcompat/static/js/lib postcss.config.js", "git add" ], "*.css": [ diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 000000000..df5bf96e8 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,9 @@ +module.exports = { + plugins: [ + require("postcss-import"), + require("postcss-url"), + require("postcss-preset-env")({ + browsers: ["defaults", "Firefox > 52", "Safari >=9", "Chrome >=75"], + }), + ], +}; diff --git a/tests/functional/reporting-auth.js b/tests/functional/reporting-auth.js index 7fd9f65b8..3cc927e20 100755 --- a/tests/functional/reporting-auth.js +++ b/tests/functional/reporting-auth.js @@ -80,7 +80,7 @@ registerSuite("Reporting (auth)", { .findByCssSelector(".next-description") .click() .end() - .sleep(500) + .sleep(1000) .findDisplayedByCssSelector(".next-screenshot") // Click on "Continue without" .click() diff --git a/tests/functional/reporting-issue-wizard-non-auth.js b/tests/functional/reporting-issue-wizard-non-auth.js index 86bc5bdb6..e8a8b60b9 100644 --- a/tests/functional/reporting-issue-wizard-non-auth.js +++ b/tests/functional/reporting-issue-wizard-non-auth.js @@ -248,7 +248,7 @@ registerSuite("Reporting with wizard", { // Click on "Images not loaded" document.querySelector("[for=layout_bug_subcategory-0]").click(); }) - .sleep(1000) + .sleep(1500) // Check that hidden description field has "Images not loaded" .findById("description") .getAttribute("value") @@ -352,7 +352,7 @@ registerSuite("Reporting with wizard", { .findByCssSelector(".next-description") .click() .end() - .sleep(500) + .sleep(1000) .findByCssSelector(".step.active .description") .getVisibleText() .then(function (text) { diff --git a/webcompat/static/css/src/issue-wizard.css b/webcompat/static/css/src/issue-wizard.css index 77e156821..fa6c0fb5c 100644 --- a/webcompat/static/css/src/issue-wizard.css +++ b/webcompat/static/css/src/issue-wizard.css @@ -1000,8 +1000,10 @@ } .protruding-img { + left: 50%; position: absolute; top: -30px; + transform: translate(-50%, 0); } .step-container.step-url { diff --git a/webcompat/static/css/src/nav.css b/webcompat/static/css/src/nav.css index 6e1571a88..515ea052e 100644 --- a/webcompat/static/css/src/nav.css +++ b/webcompat/static/css/src/nav.css @@ -49,6 +49,7 @@ .nav-item .nav-link { display: inline-block; + height: 42px; padding: 5px; text-decoration: none; } diff --git a/webcompat/static/js/lib/wizard/steps/sub-category.js b/webcompat/static/js/lib/wizard/steps/sub-category.js index bc21e453e..b37cfc4a8 100644 --- a/webcompat/static/js/lib/wizard/steps/sub-category.js +++ b/webcompat/static/js/lib/wizard/steps/sub-category.js @@ -11,9 +11,9 @@ import notify from "../notify.js"; const container = $(".step-container.step-subproblem"); const radio = container.find("input"); -const showSubcategory = (subId) => { +const showSubcategory = (subId, cb) => { container.find(".choice-control").hide(); - $(`.${subId}`).show(); + $(`.${subId}`).show(0, cb); }; const resetRadio = (element) => { @@ -41,8 +41,7 @@ radio.on("change", handleSubCategory); export default { show: (data) => { resetRadio(radio); - showSubcategory(data.subId); - showContainer(container); + showSubcategory(data.subId, () => showContainer(container)); }, hide: () => { hideContainer(container); diff --git a/webcompat/static/js/lib/wizard/ui-utils.js b/webcompat/static/js/lib/wizard/ui-utils.js index cbe410119..b7e447d10 100644 --- a/webcompat/static/js/lib/wizard/ui-utils.js +++ b/webcompat/static/js/lib/wizard/ui-utils.js @@ -17,11 +17,8 @@ export const scrollToElement = (element, delay = 250) => { setTimeout(() => { const topOfElement = window.pageYOffset + element.getBoundingClientRect().top - HEADER_HEIGHT; - window.scroll({ top: topOfElement, behavior: "smooth" }); + $("html, body").animate({ scrollTop: topOfElement }); }, delay); - - //@todo figure out why this is needed - //this.isSubproblem ? 450 : 250 }; export const showContainer = (container, animationName = "slidedown") => { diff --git a/webpack/webpack.common.js b/webpack/webpack.common.js index a560711e0..354ecb521 100644 --- a/webpack/webpack.common.js +++ b/webpack/webpack.common.js @@ -2,7 +2,6 @@ const path = require("path"); const webpack = require("webpack"); const entries = require("./entries.js"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); -const postcssPresetEnv = require("postcss-preset-env"); module.exports = { entry: entries, @@ -29,26 +28,7 @@ module.exports = { }, { test: /\.css$/, - use: [ - MiniCssExtractPlugin.loader, - "css-loader", - { - loader: "postcss-loader", - options: { - ident: "postcss", - plugins: () => [ - postcssPresetEnv({ - browsers: [ - "defaults", - "Firefox > 52", - "Safari >=9", - "Chrome >=75", - ], - }), - ], - }, - }, - ], + use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"], }, { test: /\.(png|svg|jpg|gif)$/, @@ -57,7 +37,10 @@ module.exports = { ], }, resolve: { - modules: [path.resolve(__dirname, "../webcompat/static/js/vendor")], + modules: [ + path.resolve(__dirname, "../webcompat/static/js/vendor"), + "node_modules", + ], alias: { templates: path.resolve(__dirname, "../webcompat/templates/"), jquery: "jquery-3.3.1.min.js", diff --git a/webpack/webpack.prod.js b/webpack/webpack.prod.js index 382ed5325..db5de938f 100644 --- a/webpack/webpack.prod.js +++ b/webpack/webpack.prod.js @@ -15,8 +15,20 @@ const getOptions = (env) => { if (!isEs5(env)) return {}; return { + sourceType: "unambiguous", babelrc: false, - presets: ["@babel/env"], + presets: [ + [ + "@babel/env", + { + // We're using core-js for polyfills, with useBuiltIns: "usage" + // option, which means polyfills will be added automatically + // when the usage of a certain feature is unsupported in legacy browsers + corejs: "3", + useBuiltIns: "usage", + }, + ], + ], }; };