1201829 - Tooltip arrow is very huge on HiDPI

Status: VERIFIED FIXED

(DevTools :: General, defect)

Description

[arni2033]

Attachment: Tooltip arrow is very huge on HiDPI.png

STR:   (Win7_64, Nightly 43, 32bit, ID 20150901030226, new profile, safe mode)
0. Set layout.css.devPixelsPerPx -> 1.2 (or set DPI 120% in your OS)
1. Open the following page or click URL in the form above
data:text/html,<div style="background:url(chrome://browser/skin/tabbrowser/[e-mail]); height:100px; width:100px;">
2. Open devtools->Inspector, inspect <div>, open "Rules" panel
3. Hover mouse over the url in that pane

Result: tooltip arrow looks way bigger than with layout.css.devPixelsPerPx == 1.0. I can say it because its width equals to ~3-4 characters in normal mode (layout.css.devPixelsPerPx == 1.0) and equals to ~7-8 characters in zoomed in mode (layout.css.devPixelsPerPx == 1.2)

Expectations: Tooltip arrow should be of normal size

Comment 1

[arni2033]

Regression from bug 1023546. Regression range:
> https://hg.mozilla.org/integration/fx-team/pushloghtml?fromchange=7fb2cd99356ed645465689995d303b76e29f3805&tochange=fd84063e129649fd601c177db8002270054f649e

Comment 2

[Tim Nguyen :ntim]

arni2033, thanks for filing and finding the regression range !

Comment 3

[Tim Nguyen :ntim]

Attachment: MozReview Request: Bug 1201829 - Fix devtools tooltip arrows on HDPI screens. r=pbrosset

Review commit: https://reviewboard.mozilla.org/r/34931/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/34931/

Comment 4

[Tim Nguyen :ntim]

Comment on attachment 8719327 [details]
MozReview Request: Bug 1201829 - Fix devtools tooltip arrows on HDPI screens. r=pbrosset

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/34931/diff/1-2/

Comment 5

[Tim Nguyen :ntim]

Patrick, I haven't tested this patch on Windows, any chance you could test it for me ? Thanks.

Comment 6

[Patrick Brosset <:pbro>]

Attachment: arrow-1.2.png

Tested on windows 10, by setting layout.css.devPixelsPerPx to 1.2.
The size of the arrow seems right. The border around the arrow is slightly thinner than that around the tooltip though, but maybe that's a different issue.
Also, the arrow isn't pointed exactly at the color swatch, but that, for sure, is a separate issue (which I've filed, but can't find again).

Comment 7

[arni2033]

(In reply to Patrick Brosset [:pbrosset] [:pbro] from comment #6)
> the arrow isn't pointed exactly at the color swatch
Bug 1149489. I didn't know it was a bug.

Comment 8

[Patrick Brosset <:pbro>]

Comment on attachment 8719327 [details]
MozReview Request: Bug 1201829 - Fix devtools tooltip arrows on HDPI screens. r=pbrosset

https://reviewboard.mozilla.org/r/34931/#review31633

::: devtools/client/themes/dark-theme.css:325
(Diff revision 2)
> +  height: 16px !important;

Why is `!important` needed here? If we really don't have a choice (like making the selector more specific), then at least we need a comment that explains why.

Comment 9

[Tim Nguyen :ntim]

(In reply to Patrick Brosset [:pbrosset] [:pbro] from comment #6)
> Created attachment 8719715 [details]
> arrow-1.2.png
> 
> Tested on windows 10, by setting layout.css.devPixelsPerPx to 1.2.
> The size of the arrow seems right. The border around the arrow is slightly
> thinner than that around the tooltip though, but maybe that's a different
> issue.
That's because the images were made that way, it would require changing them to fix that.

Comment 10

[Tim Nguyen :ntim]

Comment on attachment 8719327 [details]
MozReview Request: Bug 1201829 - Fix devtools tooltip arrows on HDPI screens. r=pbrosset

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/34931/diff/2-3/

Comment 11

[Patrick Brosset <:pbro>]

Comment on attachment 8719327 [details]
MozReview Request: Bug 1201829 - Fix devtools tooltip arrows on HDPI screens. r=pbrosset

https://reviewboard.mozilla.org/r/34931/#review33591

Thanks for adding the comments.

Comment 12

[Pulsebot]

https://hg.mozilla.org/integration/fx-team/rev/a2e1c335d3d1

Comment 13

[Tim Nguyen :ntim]

Comment on attachment 8719327 [details]
MozReview Request: Bug 1201829 - Fix devtools tooltip arrows on HDPI screens. r=pbrosset

Approval Request Comment
[Feature/regressing bug #]: bug 1023546
[User impact if declined]: Huge devtools tooltip arrow for HDPI (see attachment 8657028 [details])
[Describe test coverage new/current, TreeHerder]: Will land in Nightly, tested locally on Windows and OSX.
[Risks and why]: Low, CSS only fix.
[String/UUID change made/needed]: no

Comment 14

[Tim Nguyen :ntim]

[Tracking Requested - why for this release]: Visual regression.

Comment 15

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/a2e1c335d3d1

Comment 16

[Sylvestre Ledru [:Sylvestre]]

Comment on attachment 8719327 [details]
MozReview Request: Bug 1201829 - Fix devtools tooltip arrows on HDPI screens. r=pbrosset

This is too late for 45 but taking it for 46.

Comment 17

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/releases/mozilla-aurora/rev/0974bad89b5e

Comment 18

[arni2033]

Fixed on:   Win7_64, Nightly 47, 32bit, ID 20160229030448

Comment 19

[Mayur Patil]

[bugday-20160323]

Status: RESOLVED,FIXED -> VERIFIED

Comments:
Test Successful

Component: 
Name 			Firefox
Version 		46.0b9
Build ID 		20160322075646
Update Channel 	        beta
User Agent 		Mozilla/5.0 (Windows NT 6.1; WOW64; rv:46.0) Gecko/20100101 Firefox/46.0
OS                      Windows 7 SP1 x86_64

Expected Results: 
Tooltip arrow is of same size as that element loading in that particular page

Actual Results: 
As expected