Merge pull request #3691 from webcompat/issue/3016/1

Fixes #3016 - Remove current browser from list of tested browsers

package.json

@@ -23,7 +23,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",
+    "ua-parser-js": "^1.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.10.2",

tests/functional/reporting-auth.js

@@ -6,13 +6,15 @@ const intern = require("intern").default;
 const { assert } = intern.getPlugin("chai");
 const { registerSuite } = intern.getInterface("object");
 const FunctionalHelpers = require("./lib/helpers.js");
+let current_browser_id = "";
 
 var url = function (path) {
   return intern.config.functionalBaseUrl + path;
 };
 
 registerSuite("Reporting (auth)", {
   before() {
+    current_browser_id = "browser-" + this.remote.session.capabilities.browser;
     return FunctionalHelpers.login(this);
   },
 
@@ -48,8 +50,14 @@ registerSuite("Reporting (auth)", {
             // Make sure that "Confirm" button is disabled if browser is not selected
             assert.isNotNull(attribute);
           })
+          .end()
+          .findById(current_browser_id)
+          .isDisplayed()
+          .then(function (isDisplayed) {
+            assert.equal(isDisplayed, false, "Current browser is hidden");
+          })
+          .end()
           .execute(function () {
-            // Click on "Chrome"
             document.querySelector("[for=tested_browsers-0]").click();
           })
           .end()

tests/functional/reporting-issue-wizard-non-auth.js

@@ -16,8 +16,15 @@ const BAD_IMAGE_PATH = path.join(cwd, "tests/fixtures", "evil.py");
 const url = function (path) {
   return intern.config.functionalBaseUrl + path;
 };
+let current_browser_id = "";
 
 registerSuite("Reporting with wizard", {
+  after() {
+    current_browser_id = "";
+  },
+  before() {
+    current_browser_id = "browser-" + this.remote.session.capabilities.browser;
+  },
   tests: {
     "Space in domain name validation"() {
       return FunctionalHelpers.openPage(
@@ -143,8 +150,14 @@ registerSuite("Reporting with wizard", {
             // Make sure that "Confirm" button is disabled if browser is not selected
             assert.isNotNull(attribute);
           })
+          .end()
+          .findById(current_browser_id)
+          .isDisplayed()
+          .then(function (isDisplayed) {
+            assert.equal(isDisplayed, false, "Current browser is hidden");
+          })
+          .end()
           .execute(function () {
-            // Click on "Chrome"
             document.querySelector("[for=tested_browsers-0]").click();
           })
           .end()

webcompat/form.py

@@ -125,6 +125,7 @@
 
 browser_choices = [
     ('Chrome', 'svg-chrome.svg', 'Chrome'),
+    ('Firefox', 'svg-firefox.svg', 'Firefox'),
     ('Edge', 'svg-edge.svg', 'Edge'),
     ('Safari', 'svg-safari.svg', 'Safari'),
     ('Opera', 'svg-opera.svg', 'Opera'),
@@ -168,11 +169,22 @@ class PrefixedRadioField(RadioField):
 
     def __init__(self, *args, **kwargs):
         prefixed_choices = kwargs.pop('choices')
+        add_idd = False
+
+        if 'add_id' in kwargs:
+            add_idd = kwargs.pop('add_id')
+
         choices = []
+        element_id = None
         for slug, img, text in prefixed_choices:
             filename = f'img/svg/icons/{img}'
             src = url_for('static', filename=filename)
-            t = f'<div class="icon-container"><img src="{src}" alt=""></div> {text}'  # noqa
+            if add_idd:
+                element_id = 'id="browser-{}"'.format(
+                    slug.lower().replace(" ", "_")
+                )
+
+            t = f'<div {element_id if add_idd else ""} class="icon-container"><img src="{src}" alt=""></div> {text}'  # noqa
             label = Markup(t)
             choice = (slug, label)
             choices.append(choice)
@@ -241,7 +253,8 @@ class FormWizard(FlaskForm):
     )
     tested_browsers = PrefixedRadioField(
         [InputRequired(message=radio_message)],
-        choices=browser_choices
+        choices=browser_choices,
+        add_id=True
     )
     # Bots Trap
     username = StringField('Username',

webcompat/static/js/lib/wizard/steps/confirm-browser.js

@@ -7,18 +7,20 @@
 import $ from "jquery";
 import { showContainer, hideContainer } from "../ui-utils.js";
 import notify from "../notify.js";
+import { getBrowserName } from "../utils.js";
 
 const container = $(".step-container.step-browser");
 const nextStepButton = container.find(".next-browser");
 const otherOption = container.find(".next-custom");
 
-const makeAStep = (id) => notify.publish("showStep", { id });
+const makeAStep = (id, data) => notify.publish("showStep", { id, data });
 const hideStep = (id) => notify.publish("hideStep", id);
 
 const handleNext = (event) => {
+  const browserName = getBrowserName();
   event.preventDefault();
   hideStep("differentBrowser");
-  makeAStep("testedBrowsers");
+  makeAStep("testedBrowsers", { browser: browserName });
 };
 
 const handleOther = (event) => {

webcompat/static/js/lib/wizard/steps/different-browser.js

@@ -24,7 +24,7 @@ const osField = container.find("#os");
 
 const handleNext = (event) => {
   event.preventDefault();
-  notify.publish("showStep", { id: "testedBrowsers" });
+  notify.publish("showStep", { id: "testedBrowsers", data: { showAll: true } });
 };
 
 const updateFieldState = (isValid, element, text) => {

webcompat/static/js/lib/wizard/steps/tested-browsers.js

@@ -12,6 +12,17 @@ import {
   showContainer,
 } from "../ui-utils.js";
 
+const BROWSER_ICON_MAP = {
+  Chrome: "chrome",
+  "Chrome Headless": "chrome",
+  Edge: "edge",
+  Firefox: "firefox",
+  IE: "internet_explorer",
+  "Mobile Safari": "safari",
+  Opera: "opera",
+  Safari: "safari",
+};
+
 const container = $(".step-container.step-tested-browsers");
 const nextStepButton = container.find("button.next-tested");
 const noOtherButton = container.find(".no-other-browser");
@@ -54,10 +65,35 @@ const initListeners = () => {
   addKeyDownListeners(container);
 };
 
+const hideCurrentBrowser = ({ browser }) => {
+  const browserId = BROWSER_ICON_MAP[browser];
+
+  if (!browserId) return;
+
+  const toHide = $(`#browser-${browserId}`);
+  if (toHide.length) {
+    toHide.parents("li").hide();
+  }
+};
+
+const showAllBrowsers = () => {
+  $("#tested_browsers").children("li").show();
+};
+
 initListeners();
 
 export default {
-  show: () => {
+  show: (data) => {
+    if (data) {
+      if ("browser" in data) {
+        hideCurrentBrowser(data);
+      }
+
+      if ("showAll" in data) {
+        showAllBrowsers();
+      }
+    }
+
     showContainer(container);
   },
 

webcompat/static/js/lib/wizard/utils.js

@@ -2,6 +2,8 @@
  * 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/. */
 
+import { UAParser } from "ua-parser-js";
+
 export const extractPrettyUrl = (url) => {
   const pathArray = url.trim().split("/");
   return pathArray[2];
@@ -98,3 +100,9 @@ export const getDataURIFromPreview = (bgImage) => {
 
   return match[1];
 };
+
+export const getBrowserName = (useragent) => {
+  const toParse = useragent || window.navigator.userAgent;
+  const ua = new UAParser(toParse);
+  return ua.getBrowser().name;
+};