mozilla.slack.com - site is not usable - menu buttons don't work in Firefox version "100"

[cpeterso]

URL: https://mozilla.slack.com/

Browser / Version: Firefox 100.0
Operating System: Windows 10
Tested Another Browser: No

Problem type: Site is not usable
Description: Buttons or links not working
Steps to Reproduce:
To find websites that break if the User-Agent string's browser version number has three digits (see Firefox bug 1672445), I set my Firefox's general.useragent.override pref to Mozilla/5.0 (Windows NT 10.0; rv:100.0) Gecko/20100101 Firefox/100.0, spoofing that I have Firefox version 100.

I discovered Slack's message popup menu's buttons (such as "Add reaction" or "Reply in thread") stop working for Firefox versions >= 100 and <= 519. They mysteriously start working again for versions >= 520.

The Firefox UA string has two Firefox numbers: rv:100.0 and Firefox/100.0. The second number (Firefox/100.0) is the one that is breaking Slack. If I set my UA string to Mozilla/5.0 (Windows NT 10.0; rv:86.0) Gecko/20100101 Firefox/100.0, the menu buttons are broken. If I set my UA string to Mozilla/5.0 (Windows NT 10.0; rv:100.0) Gecko/20100101 Firefox/86.0, the menu buttons work correctly.

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thanks for the report, I was able to reproduce the issue.

Tested with:
Browser / Version: Firefox Nightly 88.0a1 (2021-03-03)
Operating System: Windows 10 Pro

Moving to Needsdiagnosis for further investigation.

[karlcow]

So in a normal browsing context.

There are 60 instances of userAgent in Slack Web version.

I poked around and I found

* UAParser.js v0.7.23
 * Lightweight JavaScript-based User-Agent string parser
 * https://github.com/faisalman/ua-parser-js
 *
 * Copyright © 2012-2019 Faisal Salman <f@faisalman.com>
 * Licensed under MIT License
 */

but this is not the only parser they used. In fact each libraries come with their own.

This is will be probably painful to debug.

[karlcow]

@wisniewskit it would be great if you could poke at it today. I tried and failed. I searched for pattern \d\d or \d{2}. My hunch is that at the start of the app, there is a bunch of initialisations based on user agent sniffing. And then it breaks later on a feature for opening the modal pop up for features.

[wisniewskit]

My instincts suggested that this is likely happening because of a comparison treating numbers as strings ("100" is smaller than "99"), so I poked around looking for that. Sure enough it looks like the problem is here in this giant minified script:

  const _ = c.a.firefox && c.a.version < '52' || c.a.safari && c.a.version < '11' ? h : 'button',

Since the string "100" compares as smaller than "52", they end up doing some kind of webcompat (?) work-around which uses divs instead of buttons, but breaks on more recent Firefox versions:

    var h = i.a.forwardRef(((e, t) =>{
      let {
        onClick: n,
        className: o
      }
      = e,
      c = Object(s.a) (e, [
        'onClick',
        'className'
      ]);
      const l = Object(r.useCallback) ((e=>{
        ' ' !== e.key && 'Enter' !== e.key || n && n(e)
      }), [
        n
      ]);
      return i.a.createElement('div', Object(a.a) ({
      }, c, {
        className: d() ('c-flex_compat_button', o),
        role: 'button',
        tabIndex: 0,
        ref: t,
        onKeyPress: l
      }))
    })),

I confirmed this by trying with "51" as the version (upon which I can't click the UI elements even on their "browser is out of date" warning popup), but "52" doesn't exhibit the problem.

This appears to just be a coding oversight, as they are using number comparisons elsewhere rather than strings.

[karlcow]

then let switch to contact ready.

[webcompat-bot]

Generate outreach template

[Plambey]

Hey folks, very helpful for flagging this! Just letting you know that we've raised this internally at Slack to dive in, thanks for the deep dive above highlighting the issue in the .js script.

Patrick - Slack CE

[Plambey]

Hi there,

Just following up to let you know we believe we've addressed this issue, and can no longer repro the issue with the below:

• visit about:config
• search for general.useragent.override
• change it to: Mozilla/5.0 (Windows NT 10.0; rv:100.0) Gecko/20100101 Firefox/100.0
• reload Slack
• try to interact with any emoji/menu buttons
• see that they don't work.

From our end, the buttons appear to be working again as expected.

Thanks again for bringing this to our attention,

Patrick - Slack CE.

[cpeterso]

Thanks, @Plambey! I just tested with a "Firefox 100" User-Agent string and Slack reactions now work for me. 👍🏻