cascadefox/cascade

Is there possible to restore the menu button and make it on the far right

Closed this issue · 4 comments

MrAru commented

Hi there. I found this great firefox theme and it's visually amazing. But I really need the menu button that come with the original Firefox theme. I commented out a few related lines in the theme file https://github.com/andreasgrafen/cascade/blob/98d50efef103b06fd61a3cc80fe9fabfb921c391/userChrome.css#L116-L128, but that didn't work as I expected.

Screenshot_20220210_101156

I would like to ask if it is possible to restore the display of the menu button and have it on the far right side of the title bar? Thanks.

Thanks a bunch and I'm happy you're liking Cascade! c:

The menu button is part of the URL bar which makes it a little tough to move it all the way to the right side. The only way I can think of from the top of my head is a little bit hacky.

#PanelUI-button {
    
    position: fixed;
    top: 4px; right: 0;
    
    display: block;

}

While this works it might clash with other elements that are positioned on the right side of the top bar. You can avoid most issues by setting a padding for the tab container like this.

#TabsToolbar { padding-right: 40px; }

Changes in Action

MrAru commented

Thanks for your quick response and helping! This way does work well. The only tricky thing is, just as you say, there will be overlaps when there are too many elements located to the right.

There are two UI elements that I have found so far that cause overlap: 1) the button for new tabs overlaps the menu button when too many tabs exist,

image

and 2) the mask icon that suggests incognito mode overlaps the menu button when in incognito mode. The latter can be avoided by setting the TabsToolbar property, while for the former, is there any way to achieve the same effect?

I've looked at the source file and it seems that the width of the tab bar is calculated by some property.
https://github.com/andreasgrafen/cascade/blob/98d50efef103b06fd61a3cc80fe9fabfb921c391/userChrome.css#L421-L425
I don't know much about this, but is it possible to avoid overlap between new tab botton and menu button in a similar way (for example, assuming that the menu button take up a certain width)?

MrAru commented

Sorry, I checked the display effect, in both scenarios the menu button is overlapped with other elements.

image

@MrAru I love how you customized tabliss! ❤