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

RESOLVED WONTFIX

Status

Tech Evangelism
Add-ons
RESOLVED WONTFIX
3 years ago
5 months ago

People

(Reporter: magicp, Unassigned)

Tracking

unspecified

Firefox Tracking Flags

(firefox41 affected, firefox42 affected, firefox43 affected, firefox44 affected)

Details

Attachments

(3 attachments)

(Reporter)

Description

3 years ago
Created attachment 8626994 [details]
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.
(Reporter)

Updated

3 years ago
Component: Untriaged → Theme
OS: Unspecified → All
Hardware: Unspecified → All
(Reporter)

Comment 1

3 years ago
This problem also has occurred on the following builds.

- Nightly 42.0a1 (20150629134017)
- Firefox Developer Edition 41.0b2 (20150629134017)
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.
Component: Theme → Add-ons
Flags: needinfo?(barisderin)
Product: Firefox → Tech Evangelism
Version: 41 Branch → Firefox 41
(Reporter)

Comment 3

3 years ago
Created attachment 8629582 [details]
identity-popup-multiView.png
(Reporter)

Comment 4

3 years ago
> 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.
(Reporter)

Comment 5

3 years ago
Created attachment 8629653 [details]
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"
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.
(Reporter)

Comment 7

3 years ago
>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.
(Reporter)

Comment 8

3 years ago
How about my reply?
Flags: needinfo?(jaws)
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?
Flags: needinfo?(jaws)
(Reporter)

Comment 10

3 years ago
(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.
(Reporter)

Updated

3 years ago
Flags: needinfo?(jaws)
I don't know how we could achieve this other ways. What is your recommendation? Matt, do you have an opinion here?
Flags: needinfo?(magicp.jp)
Flags: needinfo?(jaws)
Flags: needinfo?(MattN+bmo)
(Reporter)

Comment 12

3 years ago
>Comment 10
(Reporter)

Updated

3 years ago
Flags: needinfo?(magicp.jp)
Closing old needinfo requests...
Flags: needinfo?(barisderin)
Flags: needinfo?(MattN+bmo)
(Reporter)

Updated

3 years ago
Status: UNCONFIRMED → NEW
status-firefox41: --- → affected
status-firefox42: --- → affected
status-firefox43: --- → affected
status-firefox44: --- → affected
Ever confirmed: true
Summary: Overlap subViews and subView-arrow is not shown in PanelUI-popup → Don't hard-coding CSS variable name directly in panelUI.xml
Version: Firefox 41 → unspecified
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!
Status: NEW → RESOLVED
Last Resolved: 5 months ago
Resolution: --- → WONTFIX
You need to log in before you can comment on or make changes to this bug.