Настройка внешнего вида Firefox в userChrome.css

Vitaliy V. · №4776

xrun1
причем тут тот стиль к тому же кривоватый?
вот так можно использовать, но речь то не о treechildren

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

Код:

:-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-row {
    min-height: 18px !important;
    height: 1.3em !important;
}

Отредактировано Vitaliy V. (31-10-2018 10:25:18)

toxa · №4777

Vitaliy V. пишет

toxa пишет
А если я хочу настроить адресную строку, панели...?
The Browser Toolbox enables you to debug add-ons and the browser's own JavaScript code rather than just web pages like the normal Toolbox.
Именно для этого - для интерфейса , не путайте с обычной панелью инструментов для веб-страниц,
но сначала откройте их и в настройках включите:
"Включить инструменты отладки browser chrome и дополнений"
"Включить удалённую отладку"
после этого в меню Инструменты -> Веб-разработка появится пункт "Инструменты браузера" или сочетание клавиш Ctrl+Alt+Shift+I для вызова инструментов

Во как, не знал этого!
Ну я попробовал - работать с ним можно, но по удобству и продуманности интерфейса - с DOМ Inspector-ом никакого сравнения. Но все равно спасибо!

Ну раз уж тут идет разговор о treechildren, может кто подскажет. Как получить текст подсказки Гугла из выпадающего списка searchbar браузера. Не на странице Гугла, а в самом браузере! Там все подсказки находятся в контейнере xul:treechildren и как добраться до отдельно взятой подсказки я не знаю.

Понято, что это не из области css, а скорее js. Ну чтоб уже два раза не вставать.

Vitaliy V. · №4778

toxa пишет

получить текст подсказки ...

Это не конкретно для tree (в новых версиях [firefox] там уже нет tree) а для панели #PopupSearchAutoComplete
получить текст можно так, просто примеры:

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

Выделить код

Код:

document.querySelector("#PopupSearchAutoComplete").addEventListener("popupshowing", function() {
    var index = 0; // индекс свой подставляете или находите...
    console.log(this.view.getLabelAt(index));
}, false);

так получить текст самой нижней подсказки

Выделить код

Код:

document.querySelector("#PopupSearchAutoComplete").addEventListener("popupshowing", function() {
    var view = this.view;
    console.log(view.getLabelAt((view.rowCount || view.matchCount)-1));
}, false);

Отредактировано Vitaliy V. (31-10-2018 20:10:45)

Black_Monk · №4779

Vitaliy V., подскажите, пожалуйста можно ли получить в последних версиях [firefox] следующие настройки?

- разная высота вкладок (активная выше неактивных, вкладка с плюсом ниже всех остальных);
- углы вкладок закруглены;
- углы адресного и поискового окошек закруглены;
- регулирование расстояния между вкладками и величины отступа первой вкладки от левого края;
- регулирование высоты адресной панели.

Интересуюсь потому раньше (на 52.9.0) всё это прекрасно работало через модификацию вашего же стиля:

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

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace svg url("http://www.w3.org/2000/svg");
/*AGENT_SHEET*/
/*
Автор: Виталий В.
Описание: Для Firefox 31 и выше.
ОС: Windows, Linux.
Сайт: https://sites.google.com/site/serials101
*/
@-moz-document url(chrome://browser/content/browser.xul) {
/*Вернуть пустую иконку на вкладке*/
.tabbrowser-tab:not([pinned]) .tab-icon-image:not([src]):not([crashed]) {
display: -moz-box !important;
transition-property: visibility !important;
transition-delay: 20ms !important;
}

.tabbrowser-tab:not([pinned])[busy] .tab-throbber + .tab-icon-image:not([src]):not([crashed]) {
display: none !important;
}
/*-----------------------*/

/*Настройки вкладок*/
#tabbrowser-tabs {
min-height: 28px !important;
}

.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
-moz-padding-start: 0px !important;
-moz-padding-end: 0px !important;
}

.tabbrowser-tab {
border-left: 2px solid !important;
border-top: 2px solid !important;
border-right: 2px solid !important;
border-bottom: none !important;
-moz-margin-start: 1px !important;
-moz-border-top-colors: transparent transparent !important;
-moz-border-left-colors: transparent transparent !important;
-moz-border-right-colors: transparent transparent !important;
border-radius: 5px 5px 0px 0px !important; /*Радиус углов вкладок*/
background-color: transparent !important;
background-origin: border-box !important;
background-clip: border-box !important;
background-repeat: no-repeat !important;
background-position: bottom !important;
background-size: 100% !important;
pointer-events: auto !important;
}

.tabbrowser-tab[selected="true"] {
-moz-border-top-colors: rgba(0,0,0,0.6) rgba(255,255,255,0.25) !important;
-moz-border-left-colors: rgba(0,0,0,0.6) rgba(255,255,255,0.25) !important;
-moz-border-right-colors: rgba(0,0,0,0.6) rgba(255,255,255,0.25) !important;
}

#TabsToolbar {
margin-bottom: 0px !important;
background-image: none !important;
}

#navigator-toolbox > #TabsToolbar {
-moz-padding-start: 6px !important;
-moz-padding-end: 0;
}

#main-window:not([inFullscreen]) #toolbar-menubar:not([autohide="true"]) ~ #TabsToolbar,
#main-window:not([inFullscreen]) #toolbar-menubar[autohide="true"]:not([inactive]) ~ #TabsToolbar {
margin-top: 0px !important;
}

#TabsToolbar .toolbarbutton-1 {
margin-bottom: 0px !important;
}

#TabsToolbar .toolbarbutton-1:not([type="menu-button"]),
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
padding-top: 1px !important;
padding-bottom: 1px !important;
}

.tabbrowser-arrowscrollbox > .scrollbutton-up,
.tabbrowser-arrowscrollbox > .scrollbutton-down {
margin-bottom: 0px !important;
}

#TabsToolbar .tabbrowser-tab[selected="true"]:not(:-moz-lwtheme) {
background-color: -moz-dialog !important;
background-image: linear-gradient(to bottom, rgba(255,255,255,0.4)0%, rgba(255,255,255,0.33)70%, rgba(255,255,255,0.3)100%) !important;
}

#TabsToolbar .tabbrowser-tab[selected="true"]:-moz-lwtheme {
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.4)10%, rgba(255, 255, 255, 0.2)70%, rgba(255, 255, 255, 0.15)100%), linear-gradient(rgba(229,229,229,0.40), rgba(229,229,229,0.40)) !important; /*цвет фона активной вкладки*/
}

.tab-stack {
margin-top: -2px !important;
-moz-margin-end: -2px !important;
-moz-margin-start: -2px !important;
}

.tab-background {
min-height: 26px !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
margin-top: 2px !important;
border-top: 2px solid transparent !important;
border-left: 2px solid transparent !important;
border-right: 2px solid transparent !important;
-moz-border-top-colors: rgba(0,0,0,0.35) rgba(255,255,255,0.25) !important;
-moz-border-left-colors: rgba(0,0,0,0.35) rgba(255,255,255,0.25) !important;
-moz-border-right-colors: rgba(0,0,0,0.35) rgba(255,255,255,0.25) !important;
border-radius: 7px 7px 0px 0px !important; /*Радиус углов вкладок*/
background-color: transparent !important;
background-origin: border-box !important;
background-clip: border-box !important;
background-repeat: no-repeat !important;
background-position: bottom !important;
background-size: 100% !important;
background-image: linear-gradient(rgba(153, 153, 153, 0.2), rgba(115, 115, 115, 0.2)) !important;
}

.tabbrowser-tab[selected="true"] > .tab-stack > .tab-background {
-moz-border-top-colors: transparent transparent !important;
-moz-border-left-colors: transparent transparent !important;
-moz-border-right-colors: transparent transparent !important;
background-image: none !important;
}

.tab-background-middle {
margin-top: -1px !important;
-moz-margin-end: -1px !important;
-moz-margin-start: -1px !important;
border-radius: 7px 7px 0px 0px !important; /*Радиус углов вкладок*/
background-image: none !important;
background-color: transparent !important;
background-clip: padding-box !important;
background-repeat: no-repeat !important;
background-position: bottom !important;
background-size: 100% !important;
}

.tab-content {
margin-top: 2px !important;
}

.tab-content:not([pinned]) {
-moz-padding-end: 6px !important;
-moz-padding-start: 6px !important;
}

.tab-content > .tab-close-button > .toolbarbutton-icon {
width: 16px !important;
height: 16px !important;
}

.tab-icon-overlay {
margin-top: -8px !important;
}

.tab-icon-sound {
margin: 0 !important;
}

.tab-background-middle,
.tab-background-start,
.tab-background-end,
.tabbrowser-tab::after,
.tabbrowser-tab::before,
#TabsToolbar::after {
display: none !important;
}

.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
margin-bottom: 0 !important;
}

.tabs-newtab-button {
width: 30px !important; /*Ширина кнопки*/
margin-top: 6px !important; /*Отступ сверху*/
-moz-margin-end: 0px !important;
-moz-margin-start: 2px !important; /*Отступ от края ближайшей вкладки*/
border-left: 2px solid !important;
border-top: 2px solid !important;
border-right: 2px solid !important;
border-bottom: none !important;
-moz-border-top-colors: rgba(0,0,0,0.35) rgba(255,255,255,0.25) !important;
-moz-border-left-colors: rgba(0,0,0,0.35) rgba(255,255,255,0.25) !important;
-moz-border-right-colors: rgba(0,0,0,0.35) rgba(255,255,255,0.25) !important;
border-radius: 6px 12px 0px 0px !important; /*Радиус углов кнопки "открыть новую вкладку"*/
background-color: transparent !important;
background-origin: border-box !important;
background-clip: border-box !important;
background-repeat: no-repeat !important;
background-position: bottom !important;
background-size: 100% !important;
background-image: linear-gradient(rgba(153, 153, 153, 0.2), rgba(115, 115, 115, 0.2)) !important;
}

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]), .tabs-newtab-button:hover {
background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.50)), linear-gradient(rgba(153, 153, 153, 0.2), rgba(115, 115, 115, 0.2)) !important;
background-position: 1px 1px !important;
background-size: calc(100% - 2px) calc(100% - 1px) !important;
}

#TabsToolbar .toolbarbutton-1:not([disabled="true"]):hover,
#TabsToolbar .toolbarbutton-1[open],
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled="true"]):hover,
.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled="true"]):hover,
.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled="true"]):hover {
background-position: 1px 0, 0 -1px, 100% -1px !important;
}

.tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) > .tab-stack > .tab-content {
background-position: center !important;
}

.titlebar-placeholder[type="caption-buttons"] {
margin-left: 1px !important;
}

#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme) {
background-color: -moz-Dialog !important;
}

@media (-moz-windows-default-theme) {
@media (-moz-os-version: windows-vista),
(-moz-os-version: windows-win7) {
#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme) {
background-color: hsl(210,75%,92%) !important;
}

#TabsToolbar .tabbrowser-tab[selected="true"]:not(:-moz-lwtheme) {
background-color: hsl(210,75%,92%) !important;
}
}
}

#nav-bar {
box-shadow: none !important;
border-top: 1px solid hsla(209,67%,12%,0.35) !important;
}

#nav-bar:not(:-moz-lwtheme) {
background-image: linear-gradient(to bottom, rgba(255,255,255,0.30)0%, rgba(255,255,255,0.25)30%, rgba(255,255,255,0)100%) !important;
}

#nav-bar:-moz-lwtheme {
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.15)0%, rgba(255, 255, 255, 0)100%), linear-gradient(to bottom, rgba(229,229,229,0.40)0%, rgba(229,229,229,0.05)100%) !important; /*цвет фона панели навигации*/
border-top-color: transparent !important;
}

#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar) {
background-image: none !important;
}
/*---------------------------*/

/*Tab Mix Plus*/
.tabbrowser-tabs:not([treestyletab-mode="vertical"]) > .tabbrowser-tab > .tab-stack > .tab-progress-container > .tab-progress {
margin-top: 4px !important;
}
/*-----------------------*/

/*Tab Utilities*/
#tabbrowser-tabs #PinnedTabsBarItems {
-moz-padding-start: 0 !important;
-moz-margin-end: 0 !important;
}

#tabbrowser-tabs[overflow] #PinnedTabsBarItems {
-moz-margin-end: -15px !important;
}

.tabbrowser-tab[locked]:not([pinned]) .tab-throbber:not([busy]) {
-moz-margin-end: -8px !important;
}
/*-----------------------*/

/*Панель навигации*/
#nav-bar .toolbarbutton-1:not([type="menu-button"]):not(:-moz-any(#back-button, #forward-button)),
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
padding-top: 1px !important;
padding-bottom: 1px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}

#nav-bar {
padding-top: 0px !important;
padding-bottom: 0px !important;
}

#back-button {
padding-top: 2px !important;
padding-bottom: 2px !important;
-moz-padding-start: 3px !important;
-moz-padding-end: 0px !important;
}

#back-button > .toolbarbutton-icon {
border: 1px solid hsla(210,4%,10%,.25) !important;
box-shadow: none !important;
padding: 3px !important;
width: 26px !important;
max-width: none !important;
min-width: 0 !important;
transition: none !important;
background-clip: padding-box !important;
}

#nav-bar[brighttext] #back-button > .toolbarbutton-icon, #nav-bar[brighttext] #forward-button > .toolbarbutton-icon {
border-color: rgba(255,255,255,.35) !important;
}

#nav-bar #back-button[open="true"] > .toolbarbutton-icon,
#nav-bar #forward-button[open="true"] > .toolbarbutton-icon {
border-color: hsla(210,4%,10%,.15) !important;
}

#nav-bar[brighttext] #back-button[open="true"] > .toolbarbutton-icon,
#nav-bar[brighttext] #forward-button[open="true"] > .toolbarbutton-icon {
border-color: rgba(255,255,255,.2) !important;
}

#forward-button {
padding-top: 0px !important;
padding-bottom: 0px !important;
}

#nav-bar #PanelUI-menu-button {
-moz-padding-start: 3px !important;
-moz-padding-end: 3px !important;
}

#nav-bar #PanelUI-button {
background: none !important;
-moz-border-start: 1px solid;
border-image: linear-gradient(transparent, rgba(0,0,0,.1) 20%, rgba(0,0,0,.1) 80%, transparent);
border-image-slice: 1;
}

window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
-moz-margin-start: -6px !important;
}

@media (-moz-os-version: windows-win10) {
#back-button > .toolbarbutton-icon {
padding: 4px !important;
width: 28px !important;
}

window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
-moz-margin-start: -8px !important;
}
}

#urlbar-search-splitter {
min-width: 4px !important;
width: 4px !important;
-moz-margin-start: -3px !important;
}

#urlbar:-moz-locale-dir(ltr) {
border-top-right-radius: 5px !important;
border-bottom-right-radius: 5px !important;
}

#urlbar:-moz-locale-dir(rtl) {
border-top-left-radius: 5px !important;
border-bottom-left-radius: 5px !important;
}

.searchbar-textbox {
border-radius: 5px !important;
}

и результат был прекрасный:

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

GENNADICH · №4780

После обновления до 63 версии перестали работать поисковые плагины во второй строке поиска. По "enter" то же нет реакции. Сегодня обновился до 63,1 - все без изменений. Куда копать - подскажите?

wayo · №4781

Только ответы, без решений.

- разная высота вкладок (активная выше неактивных, вкладка с плюсом ниже всех остальных);

да, но есть странный баг с тем что состояние некоторых просмотренных вкладок не меняется с непрочитанно на просмотренно (может кто-то знает как победить)

Black_Monk пишет

- углы вкладок закруглены;

да

Black_Monk пишет

- углы адресного и поискового окошек закруглены;

да

Black_Monk пишет

- регулирование расстояния между вкладками и величины отступа первой вкладки от левого края;

да

Black_Monk пишет

- регулирование высоты адресной панели.

да

Black_Monk · №4782

wayo, обнадёжили вы меня. Осталось малость - дождаться от специалистов готовых решений... :cool:

sandro79 · №4783

GENNADICH
https://raw.githubusercontent.com/Vital … h_ff60.zip

GENNADICH · №4784

sandro79
Спасибо.
Не получилось - возможно, что то делаю не так. При замене userChrome естественно слетают все мои настройки, при частичной замене остальных файлов ничего не происходит, опять не работает.
Одни мучения короче, что за браузер такой стал - то одно отвалилось, то другое, а пустой ставить не хочется - слишком всё убого и не привычно.

sandro79 · №4785

GENNADICH, вы, как я понял пользуетесь старым поиском(панель поиска), возможно, тогда в составе комплекта стилей от Aris.
Тогда вам надо взять из обновлённого комлекта custom_css_for_fx_v2.2.0.zip эти файлы: \css\generalui\oldsearch.css и \css\generalui\oldsearch.xml, заменив ими старые. Если старые лежали раньше в разных папках, то сейчас они лежат оба в одной папке generalui. Иначе панель поиска не могла перестать функционировать.

GENNADICH · №4786

sandro79
Забросил из набора по Вашей ссылке файлы oldsearch.css и oldsearch.xml в папку generalui, а папочку xml со старым файлом грохнул в итоге все заработало - это был "высший пилотаж" - благодарю!

И как говорится "куй железо не отходя от кассы" - Вы не поможете мне прикрутить софтину URLCollector к свежим версиям браузера?

Отредактировано GENNADICH (01-11-2018 17:05:01)

toxa · №4787

Vitaliy V. пишет

toxa пишет
получить текст подсказки ...
Это не конкретно для tree (в новых версиях там уже нет tree) а для панели #PopupSearchAutoComplete
получить текст можно так, просто примеры:
скрытый текст
Выделить код
Код:
document.querySelector("#PopupSearchAutoComplete").addEventListener("popupshowing", function() {
    var index = 0; // индекс свой подставляете или находите...
    console.log(this.view.getLabelAt(index));
}, false);
так получить текст самой нижней подсказки
Выделить код
Код:
document.querySelector("#PopupSearchAutoComplete").addEventListener("popupshowing", function() {
    var view = this.view;
    console.log(view.getLabelAt((view.rowCount || view.matchCount)-1));
}, false);

Vitaliy V
А можно получить текст подсказки, которая выделяется мышкой?
Как я понимаю, в этом случае надо слушать событие не popupshowing, а скажем mousedown.
Я нажимаю на подсказку правой кнопкой, она выделяется и в консоли появляется ее текст. Как это реализовать?

Vitaliy V. · №4788

Black_Monk
хорошо, вчера немного начал, как сделаю выложу

toxa пишет

А можно получить текст подсказки, которая выделяется мышкой?
Как я понимаю, в этом случае надо слушать событие не popupshowing, а скажем mousedown

Или mouseup как в [firefox] но можете изменить на mousedown

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

Выделить код

Код:

var PopupClickForSuggestion = {
    init: function() {
        var panel = document.querySelector("#PopupSearchAutoComplete"), suggestclick = false, suggestbox, Index;
        var mouseup = (event) => {
            if (event.button != 2 || (Index = panel.selectedIndex) < 0)
                return;
            console.log(panel.view.getValueAt(Index));
        };
        var popupshowing = () => {
            this.removeListeners();
            suggestbox = (panel.tree && panel.tree.lastElementChild) || panel.richlistbox;
            suggestbox.addEventListener("mouseup", mouseup, false);
            suggestclick = true;
        };
        this.removeListeners = function() {
            if (!suggestclick)
                panel.removeEventListener("popupshowing", popupshowing, false);
            else
                suggestbox.removeEventListener("mouseup", mouseup, false);
        };
        panel.addEventListener("popupshowing", popupshowing, false);
    },
    ininit: function() {
        this.removeListeners();
    }
};
PopupClickForSuggestion.init();

чтобы удалить слушатели - PopupClickForSuggestion.ininit();

Отредактировано Vitaliy V. (02-11-2018 13:43:17)

Kiridmit · №4789

Таким образом я меняю количество колонок в выпадающих списках тулбара закладок .

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

Выделить код

Код:

#PlacesToolbarItems .bookmark-item > menupopup[placespopup="true"] .scrollbox-innerbox
{
  -moz-column-count: 6;
  column-count: 6;
}

Можно ли как-то сделать 6 колонок только в первом уровне выпадающего списка, а в остальных чтобы осталось по стандарту в одну колонку?

Upd. Решил проблему добавлением кучи стрелочек, не знаю можно ли лучше, я новичок в этом.

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

Выделить код

Код:

#PlacesToolbarItems>.bookmark-item>menupopup[placespopup="true"]>*>*>*>.scrollbox-innerbox
{
  -moz-column-count: 6;
  column-count: 6;
}

Отредактировано Kiridmit (02-11-2018 15:36:29)

Vitaliy V. · №4790

Black_Monk

скриншоты

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

все настройки до /* ************************************************ */
писать что какая делает лень, сами уже разберетесь.

Выделить код

Код:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

@-moz-document url("chrome://browser/content/browser.xul") {
:root {
    --v-tabs-border-round-start: 9px;
    --v-tabs-border-round-end: 9px;
    --v-tabs-padding-between-start: 0px;
    --v-tabs-padding-between-end: 1px;
    --v-tabs-margin-top: 2px;
    --v-tabs-min-height: 33px;
    --v-tabs-border-color: Highlight;
    --v-tabs-line-color: var(--v-tabs-border-color);
    --v-tabs-border-inactive-color: rgba(0,0,0,0.25);
    --v-newtab-button-round-start: 9px;
    --v-newtab-button-round-end: 9px;
    --v-newtab-padding-start: 0px;
    --v-newtab-margin-top: 4px;
    --v-newtab-width-inner-padding: 6px;
    --v-placeholder-pre-tabs: 0px;
    --v-placeholder-post-tabs: 10px;
    --v-toolbarbutton-border-radius: 4px;
    --v-toolbarbutton-outer-padding: 2px;
    --v-toolbarbutton-inner-padding: 6px;
    --v-textbox-border-radius: 100px;
    --v-textbox-min-height: 30px;
    --v-textbox-icon-padding: 6px;
}
/* темный фон светлый текст */
#TabsToolbar[brighttext="true"], #nav-bar[brighttext="true"],
#TabsToolbar:-moz-lwtheme-brighttext, #nav-bar:-moz-lwtheme-brighttext {
    --v-tabs-border-color: Highlight;
    --v-tabs-line-color: var(--v-tabs-border-color);
    --v-tabs-border-inactive-color: rgba(255,255,255,0.25);
}
/* компактный режим */
:root[uidensity="compact"] {
    --v-tabs-min-height: 29px;
    --v-newtab-width-inner-padding: 5px;
    --v-toolbarbutton-outer-padding: 1px;
    --v-toolbarbutton-inner-padding: 5px;
    --v-textbox-min-height: 26px;
    --v-textbox-icon-padding: 4px;
}
/* мобильный режим */
:root[uidensity="touch"] {
    --v-tabs-min-height: 41px;
    --v-newtab-width-inner-padding: 9px;
    --v-toolbarbutton-outer-padding: 2px;
    --v-toolbarbutton-inner-padding: 9px;
    --v-textbox-min-height: 32px;
    --v-textbox-icon-padding: 7px;
}
/* ************************************************ */

:root {
    --toolbarbutton-border-radius: var(--v-toolbarbutton-border-radius) !important;
    --toolbarbutton-outer-padding: var(--v-toolbarbutton-outer-padding) !important;
    --toolbarbutton-inner-padding: var(--v-toolbarbutton-inner-padding) !important;
    --urlbar-icon-padding: var(--v-textbox-icon-padding) !important;
}

#TabsToolbar, #tabbrowser-tabs, #nav-bar {
    --tabs-border-color: var(--v-tabs-border-color) !important;
    --tab-line-color: var(--v-tabs-line-color) !important;
}

#titlebar,
#tabbrowser-tabs {
    --tab-min-height: var(--v-tabs-min-height) !important;
}

#TabsToolbar .tabbrowser-tab {
    padding-inline-start: var(--v-tabs-padding-between-start) !important;
    padding-inline-end: var(--v-tabs-padding-between-end) !important;
    border: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
}

#TabsToolbar .tab-background {
    border-top: 1px solid var(--v-tabs-border-inactive-color) !important;
    border-left: 1px solid var(--v-tabs-border-inactive-color) !important;
    border-right: 1px solid var(--v-tabs-border-inactive-color) !important;
}

#TabsToolbar .tabbrowser-tab .tab-stack > :-moz-any(.tab-background,.tab-loading-burst,.tab-content) {
    margin-top: var(--v-tabs-margin-top) !important;
}

#TabsToolbar .tabbrowser-tab .tab-stack > .tab-background[selected="true"] {
    border-color: var(--v-tabs-border-color) !important;
    margin-top: 0 !important;
}

#TabsToolbar .tabbrowser-tab :-moz-any(.tab-stack,.tab-background,.tab-loading-burst,.tab-content) {
    border-top-left-radius: var(--v-tabs-border-round-start) !important;
    border-top-right-radius: var(--v-tabs-border-round-end) !important;
    overflow: hidden;
}

#TabsToolbar:-moz-locale-dir(rtl) .tabbrowser-tab :-moz-any(.tab-stack,.tab-background,.tab-loading-burst,.tab-content) {
    border-top-left-radius: var(--v-tabs-border-round-end) !important;
    border-top-right-radius: var(--v-tabs-border-round-start) !important;
}

#TabsToolbar .tabbrowser-tab:hover .tab-background > .tab-line:not([selected="true"]):not([multiselected]) {
    background-color: var(--v-tabs-border-inactive-color) !important;
}

#TabsToolbar .tabs-newtab-button {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-inline-start: var(--v-newtab-padding-start) !important;
    padding-inline-end: 0 !important;
    background: none !important;
    border: none !important;
}

#TabsToolbar .tabs-newtab-button > .toolbarbutton-icon {
    margin-top: var(--v-newtab-margin-top) !important;
    border-top: 1px solid var(--v-tabs-border-inactive-color) !important;
    border-left: 1px solid var(--v-tabs-border-inactive-color) !important;
    border-right: 1px solid var(--v-tabs-border-inactive-color) !important;
    border-top-left-radius: var(--v-newtab-button-round-start) !important;
    border-top-right-radius: var(--v-newtab-button-round-end) !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    height: auto !important;
    padding-top: calc((var(--v-tabs-min-height) - (16px + var(--v-newtab-margin-top))) / 2) !important;
    padding-bottom: calc((var(--v-tabs-min-height) - (16px + var(--v-newtab-margin-top))) / 2) !important;
    width: calc(2 * var(--v-newtab-width-inner-padding) + 16px) !important;
    padding-left: var(--v-newtab-width-inner-padding) !important;
    padding-right: var(--v-newtab-width-inner-padding) !important;
}

#TabsToolbar:-moz-locale-dir(rtl) .tabs-newtab-button > .toolbarbutton-icon {
    border-top-left-radius: var(--v-newtab-button-round-end) !important;
    border-top-right-radius: var(--v-newtab-button-round-start) !important;
}

#TabsToolbar .tabbrowser-tab::after,
#TabsToolbar .tabbrowser-tab::before {
    display: none !important;
}

#TabsToolbar :-moz-any(.titlebar-placeholder,.titlebar-spacer)[type="pre-tabs"] {
    width: var(--v-placeholder-pre-tabs) !important;
    border: none !important;
}

#TabsToolbar :-moz-any(.titlebar-placeholder,.titlebar-spacer)[type="post-tabs"] {
    width: var(--v-placeholder-post-tabs) !important;
    border: none !important;
}

#urlbar, #searchbar .searchbar-textbox {
    border-radius: var(--v-textbox-border-radius) !important;
    margin-top: 1px !important;
    margin-bottom: 1px !important;
    min-height: var(--v-textbox-min-height) !important;
    --urlbar-icon-padding: var(--v-textbox-icon-padding) !important;
}

textbox .urlbar-icon {
    width: calc(2 * var(--v-textbox-icon-padding) + 16px) !important;
    height: calc(2 * var(--v-textbox-icon-padding) + 16px) !important;
    padding: var(--v-textbox-icon-padding) !important;
}

#pageActionSeparator {
    height: calc(2 * var(--v-textbox-icon-padding) + 16px) !important;
}

:root:not([uidensity="compact"]) #back-button {
    padding-top: var(--v-toolbarbutton-outer-padding) !important;
    padding-bottom: var(--v-toolbarbutton-outer-padding) !important;
    padding-inline-start: var(--v-toolbarbutton-outer-padding) !important;
    padding-inline-end: 0 !important;
}

:root:not([uidensity="compact"]) #back-button > .toolbarbutton-icon {
    width: calc(2 * var(--v-toolbarbutton-inner-padding) + 16px) !important;
    height: calc(2 * var(--v-toolbarbutton-inner-padding) + 16px) !important;
    padding: var(--v-toolbarbutton-inner-padding) !important;
}

@media (-moz-windows-compositor) {
    #main-window[uidensity="compact"][sizemode="normal"] > #titlebar {
        -moz-appearance: none !important;
    }
}
}

Отредактировано Vitaliy V. (28-01-2019 23:43:23)

Black_Monk · №4791

Vitaliy V., ух ты, спасибо, начинаю тестить... :cool:
Ох и тяжко, оказывается. Не то что раньше... :angry: Не пойму как изменить высоту панели адреса? Или надо менять вид кнопок в Персонализации?

Отредактировано Black_Monk (02-11-2018 23:08:35)

toxa · №4792

Vitaliy V. пишет

toxa пишет
А можно получить текст подсказки, которая выделяется мышкой?
Как я понимаю, в этом случае надо слушать событие не popupshowing, а скажем mousedown
Или mouseup как в но можете изменить на mousedown
скрытый текст
Выделить код
Код:
var PopupClickForSuggestion = {
    init: function() {
        var panel = document.querySelector("#PopupSearchAutoComplete"), suggestclick = false, suggestbox, Index;
        var mouseup = (event) => {
            if (event.button != 2 || (Index = panel.selectedIndex) < 0)
                return;
            console.log(panel.view.getValueAt(Index));
        };
        var popupshowing = () => {
            this.removeListeners();
            suggestbox = (panel.tree && panel.tree.lastElementChild) || panel.richlistbox;
            suggestbox.addEventListener("mouseup", mouseup, false);
            suggestclick = true;
        };
        this.removeListeners = function() {
            if (!suggestclick)
                panel.removeEventListener("popupshowing", popupshowing, false);
            else
                suggestbox.removeEventListener("mouseup", mouseup, false);
        };
        panel.addEventListener("popupshowing", popupshowing, false);
    },
    ininit: function() {
        this.removeListeners();
    }
};
PopupClickForSuggestion.init();
чтобы удалить слушатели - PopupClickForSuggestion.ininit();

Vitaliy V. большое спасибо!
Вы мне очень помогли! :music:

Vitaliy V. · №4793

Black_Monk пишет

Не пойму как изменить высоту панели адреса?

а что нужно увеличить высоту или наоборот? Какой режим то у вас обычный или компактный?
И панель имеется ввиду вся с кнопками или строка ввода?

Black_Monk · №4794

Vitaliy V. пишет

а что нужно увеличить высоту или наоборот? Какой режим то у вас обычный или компактный? И панель имеется ввиду вся с кнопками или строка ввода?

Сейчас с утра посмотрел, что у меня получилось с вашими настройками и заметил несовпадения. У меня за активной вкладкой виден прямоугольник другого цвета, а у вас на скриншотах такого нет. Может у нас версии [firefox] разные? У меня последняя 63.0.1. Или это от темы оформления зависит? У меня такой прямоугольник только на родных темах, на сторонней (Brushed Metal - XP) его нет.

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

А конкретно, по настройкам не могу найти следующее:

- отступ самой первой вкладки (только её!) от левого края экрана;
- уменьшение высоты кнопки новой вкладки (только её!);
- цвет линий активной вкладки (хочу его совпадения с цветом неактивной);
- уменьшение высоты панели с кнопками, поиском и вводом адреса;
- уменьшение высоты окошек ввода адреса и поиска.

p.s. Возможно, что-то из перечисленного там уже есть, но я разобраться не смог.

Отредактировано Black_Monk (03-11-2018 11:41:32)

Gruz_35 · №4795

Здравствуйте.
Помогите новичку, как сделать что бы вкладки переместить вниз под адресну строку.

Отредактировано Gruz_35 (03-11-2018 09:16:27)

Uxapb · №4796

Gruz_35 пишет

Помогите новичку, как сделать что бы вкладки переместить вниз под адресну строку.

У меня так. Автор не я.

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

/*Меняем местами вкладки, строку адреса*/
:root { --tab-min-height_tnot: 24px; }
#print-preview-toolbar,
#printedit-toolbar, #titlebar { -moz-box-ordinal-group: 0 !important; }
#navigator-toolbox #toolbar-menubar { -moz-box-ordinal-group: 1 !important; }
#navigator-toolbox #nav-bar { -moz-box-ordinal-group: 2 !important; } /* navigation toolbar */
#navigator-toolbox #PersonalToolbar { -moz-box-ordinal-group: 3 !important; } /* bookmarks toolbar */
#navigator-toolbox toolbar { -moz-box-ordinal-group: 10 !important; } /* 3rd party toolbars */
#navigator-toolbox #TabsToolbar { -moz-box-ordinal-group: 100 !important; }/* tabs toolbar */

/* Удаляем баг, связанный с тем, что скачут панели при перетескивании вкладки */
#TabsToolbar[movingtab] { padding-bottom: unset !important; }
#TabsToolbar[movingtab] > .tabbrowser-tabs { padding-bottom: unset !important; margin-bottom: unset !important; }
#TabsToolbar[movingtab] + #nav-bar { margin-top: unset !important; }

Gruz_35 · №4797

Uxapb пишет

У меня так. Автор не я.

Спасибо большое, именно то, что я искал

Отредактировано Gruz_35 (03-11-2018 12:22:05)

Vitaliy V. · №4798

Black_Monk пишет

У меня за активной вкладкой виден прямоугольник другого цвета, а у вас на скриншотах такого нет. Может у нас версии разные?

нет просто у меня нет [windows] 7 (на виртуалке была но снёс недавно чтобы место не занимала) а такое только там на дефолтных системной и [firefox] темах.
Сейчас фон убрал но возможно будет плохо виден текст на неактивных вкладках проверьте.

- отступ самой первой вкладки (только её!) от левого края экрана;

--v-placeholder-pre-tabs: 0px;

- уменьшение высоты кнопки новой вкладки (только её!);

не было, добавил отступ сверху --v-newtab-margin-top: 4px;
имейте ввиду уменьшается не сама кнопка, при клике выше бордюра также откроется новыя вкладка

- цвет линий активной вкладки (хочу его совпадения с цветом неактивной);

--v-tabs-border-color: Highlight; она же линия на панели навигации
и --v-tabs-line-color: ...

- уменьшение высоты панели с кнопками, поиском и вводом адреса;
- уменьшение высоты окошек ввода адреса и поиска.

не было, добавил две переменные --v-textbox-min-height: 30px; --v-textbox-icon-padding: 6px;
уменьшаете так
--v-textbox-min-height: 26px;
--v-textbox-icon-padding: 4px;
и возможно нужно уменьшить кнопки
--v-toolbarbutton-outer-padding: 1px;
--v-toolbarbutton-inner-padding: 5px;

Отредактировано Vitaliy V. (03-11-2018 13:37:47)

Gruz_35 · №4799

Vitaliy V.

Привет. Подскажи, это у тебя на скриншотах цвета тем которые по умолчанию или ты сам сделал их такими, что они не так глаза режут как стандартные. Можешь подсказать как сделать себе такую же цветовую гамму ( Тема по умолчанию и Светлая)

Vitaliy V. · №4800

Gruz_35 пишет

Подскажи, это у тебя на скриншотах цвета тем которые по умолчанию или ты сам сделал их такими

На скриншотах не используются другие стили, а тот стиль для изменения размера, формы - вкладок, кнопок и т.д.
из цветов там только цвет бордюров и линий на вкладках.

что они не так глаза режут как стандартные. Можешь подсказать как сделать себе такую же цветовую гамму ( Тема по умолчанию и Светлая)

На скриншотах не [windows] тем более не 7 (но стиль проверял и на 10)
OS: Debian
DE: MATE
GTK Theme: Adapta-Nokto-Eta
Icon Theme: Papirus-Dark
надеюсь теперь понятно почему так выглядит Тема по умолчанию - из-за системной темы
в [windows] 7 если включить классическую тему и настроить цвета это тоже повлияет на Тему по умолчанию в [firefox]
а вот светлая по крайней мере морда должна выглядеть примерно одинаково везде, почему глаза режут ?
может тогда просто установи лёгкую тему отсюда https://addons.mozilla.org/ru/firefox/themes/
или самому сделать такие можно просто...

P.S или такую тему или типа такой https://addons.mozilla.org/ru/firefox/a … -theme-we/

Отредактировано Vitaliy V. (03-11-2018 14:48:02)

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

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Board footer