All dialog creation buttons (merge PR, resolve etc) fail in chrome with Spectrum installed

Issue #13711 open
Nathan Jervis
created an issue

Spectrum is an extension that allows developers to see what a website would look like with various colour vision deficiencies (an essential extension to anyone that needs to develop accessible applications).

If I have it enabled in chrome all of the buttons that create a modal dialog fail with a javascript error.

Uncaught TypeError: e.className.match is not a function

The error is thrown from blanket.js line 23. I believe it has something to do with spectrum creating SVG elements, which aren't strings (rather an SVGAnimatedString).

I will raise the issue with Spectrum as well as they may be causing issues on other sites as well, but isAuiLayer is still incorrect as it's called on every child in the document, and doesn't verify that those elements aren't SVGs. If bitbutcket ever had an SVG on the page for any reason this error would re-appear.

It's also worth making this dimming optional, such that an error in this function does not prevent the page from being used at all. It seems odd that since it can't dim the page I'm not able to merge pull requests as that's part of the core functionality of this tool.

EDIT: The bug for spectrum is here

Comments (5)

  1. Kaleb Elwert staff

    I'm not sure this is something we'll end up doing... and almost definitely not any time soon. If using an external addon breaks a website, it's generally the fault of the external addon. However, I can see how this would be useful. That being said, this is an open source library (https://bitbucket.org/atlassian/aui), so you may be able to fix it yourself if you feel that strongly about it.

  2. Nathan Jervis reporter

    I will probably end up making a PR with them, the code looks simple enough I don't imagine the fix would be hard.

    Mostly I think it's valuable for bitbucket to do this not just because of this instance, but because the code is a ticking time bomb. Especially since it's used on a lot of atlassian sites, you have a chance that someone adds an SVG somewhere and then breaks unrelated functionality (and probably wouldn't be noticed until after the code had been merged)

  3. Log in to comment