Добавить две кнопки: для открытия журнала и закладок в боковой панели

js90 · №1

Неудобно снимать руку с мышки и тащить на хоткей ctrl+b или ctrl+h.

Сейчас боковая панель выглядит так
https://i.imgur.com/mJVhvC7.png

В ней вертикальный список табов. Панель расширяется при наведении курсора на неё, а теряя фокус, сужается обратно (реализовано через CSS).
Нужно добавить кнопки на nav-bar второй и третьей по счету слева, чтобы удобно переключать содержимое сайд-бара между историей, закладками и табами. Стандартный переключатель требовал лишний действий, да и мешался там, я его выпилил через CSS.

Поискал плагины - все устарели. Вот например: https://addons.mozilla.org/en-US/firefox/addon/history-bookmarks-sb-button/

Отредактировано js90 (11-06-2018 23:37:04)

Vitaliy V. · №2

вот там есть отдельно как раз такие кнопки https://forum.mozilla-russia.org/viewto … 26#p757726
весь стиль не нужно только от /*Кнопки Закладки и Журнал*/ и до след. коммент.

js90 · №3

Vitaliy V.
Спасибо большое, работает. Правда при наведении курсора на кнопку длинные кракозябры показывало из-за криллицы, поэтому я исправил тултипы в коде на латиницу.

Скопирую код в этот тред:

Выделить код

Код:

vbox#browser-bottombox {
    -moz-binding: url("data:text/xml;charset=utf-8,<bindings xmlns='http://www.mozilla.org/xbl' xmlns:xul='http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul' xmlns:xbl='http://www.mozilla.org/xbl'><binding id='buttons'><implementation><constructor><![CDATA[ var CustomizableUI = window.CustomizableUI; if (!CustomizableUI) { try { CustomizableUI = Components.utils.import('resource:///modules/CustomizableUI.jsm', {}).CustomizableUI; } catch(e) { return; } } var _getWidget = (id) => { var widget = CustomizableUI.getWidget(id); if (!widget || widget.provider != CustomizableUI.PROVIDER_API) return true; return false; }; try { let id = 'add-view-history-sidebar-button-for-ofizer'; if (_getWidget(id)) { CustomizableUI.createWidget({ id: id, label: 'History Sidebar', tooltiptext: 'View History Sidebar', onCommand: function(event) { var win = event.target.ownerDocument.defaultView; win.SidebarUI.toggle('viewHistorySidebar'); } }); } } catch(e) {} try { let id = 'add-view-bookmarks-sidebar-button-for-ofizer'; if (_getWidget(id)) { CustomizableUI.createWidget({ id: id, label: 'Bookmarks Sidebar', tooltiptext: 'View Bookmarks Sidebar', onCommand: function(event) { var win = event.target.ownerDocument.defaultView; win.SidebarUI.toggle('viewBookmarksSidebar'); } }); } } catch(e) {} ]]></constructor></implementation></binding></bindings>#buttons");
}

#add-view-history-sidebar-button-for-ofizer {
    list-style-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' height='16' width='16' viewBox='0 0 48 48'><g><path d='M 2.438,0 C 1.087,0 0,1.088 0,2.438 V 45.56 C 0,46.91 1.087,48 2.438,48 H 45.56 C 46.91,48 48,46.91 48,45.56 V 2.438 C 48,1.088 46.91,0 45.56,0 Z' style='fill:black;fill-opacity:1;' /><path style='opacity:0.25;fill:black;' d='M 38,8 C 28.9,6.6 19.5,3.34 12,10 5.05,18.2 4.21,27.7 8,38 L 18,48 H 45.5 C 47,47.9 47.9,47 48,45.5 V 18'/><path style='fill:white;' d='M 24,3 C 12.3,3 3,12.3 3,24.1 3,35.7 12.3,45 24,45 35.7,45 45,35.7 45,24.1 45,12.3 35.7,3 24,3 Z M 24,39.9 C 15.3,39.9 8.1,32.7 8.1,24.1 8.1,15.3 15.3,8.1 24,8.1 32.7,8.1 39.9,15.3 39.9,24.1 39.9,32.7 32.7,39.9 24,39.9 Z M 31.5,21 H 27 V 15 C 27,13.2 25.8,12 24,12 22.2,12 21,13.2 21,15 V 24.1 C 21,25.8 22.2,27 24,27 H 31.5 C 33.3,27 34.5,25.8 34.5,24.1 34.5,22.2 33.3,21 31.5,21 Z' /></g></svg>") !important;
}

#add-view-bookmarks-sidebar-button-for-ofizer {
    list-style-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' height='16' width='16' viewBox='0 0 48 48'><g><path d='M 2.438,0 C 1.087,0 0,1.088 0,2.438 V 45.56 C 0,46.91 1.087,48 2.438,48 H 45.56 C 46.91,48 48,46.91 48,45.56 V 2.438 C 48,1.088 46.91,0 45.56,0 Z' style='fill:black;fill-opacity:1;' /><path style='opacity:0.25;fill:black;' d='M 24,3 11.1,45 14.1,48 H 45.58 C 46.93,48 48,46.9 48,45.53 V 22.2 L 45,19.2 39,18 Z'/><path style='fill:white;' d='M 45,19.05 C 45.09,19.34 36.05,30.02 35.96,30.3 35.86,30.57 37.21,44.81 36.97,45 36.76,45.15 24.28,39.43 24,39.43 23.73,39.43 11.25,45.16 11.03,45 10.79,44.81 12.11,30.57 12.02,30.3 11.94,30.02 2.911,19.34 3.001,19.05 3.087,18.77 16.37,15.69 16.6,15.53 16.82,15.35 23.72,3 24,3 24.28,3 31.18,15.35 31.4,15.53 31.63,15.69 44.88,18.75 45,19.05' /></g></svg>") !important;
}

В итоге получилось так: https://imgur.com/F5gz0uY
Вариант с расширением сайдбара поверх страницы при наведении курсора: https://imgur.com/vh8RYcv

Скрыть заголовок-тумблер в сайдбаре:

Выделить код

Код:

#sidebar-box #sidebar-header {
  visibility: collapse;
}

Табы в панель засунул с помощью аддона Tab Center Redux.
Горизонтальную панель табов скрыл

этим кодом:

Выделить код

Код:

#main-window:not([customizing]):not([tabsintitlebar="true"]) #TabsToolbar {
  visibility: collapse;
}
#navigator-toolbox {
  margin-top: 1px;
}

Применять код надо вместе с параметром user_pref("browser.tabs.drawInTitlebar", false) - включает отрисовку верхней рамки окна.

Автоматическое сужение боковой панели и раскрытие поверх страницы по наведению курсора (добавить к предыдущему правилу):

Выделить код

Код:

#tabbrowser-tabs {
  visibility: collapse !important;
}

#sidebar-box {
  overflow: hidden;
  min-width: 4vw;
  max-width: 4vw;
  position: fixed;
  transition: all 0.2s ease;
  border-right: 1px solid #ddd;
}

#sidebar-box:hover,
#sidebar-header,
#sidebar {
  min-width: 20vw !important;
  max-width: 20vw !important;
}

#sidebar-header,
#sidebar-splitter {
  display: none;
}

#sidebar {
  height: calc(100vh - 29px); 
}

#appcontent {
  margin-left: 4vw;
}

#main-window[inFullscreen][inDOMFullscreen] #appcontent {
  margin-left: 0;
}

#main-window[inFullscreen] #sidebar {
  height: 100vh;
}

#pageActionButton {
    display: none !important;
}

Ну и скрыл кнопку с тремя точками в правой части url-поля:

скрытый текст

Выделить код

Код:

#pageActionButton {
    display: none !important;
}

Добавлено 14-06-2018 21:50:54
Да, и кнопка Tab Center Redux стала срабатывать только по двойному клику.
Меня не парит, но интересно почему...

Отредактировано js90 (14-06-2018 21:50:54)

Vitaliy V. · №4

js90 пишет

Правда при наведении курсора на кнопку длинные кракозябры показывало из-за криллицы

Исправьте кодировку userChrome.css на UTF-8 без BOM и проблем с кириллицей не будет.

js90 · №5

В итоге отказался от боковой панели с вкладками. Почти все плагины для вертикальных табов работают нестабильно. Некоторые не дают опций, вызываемых из стандартной горизонтальной панели вкладок. Да и журнал с закладками открываю хоткеями, чтоб выключить поддержку CSS, ускорив запуск лисы. Подефолту мозила уже выключила css - думаю, скоро выпилят вовсе.

Полезная информация

№111-06-2018 23:35:02