DevTools Inspector tooltip get element width/height wrong when browser zoomed

RESOLVED FIXED in Firefox 54

Status

()

Firefox
Developer Tools: Inspector
P3
normal
RESOLVED FIXED
10 months ago
10 months ago

People

(Reporter: zcyzcy88, Assigned: zer0)

Tracking

51 Branch
Firefox 54
Points:
---

Firefox Tracking Flags

(firefox54 fixed)

Details

MozReview Requests

()

Submitter Diff Changes Open Issues Last Updated
Loading...
Error loading review requests:

Attachments

(1 attachment)

(Reporter)

Description

10 months ago
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:51.0) Gecko/20100101 Firefox/51.0
Build ID: 20170125094131

Steps to reproduce:

Inspect an element via various zoom rate, watch the tooltip value.

Screenshot: https://github.com/zcyzcy88/SelfColle/issues/35
(In my case, my DPI is 150%)


Actual results:

The value showed on the tooltip is considered DPI, but not considered zoom rate.
When I zoom in, the value will bigger.


Expected results:

Choose one behavior following:
- Same as `getComputedStyle()`
- Always get the number of real pixels, without considering DPI and zoom
(Reporter)

Updated

10 months ago
Component: Untriaged → Developer Tools: Inspector

Comment 1

10 months ago
I think this is correct, this is the display size and the file size. For example, the user picture `<img alt="User image" src="https://secure.gravatar.com/avatar/0102fc5767f7be5d939e99588b7f25c4?d=mm&size=64" width="32" height="32" align="middle" border="0">` have 32x32 (display) and 64x64 (file size) for 100% dpi & zoom.
(Reporter)

Comment 2

10 months ago
I don't talk about image tooltip(white), I mean the element tooltip(black).

My example is confusing, I have changed another: https://github.com/zcyzcy88/SelfColle/issues/36
pay attention to the tooltip in red circle.
(Assignee)

Comment 3

10 months ago
Thanks for filing this!

At first, I thought that this behavior was right as is, since when you zoomed the pixel ratio is changing as well, and therefore the size of the page too: for example, if you have media queries set for min/max width / height, and not only dppx, you can see they will be applied once you zoom.

But then I understand that you're right and we should fix this, since our other tools behave in this way – for example, the rulers – and it would be an inconsistency. Also,  other browsers' devtools are keeping the size without considering the pixel ratio.
Assignee: nobody → zer0
Comment hidden (mozreview-request)
(Assignee)

Updated

10 months ago
Status: UNCONFIRMED → ASSIGNED
Ever confirmed: true
Priority: -- → P3

Comment 5

10 months ago
mozreview-review
Comment on attachment 8841358 [details]
Bug 1341580 - DevTools Inspector tooltip get element width/height wrong when browser zoomed;

https://reviewboard.mozilla.org/r/115596/#review117006

::: devtools/client/inspector/test/browser_inspector_infobar_04.js:7
(Diff revision 1)
> + * License, v. 2.0. If a copy of the MPL was not distributed with this
> + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
> +
> +"use strict";
> +
> +// Check the position and text content of the highlighter nodeinfo bar.

We should use a better test description like:
// Check the position and text content of the highlighter nodeinfo bar under page zoom.
Attachment #8841358 - Flags: review?(gl) → review+

Comment 6

10 months ago
mozreview-review
Comment on attachment 8841358 [details]
Bug 1341580 - DevTools Inspector tooltip get element width/height wrong when browser zoomed;

https://reviewboard.mozilla.org/r/115596/#review117014

::: devtools/server/actors/highlighters/box-model.js:676
(Diff revision 1)
>      if (pseudo) {
>        // Display :after as ::after
>        pseudos += ":" + pseudo;
>      }
>  
> -    let rect = this._getOuterQuad("border").bounds;
> +    let zoom = getCurrentZoom(this.win);

We should add an explaination about why we divide the zoom to get the original height/width
Comment hidden (mozreview-request)
Comment hidden (mozreview-request)

Comment 9

10 months ago
Pushed by mferretti@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/d18a90d8df3e
DevTools Inspector tooltip get element width/height wrong when browser zoomed; r=gl

Comment 10

10 months ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/d18a90d8df3e
Status: ASSIGNED → RESOLVED
Last Resolved: 10 months ago
status-firefox54: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 54

Comment 11

10 months ago
I have reproduced this bug with Nightly 54.0a1 (2017-02-22) (64-bit) on Windows 7, 64 Bit!

This bug's fix is verified with latest Nightly!

Build   ID : 20170228030203
User Agent : Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:54.0) Gecko/20100101 Firefox/54.0

[bugday-20170301]

Comment 12

10 months ago
[bugday-20170301]
You need to log in before you can comment on or make changes to this bug.