Mit userChrome.js einen on-/off-button für dom.storage.enabled erstellen

cafide

Hi,

ich hätte mal wieder einen ausgefallenen wunsch:

ist es mit userChrome.js möglich einen frei verschiebbaren ein-/aus-button bzw. umschalt-button zu erstellen, der den wert für dom.storage.enabled umschaltet und den aktuellen wert anzeigt.

der button soll beim "dom.storage.enabled" mit dem value "false" ein "OFF" Text oder Bild anzeigen und bei einem klick darauf den value auf "true" umschalten und dann das Bild oder den Text "ON" anzeigen. bei einem erneuten klick darauf den value wieder auf "false" umschalten usw.

danke

aborix

Hallo,

aber sicher geht das.
Der Animation Toggle Button in der Sammlung funktioniert auch so. Den nehmen wir uns als Vorlage, ändern, was zu ändern ist, und fertig ist das Ding.

Teste:

Code

(function() {


   if (location != 'chrome://browser/content/browser.xul')
      return;


   try {
      CustomizableUI.createWidget({
         id: 'dom-storage-button',
         type: 'custom',
         defaultArea: CustomizableUI.AREA_NAVBAR,
         onBuild: function(aDocument) {
            var button = aDocument.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbarbutton');
            var attributes = {
               id: 'dom-storage-button',
               class: 'toolbarbutton-1 chromeclass-toolbar-additional',
               removable: 'true',
               label: 'Dom Storage',
               tooltiptext: 'Dom Storage',
               dom_storage_enabled: Services.prefs.getBoolPref('dom.storage.enabled'),
               oncommand: '(' + onCommand.toString() + ')()'
            };
            for (var a in attributes) {
               button.setAttribute(a, attributes[a]);
            };
            function onCommand() {
               var enabled = Services.prefs.getBoolPref('dom.storage.enabled');
               Services.prefs.setBoolPref('dom.storage.enabled', !enabled);
               var windows = Services.wm.getEnumerator('navigator:browser');
               while (windows.hasMoreElements()) {
                  windows.getNext().document.getElementById('dom-storage-button').setAttribute('dom_storage_enabled', !enabled);
               };
            };
            return button;
         }
      });
   } catch(e) { };


   var css =
      '#dom-storage-button[dom_storage_enabled="true"] {list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAAANQTFRFAP8ANF7AqAAAAAxJREFUCB1jYCANAAAAMAABhKzxegAAAABJRU5ErkJggg==)} ' +
      '#dom-storage-button[dom_storage_enabled="false"] {list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAAANQTFRF/wAAGeIJNwAAAAxJREFUCB1jYCANAAAAMAABhKzxegAAAABJRU5ErkJggg==)} ';
   var stylesheet = document.createProcessingInstruction('xml-stylesheet', 'type="text/css" href="data:text/css;utf-8,' + encodeURIComponent(css) + '"');
   document.insertBefore(stylesheet, document.documentElement);


})();

Alles anzeigen

cafide

kann man den tooltip noch abhängig vom akutellen wert anzeigen lassen?
also beim wert true "Dom Storage ist aktiviert" und bei false "Dom Storage ist deaktiviert"
dann wäre es ganz genau, was ich gesucht habe.

vielen dank

aborix

ja:

Code

(function() {


   if (location != 'chrome://browser/content/browser.xul')
      return;


   try {
      CustomizableUI.createWidget({
         id: 'dom-storage-button',
         type: 'custom',
         defaultArea: CustomizableUI.AREA_NAVBAR,
         onBuild: function(aDocument) {
            var button = aDocument.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbarbutton');
            var attributes = {
               id: 'dom-storage-button',
               class: 'toolbarbutton-1 chromeclass-toolbar-additional',
               removable: 'true',
               label: 'Dom Storage',               
               tooltiptext: Services.prefs.getBoolPref('dom.storage.enabled') ?
                  'Dom Storage ist aktiviert' : 'Dom Storage ist deaktiviert',
               oncommand: '(' + onCommand.toString() + ')()'
            };
            for (var a in attributes) {
               button.setAttribute(a, attributes[a]);
            };
            function onCommand() {
               var isEnabled = !Services.prefs.getBoolPref('dom.storage.enabled');
               Services.prefs.setBoolPref('dom.storage.enabled', isEnabled);
               var windows = Services.wm.getEnumerator('navigator:browser');
               while (windows.hasMoreElements()) {
                  let button = windows.getNext().document.getElementById('dom-storage-button');
                  if (isEnabled)
                     button.setAttribute('tooltiptext', 'Dom Storage ist aktiviert')
                  else
                     button.setAttribute('tooltiptext', 'Dom Storage ist deaktiviert');
               };
            };
            return button;
         }
      });
   } catch(e) { };


   var css =
      '#dom-storage-button[tooltiptext="Dom Storage ist aktiviert"] {list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAAANQTFRFAP8ANF7AqAAAAAxJREFUCB1jYCANAAAAMAABhKzxegAAAABJRU5ErkJggg==)} ' +
      '#dom-storage-button[tooltiptext="Dom Storage ist deaktiviert"] {list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAAANQTFRF/wAAGeIJNwAAAAxJREFUCB1jYCANAAAAMAABhKzxegAAAABJRU5ErkJggg==)} ';
   var stylesheet = document.createProcessingInstruction('xml-stylesheet', 'type="text/css" href="data:text/css;utf-8,' + encodeURIComponent(css) + '"');
   document.insertBefore(stylesheet, document.documentElement);


})();

Alles anzeigen

Die Grafiken kann man natürlich durch andere ersetzen.

cafide

bist ja ganz schön schnell gewesen

ich habe die bilder noch durch andere ersetzt und jetzt ist es genau das was ich wollte.

nochmals einen großen dank an dich.

aborix

Gern geschehen.