diff --git a/package.json b/package.json index 7c3861cae..7b2cd6758 100644 --- a/package.json +++ b/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", diff --git a/tests/functional/reporting-auth.js b/tests/functional/reporting-auth.js index 3cc927e20..a157c51aa 100755 --- a/tests/functional/reporting-auth.js +++ b/tests/functional/reporting-auth.js @@ -6,6 +6,7 @@ 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; @@ -13,6 +14,7 @@ var url = function (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() diff --git a/tests/functional/reporting-issue-wizard-non-auth.js b/tests/functional/reporting-issue-wizard-non-auth.js index 0f9531359..ac0a9f957 100644 --- a/tests/functional/reporting-issue-wizard-non-auth.js +++ b/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() diff --git a/webcompat/form.py b/webcompat/form.py index 05f3f041d..962ee144b 100644 --- a/webcompat/form.py +++ b/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'
{text}' # noqa + if add_idd: + element_id = 'id="browser-{}"'.format( + slug.lower().replace(" ", "_") + ) + + t = f'
{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', diff --git a/webcompat/static/img/svg/icons/svg-firefox.svg b/webcompat/static/img/svg/icons/svg-firefox.svg new file mode 100644 index 000000000..46d921045 --- /dev/null +++ b/webcompat/static/img/svg/icons/svg-firefox.svg @@ -0,0 +1,5 @@ + + newtab-firefox-gry + + diff --git a/webcompat/static/js/lib/wizard/steps/confirm-browser.js b/webcompat/static/js/lib/wizard/steps/confirm-browser.js index b266ca090..e00098504 100644 --- a/webcompat/static/js/lib/wizard/steps/confirm-browser.js +++ b/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) => { diff --git a/webcompat/static/js/lib/wizard/steps/different-browser.js b/webcompat/static/js/lib/wizard/steps/different-browser.js index 870a586ca..8a41cbadb 100644 --- a/webcompat/static/js/lib/wizard/steps/different-browser.js +++ b/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) => { diff --git a/webcompat/static/js/lib/wizard/steps/tested-browsers.js b/webcompat/static/js/lib/wizard/steps/tested-browsers.js index 473db0b72..24e887557 100644 --- a/webcompat/static/js/lib/wizard/steps/tested-browsers.js +++ b/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); }, diff --git a/webcompat/static/js/lib/wizard/utils.js b/webcompat/static/js/lib/wizard/utils.js index f8e5dc660..9ad2f152c 100644 --- a/webcompat/static/js/lib/wizard/utils.js +++ b/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; +};