Widget Inspector values overlap label text in Brave browser #367

Activity

1. DanTup

   added

   type-bugSomething isn't workingSomething isn't working

   devtools-inspector-screen

   on Feb 27, 2019
2. Sh1d0w commented on Feb 27, 2019

   

   Sh1d0w

   on Feb 27, 2019

   More actions

   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 👍
3. DanTup commented on Feb 27, 2019

   

   DanTup

   on Feb 27, 2019

   ContributorAuthor

   More actions

   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.
4. Sh1d0w commented on Feb 27, 2019

   

   Sh1d0w

   on Feb 27, 2019

   More actions

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

   changed the title [-]Widget Inspector values overlap label text[/-] [+]Widget Inspector values overlap label text in Brave browser[/+] on Feb 27, 2019
6. jacob314 commented on Feb 28, 2019

   

   jacob314

   on Feb 28, 2019

   Contributor

   More actions

   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.
7. jacob314

   closed this as completedon Mar 3, 2019
8. DanTup commented on Mar 4, 2019

   

   DanTup

   on Mar 4, 2019

   ContributorAuthor

   More actions

   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:

   brave/brave-browser#1025

   So I doubt there's something simple we could tweak to avoid it. I guess a lot of legit use looks like fingerprinting.
9. kenzieschmoll commented on Mar 19, 2019

   

   kenzieschmoll

   on Mar 19, 2019

   Member

   More actions

   Open issue for warning users is here: #66.
10. lookfirst commented on Jun 28, 2019

    

    lookfirst

    on Jun 28, 2019

    Last edited by lookfirst

    More actions

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

    
11. DanTup commented on Jul 8, 2019

    

    DanTup

    on Jul 8, 2019

    ContributorAuthor

    More actions

    @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.
12. Sh1d0w commented on Jul 8, 2019

    

    Sh1d0w

    on Jul 8, 2019

    More actions

    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.
13. DanTup commented on Jul 9, 2019

    

    DanTup

    on Jul 9, 2019

    ContributorAuthor

    More actions

    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'));
14. Sh1d0w commented on Jul 9, 2019

    

    Sh1d0w

    on Jul 9, 2019

    More actions

    @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.
15. DanTup commented on Jul 9, 2019

    

    DanTup

    on Jul 9, 2019

    ContributorAuthor

    More actions

    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')
16. Sh1d0w commented on Jul 9, 2019

    

    Sh1d0w

    on Jul 9, 2019

    Last edited by Sh1d0w

    More actions

    @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.
17. DanTup commented on Jul 9, 2019

    

    DanTup

    on Jul 9, 2019

    ContributorAuthor

    More actions

    @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 #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).
18. alexis-andino commented on Jun 24, 2020

    

    alexis-andino

    on Jun 24, 2020

    More actions

    

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