[Experiment] One-liner toolbar script - move buttons and location bar to tabs toolbar

[Aris-t2]

'One-liner' script for Firefox 60+ by Aris

• CAUTION: moving some of the items into palette will break your ui!
• buttons back and forward are moved to tab toolbars start position
• location bar is placed after tabs
• main menu button is placed at tab toolbars end
• own buttons can be added between location bar and overflow button
• navigation toolbar is only visible in customizing mode (optional)
• space at tab toolbars start and end is hidden (optional)
• location bar width is forced to 40% of window width (optional)

// 'One-liner' script for Firefox 60+ by Aris
// buttons back and forward are moved to tab toolbars start position
// location bar is placed after tabs
// main menu button is placed at tab toolbars end
// own buttons can be added between location bar and overflow button
// navigation toolbar is only visible in customizing mode (optional)
// space at tab toolbars start and end is hidden (optional)
// location bar width is forced to 40% of window width (optional)
// CAUTION: moving some of the items into palette will break your ui!

var {Services} = Components.utils.import("resource://gre/modules/Services.jsm", {});
var {CustomizableUI} = Components.utils.import("resource:///modules/CustomizableUI.jsm", {});
var sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);

var Oneliner = {
  init: function() {

    document.getElementById('back-button').setAttribute('removable','true');
    document.getElementById('forward-button').setAttribute('removable','true');
    document.getElementById('PanelUI-button').setAttribute('removable','true');
    document.getElementById('nav-bar-overflow-button').setAttribute('removable','true');
    document.getElementById('urlbar-container').setAttribute('removable','true');

    CustomizableUI.addWidgetToArea("back-button", CustomizableUI.AREA_TABSTRIP);
    CustomizableUI.addWidgetToArea("forward-button", CustomizableUI.AREA_TABSTRIP);
    CustomizableUI.addWidgetToArea("urlbar-container", CustomizableUI.AREA_TABSTRIP);
    CustomizableUI.addWidgetToArea("nav-bar-overflow-button", CustomizableUI.AREA_TABSTRIP);
    CustomizableUI.addWidgetToArea("PanelUI-button", CustomizableUI.AREA_TABSTRIP);

    CustomizableUI.moveWidgetWithinArea("urlbar-container",0);
    CustomizableUI.moveWidgetWithinArea("alltabs-button",0);
    CustomizableUI.moveWidgetWithinArea("new-tab-button",0);
    CustomizableUI.moveWidgetWithinArea("tabbrowser-tabs",0);
    CustomizableUI.moveWidgetWithinArea("forward-button",0);
    CustomizableUI.moveWidgetWithinArea("back-button",0);
    CustomizableUI.moveWidgetWithinArea("nav-bar-overflow-button",499);
    CustomizableUI.moveWidgetWithinArea("PanelUI-button",500);

    document.getElementById("TabsToolbar").insertBefore(document.getElementById("nav-bar-overflow-button"),null);
    document.getElementById("TabsToolbar").insertBefore(document.getElementById("PanelUI-button"),null);

  // style button icon
  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    \
      /* hide navigation toolbar */\
      #main-window:not([customizing]) #nav-bar {\
        position: fixed !important; \
        display: block !important; \
        margin-top: -100px !important; \
      }\
      /* adjust popup position */\
      #PopupAutoCompleteRichResult[autocompleteinput="urlbar"] { \
        margin-top: 65px !important; \
      } \
      /* hide empty space on tabs toolbars start */\
      #main-window:not([customizing]) #TabsToolbar *[type="pre-tabs"] {\
        visibility: collapse; \
      }\
      /* hide empty space on tabs toolbars end */\
      #main-window:not([customizing]) #TabsToolbar *[type="post-tabs"] {\
        visibility: collapse; \
      }\
      /* location bar width (40% of window width) */\
      #main-window:not([customizing]) #urlbar-container {\
        min-width: 40vw !important; \
        width: 40vw !important; \
        max-width: 40vw !important; \
      }\
      /* display overflow button */\
      toolbar:not([overflowing]) > .overflow-button, \
      toolbar[customizing] > .overflow-button { \
        display: -moz-box !important; \
      } \
    \
  '), null, null);

  sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

  }

}

setTimeout(function(){
  Oneliner.init();
},1000);

[Acid-Crash]

Interesting concept. If I'm not mistaken Maxton browser had a similar design. Tried it, noticed few issues:

• When the number of tabs is big List all tabs menu fail to work properly.
• One of my extensions (Smart Proxy - it has a popUp) also fail to show it
• There is no way (or I didn't find it))) to place Overflow menu to the new place

[Aris-t2]

Actually this was a request by a user in my CSS repository, I just wanted to share it, but not include it with the other scripts, because it can break the ui.

[Acid-Crash]

Oh, I see) Well in this case,` this was a neat little experiment.

[Aris-t2]

Well it can be improved ;-) Code updated,

Hiding navigation toolbar seems to break a few popups, but just moving it out of windows visible area will cause at least all tabs button to work again.

[krystian3w]

If I'm not mistaken Maxton browser had a similar design.

IE9 - 11?

[Orriky]

I like very much this script, thanks I removed bookmarks from results, but I can't find a way to increase the Google results and to decrease the history results. Any suggestion will be greatly appreciated

[Aris-t2]

More results in location bar: about:config > browser.urlbar.maxRichResults increase value, restart browser.

Remove history entries from results: Settings > Privacy & Security > Address Bar

[Orriky]

Thanks, however I don't want removing history results at all but I'd like only increasing Google results I set browser.urlbar.maxRichResults to 27 and unfortunately I have only 5 Google results

Also, it would be great if you hide close/minimize/maximize buttons You can use these useful extensions to move that buttons on the vertical toolbar https://addons.mozilla.org/lv/firefox/addon/close-the-window/ https://addons.mozilla.org/en-US/firefox/addon/minimize-the-window/ https://addons.mozilla.org/en-US/firefox/addon/maximize-the-window/

[Aris-t2]

You can add CSS code to the corresponding area and hide those buttons, if you need to.

.titlebar-buttons {
  display: none !important;
}

Don't forget the \ after each line.

There is no preference to increase result numbers of search engine results within location bar results.

[peterwx]

The one-liner i currently use is placed on the navbar. Titlebar and toolbar are hidden(no need with vertical tabs). I have the main menu to the left, then nav buttons, reload, search, history, extensions, overflow menu, pagetitlebar and finally minmaxclosebutton. FF Dev with M3 method. Just to share an alternative oneliner(yes, i know there are many).

[Orriky]

Do you have paste and go in the context menu of the urlbar?

[peterwx]

@Orriky is your question to me? If so yes, but why wouldn't that be the case, it works by default in my system(Win 10).

[Orriky]

Hi, It is a question to anyone use this script. When I enable this script, I don't have that entries anymore

[Aris-t2]

Same here. Looks like Mozillas code to achieve paste and go relies on location bar being in navigation toolbar.

[Orriky]

It doesn't work on Developer 71, at least to me

[Aris-t2]

Fixed