[CSD] Button layout not according to settings

ASSIGNED
Assigned to

Status

()

defect
ASSIGNED
a year ago
2 days ago

People

(Reporter: chalisesagar, Assigned: smurfd, NeedInfo)

Tracking

(Blocks 1 bug)

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

a year ago
User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36

Steps to reproduce:

The CSD settings on current developer edition doesnot respect button layout. When drawn in titlebar the button layout are not as they should be.


Actual results:

My system button layout is "close:maximize" but the layout for firefox is ":maximize,close"


Expected results:

The button layout should respect the settings from dconf.

Updated

a year ago
Component: Untriaged → Widget: Gtk
OS: Unspecified → Linux
Product: Firefox → Core
Hardware: Unspecified → x86_64

Comment 1

a year ago
This affects me as well. I use "mac osx" layout but FF just dumps the buttons in the top right corner.
(Assignee)

Comment 2

3 months ago

Yeah, notised this today aswell.

Hope its okey to start looking at it, ie assign it to myself.
Im guessing it should be somewhere in widget/gtk/nsWindow.cpp ...

Assignee: nobody → smurfd
Status: UNCONFIRMED → ASSIGNED
Ever confirmed: true
(Assignee)

Comment 3

3 months ago

My button order is :
Close, minimize, maximize, <title>

instead of the standard :
<title>, minimize, maximize, close

In release, ie now 65.0 this still shows the standard button layout, even without me having it that way (ie this bug :)).
If i try Developer or Nightly though, the button order is as it should be according to my GNOME settings.
...

Well, tried to change button order to :
Close, maximize, minimize, <title>
.. and restart Nightly.
It would still stick to :
Close, minimize, maximize, <title>

Will try to find the patch that rearranged the sides of the buttons, that would be in the right ballpark of where this change should be done.

(Assignee)

Comment 4

3 months ago

Hey Jimm,

I might have a suggestion to fix this. Not sure if i should needinfo you or Martin Stransky (i see he has done a ton of GTK work)
What if we, instead of https://searchfox.org/mozilla-central/source/widget/gtk/gtk3drawing.cpp#410-442
Do so that we tokenize the decorationLayout string, into the actual button strings.
Or rather 1st we tokenize the string into two strings. Before and after the ':'
Then we do another round of tokenization of both before and after the ':' looking for ','

So if we have : close,maximize,minimize:menu

1st we'd get "close,maximize,minimize" and "menu"
2nd we'd get "close", "maximize", "minimize" and "menu"

That way the need of keeping track of reverse order or not is not needed. we would look for the actual buttons instead.

BUT, i guess there is a reason that it has not been done before?

Flags: needinfo?(jmathies)

Updated

3 months ago
Flags: needinfo?(jmathies) → needinfo?(stransky)

(In reply to Nicklas Boman [:smurfd] from comment #4)

BUT, i guess there is a reason that it has not been done before?

GetGtkHeaderBarButtonLayout() can be fixed for custom button layout but the main task is to propagate the button order to browser layout [1]. You need to use -moz-box-ordinal-group to re-arrange the buttons and @media glue to get the info from toolkit.

[1] https://searchfox.org/mozilla-central/rev/e00ea598e52bbb35f8c45abf9c2eade17962bb5e/browser/themes/linux/browser.css#719

Flags: needinfo?(stransky)
(Assignee)

Comment 6

2 months ago

(In reply to Martin Stránský [:stransky] from comment #5)

GetGtkHeaderBarButtonLayout() can be fixed for custom button layout but the main task is to propagate the button order to browser layout [1]. You need to use -moz-box-ordinal-group to re-arrange the buttons and @media glue to get the info from toolkit.

[1] https://searchfox.org/mozilla-central/rev/e00ea598e52bbb35f8c45abf9c2eade17962bb5e/browser/themes/linux/browser.css#719
Im not sure i follow.

I tried todo something like :
@media (-moz-gtk-csd-reversed-placement) {
.titlebar-close,
.titlebar-max,
.titlebar-min,
.titlebar-buttonbox-container {
-moz-box-ordinal-group: 0;
},

and tried to arrange the order of the buttons. But it would not follow the arrangements i tried.
As i write this, i think that maby i need to do something like (will try this shortly!) :

@media (-moz-gtk-csd-reversed-placement) {
.titlebar-close {-moz-box-ordinal-group: 3;},
.titlebar-max {-moz-box-ordinal-group: 2;},
.titlebar-min {-moz-box-ordinal-group: 1;},
.titlebar-buttonbox-container {
-moz-box-ordinal-group: 0;
},

But still, that would only be a Static solution.
Is not the idea, to read what is set in dconf, and then apply That order to the window buttons?
(IF that is possible, or endgame, to Make that possible)

Flags: needinfo?(stransky)

I think the params for -moz-box-ordinal-group needs to be exported from widget/gtk3 as media values and used in the css.

See this code for inspiration [1] and how is the mCSDCloseButton value exported to JS for instance. You'd need to pass button order from GetGtkHeaderBarButtonLayout() to the js/css so you'd need a new mCSDCloseButtonPosition value which holds the ordinal-group value, export it as atom/media (as well as we do for mCSDCloseButton) and pass it to the appropriate -moz-box-ordinal-group.

[1] https://dxr.mozilla.org/mozilla-central/rev/c2593a3058afdfeaac5c990e18794ee8257afe99/widget/gtk/nsLookAndFeel.cpp#1163

Flags: needinfo?(stransky)

btw. output of GetGtkHeaderBarButtonLayout() is already sorted according to the system setting so you just need to read the button array and create correct mCSD*ButtonPosition values.

(Assignee)

Comment 9

2 days ago

There is something what i guess is trivial that i'm missing.

As you say, the output of GetGtkHeaderBarButtonLayout() is following the order that is set in the system settings.

So i looked at https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items and fiddled with the code example. https://mdn.github.io/css-examples/flexbox/order/order.html#
There if i change the number of the order value it will move the buttons.

Then since i have my buttons ordered as close,maximum,minimum:menu it hits the -moz-gtk-csd-reversed-placement
I figured id play around with button arrangements in the .css file manually to do as i said. But no...

Went from :
@media (-moz-gtk-csd-reversed-placement) {
.titlebar-buttonbox-container,
.titlebar-close {
-moz-box-ordinal-group: 0;
}
}
To something like (one of many-many-many attempts) :
@media (-moz-gtk-csd-reversed-placement) {
.titlebar-buttonbox-container,
.titlebar-close :nth-child(1) {
-moz-box-ordinal-group: 0;
order: 1;
},
.titlebar-max :nth-child(2) {
-moz-box-ordinal-group: 0;
order: 2;
},
.titlebar-min :nth-child(3) {
-moz-box-ordinal-group: 0;
order: 3;
}
}

It rearranged the buttons, but not to what i wanted. It became minimum,maximum,close... Also tried to move the Close button to the middle via setting the order value. No go.

Have also made preparations for a -moz-gtk-csd-custom-placement just in case that is needed, while i was trying to figure out how things where working.
I feel that if i can't manually rearrange the buttons, how would i get it to work per automagic? :)
As i started with, it is something that im missing. or rather i think its the CSS that confuses me. It creates sortof a black layer between the actual gtk painting of the button, from the array of the button layout... Kindof the whole point of this :)

So if you could lend a hand would be great :)

Flags: needinfo?(stransky)
You need to log in before you can comment on or make changes to this bug.