Merge pull request #3390 from webcompat/issue/3378/1

Fixes #3378 - IE 11 fixes
webcompat · Jul 15, 2020 · 74dd317 · 74dd317
2 parents ce65c18 + fd1d5ce
commit 74dd317
Show file tree

Hide file tree

Showing 11 changed files with 47 additions and 38 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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",
+        },
+      ],
+    ],
   };
 };