MozillaZine

[Ext] Classic Theme Restorer (Fx29-56/Waterfox/Basilisk)

Announce and Discuss the Latest Theme and Extension Releases.
marty60
 
Posts: 475
Joined: March 21st, 2012, 7:09 am

Post Posted June 8th, 2018, 8:57 am

Something was interfering. You had combined some of the code and I forgot to delete several of the previous lines. After doing that it's perfect, I've got the full bar and it unhides below the web page scroll bar. It's almost like we never lost the addon bar, thanks again Aris.

Benjamin Markson

User avatar
 
Posts: 354
Joined: November 19th, 2011, 3:57 am
Location: en-GB

Post Posted June 12th, 2018, 5:35 am

Thank you for the idea of using #PersonalToolbar as a bottom Status/Add-on bar. It works really well:
Image

I am no CSS expert and my code seems to look somewhat different to everyone else's:
Code: Select all
#main-window:not([inFullscreen]) #content-deck {margin-bottom: 55px !important;}
#main-window[inFullscreen] #content-deck {margin-bottom: 0px !important;}

#TabsToolbar
{
   position: fixed !important;
   bottom: 26px !important;
   width: 100% !important;
   border-bottom: 1px solid rgb(160, 160, 160) !important;
   background-color:  rgb(212, 208, 200) !important;
}
#tabbrowser-tabs {width: 96% !important;}
#TabsToolbar[inFullscreen]
{
   display: none !important;
   bottom: 0px !important;
}
#navigator-toolbox:hover #TabsToolbar {display: inline !important;}

#PersonalToolbar
{
   direction: rtl !important;
   width: 100% !important;
   padding: 5px !important;
   position: fixed !important;
   height: 26px !important;
   bottom: 0px !important;
}
.browserContainer>statuspanel
{
   left: 4px !important;
   bottom: 0px !important;
   transition-duration: 0s !important;
   transition-delay: 0s !important;
}
.browserContainer>statuspanel>.statuspanel-inner>.statuspanel-label
{
   margin-left: 0px !important;
   border: none !important;
   padding: 0px !important;
   margin-bottom: 4px !important;
}
window[inFullscreen] .browserContainer>statuspanel[type="overLink"] .statuspanel-label {display:none !important;}

One thing I've not had any problem with are the scrollbars. I think the secret is to adjust the #content-deck bottom margin. This seems to lift the web page (including its scrollbars) away from the bottom of the browser space. As a consequence the bottom px values for the toolbars also become more intuitive.

Where I have a small glitch is with the #navigator-toolbox:hover when in full screen. While this works the hover only triggers when the mouse it at the top of the screen and not at the bottom. As I like to have my tabs on the bottom of the screen this means I can't click the tabs (under FF52 + Tab Mix Plus I don't have that problem).

To be honest this is getting a bit marginal, I don't use full screen very much, and when I do I don't tend to go switching tabs. However, if there is a simple solution it would be nice to include that functionality.

Ben.
XUL is dead. Long live the Google Chrome Clones.

Aris

User avatar
 
Posts: 3159
Joined: February 27th, 2011, 10:14 am

Post Posted June 12th, 2018, 9:54 am

@Benjamin

Your issue with tabs toolbar in fullscreen can easily be solved. You are using position rule "position: fixed", so it does not rely on #navigator-toolbox node.

Remove this from your code:
Code: Select all
#TabsToolbar[inFullscreen]
{
   display: none !important;
   bottom: 0px !important;
}
#navigator-toolbox:hover #TabsToolbar {display: inline !important;}


Add this instead:

Code: Select all
#TabsToolbar[inFullscreen] {
   bottom: -24px !important;
   opacity: 0 !important;
}

#TabsToolbar[inFullscreen]:hover {
   bottom: 0px !important;
   opacity: 1.0 !important;
}

Benjamin Markson

User avatar
 
Posts: 354
Joined: November 19th, 2011, 3:57 am
Location: en-GB

Post Posted June 12th, 2018, 12:53 pm

Cool beans, I can see that. I've gone for this:
Code: Select all
#TabsToolbar[inFullscreen]
{
   bottom: 0px !important;
   opacity: 0 !important;
}

#navigator-toolbox[inFullscreen]:hover #TabsToolbar,
#TabsToolbar[inFullscreen]:hover
{
   opacity: 1.0 !important;
}

This makes #TabsToolbar appear when the mouse goes top or bottom - which is the Tab Mix Plus behaviour - although, I've not worked out how to make #nav-bar appear when the mouse goes to the bottom.

I've also added this:
Code: Select all
#main-window[inFullscreen] #navigator-toolbox:hover ~ #content-deck,
#main-window[inFullscreen] #TabsToolbar:hover ~ #content-deck
{
   margin-bottom: 29px !important;
}

Which stops the scrollbars from going behind #TabsToolbar - more aesthetic than strictly necessary in full screen.

Ben.
XUL is dead. Long live the Google Chrome Clones.

Aris

User avatar
 
Posts: 3159
Joined: February 27th, 2011, 10:14 am

Post Posted June 13th, 2018, 1:19 am

Benjamin Markson wrote:... I've not worked out how to make #nav-bar appear when the mouse goes to the bottom.

...


I don't think this is possible, if you keep your #nav-bar on top. The trick with tabs toolbar only works, because you moved it to the bottom. It internally still is a part of the top #navigator-toolbox, but additionally can be accessed separately because of tab toolbars "fixed bottom position". Even if #nav-bar would appear (on top?) once mouse cursor hits windows bottom area, it would still disappear on the way the cursor takes to the top.

In case you want to experiment with the complete #navigator-toolbox at the bottom, try this (without any other code you are using):

Code: Select all
#navigator-toolbox {
  -moz-box-ordinal-group: 100 !important;
}

#main-window[sizemode="fullscreen"]:not([inDOMFullscreen="true"]) #PersonalToolbar {
  visibility: visible !important;
}

#main-window[sizemode="fullscreen"]:not([inDOMFullscreen="true"]) #toolbar-menubar {
  visibility: visible !important;
}

Return to Extension/Theme Releases


Who is online

Users browsing this forum: No registered users and 4 guests