Brave-browser: Devtools - Inspect Mode

[xanzhu]

Description

Inside the developer tools inspect element, when selecting the option to preview the site using device toolbar. Setting the preset size to Laptop - 1024px or any of the higher options (All presets below work normally) Hovering over any node in the elements UI will show the highlight/tooltip in the incorrect location not aligned with the selected node. Also occurring if the option to hover over the preview is enabled.

tl;dr - Enabling device toolbar, when setting tab to "Laptop" and above, hovering over any node -- highlight/tooltip is not aligned correctly.

Steps to Reproduce

1. Visit any site right click and select inspect element or ctrl + shift + i, once opened select the option to Toggle device toolbar. Once the preview pops up change the size to Laptop - 1024px
2. Hover mouse over any node within the elements UI or enable the option next to device toolbar toggle which enables Hovering on elements directly in the preview.
3. Hover over anything > Highlight is not aligned correctly to the element.

Actual result:

Brave

Expected result:

Chrome

Reproduces how often:

Easily reproduced

Brave version (brave://version info)

Brave | 0.63.55 Chromium: 74.0.3729.131 (Official Build) (64-bit)
-- | --
Revision | 518a41c1fa7ce1c8bb5e22346e82e42b4d76a96f-refs/branch-heads/3729@{#954}
OS | Windows 10 OS Build 17763.475

Version/Channel Information:

Occurs on all channels (Release/Beta/Dev/Nightly)

Other Additional Information:

• Disabling/Enabling shields - No effect
• Brave rewards (Disabled)
• Not present in latest version of Chrome

Miscellaneous Information:

• Manually increasing the device size starting at mobile, issue does not occur at Laptop 1024px preset anything above will.
• If the preset is set at the size which it normally wouldn't work is closed then re-opened issue does not occur.
• Does not occur unless toggle device toolbar is enabled.
• Node is being highlighted correctly in the elements UI when hovering on the preview.

Another issue with developer tools - #3199

[rebron]

cc: @LaurenWags is this related to responsive mode reported in a community thread?

[LaurenWags]

@rebron I believe so. Here's the thread:
https://community.brave.com/t/inspect-element-dev-tools-broken-in-responsive-mode/59811

[arpit9295]

Some extra info -
This doesn't seem to be related to 1024px but rather, the inspector zoom. Anytime the zoom changes to anything but 100%, the inspector breaks.

[manrueda]

Looks like is working correctly on version 0.65.118 on OSX.

[xanzhu]

Working correctly on both macOS and Windows running latest release builds (0.65.118)
@LaurenWags / @rebron

[bsclifton]

Awesome! Thanks for confirming, @manrueda @BhuZha! 🎉