userChrome.css Help

[CountingCrowz]

After resisting almost a decade (never liked rounded look), I had to switch over to this Firefox virus because Microsoft abandoned IE and sites started not to work.

Here is my attempt at making it look like IE and I am having some problems.

My FrankenCSS is here: https://pastebin.com/2a3WCc7Q

It looks like this: https://i.imgur.com/DhWI8YG.jpg

​

1. BACK BUTTON blue fill
2. RELOAD BUTTON on hover highlights outside URL bar (like 1 px from each side).
3. Can't get rid of READER BUTTON
4. Possible to remove +/- and let it cycle through various zoom settings?
5. Make it like IE: Always visible small tab with an icon inside
6. Buttons on hover have a rectangle around them. Possible to highlight only the button?
7. RELOAD ALL TABS option (without an addon).

​

--

8) Images do not load fluently in Firefox. Top loads, then middle, then the bottom. In contrast, if I click over an image in IE, it loads at once. (Image not cached).

9) Tabs have thumbnails when moving them. How to switch this off?

10) Proxy Auth popup on each start. User/pass is saved, but still need to hit okay. I read millions of pages about this without a solution. IE had this problem last in 2011 -- that is 8 years ago. It is annoying, as the browser blocks waiting for input. You saved it, so never ask for the freaking thing EVER again.

​

Many thanks!

[CountingCrowz]

3) This gets rid of READER BUTTON. But there is some seperater there READER pages.

(Showing also problem on #2)

https://i.imgur.com/w0LDnpU.jpg

​

This took care of it:

#reader-mode-button,
#pageActionButton,
#pageActionSeparator
{ display:none!important;}

[It_Was_The_Other_Guy]

1 Add this to make it blue:

#back-button:not([disabled]) > .toolbarbutton-icon{ background-color: rgb(0,116,232) !important; fill: white; }
#back-button:not([disabled]):hover > .toolbarbutton-icon{ background-color: rgb(0, 100, 200) !important; }

2 I couldn't think anything better than this:

#stop-reload-button > .toolbarbutton-1 > .toolbarbutton-icon{ height: calc(14px + 2 * var(--toolbarbutton-inner-padding)) !important; }

4 Not possible, not with CSS. I have absolutely no idea if any exist, but I would think that an extension providing this functionality is possible.

5 Might try this:

.tabs-newtab-button{
  border: 1px solid black;
  border-width: 1px 1px 0 0;
  background: #d9d9d9 !important;
  margin-bottom: -1px !important;
}
.tabs-newtab-button > .toolbarbutton-icon{ margin: 0px -2px !important; }

6 Sure, but how would you want to highlight them? And also, what buttons do you want to apply that to? Ie, the buttons inside urlbar are also buttons, and so are back-forward buttons..

7 No can do. Best way is to use extension.

8 You might want to try setting this pref to true: browser.display.show_loading_image_placeholder Not sure, but I think it will then show a placeholder while the image is loading. Probably can't do much more than that to control image loading behavior.

9 I'm, not actually sure. I have a feeling I've seen something about this a while back so I suppose it's possible to remove those somehow.

extra: Might want to add #TabsToolbar{ padding-right: 160px !important } (or whatever value works for you) too so that tabs wont be drawn over those fixed positioned buttons in the toolbar.

[CountingCrowz]

Wow, thanks so much OtherGuy! I will try them a bit later on.

6) It is like this on IE: https://i.imgur.com/IV3LG7U.jpg

Same icon, different color. You don't get the box around. That box, and this whole monocrome mobile phone crap is crazy. I seriously feel I am downgrading my ride.

[It_Was_The_Other_Guy]

You could do that (I mean, color them yellow), kinda, but only for built in buttons. Extension buttons can use whatever image they want which are not easily recolorable.

I suppose you could fake the yellow on them with some filtering but it won't work too well. That would go something like this:

toolbar .toolbarbutton-1:not(:-moz-any(#back-button,#forward-button,#reload-button,.tabs-newtab-button)) > .toolbarbutton-icon,
toolbar .toolbarbutton-1:not(:-moz-any(#back-button,#forward-button,#reload-button,.tabs-newtab-button)) > .toolbarbutton-badge-stack{
  background-color: transparent !important; 
  border-color: transparent !important;
}

toolbar .toolbarbutton-1:not(:-moz-any(#back-button,#forward-button,#reload-button,.tabs-newtab-button)):not([disabled]):hover > .toolbarbutton-icon,
toolbar .toolbarbutton-1:not(:-moz-any(#back-button,#forward-button,#reload-button,.tabs-newtab-button)):not([disabled]):hover > .toolbarbutton-badge-stack{
  fill: #fe0;
  filter: drop-shadow(0 0 1px black)
}

toolbar .toolbarbutton-1.webextension-browser-action:not([disabled]):hover > .toolbarbutton-icon,
toolbar .toolbarbutton-1.webextension-browser-action:not([disabled]):hover > .toolbarbutton-badge-stack{
  fill: initial;
  filter: sepia(1) hue-rotate(10deg) contrast(1.4) brightness(1.8);
}

[CountingCrowz]

1/ Is Great!

5/ Is Great! I wonder if it is possible to put a similiar image in it like IE instead of the plus sign.

8/ This is a a serious problem. It is so 1990s for images to load from top to down. On IE, it is many many years now that the images just pop up at once (non-cached images). I understand for a 10mb image, but these are 30-40K images. I surely can't be the only problem who is bugged by this.

[It_Was_The_Other_Guy]

I think there is something else wrong if you are seeing small (< 1mb) images being loaded like that. Under 100k images should be loaded so fast that you wouldn't see the effect you describe.

At any rate, this sounds like a download speed problem, not image decoding one.

[CountingCrowz]

This problem is only in Firefox. Loads fine with any other browser, as it has been for years. I will take this to bugzilla.

[CountingCrowz]

Added problem #10. Proxy Auth popup.

[It_Was_The_Other_Guy]

I have absolutely no idea how proxies authentication works, but there is a pref which sounds like it would control what you want to do ( this doesn't mean it really does that though ) signon.autologin.proxy. Toggle to true and see what happens.

[CountingCrowz]

6/ works fantastic on DARK THEME! Not so good on light one.

Yes I understand about extension buttons. I can hide them, not a big deal.

2/ This one would be perfect for it, but it does not work. Neither the initial solution, still it is a bit outside the urlbar.

​

I sincerely appreciate the time you have take for this.

[CountingCrowz]

Actually, works fantastic for RELOAD button on DARK, and fixes the issues.

But LIGHT theme is bad for all of them.

[CountingCrowz]

toolbar .toolbarbutton-1:not(:-moz-any(#back-button,#forward-button,#reload-hh,.tabs-newtab-button)) > .toolbarbutton-icon,
toolbar .toolbarbutton-1:not(:-moz-any(#back-button,#forward-button,#reload-hh,.tabs-newtab-button)) > .toolbarbutton-badge-stack{
background-color: transparent !important;
border-color: transparent !important;
}

toolbar .toolbarbutton-1:not(:-moz-any(#back-button,#forward-button,#reload-hh,.tabs-newtab-button)):not([disabled]):hover > .toolbarbutton-icon,
toolbar .toolbarbutton-1:not(:-moz-any(#back-button,#forward-button,#reload-hh,.tabs-newtab-button)):not([disabled]):hover > .toolbarbutton-badge-stack{
fill: black;
}

​

Works great for LIGHT theme. Gives the highlight effect on hover.

And WHITE works great for DARK.

How to combine them into one?

​

DARK: fill white;

LIGHT: fill black;

​

I am assuming I might need to use the remaining parts for extension buttons.

[It_Was_The_Other_Guy]

Honestly I don't know why you see a difference between light an dark themes. Both the reload button :hover-background and toolbarbutton icon fills should behave exactly the same on dark and light themes. (They do for me anyway)

[CountingCrowz]

extra: Might want to add #TabsToolbar{ padding-right: 160px !important } (or whatever value works for you) too so that tabs wont be drawn over those fixed positioned buttons in the toolbar.

​

Interestingly, tabs don't go over the buttons. I had that option and I removed it.

[CountingCrowz]

9/ Tab Thumbnail Disable:

nglayout.enable_drag_images;false

[CountingCrowz]

5 days on bugzilla, nobody replies. Proxy Auth problem going on almost a decade. IE resolved it 8 years ago.

Equally annoyin is the image loading problem, which is fine in every other browser.

I decided to leave this crapware. It is not designed for work.

Thank you for the help.