Здравствуйте!

Помогите, пожалуйста, создать пользовательскую кнопку, которая бы закрывала окно Firefox.
Важно, чтобы эту кнопку было хорошо видно, и то что на ней написано.

Идеально - сделать кнопку вместо закладки как на картинке:

В этой теме нашёл, что можно в закладке выполнять javascript. Но javascript не может закрыть окно, которое не было открыто с помощью javascript.

Или тогда создать кнопку на навигационной панели.

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

Спасибо!

самый простой вариант
берешь расширение добавляющее кнопку с нужным функционалом
рисуешь картинку с текстом и стилем заменяешь картинку кнопки на свою

Для меня ваш ответ слишком поверхностный.

1. Какое расширение можете порекомендовать?
2. Где находятся стили кнопки, чтобы сделать её прямоугольной?

Спасибо!

AlexBob
например https://forum.mozilla-russia.org/viewto … 15#p763715
там две кнопки одна из них перезапуск
можно заменить команду
this.restartMozilla();
на команду закрытия окна
win.BrowserTryToCloseWindow();
ну и соответственно название кнопки let label = ...
и тултип let tooltiptext = ...
ещё иконку заменить

и код чтобы название кнопки отображалось на панели

toolbar #v-toolbarbutton-restart-app > .toolbarbutton-text {
    display: -moz-box !important;
}

Спасибо большое!
Всё сделал, как вы писали. Всё получилось!

Поставил кнопку в Porteus Kiosk.
Чтобы кнопка появилась на панели надо в prefs.js (или, что правильней, создать user.js)  изменить параметр browser.uiCustomization.state, добавив туда кнопку.
user_pref("browser.uiCustomization.state", "{\"placements\":{\"nav-bar\":[\"v-toolbarbutton-restart-app\"...
Как раз в Porteus Kiosk ни Customize, ни about:config недоступны.
Ну, может кому ещё пригодится.

Скажите, сама кнопка очень напоминает кнопку для Custombuttons с этого поста:
https://forum.mozilla-russia.org/viewtopic.php?id=41987
Даже иконка та же.
Custombuttons на текущую версию Firefox (65.0.2) не ставится. Но ваше решение, через userChrome.css работает прекрасно.
Это стало быть так можно любой скрипт (расширение) заставить работать?

Здравствуйте!

Версия 78.3.1
Больше не получается создать кнопку этим способом.
Подскажите, пожалуйста, как в соверменных реалиях реализовать такую же самую кнопку?

Зараннее спасибо!

user_chrome_files (панели, кнопки отключаются в настройках)
код для custom_script.js:

try {
    CustomizableUI.createWidget({
        id: "ucf-close-win",
        label: "Закрыть",
        tooltiptext: "Закрыть окно",
        localized: false,
        defaultArea: CustomizableUI.AREA_NAVBAR,
        onCreated(btn) {
            btn.setAttribute("image", "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><circle cy='24' cx='24' style='fill:rgb(227, 27, 93);' r='24'/><path style='opacity:0.25;fill:black;' d='M 16.5,46.8 8.9,39.2 39.1,8.8 46.8,16.5 C 48,20 48,23 48,24 48,37.3 37.3,48 24,48 23,48 20,48 16.5,46.8 Z'/><path style='fill:none;stroke:white;stroke-width:6;stroke-linecap:round;' d='M 11,11 37,37'/><path style='fill:none;stroke:white;stroke-width:6;stroke-linecap:round;' d='M 37,11 11,37'/></g></svg>");
        },
        onCommand(e) {
            e.view.BrowserTryToCloseWindow();
        }
    });
} catch(e) {}

Чем больше разбираюсь, тем больше поражаюсь вашему продукту! Круто! Спасибо!

Пару вопросов.

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

Чисто из любопытства.
SVG для иконки нужно уметь правильно сделать. Например, как я понял, тег <text> в SVG иконке не поддерживается, а <circle> нормально отображается. Есть ли где-то описание параметров и требований к SVG?

можно стилем

toolbar #ucf-close-win > .toolbarbutton-icon {
    border-end-end-radius: 0 !important;
    border-start-end-radius: 0 !important;
    margin-inline-end: 0 !important;
}
toolbar #ucf-close-win > .toolbarbutton-text {
    display: -moz-box !important;
    border-start-start-radius: 0 !important;
    border-end-start-radius: 0 !important;
    padding-inline-start: 0 !important;
    margin-inline-start: 0 !important;
}

onBeforeCreated(doc) {
            var win = doc.defaultView,
            btnstyle = "data:text/css;charset=utf-8," + encodeURIComponent(`
                    #ucf-close-win {
                        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><circle cy='24' cx='24' style='fill:rgb(227, 27, 93);' r='24'/><path style='opacity:0.25;fill:black;' d='M 16.5,46.8 8.9,39.2 39.1,8.8 46.8,16.5 C 48,20 48,23 48,24 48,37.3 37.3,48 24,48 23,48 20,48 16.5,46.8 Z'/><path style='fill:none;stroke:white;stroke-width:6;stroke-linecap:round;' d='M 11,11 37,37'/><path style='fill:none;stroke:white;stroke-width:6;stroke-linecap:round;' d='M 37,11 11,37'/></g></svg>") !important;
                    }
                    toolbar #ucf-close-win > .toolbarbutton-icon {
                        border-end-end-radius: 0 !important;
                        border-start-end-radius: 0 !important;
                        margin-inline-end: 0 !important;
                    }
                    toolbar #ucf-close-win > .toolbarbutton-text {
                        display: -moz-box !important;
                        border-start-start-radius: 0 !important;
                        border-end-start-radius: 0 !important;
                        padding-inline-start: 0 !important;
                        margin-inline-start: 0 !important;
                    }
                `);
            try {
                win.windowUtils.loadSheetUsingURIString(btnstyle, win.windowUtils.USER_SHEET);
            } catch (e) {}
        },

поддерживается https://developer.mozilla.org/en-US/doc … ement/text
но в иконку для браузера делать не стоит т.к. её размер должен быть одинаковым по высоте и ширине.

да много где есть в интернете, если на Mozilla Developer Network то см. там https://developer.mozilla.org/en-US/doc … umentation

Оба способа отлично работают! И ещё раз спасибо!

Попробую прикрутить кнопку этим способом к Porteus Kiosk, отпишусь.

Отлично! Нашёл ответы на свои вопросы. Надо было самому, конечно, поискать, но не поискал Спросил заодно.

В Ubuntu тоже отлично работает!

В Porteus Kiosk прикрутил, но пришлось внести изменения в user_chrome.js, где написано, что нельзя трогать
Там пришлось изменить дефолтные настройки, например:
Branch.setBoolPref("custom_style_user", true);
Branch.setBoolPref("custom_script", true);
а также повыключать панели по необходимости.

Кнопку можно размещать и в других панелях: defaultArea: CustomizableUI.AREA_BOOKMARKS, (или AREA_TABSTRIP, AREA_MENUBAR,)
А ещё лучше с помощью user_pref разместить в любом месте (есть в этом топике выше).

И ещё раз низкий поклон перед гением сего изобретения! Спасибо, Vitaliy!!

Я считаю это изобретение действительно полезным и удивительным!