1178078 - Don't hard-coding CSS variable name directly in panelUI.xml

Status: RESOLVED WONTFIX

(WebExtensions :: General, defect)

Description

[magicp]

Attachment: PanelUI.png

User Agent: Mozilla/5.0 (Windows NT 6.3; rv:41.0) Gecko/20100101 Firefox/41.0
Build ID: 20150627030211

Steps to reproduce:

Please see the attached file "PanelUI.png"
1) Click Youtube High Definition button
2) Click Developer button


Actual results:

Please see the attached file "PanelUI.png"
A) subView-arrow is not shown
B) Overlap subViews


Expected results:

It happened, if don't use the:root pseudo-class "--panel-ui-exit-subview-gutter-width" in PanelUIOverlay.css. Because "--panel-ui-exit-subview-gutter-width" is hardcoded in panelUI.xml.

Comment 1

[magicp]

This problem also has occurred on the following builds.

- Nightly 42.0a1 (20150629134017)
- Firefox Developer Edition 41.0b2 (20150629134017)

Comment 2

[Jared Wein [:jaws] (please needinfo? me)]

This appears to be a bug with the YouTube High Definition add-on that you have installed. In the second screenshot their button is still in the :active state, even though the Developer Tools subview is showing. The YouTube High Definition add-on should be closing their panel when a click outside of the panel occurs.

Baris, can you look in to fixing this in your add-on? You can look at the consumeoutsideclicks attribute.

Comment 3

[magicp]

Attachment: identity-popup-multiView.png

Comment 4

[magicp]

> This appears to be a bug with the YouTube High Definition add-on that you
> have installed. In the second screenshot their button is still in the
> :active state, even though the Developer Tools subview is showing. The
> YouTube High Definition add-on should be closing their panel when a click
> outside of the panel occurs.

Jared, I upload a new image "identity-popup-multiView.png" I believe that this bug is occurred by "--panel-ui-exit-subview-gutter-width" Please check css and xul.

Comment 5

[magicp]

Attachment: panelUIOverlay.css

I added modified "panelUIOverlay.css" for reproduction.

Modified...
Line 22: comment out
Line 114: replace "var(--panel-ui-exit-subview-gutter-width)" with "38px"
Line 1055: replace "var(--panel-ui-exit-subview-gutter-width)" with "38px"
Line 1072: replace "var(--panel-ui-exit-subview-gutter-width)" with "38px"
Line 1079: replace "var(--panel-ui-exit-subview-gutter-width)" with "38px"

Comment 6

[Jared Wein [:jaws] (please needinfo? me)]

I'm not sure what this is showing? If you disable the YouTube High Definition add-on does the issue go away? If so, then the bug is caused by the add-on and the error will need to be fixed there.

Comment 7

[magicp]

>It happened, if don't use the:root pseudo-class "--panel-ui-exit-subview-gutter-width" in >PanelUIOverlay.css. Because "--panel-ui-exit-subview-gutter-width" is hardcoded in >panelUI.xml.

As I wrote, these issues occur when "--panel-ui-exit-subview-gutter-width" is not used. the YouTube High Definition popup is just example for overlap. If use "--panel-ui-exit-subview-gutter-width", overlap is not occur(the YouTube High Definition popup is hidden). The subView-arrow is not shown, regardless of the YouTube High Definition is installed or not.

Comment 8

[magicp]

How about my reply?

Comment 9

[Jared Wein [:jaws] (please needinfo? me)]

I'm sorry, it's still hard for me to understand what you're saying. It sounds like there is some part of the CSS in our tree that is not using this CSS variable --panel-ui-exit-subview-gutter-width? What part isn't using it that should be using it?

Comment 10

[magicp]

(In reply to Jared Wein [:jaws] (please needinfo? me) from comment #9)
> I'm sorry, it's still hard for me to understand what you're saying. It
> sounds like there is some part of the CSS in our tree that is not using this
> CSS variable --panel-ui-exit-subview-gutter-width? What part isn't using it
> that should be using it?

CSS Variables should be entities defined by theme developer or user. But, in this case CSS variable name is hard coded in panelUI.xml. It's difficult for us to find this and modify.

I think hard coding should not be use in this situation. If there is not alternative way, should have a comment and specific variable naming in css.

Comment 11

[Jared Wein [:jaws] (please needinfo? me)]

I don't know how we could achieve this other ways. What is your recommendation? Matt, do you have an opinion here?

Comment 12

[magicp]

>Comment 10

Comment 13

[Jared Wein [:jaws] (please needinfo? me)]

Closing old needinfo requests...

Comment 14

[Jorge Villalobos [:jorgev] (he/him)]

Mass-closing bugs that relate to legacy versions of add-ons or are otherwise no longer worth tracking. Please comment if you think this bug should be reopened.

Sorry for the bugspam. Made you look, though!