Kann mal bitte jemand im Nightly überprüfen, ob dort die Angabe des z-index noch nötig ist (oder ob ich hier wieder irgendeinen Fehler beim Testen produziert habe...) ![]()
EDIT: Hat sich erledigt - habs gefunden...
Kann mal bitte jemand im Nightly überprüfen, ob dort die Angabe des z-index noch nötig ist (oder ob ich hier wieder irgendeinen Fehler beim Testen produziert habe...) ![]()
EDIT: Hat sich erledigt - habs gefunden...
Kann mal bitte jemand im Nightly überprüfen, ob dort die Angabe des z-index noch nötig ist (oder ob ich hier wieder irgendeinen Fehler beim Testen produziert habe...)
EDIT: Hat sich erledigt - habs gefunden...
Top Lösungsbeschreibung! ![]()
Wenn ich raten müsste: man braucht den z-index noch? ![]()
Jepp...
Sorry, stand gestern wegen privater Probleme etwas neben mir...
Von allen vertikalen Toolbars in v143 funktioniert nur eine einzige von Mitleser
Das ist eine über der Webseite schwebende Leiste, das ist keine Leiste die festgenagelt am rechten Fensterrand steht und nicht die Webseite verdeckt.
Von allen vertikalen Toolbars in v143 funktioniert nur eine einzige von Mitleser
Das ist eine über der Webseite schwebende Leiste, das ist keine Leiste die festgenagelt am rechten Fensterrand steht und nicht die Webseite verdeckt.
Kannst mal das hier testen, keine Garantie auf Funktion.
Kannst mal das hier testen, keine Garantie auf Funktion.
Erscheint leider auch nicht im Anpassen-Fenster.
Kannst mal das hier testen, keine Garantie auf Funktion.
Erscheint leider auch nicht im Anpassen-Fenster.
Mist verdammter... ![]()
Nur mal ganz schnell und grob, geht das hier generell? :
Dateiname Script mit 00 beginnen:
//Toggle newtoolbar 8C test browser
(function() {
if (location.href !== 'chrome://browser/content/browser.xhtml')
return;
// Eigenes Icon
let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
let icon_tb = 'newtoolbar.png';
let ImagePath = ProfilePath +'/'+ icon_tb;
let new_tb_loc = 0; // Position: 0 Rechts , 1 Links , 2 Bottom
let new_tb_off = 0; // 0 Startzustand On , 1 Startzustand Off
if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
}
let toolbox_new = document.createXULElement('toolbox');
toolbox_new.setAttribute('id','toolbox_new');
let browser_size = document.getElementById("browser");
let rect = browser_size.getBoundingClientRect();
let ntb = document.createXULElement('toolbar');
ntb.id = 'newtoolbar';
ntb.setAttribute('customizable', true);
ntb.setAttribute("class","toolbar-primary chromeclass-toolbar browser-toolbar customization-target");
ntb.setAttribute('mode', 'icons');
ntb.setAttribute('context', 'toolbar-context-menu');
toolbox_new.appendChild(ntb);
document.getElementById('browser').parentNode.appendChild(toolbox_new);
//geht height #2 not dynamic ???
//document.getElementById('toolbox_new').style.setProperty('--height_newbar', rect.height + 'px');
document.getElementById('toolbox_new').style.setProperty('--height_newbar', rect.top + 'px');
CustomizableUI.registerArea('newtoolbar', {legacy: true});
CustomizableUI.registerToolbarNode(ntb);
try {
CustomizableUI.createWidget({
id: 'NewToolbar_button',
type: 'custom',
defaultArea: CustomizableUI.AREA_NAVBAR,
onBuild: function(aDocument) {
let toolbaritem = aDocument.createXULElement('toolbarbutton');
let props = {
id: 'NewToolbar_button',
class: 'toolbarbutton-1 chromeclass-toolbar-additional',
removable: true,
label: 'Toggle New Toolbar',
tooltiptext: 'Toggle New toolbar',
};
for(let p in props)
toolbaritem.setAttribute(p, props[p]);
return toolbaritem;
}
});
} catch(e) { };
// Position
if (new_tb_loc === 1) {
toolbox_new.classList.add("left_mode");
browser.classList.add("left_mode_b");
}
else if (new_tb_loc === 2) {
toolbox_new.classList.add("bottom_mode");
browser.classList.add("bottom_mode_b");
}
// Startzustand
if (new_tb_off === 1) {
newtoolbar.classList.add("off-mode");
browser.classList.add("off-mode_b");
}
// button
document.getElementById('NewToolbar_button').addEventListener( "click", newTB );
function newTB(aEvent, keyEvent=false) {
if(!keyEvent && aEvent.button != 0) {
return;
}
newtoolbar.classList.toggle("off-mode");
browser.classList.toggle("off-mode_b");
}
const css =`
:root {
--ug-newbar_width: 42px;
--ug-newbar_bg_color: lightblue;
}
/* Button Icon */
#NewToolbar_button .toolbarbutton-icon {
list-style-image: url("chrome://browser/skin/sidebars-right.svg") !important;
/*list-style-image: url("${ImagePath}") !important;*/
}
#newtoolbar > :is(.toolbarbutton-1, toolbaritem) {
margin-block: 2px !important;
}
/* Basis / Right */
#browser {
transition: padding 0.5s ease !important;
}
#browser:not(.off-mode_b) {
padding-right: var(--ug-newbar_width) !important;
}
#toolbox_new {
position: absolute;
display: flex;
width: fit-content;
bottom: 0;
right: 0;
}
#newtoolbar {
display: flex;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
/*z-index: 4 !important;*/
width: var(--ug-newbar_width);
height: calc(100vh - var(--height_newbar));
padding-block: 8px;
background-color: var(--ug-newbar_bg_color) !important;
box-shadow: -1px 0 grey;
transition: width 0.5s ease, margin 0.5s ease, height 0.75s ease;
}
#newtoolbar:not([customizing]).off-mode {
margin-inline: 0 calc(0px - var(--ug-newbar_width));
box-shadow: none;
}
/* Left */
#browser:not(.off-mode_b).left_mode_b {
padding-inline: var(--ug-newbar_width) 0 !important;
}
#toolbox_new.left_mode {
left: 0;
}
.left_mode #newtoolbar {
box-shadow: 1px 0 grey;
}
.left_mode #newtoolbar:not([customizing]).off-mode {
margin-inline: calc(0px - var(--ug-newbar_width)) 0;
}
/* Bottom */
#browser:not(.off-mode_b).bottom_mode_b {
padding-inline: 0 !important;
padding-bottom: var(--ug-newbar_width) !important;
}
#toolbox_new.bottom_mode {
flex-direction: row !important;
width: 100vw;
}
.bottom_mode #newtoolbar {
flex-direction: row !important;
height: var(--ug-newbar_width);
width: 100vw;
padding-block: 0;
padding-inline: 8px;
box-shadow: 0 -1px grey;
border: none;
}
.bottom_mode #newtoolbar:not([customizing]).off-mode {
margin-inline: 0;
margin-block: 0 calc(0px - var(--ug-newbar_width)) !important;
}
.bottom_mode #newtoolbar > :is(.toolbarbutton-1, toolbaritem) {
margin-block: 0 !important;
margin-inline: 2px !important;
}
/* customizing */
#newtoolbar[customizing] {
min-width: 0 !important;
width: fit-content !important;
}
.bottom_mode #newtoolbar[customizing] {
width: 100vw !important;
}
#customization-container {
margin-inline: 0 var(--ug-newbar_width) !important;
}
/*
#browser.left_mode_b + #customization-container {
margin-inline: var(--ug-newbar_width) 0 !important;
}
#browser.bottom_mode_b + #customization-container {
margin-inline: 0 !important;
margin-bottom: var(--ug-newbar_width) !important;
}
*/
`;
const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
})();
Alles anzeigen
Nur mal ganz schnell und grob, geht das hier generell? :
Ist sichtbar, aber lässt sich nicht mit Buttons belegen.
Nur mal ganz schnell und grob, geht das hier generell? :
Ist sichtbar, aber lässt sich nicht mit Buttons belegen.
Schade, Danke für's testen! ![]()
Und das hier:
?
//Toggle newtoolbar 8C neu test browser
//Use filename starting with 000 !! =>
//000_extra_toolbars_test_B.uc.js
// TEST!!!
(function() {
if (location.href !== 'chrome://browser/content/browser.xhtml')
return;
// Eigenes Icon
let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
let icon_tb = 'newtoolbar.png';
let ImagePath = ProfilePath +'/'+ icon_tb;
let new_tb_loc = 0; // Position: 0 Rechts , 1 Links , 2 Bottom
let new_tb_off = 0; // 0 Startzustand On , 1 Startzustand Off
if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
}
let toolbox_new = document.createXULElement('toolbox');
toolbox_new.setAttribute('id','toolbox_new');
let browser_size = document.getElementById("browser");
let rect = browser_size.getBoundingClientRect();
let ntb = document.createXULElement('toolbar');
ntb.id = 'newtoolbar';
ntb.setAttribute('customizable', true);
ntb.setAttribute("class","toolbar-primary chromeclass-toolbar browser-toolbar customization-target");
ntb.setAttribute('mode', 'icons');
ntb.setAttribute('context', 'toolbar-context-menu');
toolbox_new.appendChild(ntb);
document.getElementById('browser').parentNode.appendChild(toolbox_new);
//geht height #2 not dynamic ???
//document.getElementById('toolbox_new').style.setProperty('--height_newbar', rect.height + 'px');
document.getElementById('toolbox_new').style.setProperty('--height_newbar', rect.top + 'px');
CustomizableUI.registerArea('newtoolbar', {legacy: true});
CustomizableUI.registerToolbarNode(ntb);
try {
CustomizableUI.createWidget({
id: 'NewToolbar_button',
type: 'custom',
defaultArea: CustomizableUI.AREA_NAVBAR,
onBuild: function(aDocument) {
let toolbaritem = aDocument.createXULElement('toolbarbutton');
let props = {
id: 'NewToolbar_button',
class: 'toolbarbutton-1 chromeclass-toolbar-additional',
removable: true,
label: 'Toggle New Toolbar',
tooltiptext: 'Toggle New toolbar',
};
for(let p in props)
toolbaritem.setAttribute(p, props[p]);
return toolbaritem;
}
});
} catch(e) { };
// Position
if (new_tb_loc === 1) {
toolbox_new.classList.add("left_mode");
browser.classList.add("left_mode_b");
}
else if (new_tb_loc === 2) {
toolbox_new.classList.add("bottom_mode");
browser.classList.add("bottom_mode_b");
}
// Startzustand
if (new_tb_off === 1) {
newtoolbar.classList.add("off-mode");
browser.classList.add("off-mode_b");
}
// button
document.getElementById('NewToolbar_button').addEventListener( "click", newTB );
function newTB(aEvent, keyEvent=false) {
if(!keyEvent && aEvent.button != 0) {
return;
}
newtoolbar.classList.toggle("off-mode");
browser.classList.toggle("off-mode_b");
}
const css =`
:root {
--ug-newbar_width: 36px;
--ug-newbar_bg_color: lightblue;
}
/* Button Icon */
#NewToolbar_button .toolbarbutton-icon {
list-style-image: url("chrome://browser/skin/sidebars-right.svg") !important;
/*list-style-image: url("${ImagePath}") !important;*/
}
#newtoolbar > :is(.toolbarbutton-1, toolbaritem),
#newtoolbar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
margin-block: 2px !important;
}
/* Basis / Right */
#browser {
transition: padding 0.25s ease !important;
}
#browser:not(.off-mode_b) {
padding-right: var(--ug-newbar_width) !important;
}
#toolbox_new {
position: fixed;
z-index: 4 !important;
display: flex;
width: fit-content;
bottom: 0;
right: 0;
}
#newtoolbar {
display: flex;
flex-direction: column;
width: var(--ug-newbar_width);
height: calc(100vh - var(--height_newbar));
padding-block: 8px;
background-color: var(--ug-newbar_bg_color) !important;
box-shadow: -1px 0 grey;
transition: width 0.25s ease, margin 0.25s ease /*,height 0.5s ease*/ ;
}
#newtoolbar:not([customizing]).off-mode {
margin-inline: 0 calc(0px - var(--ug-newbar_width));
box-shadow: none;
}
/* Left */
#browser:not(.off-mode_b).left_mode_b {
padding-inline: var(--ug-newbar_width) 0 !important;
}
#toolbox_new.left_mode {
left: 0;
}
.left_mode #newtoolbar:not([customizing]) {
box-shadow: 1px 0 grey;
}
.left_mode #newtoolbar:not([customizing]).off-mode {
margin-inline: calc(0px - var(--ug-newbar_width)) 0;
}
/* Bottom */
#browser:not(.off-mode_b).bottom_mode_b {
padding-inline: 0 !important;
padding-bottom: var(--ug-newbar_width) !important;
}
#toolbox_new.bottom_mode {
flex-direction: row;
width: fit-content;
}
.bottom_mode #newtoolbar:not([customizing]) {
flex-direction: row !important;
height: var(--ug-newbar_width);
width: 100vw;
padding-block: 0;
padding-inline: 8px;
box-shadow: 0 -1px grey;
border: none;
}
.bottom_mode #newtoolbar:not([customizing]).off-mode {
margin-inline: 0;
margin-block: 0 calc(0px - var(--ug-newbar_width)) !important;
}
.bottom_mode #newtoolbar:not([customizing]) > :is(.toolbarbutton-1, toolbaritem) {
margin-block: 0 !important;
margin-inline: 2px !important;
}
/* customizing */
:root[customizing] #toolbox_new {
position: fixed !important;
bottom: 0 !important;
right: 0 !important;
left: unset !important;
}
#newtoolbar[customizing] {
min-width: 0 !important;
width: fit-content !important;
height: calc(100vh - var(--height_newbar) + 1px);
padding-top: 9px;
}
/*
.bottom_mode #newtoolbar[customizing] {
width: 100vw !important;
}
*/
#customization-container {
margin-inline: 0 var(--ug-newbar_width) !important;
}
/*
#browser.left_mode_b + #customization-container {
margin-inline: var(--ug-newbar_width) 0 !important;
}
#browser.bottom_mode_b + #customization-container {
margin-inline: 0 !important;
margin-bottom: var(--ug-newbar_width) !important;
}
*/
`;
const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
})();
Alles anzeigen
Und das hier:
?
Leider nicht, ist sichtbar, aber lässt sich nicht bestücken.
Und das hier:
?
Leider nicht, ist sichtbar, aber lässt sich nicht bestücken.
Den letzten Code habe ich gerade im aktuellsten Release 143.x und Nightly getestet, funktioniert prima. ![]()
Den letzten Code habe ich gerade im aktuellsten Release 143.x und Nightly getestet, funktioniert prima.
Bei mir leider nicht.
Funktioniert hier auch nicht - Release und Nightly. Positionierung geht, Bestückung der Leiste mit Buttons: Fehlanzeige...
Danke für's testen! ![]()
Scheint so als ob ein bestimmter Schlaumeier nicht die leere Leiste getestet hat...![]()
Sorry, hier nochmal Einer:
//Toggle newtoolbar 8D Fix neu test browser
//Use filename starting with 000 !! =>
//000_extra_toolbars_test_D.uc.js
// TEST!!!
(function() {
if (location.href !== 'chrome://browser/content/browser.xhtml')
return;
// Eigenes Icon
let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
let icon_tb = 'newtoolbar.png';
let ImagePath = ProfilePath +'/'+ icon_tb;
let new_tb_loc = 0; // Position: 0 Rechts , 1 Links , 2 Bottom
let new_tb_off = 0; // 0 Startzustand On , 1 Startzustand Off
if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
}
let toolbox_new = document.createXULElement('toolbox');
toolbox_new.setAttribute('id','toolbox_new');
let browser_size = document.getElementById("browser");
let rect = browser_size.getBoundingClientRect();
let ntb = document.createXULElement('toolbar');
ntb.id = 'newtoolbar';
ntb.setAttribute('customizable', true);
ntb.setAttribute("class","toolbar-primary chromeclass-toolbar browser-toolbar customization-target");
ntb.setAttribute('mode', 'icons');
ntb.setAttribute('context', 'toolbar-context-menu');
toolbox_new.appendChild(ntb);
document.getElementById('browser').parentNode.appendChild(toolbox_new);
//geht height #2 not dynamic ???
//document.getElementById('toolbox_new').style.setProperty('--height_newbar', rect.height + 'px');
document.getElementById('toolbox_new').style.setProperty('--height_newbar', rect.top + 'px');
CustomizableUI.registerArea('newtoolbar', {legacy: true});
CustomizableUI.registerToolbarNode(ntb);
try {
CustomizableUI.createWidget({
id: 'NewToolbar_button',
type: 'custom',
defaultArea: CustomizableUI.AREA_NAVBAR,
onBuild: function(aDocument) {
let toolbaritem = aDocument.createXULElement('toolbarbutton');
let props = {
id: 'NewToolbar_button',
class: 'toolbarbutton-1 chromeclass-toolbar-additional',
removable: true,
label: 'Toggle New Toolbar',
tooltiptext: 'Toggle New toolbar',
};
for(let p in props)
toolbaritem.setAttribute(p, props[p]);
return toolbaritem;
}
});
} catch(e) { };
// Position
if (new_tb_loc === 1) {
toolbox_new.classList.add("left_mode");
browser.classList.add("left_mode_b");
}
else if (new_tb_loc === 2) {
toolbox_new.classList.add("bottom_mode");
browser.classList.add("bottom_mode_b");
}
// Startzustand
if (new_tb_off === 1) {
newtoolbar.classList.add("off-mode");
browser.classList.add("off-mode_b");
}
// button
document.getElementById('NewToolbar_button').addEventListener( "click", newTB );
function newTB(aEvent, keyEvent=false) {
if(!keyEvent && aEvent.button != 0) {
return;
}
newtoolbar.classList.toggle("off-mode");
browser.classList.toggle("off-mode_b");
}
const css =`
:root {
--ug-newbar_width: 36px;
--ug-newbar_bg_color: lightblue;
}
/* Button Icon */
#NewToolbar_button .toolbarbutton-icon {
list-style-image: url("chrome://browser/skin/sidebars-right.svg") !important;
/*list-style-image: url("${ImagePath}") !important;*/
}
#newtoolbar > :is(.toolbarbutton-1, toolbaritem),
#newtoolbar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
margin-block: 2px !important;
}
/* Basis / Right */
#browser {
transition: padding 0.25s ease !important;
}
#browser:not(.off-mode_b) {
padding-right: var(--ug-newbar_width) !important;
}
#toolbox_new {
position: fixed;
z-index: 4 !important;
display: flex;
width: fit-content;
bottom: 0;
right: 0;
}
#newtoolbar {
display: flex;
flex-direction: column;
min-width: 0 !important;
width: var(--ug-newbar_width);
height: calc(100vh - var(--height_newbar));
padding-block: 8px;
background-color: var(--ug-newbar_bg_color) !important;
box-shadow: -1px 0 grey;
transition: width 0.25s ease, margin 0.25s ease /*,height 0.5s ease*/ ;
}
#newtoolbar:not([customizing]).off-mode {
margin-inline: 0 calc(0px - var(--ug-newbar_width));
box-shadow: none;
}
/* Left */
#browser:not(.off-mode_b).left_mode_b {
padding-inline: var(--ug-newbar_width) 0 !important;
}
#toolbox_new.left_mode {
left: 0;
}
.left_mode #newtoolbar:not([customizing]) {
box-shadow: 1px 0 grey;
}
.left_mode #newtoolbar:not([customizing]).off-mode {
margin-inline: calc(0px - var(--ug-newbar_width)) 0;
}
/* Bottom */
#browser:not(.off-mode_b).bottom_mode_b {
padding-inline: 0 !important;
padding-bottom: var(--ug-newbar_width) !important;
}
#toolbox_new.bottom_mode {
flex-direction: row;
width: fit-content;
}
.bottom_mode #newtoolbar:not([customizing]) {
flex-direction: row !important;
height: var(--ug-newbar_width);
width: 100vw;
padding-block: 0;
padding-inline: 8px;
box-shadow: 0 -1px grey;
border: none;
}
.bottom_mode #newtoolbar:not([customizing]).off-mode {
margin-inline: 0;
margin-block: 0 calc(0px - var(--ug-newbar_width)) !important;
}
.bottom_mode #newtoolbar:not([customizing]) > :is(.toolbarbutton-1, toolbaritem) {
margin-block: 0 !important;
margin-inline: 2px !important;
}
/* customizing */
:root[customizing] #toolbox_new {
position: fixed !important;
bottom: 0 !important;
right: 0 !important;
left: unset !important;
}
#customization-container {
margin-inline: 0 var(--ug-newbar_width) !important;
}
`;
const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
})();
Alles anzeigen
Scheint so als ob ein bestimmter Schlaumeier nicht die leere Leiste getestet hat...
Na so was aber auch. ![]()
Sorry, hier nochmal Einer:
Letzten Endes wird alles gut, nun lässt sie sich bestücken und sie hält die bestückten Buttons auch nach Beenden oder Neustart, also alles gut. ![]()
Die scheint es zu tun - Nightly und Release...
EDIT: Sie tut es auch, wenn der Name nicht mit 000 anfängt. Ich habe einfach mit Name "neu.js" getestet...
Letzten Endes wird alles gut, nun lässt sie sich bestücken und sie hält die bestückten Buttons auch nach Beenden oder Neustart, also alles gut.
Die scheint es zu tun - Nightly und Release...
EDIT: Sie tut es auch, wenn der Name nicht mit 000 anfängt. Ich habe einfach mit Name "neu.js" getestet...
Danke! ![]()
Dann werd ich das Ganze bei Gelegenheit mal ordentlich und hübsch machen, es gibt ja zZ andere Leisten die funktionieren bzw. gefixt wurden; ausserdem gäbe es vermutlich noch viel zu testen für das Ding.
Ausser es hat jemand Eile. ![]()
Bzgl. 00 , deshalb.
Eigene Buttons können Probleme machen, wenn die Leiste nicht früher geladen wird.
Eigene Buttons können Probleme machen, wenn die Leiste nicht früher geladen wird.
Mag sein, daß ich beim Test keinen derartigen Button verwendet habe... ![]()
Ausser es hat jemand Eile.
Ich nicht.. ![]()
Ausser es hat jemand Eile.
Gut Ding hat Weile.