851900 - Work - Select popups have ugly gap in item highlight

Status: RESOLVED WORKSFORME

(Firefox for Metro Graveyard :: Theme, defect)

Description

[Jim Mathies [:jimm]]

Attachment: screen cap

see screenshot.

Comment 1

[Asa Dotzler [:asa]]

I don't see this in select pop-ups in Bugzilla. Is this magically fixed or  am I looking at the wrong select widgets?

Comment 2

[Brian R. Bondy [:bbondy]]

Ditto I'm not seeing this. I wondering what jimm is doing differently to be able to reproduce it.

Comment 3

[Jim Mathies [:jimm]]

Attachment: testcase

Comment 4

[Brian R. Bondy [:bbondy]]

I don't reproduce with the test case. The highlight goes across and doesn't look like the screenshot.  I think my text isn't as big as yours too. Maybe this is a dpi setting thing.

Comment 5

[Jim Mathies [:jimm]]

(In reply to Brian R. Bondy [:bbondy] from comment #4)
> I don't reproduce with the test case. The highlight goes across and doesn't
> look like the screenshot.  I think my text isn't as big as yours too. Maybe
> this is a dpi setting thing.

Sounds reasonable. Asa can you confirm with one of your high-dpi tablets?

Comment 6

[Asa Dotzler [:asa]]

(In reply to Jim Mathies [:jimm] from comment #5)
> (In reply to Brian R. Bondy [:bbondy] from comment #4)
> > I don't reproduce with the test case. The highlight goes across and doesn't
> > look like the screenshot.  I think my text isn't as big as yours too. Maybe
> > this is a dpi setting thing.
> 
> Sounds reasonable. Asa can you confirm with one of your high-dpi tablets?

Indeed, this shows up for me on a high-dpi device (11" device at full HD).

Comment 7

[Jim Mathies [:jimm]]

Attachment: odd box

This shows up when the menu overflows (scrolls). There's something funny in our css, note the little gray box on the lower right. Whatever that is it's the cause of this gap.

Comment 8

[Marco Mucci [:MarcoM]]

Jim's point estimate=3

Comment 9

[Sam Foster [:sfoster] (he/him)]

I can only reproduce this when I have the windows "text sizing" set to 150%. 125% and lower seems fine. 
When the select popup initial appears when you touch/focus the select menu, no item is selected and it renders and scrolls as expected. Once you touch and item to select it and  get the popup back up by touching the select menu again, the gap appears. 

I took the following measurements with the DOM inspector: 

Initial State (150%)
xul:scrollbox: overflow:auto,
xul:box:
scrollbar (orient horizontal)     
     box model: box width: 147, box height: 0, margin-top: 
     scrollbarbutton: width/height 0
     scrollbarbutton: width/height 0
     xul:slider: box width: 139, box height: 8,
          xul:thumb: 139, 8
     scrollbarbutton: (sbattr scrollbar-up-bottom, sborient horizontal) width/height 0
     scrollbarbutton: (sbattr scrollbar-down-bottom, sborient horizontal) width/height 8,8
scrollbar (orient vertical)
     box model: box width: 8, box height: 260
     scrollbarbutton: width/height 0
     scrollbarbutton: width/height 0
     xul:slider: box width: 8, box height: 252,
          xul:thumb: 8,57
     scrollbarbutton: (sbattr scrollbar-up-bottom, sborient vertical) width/height 0
     scrollbarbutton: (sbattr scrollbar-down-bottom, sborient vertical) width/height 8,8
scrollcorner box w/h: 0,0

listitem
     cs: min-height; 37px, min-width: 133px, width: 147.367px, display: -moz-grid-line, font-size: 16px, text-overflow: clip, outline: none
     bm: width: 147, height: 37

2nd state (150%)
xul:scrollbox: overflow:auto,
xul:box:
scrollbar (orient horizontal)
     box model: box width: 138, box height: 0, margin-top: 
     scrollbarbutton: (horizontal) width/height 0
     scrollbarbutton: (horizontal) width/height 0
     xul:slider: box width: 130, box height: 8,
          xul:thumb: 130, 8
     scrollbarbutton: (sbattr scrollbar-up-bottom, sborient horizontal) width/height 0
     scrollbarbutton: (sbattr scrollbar-down-bottom, sborient horizontal) width/height 8,8
scrollbar (orient vertical)
     box model: box width: 17, box height: 260
     scrollbarbutton: width/height 0
     scrollbarbutton: width/height 0
     xul:slider: box width: 17, box height: 252,
          xul:thumb: 17,57
     scrollbarbutton: (sbattr scrollbar-up-bottom, sborient vertical) width/height 0
     scrollbarbutton: (sbattr scrollbar-down-bottom, sborient vertical) width/height 17,8
scrollcorner box w/h: 9,0

listitem.selected: 
     cs: min-height; 37px, min-width: 133px, width: 138.033px, , text-overflow: clip, outline: none
listitem
     cs: min-height; 37px, min-width: 133px, width: 138.033px, 
     bm: width: 138, height: 37
     
You can see around 9px is introduced to the scrollbar elements in the 2nd case, which accounts for the ugly gap that gives this bug its name. I have had no success so far finding a CSS rule or other assignment that would explain this.

Comment 10

[Matt Brubeck (:mbrubeck)]

(In reply to Sam Foster [:sfoster] from comment #9)
> I can only reproduce this when I have the windows "text sizing" set to 150%.
> 125% and lower seems fine.

Based on this, I suppose some lengths are getting rounded differently and pushing the box into overflow (because the contents are bigger than the container, after rounding).  Maybe the 3px padding on the richlistbox is involved, since 150% would enlarge it to exactly 4.5 screen pixels.

I couldn't reproduce this on my own machine, which does not have a high-DPI display.  I set the desktop scale to 150% and tested in both Metro and -metrodesktop modes.

If the overflow theory is correct, the real problem is that we are not properly hiding the scrollbox elements.  Can you check their "display" properties?  Do we need to override the "display: -moz-box !important" on the scrollcorner?  Do we need to set "visibility: collapse" on scrollbar and scrollcorner?

Comment 11

[Sam Foster [:sfoster] (he/him)]

If we modify the rules for scrollcorner and scrollbar around https://mxr.mozilla.org/mozilla-central/source/toolkit/content/xul.css#945, to display: none and visibility:collapse, we get the right behavior. Obviously we need a more targeted fix for metro and for this popup. I'm stumped right now as my efforts to add overriding rules in browser/metro/theme/forms.css are being ignored: 

#select-commands scrollcorner, #select-commands scrollbar {
  display: none !important;
  visibility: collapse!important;
}

.. so I'm obviously missing something. Halp?

Comment 12

[Frank Yan (:fryn)]

I can't seem to reproduce this at all. :(
Are you still seeing it?

Comment 13

[Jim Mathies [:jimm]]

Seems to have gone away now that we display normal scroll bars. If we plan on getting rid of those when interacting with touch, I'll bet it will come back. If not, then I think we can resolve this.

Comment 14

[Jim Mathies [:jimm]]

this is fixed. tested on a surface pro, which is what I originally reported it on.