Neuen beweglichen Button mit Funktion erstellen.

Mira_Belle

Hallo.

Habe mir aus RestartFirefoxButtonM.uc.js folgenden Code zusammen gestellt.

(Ich meine. das Original stammt von aborix, bin mir aber nicht sicher, habe es aus einem Thread von 2002Andreas)

JavaScript

(function() {

    if (location !== 'chrome://browser/content/browser.xhtml') return;
     
     try {
         CustomizableUI.createWidget({
             id: 'appmenu-developer-tools-view',
             type: 'custom',
             defaultArea: CustomizableUI.AREA_NAVBAR,
             onBuild: function(aDocument) {            
                 var toolbaritem = aDocument.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbarbutton');
                 var props = {
                     id: 'appmenu-developer-tools-view',
                     class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                     label: 'Browser-Werkzeuge',
                     tooltiptext: 'Browser-Werkzeuge',
                     style: 'list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/iff60u96.default-release/chrome/icons/window-dev-tools.svg")',
                     onclick: 'if (event.button == 0 || event.button == 2) { \
                                    Services.appinfo.invalidateCachesOnRestart(); \
                                    Services.startup.quit(Ci.nsIAppStartup.eRestart | Ci.nsIAppStartup.eAttemptQuit); \
                               };'
                };                               
                 for (var p in props)
                     toolbaritem.setAttribute(p, props[p]);                
                 return toolbaritem;
             }        
         });
     } catch(e) { };        
    
 })();

Alles anzeigen

So weit, so gut.

Nur wie ändere ich die Funktion, sodass die Browser-Werkzeuge geöffnet werden?

Und ist der Code grundsätzlich richtig, auch wenn er funktioniert?

Dharkness

Zitat von Mira_Belle

Nur wie ändere ich die Funktion, sodass die Browser-Werkzeuge geöffnet werden?

Man nehme das fertige Script von aborix?!

JavaScript

//  Browser-Werkzeuge.uc.js
//  Author @aborix

(function() {
    if (location != AppConstants.BROWSER_CHROME_URL) return;

    try {
        CustomizableUI.createWidget({
            id: 'browser-toolbox-button',
            defaultArea: CustomizableUI.AREA_NAVBAR,
            label: 'Browser-Werkzeuge',
            tooltiptext: 'Browser-Werkzeuge',
            onCommand: onCommand,
            onCreated: function(button) {
                button.style.listStyleImage = 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAdUlEQVQokZVSwRHAIAgLPYfoXs7RCTpG53Avt7APrhaFU8gLMEEJAkEQgFbc7IxkVjt0r6Sp7VIVITumBpKt00FA2ThmjXzkfMMWO8EZFSj8LrUyjsG9b9DaJXq+qAIVxEUxtLHpaXE95dj1NcK2rmbwaGJ4Af0tIg00j/6iAAAAAElFTkSuQmCC)';
            }
        });
    } catch(e) {
        return;
    };

    function onCommand(event) {
        var document = event.target.ownerDocument;
        if (!document.getElementById('menu_browserToolbox')) {
            let { require } = Cu.import("resource://devtools/shared/loader/Loader.jsm", {});
            require("devtools/client/framework/devtools-browser");
        };
        document.getElementById('menu_browserToolbox').click();
    };

})();

Alles anzeigen

grisu2099

Zitat von Dharkness

Man nehme das fertige Script

Wollte ich auch just vorschlagen...

Mira_Belle

Ja, das Script funktioniert.

Nur, was habe ich dabei gelernt?

Wie ändere ich nun dieses Script, damit ich andere Funktionen von Firefox aufrufen kann?

Bei dem von mir genannten Script müsse nach meiner Vorstellung doch nur Zeile 18 geändert werden.

Oder liege ich da falsch?

Dharkness

Zitat von Mira_Belle

Oder liege ich da falsch?

Würde ich denken, den es werden ja völlig andere Ressourcen angesprochen, der ober Teile des von mir vorgeschlagenen Scripts ist wohl für den Button zuständig und der untere Teil für das was aufgerufen wird, also vollkommen unterschiedlich zu dem von Dir beigestellten Script. Sprich nur Zeile 18 zu ändern wird wohl nicht reichen, aber wirklich genau kann ich das nicht sagen, denn Javascript beherrsche ich nicht.

Mira_Belle

Zitat von Dharkness

...

Gibt es irgendwo eine Sammlung von aborix Scripten?

Oder sind die hier auf dem Board verteilt?

Mira_Belle

Yes 💪

1. Browser-Werkzeuge

JavaScript

//  Browser-Werkzeuge.uc.js
//  Author @aborix

(function() {

    if (location.href !== 'chrome://browser/content/browser.xhtml') return;
     
    try {
        CustomizableUI.createWidget({
            id: 'browser-toolbox-button',
            defaultArea: CustomizableUI.AREA_NAVBAR,
            label: 'Browser-Werkzeuge',
            tooltiptext: 'Browser-Werkzeuge',
            onCommand: onCommand,
            onCreated: function(button) {
                button.style.listStyleImage = 'url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/iff60u96.default-release/chrome/icons/window-dev-tools.svg")';
            }
        });
    } catch(e) {
        return;
    }

    function onCommand(event) {
        var document = event.target.ownerDocument;
        if (!document.getElementById('menu_browserToolbox')) {
            let { require } = Cu.import("resource://devtools/shared/loader/Loader.jsm", {});
            require("devtools/client/framework/devtools-browser");
        }
        document.getElementById('menu_browserToolbox').click();
    }

})();

Alles anzeigen

2. Werkzeuge für Webentwickler

JavaScript

//  Werkzeuge fuer Webentwickler.uc.js
//  Author @aborix

(function() {

    if (location.href !== 'chrome://browser/content/browser.xhtml') return;
     
    try {
        CustomizableUI.createWidget({
            id: 'dev-toolbox-button',
            defaultArea: CustomizableUI.AREA_NAVBAR,
            label: 'Werkzeuge für Web-Entwickler',
            tooltiptext: 'Werkzeuge für Web-Entwickler',
            onCommand: onCommand,
            onCreated: function(button) {
                button.style.listStyleImage = 'url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/iff60u96.default-release/chrome/icons/developer.svg")';
            }
        });
    } catch(e) {
        return;
    }

    function onCommand(event) {
        var document = event.target.ownerDocument;
        if (!document.getElementById('menu_devToolbox')) {
            let { require } = Cu.import("resource://devtools/shared/loader/Loader.jsm", {});
            require("devtools/client/framework/devtools-browser");
        }
        document.getElementById('menu_devToolbox').click();
    }

})();

Alles anzeigen

Geht doch.

aborix

Zitat von Mira_Belle

Gibt es irgendwo eine Sammlung von aborix Scripten?

Oder sind die hier auf dem Board verteilt?

Es gibt keine Sammlung, die sind übers Forum verteilt.

Aber harff182 hat hier einige Urls zu Beiträgen mit Skripten von mir zusammengestellt:

#90

Mira_Belle

Zitat von aborix

Es gibt keine Sammlung, die sind übers Forum verteilt.

Danke.

ot:

Eine neue Leiste habe ich jetzt auch, year.

Da sind jetzt die neuen Buttons hingewandert, einschl. Reloaded.

JavaScript

/* new_toolbar.us.js */
// https://www.camp-firefox.de/forum/thema/122105-statusleiste/?postID=1052187#post1052187
// entwickelt von aborix
// https://www.camp-firefox.de/forum/thema/122105-statusleiste/?postID=1052247#post1052247
// verändert von EffPeh
// https://www.camp-firefox.de/forum/thema/122105-statusleiste/?postID=1061114#post1061114
// und mit CSS-Code von HT-Frogger versehen
(function() {
  if (location.href !== AppConstants.BROWSER_CHROME_URL)
    return;
  var css =`
  #new-toolbar {
    max-height: 36px !important;
    direction:rtl !important;
  }
  `;
  var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
  var uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
  sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);
  var tb = document.createXULElement('toolbar');
  tb.id = 'new-toolbar';
  tb.setAttribute('customizable', true);
  tb.setAttribute('mode', 'icons');
  var parentE = document.getElementById('nav-bar').parentNode;
  var childE = document.getElementById('nav-bar');
  parentE.insertBefore( tb , childE );
  CustomizableUI.registerArea('new-toolbar', {legacy: true});
  CustomizableUI.registerToolbarNode(tb);
})();

Alles anzeigen

Muss jetzt nur mal schauen, ob ich die Buttons zwingen kann, ihre Größe zu behalten,

auch wenn die Leiste "dünner" wird.

Hat da jemand einen Tipp für mich?

Nachtrag.

max-height: 26px !important; gehr gerade noch.

Aber mehr, bzw. weniger ist einfach nicht drinn, sonst werden die Symbole verzerrt.

Dharkness

Zitat von Mira_Belle

Muss jetzt nur mal schauen, ob ich die Buttons zwingen kann, ihre Größe zu behalten,
auch wenn die Leiste "dünner" wird.
Hat da jemand einen Tipp für mich?

Hm,

ändern die bei Dir ihre Größe?

Ich habe den Button meines Scripts für die Entwickler-Werkzeuge z.B. damit * angepasst, steht in meine Fall in dem Script für die vertikale Symbolleiste.

*

CSS

toolbarbutton {
    min-width: 20px !important;
    max-width: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    background: #905B46 !important;
    padding: 0 !important; /* Der Wert muss eventuell angepasst werden. */
    margin-top: 1px !important;
    margin-right: 1px !important;
    margin-left: 1px !important;
}
toolbarbutton .toolbarbutton-icon {
    padding: 0px !important;
    width: 16px !important;
    height: 16px !important;
    margin: 2px !important; /* Der Wert muss eventuell angepasst werden. */
}

Alles anzeigen

Mira_Belle

Zitat von Dharkness

Hm,
ändern die bei Dir ihre Größe?
Ich habe den Button meines Scripts für die Entwickler-Werkzeuge z.B. damit * angepasst, steht in meine Fall in dem Script für die vertikale Symbolleiste.
*

Versuch war's wert!

Habe etwas mit diesem Code herumgespielt, brachte aber leider nicht den erwünschten Erfolg.

Macht nix, habe nun max-height auf 24px eingestellt, da werden gerade die Symbole gestaucht, geht gerade so.

Bin noch am überlegen, ob ich nicht besser die Buttons in die #toolbar-menubar lege

und auf die #new-toolbar verzichte.

Nur habe ich dann das Problem die Buttons nach recht zu bekommen, während die Menüs ja links bleiben sollen.

Schaun mer ma.

Gabbo

Hier mal eine Lsg. für #new-toolbar (sowie Buttons) bei einer Höhe von 22px:

Sieht bei mir so aus:

CSS

#new-toolbar {
    height: 22px !important;
    --toolbarbutton-inner-padding: 6px !important;
    --toolbarbutton-outer-padding: 0px !important;
}
#new-toolbar toolbarbutton,
#new-toolbar .toolbarbutton-1 { 
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
} 
#new-toolbar toolbarbutton .toolbarbutton-icon   {
    margin-bottom: -3px !important;
    margin-top: -3px !important;
    overflow: hidden!important;
}
#new-toolbar .toolbarbutton-1 .toolbarbutton-badge { 
    padding-top:1px!important;
}

Alles anzeigen

Mira_Belle

Zitat von Gabbo

Hier mal eine Lsg. für #new-toolbar (sowie Buttons) bei einer Höhe von 22px:
...

Ich danke Dir, Gabbo.

Z.Z. nutze ich die "New Toolbar" nicht, aber habe mir Deine Lösung in "mein" Script mal integriert und werde es mal testen.

Im Augenblick habe ich die Buttons in die Menüleiste geschoben, mir wurde der ganze "Kopp" dann doch etwas zu aufgeblasen.

Horstmann

Zitat von Dharkness

Hm,
ändern die bei Dir ihre Größe?
Ich habe den Button meines Scripts für die Entwickler-Werkzeuge z.B. damit * angepasst, steht in meine Fall in dem Script für die vertikale Symbolleiste.

Sorry dass ich hier reingrätsche - hättest Du vielleicht einen Link zum Script für diese vertikale Symbolleiste ?

Ich habe mir schon den Wolf gesucht, aber nichts gefunden ...

Dharkness

Hallo Horstmann,

schau mal da → #CustomJSforFx/addonbar_vertical.uc.js at master · Aris-t2/CustomJSforFx · GitHub.

Horstmann

Zitat von Dharkness

Hallo Horstmann,
schau mal da → #CustomJSforFx/addonbar_vertical.uc.js at master · Aris-t2/CustomJSforFx · GitHub.

Vielen Dank für die Antwort .

Ich hätte erwähnen sollen, dass ich dieses eine Script schon habe, ist aber etwas temperamentvoll in der Anwendung .

Meine Hoffnung war auf eine Art heruntergekochte Basis-Version, v.a. ohne die ganzen CSS bezogenen Störer für den Button etc., ; aber das ist wohl eher was für einen neuen Thread ; oder vielleicht was das hierzu passen könnte .

Mira_Belle

Zitat von Horstmann

Meine Hoffnung war auf eine Art heruntergekochte Basis-Version, v.a. ohne die ganzen CSS bezogenen Störer für den Button etc., ; aber das ist wohl eher was für einen neuen Thread ; oder vielleicht was das hierzu passen könnte .

Meinst Du so?

JavaScript

/* new_toolbar.us.js */

(function() {
  if (location.href !== AppConstants.BROWSER_CHROME_URL)
    return;


  var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
  var uri = makeURI('data:text/css;charset=UTF=8,' );
  sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);
  var tb = document.createXULElement('toolbar');
  tb.id = 'new-toolbar';
  tb.setAttribute('customizable', true);
  tb.setAttribute('mode', 'icons');
  var parentE = document.getElementById('nav-bar').parentNode;
  var childE = document.getElementById('nav-bar');
  parentE.insertBefore( tb , childE );
  CustomizableUI.registerArea('new-toolbar', {legacy: true});
  CustomizableUI.registerToolbarNode(tb);
})();

Alles anzeigen

Eine einfache zusätzliche Leiste.

Horstmann

Zitat von Mira_Belle

Eine einfache zusätzliche Leiste.

Herzlichen Dank, aber diese Leiste ist horizontal, nicht vertikal .

Hatte ich auch schon probiert aufgrund deines früheren Beitrags, funktioniert auch prima - Dankeschön dafür - aber ist halt leider nicht vertikal bzw. seitlich angelegt .

Mira_Belle

Zitat von Horstmann

Zitat von Mira_Belle

Eine einfache zusätzliche Leiste.

Herzlichen Dank, aber diese Leiste ist horizontal, nicht vertikal .
Hatte ich auch schon probiert aufgrund deines früheren Beitrags, funktioniert auch prima - Dankeschön dafür - aber ist halt leider nicht vertikal bzw. seitlich angelegt .

Verdammt, schreib doch gleich, "von oben nach unten"!

Dharkness

Zitat von Mira_Belle

Verdammt, schreib doch gleich

Hm, was ist an vertikale Symbolleiste so falsch zu verstehen?

Neuen beweglichen Button mit Funktion erstellen.

Mira_Belle 16. Oktober 2022 um 17:27

Ähnliche Themen

Schaltfläche um Lesezeichen Leiste ein/auszublenden ?

Tab mit Yahoo Mail schließt sich selbst

Kein Video mit unterstütztem Format und MIME-Typ gefunden

stumm schalten-button vergößern möglich?

PDF wird trotz eingestellter App in Edge geöffnet

Firefox 91.3.0esr wie wieder mit bisheriger und gewohnter Druckvorschau