Status Line as in Vimperator/Pentadactyl/VIM?

[cari66ean]

Hi,

Is there a way to continuously display a status line at the bottom as it was in Vimperator/Pentadactyl/VIM?

The tridactyl userChrome.css with the auto-hide nav-bar and tab-bar was a bit cumbersome to use so I have made a custom userChrome.css that only shows me a single bar (firefox menu button, tab-bar and addon buttons) like this:

I like the layout as it is now but I don't like not seeing the current URL. I can bring this up using "O" / ":open" so not that much of a big deal. But what I am really missing is the SSL/TLS status. Vimperator/Pentadactyl changed the colors of the status bar etc.

[bovine3dom]

It's totally possible everywhere we can display the command line.

The hold up is that we've been thinking about rewriting the command line to make it easier to add things like this; otherwise this is definitely on our to-do list.

Feel free to make a PR to add your userChrome to static/userChrome-tabs.css, I imagine quite a few people will want something similar : )

[dannycolin]

Have a look at my custom userChrome.css. I've moved the
navbar at the bottom and both the navbar and the tabbar are extra-compact.

Oh and here's the code

[zepto88]

@D33PROOT3D Do you mind sharing your userChrome.css ? :)

[cmcaine]

@dannycolin I like your css :) Can we include it as an alternative in our static directory?

[dannycolin]

@cmcaine Yes. Of Course. But keep in mind that userChrome.css can be deprecated at any moment by Firefox. https://bugzilla.mozilla.org/show_bug.cgi?id=1431962#c3

[osleg]

@dannycolin Your chrome is awesome! <3
The only thing is, not sure whether it possible, but when you type something in the address bar, any chance to have the dropdown with history links and suggestions to open upside inside down to have them on screen. Cuz right now they are moved below the screen bottom edge and are quire unuseful.

[dannycolin]

@osleg The only thing is, not sure whether it possible, but when you type something in the address bar, any chance to have the dropdown with history links and suggestions to open upside inside down to have them on screen.

Sorry I can't say why it doesn't auto-move it above the navbar anymore. Personally, I've stopped using that script for quite some time now. I've got fed up that it breaks every time Firefox was updated. :\

Maybe someone on r/firefoxcss would be able to help you. Hope would find the solution. :)

[frenchbeard]

@osleg a hacky solution if you still have the same problem, but still something to look into:

#PopupAutoCompleteRichResult {
        height: 32em !important;
        /* to go above the navbar, to tweak depending on your navbar size */
        margin-top: calc(-32em - 20px) !important;; 
        margin-left: 30px !important;
        width: var(--searchbar-width) !important;
        background-image: none !important;
}

#PopupAutoCompleteRichResult .autocomplete-richlistbox > scrollbox {
        overflow-y: auto !important;
}

[polyzen]

@frenchbeard, unfortunately doesn't seem to work for me on Linux/Fx60.0.1. See #210 (comment).

[osleg]

@frenchbeard Worked perfectyl for me, thanks!
(edit)
Well almost perfectly but not something critical :)

[osleg]

#PopupAutoCompleteRichResult {
        height: 32em !important;
        margin-top: calc(-32em - 20px) !important;; 
        width: var(--searchbar-width) !important;
        background-image: none !important;
}

#PopupAutoCompleteRichResult .autocomplete-richlistbox > scrollbox {
        overflow-y: auto !important;
}

That works perfectly ^ had to remove the margin-left and the comment for it to work :)

[madduck]

What exactly is this userChrome.css snippet supposed to do? I see absolutely no effects whatsoever…

[bovine3dom]

@frenchbeard I edited your post to fix the comment - CSS uses /* this style only */ and // other kinds aren't supported.

[polyzen]

@madduck, from his comment: https://imgur.com/a/epy6I

I've moved the navbar [to] the bottom and both the navbar and the tabbar are extra-compact.

[madduck]

Thanks, @polyzen. I also have my nav bar at the bottom (though the tab bar on the right): https://gist.github.com/madduck/d8e99046f9b53a1d1a5646b7a47e3034

I was wondering about that #PopupAutoCompleteRichResult snippet, as I cannot figure out what that's supposed to do.

[osleg]

That makes the autocomplete popup open upward. Without that it hide under the bottom edge of the screen

[frenchbeard]

@bovine3dom Sorry for the typo, my vim config doesn't seem to like multi-line comments on a single line, gotta change that for css :)

@madduck The PopupAutoCompleteRichResult is the class of the "box" which pops up on nav-bar auto-complete suggestion, and, by default, under the urlbar. Until a couple of minor versions (don't recall which triggered the change), it seemed to handle the switch of the urlbar to the bottom nicely (auto-popped it on top), but now it seems to need that margin "hack" to pop above not below. If you don't need it, all the better to you :)

@osleg the "margin-left" shouldn't have caused any problem, it's supposed to match the size of the urlbar (in my config, at least, guess it depends on the gap between the left side of the viewport and the beginning of the urlbar)

[osleg]

@frenchbeard in my case it moved the entire popup to the right, also somewhy it moved it about 20% of the screen size instead of 30px but anyway without it it works perfectly and matches the size of input :)

[madduck]

Thanks @frenchbeard, that makes perfect sense and the snippet also works for me.

[frenchbeard]

@osleg good to know, may be linked to my... "experimenting" with my gtk theme, the margin needed be there to match on my part...

@madduck glad to hear that.

One thing still missing from the previous status line, and I don't have a clue how (or if it is even possible) to display it in firefox natively is the number of currently open tabs (sometimes reminded me of the need to... clean :) ). If anyone knows a way, I'd be glad to find out.
I'm currently using Tab Count Icon, couldn't find the source besides in the xpi, but seems to do the job and just that, which gives the following look : https://i.imgur.com/SbVhyd9.png

@D33PROOT3D is that what you may have been looking for ?

[timokau]

Would it be possible to include @dannycolin's theme in tridactyl so that it can be applied with set theme?

[bovine3dom]

Probably. I'm concerned that it's quite fragile if it has broken once already.

Converting it to our format might be tricky, too.

[dannycolin]

@bovine3dom is right. With the removal of XUL, it'll probably break again. Any complex userChrome.css would be hard to maintain.

[timokau]

That's a shame. I very much prefer the navbar at the bottom and the compact tabs are nice as well.

[bovine3dom]

so that it can be applied with set theme?

FWIW, it would live in guiset with the current chrome settings. I'd be happy to accept a PR that allowed you to change navbar etc position with that.

[osleg]

Probably. I'm concerned that it's quite fragile if it has broken once already.

It seems like it got broken already.

with Firefox 61.0 starting it shows either grey screen or 1 tab without navigation/tabbar. No way to change tabs or do anything else.
Commenting this part:

#navigator-toolbox {
    /* Move navbar to bottom */
    display: contents !important;
}

allows FF to start again but the navbar is back at top again.

Any ideas how to fix?

[frenchbeard]

Same here, didn't find any way to fix it. At first thought tree style tab was responsible due to a (way too) large number of open tabs, but the 61 version was the reason. Don't have time to look into it until this week-end, but I'm not that hopeful...
Still on this topic, any news regarding the API functionnalities required to manage the UI in a "better" way than through userChrome.css, or still not on the roadmap ?

[bovine3dom]

We haven't been talking to Mozilla about GUI APIs at all. I strongly suspect they would be against the kind of things we want to do. I imagine the hordes of TST users badger them regularly to no avail.

[osleg]

After some tinkering I made the GUI look like that

Code is here https://gist.github.com/osleg/e95cbe9219a84a1d73cb0bf9480ec70f

The only thing I failed to do is to make navbar and tabbar same height... somewhy :/

[James-Firth]

@osleg doesn't this hide the tridactyl command prompt?

[osleg]

Nope it doesnt, command prompt opens above it

[James-Firth]

Hm, I must have some weird combination that messed it up on my laptop.

[JulioJu]

Note: starting of Firefox 68, PopupAutoCompleteRichResult is renamed urlbar-results . See https://www.reddit.com/r/FirefoxCSS/comments/bpn4yv/680b1_popupautocompleterichresult_renamed/

Note also that starting of Firefox 69, userChrome.css and userContent.css are disabled by default. They should be enabled. See https://www.ghacks.net/2019/05/24/firefox-69-userchrome-css-and-usercontent-css-disabled-by-default/

My final solution is at https://github.com/JulioJu/vimrc/blob/master/dotFilesOtherSoftwareVimCompliant/FirefoxFolderChrome/userChrome.css . The bar with the omnibar and plugins icons are at the bottom of the screen. The tab bar is also on the bottom of the screen, on top of the omnibar. And the address bar autocomplete works.

/* Thanks this rule, tab bar and omnibar are ate the bottom of the screen */
#navigator-toolbox {
  -moz-box-ordinal-group: 2;
}

/*
 * Following is to have the Adress bar autocomplete that appears on the top
 * of the bars
 * Learn more about adress bar autocomplete:
 * https://support.mozilla.org/en-US/kb/address-bar-autocomplete-firefox
 */
#urlbar-results {
  margin-top: calc(-32em - 20px) !important;
  /* background-image: none !important; */
  background-color: black !important;
  color: white !important;
}

[pmaziere]

Starting with FF72.0 the various solutions described above did not work anymore for me.
I tried to find a way that reuses pieces of MrOtherGuy/firefox-csshacks repo and is described in MrOtherGuy/firefox-csshacks#27

[JulioJu]

Hi !

Starting of Firefox 72, the minimal configuration to have tab and url bar on bottom of the screen, and have the popup suggestion on top of the tabar is:

/* Bring the browser window to the top */
#browser {
  -moz-box-ordinal-group: 0;
}

/* Open the popup on top of tabar */
#urlbar-container .urlbarView {
  top: unset !important;
  bottom: 74px;
}

There are also more solutions at

https://www.reddit.com/r/FirefoxCSS/comments/encagv/move_url_bar_to_bottom_in_ff72/

But as of your link @pmaziere there are more complicated and add more customization.

[JulioJu]

For Firefox 75, following works:

/* Bring the browser window to the top */
#browser {
  -moz-box-ordinal-group: 0;
}

/* Open the popup on top of tabar */
#urlbar-container .urlbarView {
  bottom: 497px;
  background-color: black;
}