Изменение интерфейса

На примере librewolf(firefox). Hotkeys в скобках удобнее чем искать кнопочки.

Предварительные настройки

Настраиваем css браузера под себя с помощью файлика userChrome.css в профиле пользователя. Вводим в поиск about:config ищем toolkit.legacyUserProfileCustomizations.stylesheets и переводим в true.

В поиске about:support > Profile Folder(можно найти через ctrl+f) > Open Folder. Если Librewolf, то в обычных настройках about:preferences#librewolf > open user profile directory.

В открывшейся директории нужно создать папку “chrome” и в ней файл ”userChrome.css”, важен именно такой регистр символов.

Убираем лишнее

В браузере открываем инструменты разработчика (ctrl+shift+I, f12). Крайняя слева сверху кнопка позволяет выбрать элемент на странице браузера (ctrl+shift+С). Чтобы стала доступна возможность выбирать и элементы браузера, а не только окно с сайтами, нужно нажать три точки справа сверху панели(f1). В правой колонке нас интересуют галки Enable browser chrome ... и Enable remote debugging.

Открываем Browser Toolbox - menu > More tools(Developer) > Browser Toolbox(Ctrl + Alt + Shift + I).

Выбираем нужный элемент, в окне inspector смотрим id элементов. Если нужно выбрать пункт в выпадающем меню, нажимаем три точки справа - Disable popup auto-hide.

Используем id, чтобы скрыть неиспользуемые элементы:

    #star-button-box {
      display: none !important;
    }


    #appMenu-new-private-window-button2 {
      display: none !important;
    }
    #appMenu-bookmarks-button {
      display: none !important;
    }
    #appMenu-history-button {
      display: none !important;
    }
    #appMenu-passwords-button {
      display: none !important;
    }


    #context-bookmarkpage {
      display: none !important;
    }
    #context-openlinkinusercontext-menu {
      display: none !important;
    }
    #context-openlinkprivate {
      display: none !important;
    }
    #context-bookmarklink {
      display: none !important;
    }

Вертикальные вкладки

Ставим расширение Tree Style Tab

Чтобы убрать горизонтальные вкладки можно добавить в userChrome.css строку:

#TabsToolbar {visibility: collapse;}

Но можно добавить функциональности:

.tabbrowser-tab {
  visibility: collapse;
}
.titlebar-button {
  height: 27px !important;
}
#nav-bar {
  margin-top: -42px;
  margin-right: 140px;
  box-shadow: none !important;
}

[uidensity="compact"]:root .titlebar-button {
  height: 32px !important;
}
[uidensity="compact"]:root #nav-bar {
  margin-top: -32px;
}

#titlebar-spacer {
  background-color: var(--chrome-secondary-background-color);
}
#titlebar-buttonbox-container {
  background-color: var(--chrome-secondary-background-color);
}
.titlebar-color {
  background-color: var(--toolbar-bgcolor);
}

#main-window[inFullscreen="true"] #sidebar-box,
#main-window[inFullscreen="true"] #sidebar-box + splitter {
    visibility: collapse;
}

#sidebar-box #sidebar-header {
  display: none !important;
}

Горизонтальные вкладки скрыты, в full-screen вкладки будут автоматически скрываться.

Перезапускаем браузер и управляем видимостью вкладок с помощью F1.

Stylus

Также для изменения css отдельных страниц есть удобное расширение Stylus Простой пример использование - выставление доступных готовых css для смены темы сайта на темную версию.

Ссылки

Изменение интерфейса

Browser Toolbox

Вертикальные вкладки