Status Line as in Vimperator/Pentadactyl/VIM?

Question

Status Line as in Vimperator/Pentadactyl/VIM?

cari66ean opened this issue 7 years ago · 36 comments

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.

Answer 1 · 2017-12-06T10:05:53.000Z

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 : )

Answer 2 · 2017-12-22T02:14:12.000Z

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

Answer 3 · 2018-01-18T08:03:29.000Z

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

Answer 4 · 2018-02-03T02:57:51.000Z

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

Answer 5 · 2018-02-03T15:42:05.000Z

@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

Answer 6 · 2018-04-30T23:59:18.000Z

@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.

Answer 7 · 2018-05-01T01:15:08.000Z

@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. :)

Answer 8 · 2018-05-17T21:05:53.000Z

@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;
}

Answer 9 · 2018-05-20T04:37:41.000Z

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

Answer 10 · 2018-05-20T08:27:21.000Z

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

Answer 11 · 2018-05-20T08:30:13.000Z

#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 :)

Answer 12 · 2018-05-21T10:04:54.000Z

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

Answer 13 · 2018-05-21T19:26:06.000Z

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

Answer 14 · 2018-05-21T19:33:19.000Z

@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.

Answer 15 · 2018-05-21T21:38:48.000Z

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.

Answer 16 · 2018-05-22T07:13:00.000Z

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

Answer 17 · 2018-05-22T08:46:56.000Z

@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)

Answer 18 · 2018-05-22T09:11:15.000Z

@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 :)

Answer 19 · 2018-05-22T21:32:39.000Z

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

Answer 20 · 2018-05-22T22:32:00.000Z

@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 ?

Answer 21 · 2018-06-30T15:33:56.000Z

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

Answer 22 · 2018-06-30T17:22:01.000Z

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

Converting it to our format might be tricky, too.

Answer 23 · 2018-06-30T19:32:36.000Z

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

Answer 24 · 2018-06-30T19:49:25.000Z

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

Answer 25 · 2018-06-30T21:11:34.000Z

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.

Answer 26 · 2018-07-02T06:48:01.000Z

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?

Answer 27 · 2018-07-02T20:58:29.000Z

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 ?

Answer 28 · 2018-07-02T21:00:37.000Z

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.

Answer 29 · 2018-07-19T08:53:16.000Z

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 :/

Answer 30 · 2018-08-27T17:45:08.000Z

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

Answer 31 · 2018-08-27T19:58:33.000Z

Nope it doesnt, command prompt opens above it

Answer 32 · 2018-08-28T04:06:52.000Z

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

Answer 33 · 2019-11-29T18:10:24.000Z

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;
}

Answer 34 · 2020-01-09T15:08:11.000Z

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

Answer 35 · 2020-01-15T15:35:25.000Z

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.

Answer 36 · 2020-04-09T06:03:02.000Z

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;
}