Алексей У., egorsemenov06 и другие "любители" украшательств:
Здесь тема по скриптам, не мусорите в ней. Вопросы по иконкам и оформлению браузера пишут в теме по стилям.
согласен с тобой но иконки то в скриптах
egorsemenov06
Иконки зависят от цвета текста, их конечно можно перекрасить но тогда зачем все эти танцы с resource://
Лучше добавить им прозрачности fill-opacity: так цвет разбавится с фономскрытый текстВыделить кодКод:
var arr = [ "@-moz-document url(chrome://browser/content/browser.xhtml) {", ` #${this.id} menuitem, #content-baseItem, #content-saveItem, #content-editorItem {`, " fill: currentColor !important;", " fill-opacity: .8 !important;", " -moz-context-properties: fill, fill-opacity !important;", " }", " @media (-moz-platform: windows) {", ` #${this.id} menugroup > menuitem {`, " padding-block: .5em !important;", " padding-inline-start: 1em !important;", " }", " }", "}" ];
СПАСИБО!!!!!ТЕПЕРЬ вообще по феншую
…egorsemenov06 пишетНо в кнопке так и не появились пункты от "Сохранить всю страницу как PNG"
О даже не посмотрел что там иконки ещё есть думал они в начале только
а можно их сделать что бы они были не такого траурного цвета а вот такого rgb(142, 142, 152) на светлой теме
egorsemenov06 пишетВ консоли пишет вот такую ошибку Uncaught Error: not well-formed XML
Странно, у меня ничего подобного не пишет, XML'ка подхватывается.
Заресурсить SVG'шки попробовал так:
Код Save.js — оставил без изменений, таким, как ты выложил.
А в коде создания виджета — убрал get image() {…},
…
и заменил get initCode() {…}, на такой
[spoiler][code]//
get initCode() {
var count = 0;
var prfx = "ucf-cbbtn-save-resurl-";
var rph = Services.io.getProtocolHandler("resource").QueryInterface(Ci.nsIResProtocolHandler);
var ss = url => {
var subst = prfx + ++count;
rph.setSubstitution(subst, Services.io.newURI(url));
return "resource://" + subst;
}
this.image = ss("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path style='fill:none;stroke:context-fill rgb(142, 142, 152);stroke-opacity:context-fill-opacity;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;' d=
egorsemenov06
вставитьскрытый текстВыделить кодКод:
var PHandler = Services.io.getProtocolHandler("resource") .QueryInterface(Ci.nsIResProtocolHandler), count = 0;
перед
array.forEach((m,i)=> {и заменить тут
скрытый текстВыделить кодКод:
// if ("image" in m) mItem.setAttribute("image", m.image || array[i-1].image); if ("image" in m) { let substitution = `ucf-cbbtn-save-${++count}-img`; if (!PHandler.hasSubstitution(substitution)) PHandler.setSubstitution(substitution, Services.io.newURI(m.image || array[i-1].image)); mItem.style.cssText = `list-style-image:url("resource://${substitution}");-moz-context-properties:fill,fill-opacity;fill:currentColor;`; }
Спасибо Большое!!!! Но в кнопке так и не появились пункты от "Сохранить всю страницу как PNG" до "Сохранить выбранную область страницы как PNG" и еще там для контекстного меню три иконки зарегистрировать бы в resource://. Помогите пожалуйста! В конс
…egorsemenov06
[spoiler][code]
// menuItem.setAttribute("image", "data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='17' height='16'><path fill='rgb(0, 116, 232)' fill-opacity='context-fill-opacity' d='M15.37 15H17l-3.63-8.54a.75.75 0 0 0-.69-.46h-.82c-.3 0-.58.18-.7.46L9.32 10.8l-.01-.01a10.8 10.8 0 0 1-3.27-2.2 12.38 12.38 0 0 0 2.54-4.18L9.08 3H10V1.5H5.75V0h-1.5v1.5H0V3h7.5l-.33.91c-.47 1.31-1.2 2.52-2.13 3.56-.7-.9-1.25-1.9-1.63-2.97H1.8l.18.48a12.43 12.43 0 0 0 1.97 3.56c-.9.75-1.89 1.35-2.96 1.78v1.58a12.3 12.3 0 0 0 3.96-2.26 12.31 12.31 0 0 0 3.77 2.54L7.53 15h1.64l1.06-2.5h4.08l1.06 2.5Zm-4.5-4 1.4-3.3 1.4 3.3h-2.8Z'/></svg>");var image = "data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><path fill='context-fill rgb(0, 116, 232)' fill-opacity='context-fill-opacity' d='M15.37 15H17l-3.63-8.54a.75.75 0 0 0-.69-.46h-.82c-.3 0-.58.18-.7.46L9.32 10.8l-.01-.01a10.8 10.8 0 0
…
Vitaliy V. как зарегистрировать в resource:// эту иконку?скажите пожалуйста[spoiler][code] // Google Translate в контекстном меню.......
(this.googletranslate = {
init(that) {
var lc = navigator.lastClick = {}, w = null, xhtmlns = 'http://www.w3.org/1999/xhtml';
var mouseUp = (e) => {
if (e.button) return;
lc.X = e.screenX - mozInnerScreenX;
lc.Y = e.screenY - mozInnerScreenY;
};
gBrowser.tabpanels.addEventListener('mouseup', mouseUp, false);
this.destructor = () => {
gBrowser.tabpanels.removeEventListener('mouseup', mouseUp, false);
if (w)
w.closeWin();
};
that.unloadlisteners.push("googletranslate");
var createWindow = function(text, status, title, id, pos, size) {
var win = window, doc = win.docum
egorsemenov06
[spoiler][code](async (
id = "context-copylink",
image = "data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><g style='fill:context-fill rgb(0, 142, 152);fill-opacity:context-fill-opacity'><path d='M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z'/><path d='M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z'/></g></svg>",substitution = `ucf-${id.toLowerCase()}-img`,
…
PHandler = Services.io.getProtocolHandler("resource")
.QueryInterface(Ci.nsIResProtocolHandler),
) => {
if (!PHandler.hasSubstitution(substitution))
PHandler.setSubstitution(substitution, Services.io.newURI(ima
Vitaliy V.как зарегистрировать в resource:// вот эту иконку?в том скрипте скажите пожалуйста[spoiler][code](async (id, url) => {
if (location != url) return;
var menuitem = document.createXULElement("menuitem");
document.getElementById(id).after(menuitem);
var hidden = () => !nsContextMenu.contentData.context.linkTextStr;
menuitem.hidden = true;
menuitem.render = () => {
if (hidden()) return;
menuitem.hidden = false;
menuitem.id = id + "text";
menuitem.label = "Скопировать текст ссылки";
menuitem.setAttribute("oncommand", "navigator.clipboard.writeText(gContextMenu.linkTextStr);");
delete menuitem.render;
menuitem.className = "menuitem-iconic";
menuitem.image = "data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><g style='fill:context-fill rgb(142, 142, 152);fill-opacity:context-fill-opacity'><path d='M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002
egorsemenov06 пишетне получаеться добавить иконки на Показать,Скрыть панель закладок
У меня так
скрытый текстВыделить кодКод:
#BMB_viewBookmarksToolbar[data-l10n-args*="true"]::before { content: "" !important; background-image: url("./svg/view-visible.svg"); } #BMB_viewBookmarksToolbar[data-l10n-args*="false"]::before { content: "" !important; background-image: url("./svg/view-hidden.svg"); }
БОЛЬШУШИЕ СПАСИБО!!!!!
…egorsemenov06
А стиль у вас какой то есть для иконок? У меня тоже отсутствовали иконки там где показано, просто добавил !important к content и заработало, напримерскрытый текстВыделить кодКод:
#BMB_bookmarksShowAllTop::before, #BMB_bookmarksShowAll::before, #placesContext_showAllBookmarks::before, #bookmarksShowAll::before { content: "" !important; background-image: url("./svg/bookmark-hollow.svg"); }
да есть.у меня не получаеться добавить иконки на Показать,Скрыть панель закладок[spoiler][code]@-moz-document url("chrome://browser/content/browser.xhtml"),
url("chrome://browser/content/places/places.xhtml"),
url("chrome://browser/content/places/historySidebar.xhtml"),
url("chrome://browser/content/places/bookmarksSidebar.xhtml"),
url("chrome://browser/content/syncedtabs/sidebar.xhtml") {
:root {
--v-menu-icons-margin-start: 0px; /* отступ слева для иконок */
}
menu:not(.menu-iconic)::before, menuitem:not(.menuitem-iconic)::before
Vitaliy V. подскажите пожалуйста как прописать иконки на эти пункты
https://imageban.ru/show/2024/05/07/72b … a586b2/png
egorsemenov06
для групировки можно добавить элемент <g>скрытый текстВыделить кодКод:
data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><g style='fill:context-fill rgb(142, 142, 152);fill-opacity:context-fill-opacity'><rect width='6' height='6' x='1' y='1' rx='1'/><path d='M14.75 3H13V1.25a.25.25 0 0 0-.25-.25h-1.5a.25.25 0 0 0-.25.25V3H9.25a.25.25 0 0 0-.25.25v1.5a.25.25 0 0 0 .25.25H11v1.75a.25.25 0 0 0 .25.25h1.5a.25.25 0 0 0 .25-.25V5h1.75a.25.25 0 0 0 .25-.25v-1.5a.25.25 0 0 0-.25-.25'/><rect width='6' height='6' x='1' y='9' rx='1'/><rect width='6' height='6' x='9' y='9' rx='1'/></g></svg>
Большущее СПАСИБО!!!!!
…Vitaliy V. можно-ли оптимизировать эту svg-шку т.е. style='fill:context-fill rgb(142, 142, 152);fill-opacity:context-fill-opacity;' повторяеться 4 раза
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><rect width='6' height='6' x='1' y='1' rx='1' style='fill:context-fill rgb(142, 142, 152);fill-opacity:context-fill-opacity;'/><path style='fill:context-fill rgb(142, 142, 152);fill-opacity:context-fill-opacity;' d='M14.75 3H13V1.25a.25.25 0 0 0-.25-.25h-1.5a.25.25 0 0 0-.25.25V3H9.25a.25.25 0 0 0-.25.25v1.5a.25.25 0 0 0 .25.25H11v1.75a.25.25 0 0 0 .25.25h1.5a.25.25 0 0 0 .25-.25V5h1.75a.25.25 0 0 0 .25-.25v-1.5a.25.25 0 0 0-.25-.25z'/><path/><rect width='6' height='6' x='1' y='9' rx='1' style='fill:context-fill rgb(142, 142, 152);fill-opacity:context-fill-opacity;'/><rect width='6' height='6' x='9' y='9' rx='1' style='fill:context-fill rgb(142, 142, 152);fill-opacity:context-fill-opacity;'/></svg>
egorsemenov06
Наверняка где то ошибку синтаксиса допустили, все там должно работать
СПАСИБО ЕЩЕ РАЗ!!!!!!!мой косяк дело в пути к скриптк было
egorsemenov06 пишетдаже готовое не могу сообразить с кнопкой save доавил код что Вы только что дали в custom_script.js
Я хз почему не работает, и что значит добавил, нужно заменить код в custom_script.js
ну да заменил не работает оставил как было
egorsemenov06
…
[spoiler][code]//Атрибут инспектор...........................
(async () => CustomizableUI.createWidget({
id: "AttributesInspector",
label: "Attributes Inspector",
get image() {
var img = `${this.id.toLowerCase()}-img`;
Services.io.getProtocolHandler("resource")
.QueryInterface(Ci.nsIResProtocolHandler)
.setSubstitution(img, Services.io.newURI("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><path style='fill:context-fill rgb(142, 142, 152);fill-opacity:context-fill-opacity;' d='M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M6,4H13L18,9V17.58L16.16,15.74C17.44,13.8 17.23,11.17 15.5,9.46C14.55,8.5 13.28,8 12,8C10.72,8 9.45,8.5 8.47,9.46C6.5,11.41 6.5,14.57 8.47,16.5C9.44,17.5 10.72,17.97 12,17.97C12.96,17.97 13.92,17.69 14.75,17.14L17.6,20H6V4M14.11,15.1C13.55,15.66 12.8,16 12,16C11.2,16 10.45,15.67 9.89,15.1C9.33,14.54 9,13.79 9
egorsemenov06
…
Вот кнопка Save
[spoiler][code](async () => CustomizableUI.createWidget({
id: "ucf-cbbtn-Save",
tooltiptext: "Сохранить",
localized: false,
get initCode() {
delete this.initCode;
return this.initCode = Cu.readUTF8URI(Services.io.newURI(
"chrome://user_chrome_files/content/custom_scripts/Save.js"
));
},
cbu: {
types: {
128: "Bool", boolean: "Bool",
64: "Int", number: "Int",
32: "String", string: "String"
},
getPrefs(pref) {
try {
return Services.prefs[`get${
this.types[Services.prefs.getPrefType(pref)]
}Pref`](pref);
}
catch {return null;}
},
setPrefs(pref, val) {
Services.prefs[`set${this.types[typeof val]}Pref`](pref, val);
}
},
gClipboard: {
get ch() {
delete this.ch;
return this.ch = Cc["@mozilla.org/widget/clipboardhelper;1"]
.getService(Ci.nsIClipboardHelper);
},
write(str) {
this.ch.copyStringToClipboard(str, Services.clipboard.kGlobalClipboard);
}
},
cust
egorsemenov06
…
Кстати насчет кнопки Save, лучше удалить иконку из скрипта Save.js self.image = ...
и добавить в CustomizableUI.createWidget({
[spoiler][code] onCreated(btn) {
...
btn.setAttribute("image", this.image);
},
get image() {
var img = `${this.id.toLowerCase()}-img`;
Services.io.getProtocolHandler("resource")
.QueryInterface(Ci.nsIResProtocolHandler)
.setSubstitution(img, Services.io.newURI("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path style='fill:none;stroke:context-fill rgb(142, 142, 152);stroke-opacity:context-fill-opacity;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;' d='M3 .6C1.6.6.6 1.6.6 3v10c0 1.4 1 2.4 2.4 2.4h10c1.4 0 2.4-1 2.4-2.4V4.84L11.2.602Zm5.4 5.8h2V1m-2 0v5.4H7L5.6 5V1m-2 14v-2.6l1-1h6.8l1 1V15'/></svg>"));
delete this.image;
return this.image = `resource://${img}`;
},[/c
Vitaliy V. можно пожалуйста сделать эти svg
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 3H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zm10 0h-6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zM10 13H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1zm8 1h-2v2h-2v2h2v2h2v-2h2v-2h-2z"/></svg>
egorsemenov06 пишетвместо зеленой звездочки при добавлении кнопки ярыка сайта отображаетя глобус посмотрите пожалуйста
Не получилось воспроизвести.
Никакого глобуса, либо favicon страницы, либо зелёная звёздочка.может там в коде уже что то надо изменить
В смысле какого-то отвала — нет, не вижу ничего такого.
А в смысле косячков — конечно же есть, куда без них.
Например, вместо this.write определённо должно быть this.save
Спасибо за ответ!!!
Dumby Вы когда то делали кнопку она работает только вместо зеленой звездочки при добавлении кнопки ярыка сайта отображаетя глобус посмотрите пожалуйста может там в коде уже что то надо изменить [spoiler][code]//Вкладки в контейнере.............
try {CustomizableUI.createWidget(({
label: "Вкладки в контейнере",
image: "data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAewQAAHsEBw2lUUwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABYSURBVDiNY2CgEjjKwMDwHw0fwaIOJgcHjEgS2AAjGv8/ujgLkS5EtwBuEBORBuAExLoA3atwL8BccBSLJmyBOIgBoXSAU57YdIBTnuJoHDwGEEoHtEsnALmSHj9YVKEQAAAAAElFTkSuQmCC",
defaultFavicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjIyt5EXfQAAAmZJREFUOE91k1tIVFEUhj/v0l0LHyoiqoemKHowKaywMm9EIhVJRFl01aBIuphYliKNWqIv5pOgZWGGdHspJUtCSkW6vBRYb4EIEWJhzTSr
egorsemenov06
…
Так всё то же самое
[spoiler][code]/*
onCreated(btn) {
btn.setAttribute("image", "data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path style='fill:none;stroke:context-fill rgb(39, 174, 129);stroke-opacity:context-fill-opacity;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;' d='M12.9 15.3H3.2c-.88 0-1.6-.6-1.6-1.4v-2.7c0-.4.33-.6.74-.6h1.72c.7 0 1.25-.64 1.25-1.2 0-.64-.55-1.15-1.25-1.15H2.34c-.41 0-.74-.32-.74-.68V5.84c0-.81.72-1.48 1.6-1.48h2.36V3.13c0-1.21.93-2.297 2.21-2.419C9.23.57 10.5 1.62 10.5 2.98v1.38h2.4c.9 0 1.5.67 1.5 1.48v8.06c0 .8-.6 1.4-1.5 1.4z'/></svg>");
*/
get icon() {
var icon = "data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path style='fill:none;stroke:context-fill rgb(39, 174, 129);stroke-opacity:context-fill-opacity;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:roun
egorsemenov06
…
[spoiler][code]/*
btn.image = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAk1BMVEX///8/Pz8BAQF8fHwJCQkCAgIJCQl8fHx9fX0AAABJSUkBAQENDQ0wMDBVVVUAAABra2t0dHR7e3thYWEBAQEAAAAAAAABAQEAAAAgICABAQEBAQH8/Pzw8PDp6en39/fj4+Pe3t41V9I/YeWKioqDg4N9fX0jRa8wUrVoaGhkhuxWeNx1dXVCZMhvb28kRqsqTL4KidXxAAAAHHRSTlMAAABndwAAAAA0blVZcm1naWhNa6hrcJ8AAKRU4jk/3gAAAHVJREFUeF6FyMUCwjAUBdEbaQupUMOjqMv/fx1dQN6yZ3aDcWnyw6ezoRWNYc15kqKQZCFlgTKQQwgllL/dn5f3+bPb+6P3CpWNw56srdCZOMzDmA61i8O9nKvRaHLVukEryFKIFtnkj7ENYxmNdd5v+5xj1BcJ/w9Kj6K7ZAAAAABJRU5ErkJggg==";
*/
btn.image = this.icon;
},
get icon() {
var icon = "data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path style='fill:context-fill rgb(142, 142, 152);fill-opacity:context-fill-opacity;' d='M0 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6zm13 .25v.5c0 .138.112.25.25.25h.5a.25.25 0 0 0 .25-.25v-.5a.25.25 0 0 0-.
Vitaliy V. а как добавить вот эту svg [spoiler][code]data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path style='fill:context-fill rgb(142, 142, 152);fill-opacity:context-fill-opacity;' d='M0 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6zm13 .25v.5c0 .138.112.25.25.25h.5a.25.25 0 0 0 .25-.25v-.5a.25.25 0 0 0-.25-.25h-.5a.25.25 0 0 0-.25.25zM2.25 8a.25.25 0 0 0-.25.25v.5c0 .138.112.25.25.25h.5A.25.25 0 0 0 3 8.75v-.5A.25.25 0 0 0 2.75 8h-.5zM4 8.25v.5c0 .138.112.25.25.25h.5A.25.25 0 0 0 5 8.75v-.5A.25.25 0 0 0 4.75 8h-.5a.25.25 0 0 0-.25.25zM6.25 8a.25.25 0 0 0-.25.25v.5c0 .138.112.25.25.25h.5A.25.25 0 0 0 7 8.75v-.5A.25.25 0 0 0 6.75 8h-.5zM8 8.25v.5c0 .138.112.25.25.25h.5A.25.25 0 0 0 9 8.75v-.5A.25.25 0 0 0 8.75 8h-.5a.25.25 0 0 0-.25.25zM13.25 8a.25.25 0 0 0-.25.25v.5c0 .138.112.25.25.25h.5a.25.25 0 0 0 .25-.25v-.5a.25.25 0 0 0-.25-.25h-.5zm0 2a.25.25 0 0 0-.25.25v.5c0 .138.112.25.25.25
…