Кнопка вместо закладки или пользовательская кнопка.

AlexBob · №1

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

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

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

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

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

Войдите или зарегистрируйтесь, чтобы увидеть скрытый текст.

Может есть другие варианты, без javascript, например?

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

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

Только, чтобы она выглядела таким образом, что её может прочитать любой, даже пожилой, человек и понять, для чего она.

Спасибо!

okkamas_knife · №2

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

AlexBob · №3

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

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

Спасибо!

Vitaliy V. · №4

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;
}

Отредактировано Vitaliy V. (26-02-2019 19:39:00)

AlexBob · №5

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

Поставил кнопку в 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 работает прекрасно.
Это стало быть так можно любой скрипт (расширение) заставить работать?

AlexBob · №6

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

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

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

Vitaliy V. · №7

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) {}

AlexBob · №8

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

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

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

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

Отредактировано AlexBob (08-01-2021 13:24:00)

Vitaliy V. · №9

AlexBob пишет

Можно ли сделать, чтобы рядом с кнопкой высвечивался его Label?

можно стилем

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

Выделить код

Код:

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;
}

или в кнопку добавить стиль,
заменить onCreated(btn) {...},
на

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

Выделить код

Код:

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) {}
        },

AlexBob пишет

тег <text> в SVG иконке не поддерживается

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

AlexBob пишет

Есть ли где-то описание параметров и требований к SVG?

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

AlexBob · №10

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

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

да много где есть в интернете, если на Mozilla Developer Network то см. там

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

AlexBob · №11

В 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!!

chatyno · №12

В Ubuntu тоже отлично работает!
В Porteus Kiosk прикрутил, но пришлось внести изменения в user_chrome.js, где написано, что нельзя трогать
Там пришлось изменить дефолтные настройки, например:
Branch.setBoolPref("custom_style_user", true);
Branch.setBoolPref("custom_script", true);
а также повыключать панели по необходимости.
Кнопку можно размещать и в других панелях: defaultArea: CustomizableUI.AREA_BOOKMARKS, (или geometry dash subzero,)
А ещё лучше с помощью user_pref разместить в любом месте (есть в этом топике выше).
И ещё раз низкий поклон перед гением сего изобретения! Спасибо, Vitaliy!!

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

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

№125-02-2019 17:59:45