Firefox: weird characters showing for some fonts on the SharePoint websites.

If the webpage shows weird characters for some icons with Firefox, it means some fonts couldn't be downloaded successfully. Use the following steps to fix:

Go into about:config and change network.http.referer.defaultPolicy and network.http.referer.defaultPolicy.pbmode from 2 ( strict-origin-when-cross-origin ) to 3 ( no-referrer-when-downgrade , used to be the old default ) 

Firefox backspace as history back

 about:config

Search for backspace and change backspace_action to 0

How to adjust the Firefox tab bar tabbar height and width

 Followed the instruction here:

GitHub - dannycolin/ff-ultra-compact-mode: A Better Compact Mode for Firefox Proton

1. Type about:config in the address bar and press Enter/Return.
2. Click the button accepting the risk.
3. In the search box above the list, type or paste toolkit.legacyUserProfileCustomizations.stylesheets.
4. Double-click the toolkit.legacyUserProfileCustomizations.stylesheets preference to switch the value from false to true.
5. Now, search for browser.compactmode.show and set it to true.
6. Close about:config tab.
7. Open your profile folder (See How do I find my profile?)
8. Go to chrome folder or create it if it doesn't exist
9. Copy/Paste the userChrome.css file from this repository inside the chrome folder.
10. Go to ... | More Tools | Customize Toolbar | Density to Compact

userChrome.css file content:

:root {

  /* Appmenu: Reduce item padding */

  --arrowpanel-menuitem-padding-block: 4px 8px !important;

  /* Tabbar: reduce tab margin */

  --tab-block-margin: 4px 3px !important;

  /* Set minimum width below which tabs will not shrink (minimum 22px) */

  --my-tab-min-width: 10px;

}

/* Essential rule for reducing minimum tab width */

.tabbrowser-tab:not([pinned]){

  min-width: var(--my-tab-min-width) !important;

}

/* Optional rules for widths below 40px */

/* Reduce icon's right margin for less wasted space */

.tabbrowser-tab:not([pinned]) .tab-icon-image {

  margin-right: 1px !important;

}

/* Adjust padding for better centering and less wasted space */

.tabbrowser-tab:not([pinned]) .tab-content{

  padding-left: calc((var(--my-tab-min-width) - 22px)/2) !important;

  padding-right: calc((var(--my-tab-min-width) - 22px)/2) !important;

}

/* Reduce close button's padding for less wasted space */

.tab-close-button.close-icon {

  padding-left: 0 !important;

  padding-right: 3px !important;

}

/* Tab: Reduce height */

.tabbrowser-tab {

  min-height: 24px !important;

}

/* URLBar: Fix vertical alignment */

#urlbar[breakout=true]:not([open="true"]) {

--urlbar-height: 20px !important;

--urlbar-toolbar-height: 24px !important;

}

/* Toolbar: Reduce spacing */

#urlbar-container {

--urlbar-container-height: 30px !important;

  margin-top: 0 !important;

}

/* Reload Button: Fix vertical alignment */

#reload-button {

margin-block-start: -2px !important;

}

.tabbrowser-tab .tab-context-line {

    margin: -3px 0px !important;

    background-color: #76B900;

    height: 3px;

}

.tabbrowser-tab[selected="true"] .tab-context-line {

    margin: -3px 0px !important;

    background-color: red;

    height: 3px;

}

How to adjust firefox address bar and search bar width

If the bookmark tool bar is wrapped and you don't like that, you can use the following method to reduce the address bard and the search bar width:

You can set a maximum width for both/each of the bars with code in userChrome.css below the default @namespace line. With this method, the widths will remain fixed until you change them in the userChrome.css file.

    The customization files userChrome.css (interface) and userContent.css (websites) are located in the chrome folder in the user profile folder.
        See - http://kb.mozillazine.org/userChrome.css
        Also see - http://kb.mozillazine.org/Editing_configuration 

Below this line in userChrome.css:
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

add one or both of these lines, setting the pixels (i.e., 400px, 200px) to the width you want; include the # sign at the beginning of the line(s):

#urlbar-container { max-width: 400px !important; }


#search-container { max-width: 200px !important; }

Firefox HiDPI support

about:config
Change layout.css.devPixelsPerPx to 1.7 for HiDPI

How to change firefox Find/Search text background color

Type about:config to the address bar.

Create two entries: (Right click | New | String)

ui.textHighlightBackground, value #0000FF
ui.textSelectBackgroundAttention, value #FF0000

Other properties to change:
    ui.textHighlightBackground
    ui.textHighlightForeground
    ui.textSelectBackground
    ui.textSelectForeground 

Best browser add-ons/addons/plugins/extensions, Firefox, Chrome, Microsoft Edge

Microsoft Edge: 

  - Ebates, online shopping

  - MultiLogin

  - Fast Tab Switcher

  - SwitchyOmega

  - Tabliss

  - Block site

  - Enhancer for YouTube

  - Previous Tab

  - JUST THE HOURS

  - Just a clock - minutes

  - Alt number to switch tabs: https://github.com/Wsine/AltNumberTab (git clone the repo and load unpacked extension)

Firefox:
  - Ebates, online shopping
  - Simple Translate, website translator
  - Proxy Switcher, Define proxy server for each protocol

  - Quick Tab Switcher

  - Tabliss

  - Stylebot
  - Block site

  - Enhancer for YouTube

  - https://addons.mozilla.org/en-US/firefox/addon/alt-number-to-switch-tabs/ 

  - Most Recent Tab

  - User-Agent Switcher, add: Linux/Chrome: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

  - Clock-minutes

  - Clock-hours

How to change Firefox default zoom

Preferred way: use Zoom Page addon

Second way:
Type about:config in the address bar. Then search for 'layout.css.devPixelsPerPx'. Change it to 1.7.