[Ext] userChrome.js

[dougeeebear]

Thanks Zoolcar9, but I'm using Stylish 0.3.2 and it doesn't have the insert menu.
I'd like to add a button next to the "Enabled" checkbox on the right-hand side.
Thanks for your time.

Regards,
Doug

[pirlouy]

If you don't explain why you don't use Stylish 4, I'm not sure you'll get an answer... :/

Once again, thanks Zoolcar9.

[Kupfel]

thanks zoolcar, great work on the data:uri script

[dougeeebear]

If you don't explain why you don't use Stylish 4, I'm not sure you'll get an answer

Same reason I don't use Firefox 2.0... I choose not to.

[pirlouy]

To summarize , for the moment, to customize another window than the main one, we have to do:

Code: Select all

(function() {

// put here WindowHook script that can be found page 1 on Mozillazine userChrome.js topic

    WindowHook.register("chrome://stylish/content/stylish-edit.xul",  // here, you can choose window you want to customize
         function(aWindow) {

              // here you put different code snippets given by nice developers...

                            }
                        );
            }
 )
();

Question: if we want to customize another window, what is the best: create a new file with this code ? or continue in the same loop function () { (= WindowHook.register... on the bounce) ? Hope I've been understandable...
Zeniko, Zoolcar9, pile0nades... an answer ?

[old zeniko]

That's actually not the recommended way to use the WindowHook snippet at all. Rather add it once at the start of the main userChrome.js file and then just do

Code: Select all

WindowHook.register(WindowURL, function(aWindow) { /* code here */ });

for each function (resp. window you want to customize).

[Zoolcar9]

This is how my WindowHook.uc.js looks like
<a href="http://zoolcar9.lhukie.net/mozilla/userChromeJS/windowHook.uc.js">WindowHook.uc.js</a>

[DMCrimson]

Zoolcar9, could you please comment the code a bit more? I'm curious about all that code you have in there, and I'd like to understand abit more about them:) some are, of course, self-explanatory, but some are not...

[Old Greg S]

Code: Select all

var menuitem = document.getElementById("goOfflineMenuitem");
menuitem.addEventListener("click", switchlabel, false);

function switchlabel() {
  var menuitem = document.getElementById("goOfflineMenuitem");
  if(menuitem.getAttribute("checked") == "true") menuitem.setAttribute("label", "Work Online");
  else menuitem.setAttribute("label", "Work Offline");
}

I use the above to switch the label of "Work Offline" to "Work Online" when the menuitem has been clicked. When online the menuitem displays an icon and when offline it displays a different icon rather than the default checkmark/checkbox style. I also use the work offline extension which places a statusbarpanel icon in the statusbar to toggle between offline and online. If I click the offline statusbarpanel icon the menuitem icon under file menu reverts back to the default style of the checkbox type instead of displaying my styled menuitem icon. Is there something I can change in the code above to honor my menuitem icon style when the statusbarpanel icon has been clicked?

Also, can I add my styled icon code to the script above for the menuitem when in the offline state? Right now I'm using Stylish to code the menuitem icon when in the offline state.
Thanks

[dougeeebear]

This is my feeble attempt to add a "Color Picker" button to the Stylish editor.
This requires the RainbowPicker extension to be installed Screenshot

This works, but the the editor disappears behind the browser when the button is pressed.
When you are done with the color picker, you have to focus the editor from the system tray.
I would like the editor to remain on top of the browser when the color picker is open.

Any ideas?

Code: Select all

WindowHook.register("chrome://stylish/content/stylish-edit.xul",
   function(aWindow) {
   var checkbox = aWindow.document.getElementById("wrap-lines");
      
      var button = aWindow.document.createElement("button");
      button.setAttribute("label", "Color Picker");
      checkbox.parentNode.insertBefore(button, checkbox);
      
        button.addEventListener("click", function() {

        aWindow.openColorPicker = function() { 
        var open = rainbowpickerToolbar();
    }
        aWindow.openColorPicker();

    }, false);
});

Thanks,
Doug

[esquifit]

This is my feeble attempt to add a "Color Picker" button to the Stylish editor.
This requires the RainbowPicker extension to be installed Screenshot

This works, but the the editor disappears behind the browser when the button is pressed.
When you are done with the color picker, you have to focus the editor from the system tray.
I would like the editor to remain on top of the browser when the color picker is open.

I do not quite understand your code, but the idea is great! After some struggle I got this version:

Code: Select all

WindowHook.register("chrome://stylish/content/stylish-edit.xul",
  function(aWindow) {

        var checkbox = aWindow.document.getElementById("wrap-lines");
        var picker   = aWindow.document.createElement("colorpicker");

        var getColor = function(){
              if(arguments.callee.caller.name!='onchange') return;  //why is this necessary?
              var box    = aWindow.document.getElementById("code").mInputField;
              var text   = box.value.toString()
              var s      = box.selectionStart;
              var e      = box.selectionEnd;
              box.value  = text.substring(0,s)   + 
                                 this.color.toString()  + 
                                 text.substring(e,text.length);
              box.setSelectionRange(s + 7, s + 7);  // 7 = "#AABBCC".length 
              box.focus();
                
        }
        picker.getColor = getColor;
        picker.setAttribute("type", 'button');
        picker.setAttribute("onchange", "this.getColor()");
        checkbox.parentNode.insertBefore(picker, checkbox);
  }
);

A few notes regarding this approach:

• The colour picker button is inserted directly in the button bar. You may or may not like this. I do.
• Contrary to the behaviour of Stylish in the "Insert->Color..." menu, if RainbowPicker is installed it is automatically recognized and used.
• For some reason unclear to me, the 'change' event is fired twice; the detection of 'arguments.callee.caller' is ugly but it works fine with or without RainbowPicker.
• The two last lines of getColor serve the purpose of leaving the caret/cursor right after the inserted colour code.

[dougeeebear]

esquifit,
Thanks for the time you put into the script, but that's not really what I was looking for.
I don't want an actual system color button, I just want to pop up the Rainbow color picker and leave the stylish editor visible, using the button that is created in my script.

Regards,
Doug

[esquifit]

esquifit,
Thanks for the time you put into the script, but that's not really what I was looking for.
I don't want an actual system color button, I just want to pop up the Rainbow color picker and leave the stylish editor visible, using the button that is created in my script.

Oh, I see, sorry. Nevertheless it wasn't waisted time, I learn a couple of things in the process

[aronin]

Found this script to set the Max Width of Tabs by Simon Bunzli here https://bugzilla.mozilla.org/show_bug.cgi?id=345950 , I guess some of us could use it...

eval("gBrowser.addTab = " + gBrowser.addTab.toString().replace("maxWidth = 250", "maxWidth = 140"));
Array.forEach(gBrowser.tabContainer.childNodes, function(aTab) { aTab.maxWidth = 140; });

[adam.tropics]

aronin: Is it possible to add to that so that the tab overflow goes on a new row?...ie without the need for tabmix plus, which whilst excellent, is just more than I need.