Widget Inspector values overlap label text in Brave browser

[DanTup]

Opened by @Sh1d0w at https://github.com/Dart-Code/Dart-Code/issues/1487

---

Just updated to the latest version 2.24 and this is how it looks when I launch the Dart DevTools:

The widget attributes seems to overflow the widget name and everything becomes unreadable.

[Sh1d0w]

After a short investigation it seems to be caused by the browser's built in ad-blocker. It prevents third party fingerprinting on the canvas element used, which seems to break the UI. After disabling this, everything looks good.

This issue can be closed I guess, thanks for the fast reaction 👍

[DanTup]

caused by the browser's built in ad-blocker

Is this enabled by default? Which browser/version is it on which OS? It may be worth keeping this open to see if there's a way we can fix it, or at least warn users if they're using that browser.

[Sh1d0w]

@DanTup I am on the latest version of MacOS using Brave Browser. Yes this is enabled by default.

[jacob314]

To keep our velocity high writing the devtools app we only have time to support Chrome. We should make that clearer when you start the app to avoid confusion.

[DanTup]

We should make that clearer when you start the app to avoid confusion.

Do you mean in the web app? Should we open an issue for this?

I had a quick look to see if there might be a quick fix for this, but it seems like Brave's anti-fingerprinting breaks quite a lot of stuff that uses canvas:

https://github.com/brave/brave-browser/issues/1025

So I doubt there's something simple we could tweak to avoid it. I guess a lot of legit use looks like fingerprinting.

[kenzieschmoll]

Open issue for warning users is here: https://github.com/flutter/devtools/issues/66.

[lookfirst]

Super new Flutter user. Just ran into this myself. Having a warning for missing canvas would be nice.

[DanTup]

@lookfirst Brave deliberately makes itself look like Chrome (it used to identify itself, but stopped because it was another variable that could be used for fingerprinting), so I don't think it's possible to show a warning for Brace without all Chrome users seeing it.

[Sh1d0w]

I don’t think the warning should be based on browser detection, rather than if canvas is available. There are plugins from chrome that prevents fingerprinting as well, which then will result broken UI again.

[DanTup]

Oh sorry, I may have misunderstood. I thought Brave was just messing with the rendering on the canvas. If it's just not available, then that might be easy to warn for.

Can you run this code in the JS console and confirm if it outputs false?

var elm = document.createElement('canvas'); !!(elm.getContext && elm.getContext('2d'));

[Sh1d0w]

@DanTup That's close.

Canvas fingerprinting is well described here https://browserleaks.com/canvas#how-does-it-work

Because the way it works, the only way to prevent it is to disable toDataUrl method of the canvas, so the data can not be read, and thus no "fingerprint" can be obtained.

I think you can tweak the check like this:

var elm = document.createElement('canvas'); (elm.toDataURL() === '')

If fingerprinting is disabled, this will output true.

[DanTup]

Ok, though we don't use toDataURL in DevTools so it might not be the best check. I wonder if it's measureText that's being blocked (looks like we use that to align the value, and the screenshot shows the value written over the label).

Does this return 0 for you?

document.createElement('canvas').getContext('2d').measureText('Text that is quite long')

[Sh1d0w]

@DanTup Yep, the output is

TextMetrics {width: 0}

Good point.

I've just ran observatory with the latest version of Brave, as I wasn't using it for a while and found out a bunch of new problems:

It seems like the CSS and JS assets are not served with correct mime type from the observatory thus white screen appears as those files are not loaded at all.

[DanTup]

@Sh1d0w ok, then I think we can probably easily show a warning at the top of the Inspector page when measureString returns 0. I've opened https://github.com/flutter/devtools/issues/777.

As for the Observatory issue - I think that's best raised at dart-lang/sdk since it's a different app to the Dart DevTools (though I'm not sure what the support is intended to be for that).

[alexis-andino]

I turned off the shields for the website and the overlap issue was gone.