Useful Extensions, Keys, Scripts, CSS, etc for Stylish

edited July 2012 in Stylish
From the beginning, I started this thread because I wanted to share two awesome key scripts I'd found. Now I've expanded my idea:
Here is a thread for sharing, requesting, suggesting and improving anything about useful Extensions, Keys, Scripts, CSS, etc. for Stylish.

I'll try to keep a list of all the best at the top.


Extensions
Must-have extensions.
  • Stylish-Custom (SC) by ChoGGi
    An enhancement suite for Stylish, with way to many features to list them. It could replace/be replaced by many of the things below. Discussion and suggestions for it goes here.
  • DOM Inspector by Colby Russel, SeaMonkey Council and contributors
    Inspect elements, to get selectors, already applied style, computed style etc.
  • InspectorWidget by Sailfish
    Extends DOM Inspector. Easier inscpecting via a toolbar button. (Can be replaced by the Custom Button DOM Inspector.)
  • Inspect Context by max1million
    Extends DOM Inspector. Easier inscpecting via a context menu item. (Can be replaced by the Custom Button DOM Inspector.)

Keys
Keyboard shortcuts to be used in the Stylish editor, via keyconfig by dorando. Edit any style, then open keyconfig. In the box at the top, choose the entry with the name of the style you currently edit. Press "Add a new key", paste some code from below, and assign a shortcut for it. That's it, now the key will be available when editing any style.
All these scripts work in the Scratchpad, too, if you use Orion (set devtools.editor.component to orion in about:config). In each Scratchpad window you must run an "init" script once first, though.
  • Preview by LouCypher (from here)
    (Included in SC.)
    preview();
  • Edit in external editor by LouCypher
    Get the code from here.
  • Insert text at start by LouCypher
    insertCodeAtStart("YOURTEXTHERE");
    Here's some useful cases:
    • Insert HTML namespace at start by LouCypher
      insertCodeAtStart(CSSHTMLNS);
    • Insert XUL namespace at start by LouCypher
      insertCodeAtStart(CSSXULNS);
  • Insert text at caret
    To insert, for example, !important;. (Included in SC.)
    • Method 1 by Zoolcar9 (from here)
      insertCodeAtCaret("YOURTEXTHERE");
    • Method 2 by Zoolcar9 and Morgan B (from here) and banthaz
      Get the code from here.This isn't using the Stylish specific insertCodeAtCaret() function, so it works in other editors too, in case anyone's interested.
  • Insert text at caret - Choose from a menu by banthaz
    This key brings up a prompt box, where you can choose piece of text to insert from a list. You can change the list of available text pieces at the beginning of the code, like this: [, , ]. If [1] () is left undefined, [0] () is displayed instead. [2] () should normally be left undefined. If not, the script will see [0] () as a function to be run (using eval()).
    (A similar, though less advanced, feature is included in SC.)
    Get the code from here.As one of the examples in the list of text to insert in the code, I've included:
    • Insert Data URI by LouCypher
      insertDataURI();
  • Comment/Uncomment code Enhanced by Zoolcar9 and Morgan B (from here) and banthaz
    Short version: Comments selected code, uncomments selected comments. Long version: here.
    (Similar features are included in SC.)
    Get the code from here.
  • Go to line by banthaz
    Shows a prompt box that tells you which line you're currently on and lets type in the line you want to go to. (A similar feature is included in SC.)
    Get the code from here.Note: If you want to use this in the Scratchpad, you must replace the last line with this:
    var index = 0;
    for (var i = 1; i < line; i++) index = textbox.value.indexOf("\n", index) + 1;
    textbox.setSelectionRange(index, index);
  • Replace Enhanced by banthaz
    Both simple search and replace and some advanced modes. See more here.
    (A similar, though less advanced, feature is included in SC.)
    Get the code from here.
  • Insert "Headers" by banthaz
    Inserts "Headers" of different lengths at caret. Lengths can be customized at the two fist lines of the code.
    Get the code from here.
  • rgb()-hex converter by banthaz
    Converts the selection if it is a valid rgb() or hex color.
    Get the code from here.
  • Brackets by banthaz
    Inserts a {, a new line with the same indentation as the previous line, one level of indentation (default is 4 spaces, but this can be changed at the first line of the code) and a }. It then moves the caret between the brackets. If some text is selected, that text will be put between the brackets, properly indented.
    Get the code from here.
  • Select lines by banthaz
    Selects the whole line where the caret currently is, including the ending new line character. If some text is selected, the start and end of the selection will be extended to the start/end of their respective lines.
    Get the code from here.
«1

Comments

  • edited July 2012
    Custom Buttons
    Buttons to install via Custom Buttons by Yan, cubegm and SCClockDr.
    Commands
    Here are commands (or scripts) that can be used via extensions such as keyconfig by dorando, Custom Buttons by Yan, cubegm and SCClockDr and FireGestures by Gomita or other use.
    • Create a new style by unknown
      stylishOverlay.addCode('');
      Optionally, you can add some text between the single quotes ('), which will be inserted into the new style. I use this, for example:
      stylishOverlay.addCode('@namespace url(\"http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul\");\\n\\n\\n');

    userChrome.js
    Scripts that extend Stylish in some way, added via extensions such as userChromeJS by mozdev.org and Custom Buttons by Yan, cubegm and SCClockDr.
    With userChromeJS, simply add code into the userChrome.js file.
    With Custom Buttons, add code into some button's init tab. Tip: Create a button only for this "userChrome.js replacement" purpose. Add custombuttons.editButton(this); to the button's code tab. Then your userChrome.js replacement is always only one click away!
    • Stylish button - Do something on double-click by banthaz
      document.getElementById("stylish-toolbar-button").setAttribute("ondblclick","YOURFUNCTIONHERE");
      I added this command, to create a new style when double-clicking.

    CSS tweaks
    Small CSS codes.
    • Remove bottom bar in Add-ons Manager by banthaz
      #userstyle-footer
      {
      display: none !important;
      }
    • Stylish button - Global styles - Put at the bottom & Grey out by Barbiegirl (from here) and banthaz
      (Similar feature is included in SC.)
      #stylish-popup [style-type*="global"]
      {
      -moz-box-ordinal-group: 3 !important;
      color: grey !important;
      }
    • Stylish button - Global styles - Remove by Barbiegirl (from here)
      #stylish-popup [style-type*="global"]
      {
      display: none !important;
      }
    • Stylish section in the Add-ons Manager - Fix top row by banthaz
      This makes Stylish's sorting buttons more compact, like the rest of the sorting buttons in the Add-ons Manager.
      #userstyle-sorting
      {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      }
      #userstyle-sorting button.sorter
      {
      margin-top: 5px !important;
      margin-bottom: 4px !important;
      }

    Userstyles
    Userstyles.
    • Stylish Editor - Compact by banthaz
      (Similar feature is included in SC, ie full customization of the toolbars and a toggle button etc.)
  • edited August 2011
    The code to insert " !important;" has been updated.

    More:
    • Insert " !important;" [*]
      insertCodeAtCaret(" !important;");
    • Preview [*]
      preview();
    • Insert HTML namespace at start
      insertCodeAtStart(CSSHTMLNS);
    • Insert XUL namespace at start
      insertCodeAtStart(CSSXULNS);
    • Insert data: URI
      insertDataURI()
  • Again - SC has a button. Actually 2. One to insert !important at the end of each line and one (customizable to whatever your want!) to insert at cursor.
    Yes, it's not a shortcut but you seem to be reinventing a wheel with all those js when all this is already available in SC in form of simple button click.
  • edited January 2012

    Thanks, LouCypher!

    I used SC in the past, but I had many problems with it (and I didn't feel like investigating and reporting them) and it added way more features than I needed. So I try to replace SC using other ways, like CSS and keyconfig. And I don't like buttons when editing, it's too slow. But thanks for mentioning it, though!
  • edited January 2012
    Code for Insert text at caret - Method 2:
    var insertText = "YOURTEXTHERE";

    var textbox = document.commandDispatcher.focusedElement;
    var oScroll = textbox.scrollTop;
    var startPos = textbox.selectionStart;
    var endPos = textbox.selectionEnd;
    textbox.value = textbox.value.slice(0, startPos) + insertText + textbox.value.slice(endPos);
    textbox.selectionEnd = startPos + insertText.length;
    textbox.scrollTop = oScroll;



    Code for Insert text at caret - Choose from a menu:
    var insert = [
    ["display: none !important;"],
    ["display: -moz-box !important;\nvisibility: visible !important;"],
    ["margin: 0 !important;\npadding: 0 !important;"],
    ["-moz-appearance: none !important;"],
    ["background: red !important;"],
    ["\t", "Tab"],
    ["insertDataURI();", "Insert Data URI", 1],
    ];

    var text = "";
    for (var i = 0; i < insert.length; i++) text += i + 1 + ": " + (insert[i] [1] ? insert[i] [1] : insert[i] [0]) + "\n";
    do {
    var input = prompt(text + "Insert:");
    if (input == null) return;
    input = +input;
    if (Math.ceil(input) == input && input >= 1 && input <= insert.length) break;
    alert(1 + (insert.length == 1 ? "" : "-" + insert.length ) + " only!");
    } while (1);
    text = insert[input - 1] [0];
    if (insert[input - 1] [2]) eval(text);
    else insertCodeAtCaret(text);</pre>




    Code for Comment/Uncomment code Enhanced:
    var open = "/*";
    var close = "*/";
    var openReplace = "/^";
    var closeReplace = "^/";
    var fill = " ";
    var message = " (Block comment) ";

    var textbox = codeElementWrapper;
    var startPos = textbox.selectionStart;
    var endPos = textbox.selectionEnd;
    if (startPos == endPos) {
    var pos = startPos;
    if (open.length == 2 && close.length == 2) {
    if (("d" + textbox.value).substr(startPos, 2) == open) pos++;
    if (("d" + textbox.value).substr(startPos, 2) == close) pos--;
    }
    var a = textbox.value.slice(0, pos).lastIndexOf(open);
    if (a == -1) a = -Infinity;
    var b = textbox.value.slice(0, pos).lastIndexOf(close);
    var c = textbox.value.indexOf(close, pos);
    if (c == -1) c = Infinity;
    var d = textbox.value.indexOf(open, pos);
    if (d == -1) d = Infinity;
    if (a > b && c < d) {
    startPos = a;
    endPos = c + close.length;
    } else if (/[\n\r]/.test((textbox.value + "\n")[startPos])) {
    var newText = open + fill + close;
    insertCodeAtCaret(newText);
    textbox.setSelectionRange(startPos + newText.length / 2, startPos + newText.length / 2);
    return;
    } else {
    startPos = textbox.value.slice(0, startPos).lastIndexOf("\n") + 1;
    startPos += textbox.value.slice(startPos).search(/\S/);
    endPos = (textbox.value + "d\n").indexOf("\n", startPos + 1);
    endPos -= +/\r\n$/.test(textbox.value.substr(endPos - 1, 2));
    }
    }
    var newText = textbox.value.slice(startPos, endPos);
    if (newText.slice(0, open.length) == open && newText.slice(-close.length) == close && newText.slice(open.length, -close.length).indexOf(open) == -1 && newText.slice(open.length, -close.length).indexOf(close) == -1) {
    if (newText.substr(open.length, message.length) == message && newText.slice(-message.length - open.length, -open.length) == message) {
    var a = [];
    var nextPos;
    var lastPos = 0;
    while ((nextPos = newText.indexOf(openReplace + message, lastPos)) != -1) {
    nextPos += openReplace.length + message.length;
    a.push(newText.slice(lastPos, nextPos));
    var aStart = lastPos = nextPos;
    do {
    lastPos = newText.indexOf(message + closeReplace, lastPos + message.length + closeReplace.length);
    if (lastPos == -1) {
    lastPos = newText.length;
    newText += message + close;
    break;
    }
    aStart = newText.indexOf(openReplace + message, aStart + openReplace.length + message.length);
    if (aStart == -1) break;
    } while (aStart < lastPos);
    a.push(newText.slice(nextPos, lastPos));
    }
    a.push(newText.slice(lastPos));
    a.forEach(function (v, i, a) {if (!(i % 2)) a[i] = v.replace(openReplace, open, "g").replace(closeReplace, close, "g");});
    newText = a.join("");
    } else message = "";
    newText = newText.slice(open.length + message.length, -message.length - close.length);
    } else {
    if (newText.indexOf(open) == -1 && newText.indexOf(close) == -1) message = "";
    newText = open + message + newText.replace(open, openReplace, "g").replace(close, closeReplace, "g") + message + close;
    }
    textbox.setSelectionRange(startPos, endPos);
    insertCodeAtCaret(newText);
    textbox.setSelectionRange(startPos, startPos + newText.length);



    Code for Go to line:
    var textbox = codeElementWrapper;
    var max = textbox.value.match(/\n/g);
    max = max ? max.length + 1 : 1;
    do {
    var line = prompt((SourceEditor ? "" : "Current line: " + textbox.value.slice(0, textbox.selectionEnd).match(/^/gm).length +"\n") + "Go to line:");
    if (line == null) return;
    line = +line;
    if (Math.ceil(line) == line && line >= 1 && line <= max) break;
    alert(1 + (max == 1 ? "" : "-" + max ) + " only!");
    } while (1);
    goToLine(line, 0);</pre>




    Code for Replace Enhanced:
    var flags = "gi";
    var m = "´";
    var mR = "\0";

    var textbox = codeElementWrapper;
    var startPos = textbox.selectionStart;
    var endPos = textbox.selectionEnd;
    if (startPos == endPos) {
    startPos = 0;
    endPos = textbox.value.length;
    }

    var oInput = "";
    do {
    var search = oInput = prompt("Search for:", oInput);
    if (search == null) return;
    var print = new RegExp("^" + m).test(search);
    if (print) search = search.slice(m.length);
    if (new RegExp("^\\/(?!" + m + ").*\\/([gmiy]{0,4})$").test(search) && !/([gmiy]).*\1/.test(RegExp.$1)) {
    try {
    search = new RegExp(search.slice(1, -RegExp.$1.length - 1), RegExp.$1);
    flags = undefined;
    break;
    } catch (e) {
    alert(e);
    }
    } else {
    search = search.replace(/\\n/g, "\n").replace(/\\t/g, "\t").replace(m + m, mR, "g").replace(m, "", "g").replace(mR, m, "g");
    break;
    }
    } while (1);
    if (print) {
    print = textbox.value.slice(startPos, endPos).replace(search, mR + "$&" + mR, flags).split(mR);
    if (print.length > 1) {
    print = print.filter(function (a, i) {return i % 2;});
    print.forEach(function (v, i, a) {a[i] = isNaN(+v) ? "\"" + a[i].replace(/\\/g, "\\\\").replace(/"/g, "\\\"") + "\"" : +v;});
    print = prompt("Matches:", "[" + print + "]" + "[i]");
    if (print == null) return;
    } else alert("No matches.");
    }
    oInput = "";
    do {
    var replace = oInput = prompt("Replace with:", oInput);
    if (replace == null) return;
    var exe = new RegExp("^" + m).test(replace);
    if (exe) {
    replace = replace.slice(m.length);
    var parameters = "$0,";
    if (typeof search !== "string") for (i = 1; i < search.source.match(/(?:^|[^\\]|(?:\\{2})+)\((?!\?\:)|$/g).length; i++) parameters += "$" + i + ",";
    parameters += "$0o,$";
    replace = "i++; for (var a = 0; a < arguments.length; a++) if (!isNaN(+arguments[a])) arguments[a] = +arguments[a]; " + replace.replace(m + m, mR, "g").replace(m, "return ", "g").replace(mR, m, "g");
    try {
    replace = new Function(parameters, replace);
    i = -1;
    replace = textbox.value.slice(startPos, endPos).replace(search, replace, flags);
    break;
    } catch (e) {
    alert(e);
    }
    } else {
    replace = replace.replace(/\\n/g, "\n").replace(/\\t/g, "\t").replace(/\$0/g, "$$&").replace(m + m, mR, "g").replace(m, "", "g").replace(mR, m, "g");
    replace = textbox.value.slice(startPos, endPos).replace(search, replace, flags);
    break;
    }
    } while (1);

    textbox.setSelectionRange(startPos, endPos);
    insertCodeAtCaret(replace);
    textbox.setSelectionRange(startPos, startPos + replace.length);
  • edited January 2012
    Code for rgb()-hex converter:
    var textbox = codeElementWrapper;
    var startPos = textbox.selectionStart;
    var endPos = textbox.selectionEnd;
    var text = textbox.value.slice(startPos, endPos);
    var newText;
    var i;

    if (/^rgb\(\s*[+-]?\d+(%)?\s*(,\s*[+-]?\d+\1\s*){2}\)$/i.test(text)) {
    var percentage = (RegExp.$1) ? 2.55 : 1;
    text = text.match(/-?\d+/g);
    newText = "#";
    var test;
    for (i = 0; i < 3; i++) {
    text[i] = Math.round(Number(text[i]) * percentage);
    if (text[i] > 255) text[i] = 255;
    if (text[i] < 0) text[i] = 0;
    test = text[i].toString(16).toUpperCase();
    if (test.length == 1) test = 0 + test;
    newText += test;
    }
    test = newText.match(/#|([\da-f])\1/gi);
    if (test.length == 4) {
    newText = "";
    for (i = 0; i < 4; i++) newText += test[i] [0];
    }
    } else if (/^#([\da-f]{3}){1,2}$/i.test(text)) {
    if (text.length == 4) text = text.replace(/([\da-f])/gi, "$1$1");
    newText = "rgb(";
    for (i = 0; i < 3; i++) newText += parseInt(text.substr(i * 2 + 1, 2), 16) + ",";
    newText = newText.replace(/,$/, ")");
    } else {
    alert("Invalid selection.");
    return;
    }
    insertCodeAtCaret(newText);
    textbox.setSelectionRange(startPos, startPos + newText.length);



    Detailed description for Replace Enhanced:
    First off: At the second line of the code, the variable m is defined. It's a string used for many things throughout the script. m = ´ by default. You can of course change this. This script also assumes that you never put a nul character (\0) in your code. If you do, this can be changed at the third line in the code.
    It has two search modes: Normal and RegExp. In Normal mode, it will search for exactly what you've typed. By starting the search term with a slash (/), and ending with a slash (/) + any valid modifiers, RegExp mode is turned on. If you want to start with a slash (/) without turning on RegExp mode, type /m (m being that special string, remember?).
    In Normal search mode, the modifiers (flags) for the search are gi, which means that it will find all matches, and that it is case insensitive. This can be changed at the first line in the code.
    In Normal search and replace mode, \n is treated as a new line character, and \t as a tab. You can escape this using by typing \mn and \mt respectively. In fact, in normal search and replace mode, all occurrences of m, except mm, are automatically removed. This means that you have to type mm to search for m in these modes. I advice you to set m to something that you never, or rarely, use in your code, but still is easy enough to type from the keyboard.
    By starting the search term with m, all the matches (if any) will be displayed. The result is displayed as a literal array ([match1,match2,match3,...]). If possible, matches will be converted into numbers. Otherwise they'll be properly escaped to be a string. [i] is added afterwards. The reason for all this is explained later.
    In normal replace mode, you can use $$, $&, $`, $', $1, $2, $3 etc. as usual. Moreover, $0 acts as $&.
    By starting the replace term with m, each match will be replaced by the return value of the function you type. The i variable starts at 0 at the first match and then increases by 1 per each match, if you need such a variable. The $0, $1, $2, $3 etc. variables work as in Normal replace mode, plus that they are automatically converted into numbers if possible. The $0o variable is the current offset and the $ variable is the total string. All occurrences of m, except mm, are automatically replaced with return . So instead of writing return $1+1, you could simply write m$1+1. This means that you have to type mm to get a m in this mode.
    An example (using m=´):
    Lets say you have the following code:
    a {
    font-size: 9px; /* Mark said: "10px would be better" */
    }
    a::after {
    content: "This font is bigger than 10px!";
    font-size: 23px;
    }
    Now you want to increase all the font-size:s by 1px, but not change the px values in the quotes. In such a small piece of code it's of course easy to do it by hand, but let's say this is just one of hundreds of similar code pieces.
    1. Let's start by saving the quotes from being changed.
      1. Search for: ´/".*?"/g
        ´ --> the matches will be displayed
        Note: It will be treated as a RegExp.
      2. Copy the displayed matches and save them somewhere.
      3. Replace with: £
        Since there are no £:s in the code, we can use it.
    2. Now, lets increase those px values.
      1. Search for: /(\d+)px/g
        Note: It will be treated as a RegExp.
      2. Replace with: ´´$1+1+"px"
        ´ --> the replace term will act as a function
        ´ --> the second m will be replaced by return
        $1is a variable like $1 in Normal replace mode. That is already automatically converted into a number. +1 increases it by one. Then "px" is added back.
    3. Now, let's put those quotes back again.
      1. Search for: £
        This demonstrates simple search mode. No RegExp.
      2. Replace with: ´´["\"10px would be better\"","\"This font is bigger than 10px!\""][i]
        This is an ´ + the displayed matches that we copied earlier.
        ´ --> the replace term will act as a function
        ´ --> the second m will be replaced by return
        Since i increases by 1 per each match, a new match from the literal array will be chosen each time, effectively putting the quotes back.
    And we're done!




    Code for "init":
    codeElementWrapper = {
    get value() {
    return Scratchpad.getText();
    },
    set value(v) {
    Scratchpad.setText(v);
    },
    get selectionStart() {
    return Scratchpad.getSelectionRange().start;
    },
    get selectionEnd() {
    return Scratchpad.getSelectionRange().end;
    },
    setSelectionRange: function (start, end) {
    Scratchpad.selectRange(start, end);
    }
    }

    insertCodeAtCaret = function (snippet) {
    Scratchpad.setText(snippet, codeElementWrapper.selectionStart, codeElementWrapper.selectionEnd);
    }



    Code for Brackets:
    var indent = "    ";

    var textbox = codeElementWrapper;
    var pos = textbox.selectionStart;
    var ind = /^[ \t]*/.exec(textbox.value.slice(textbox.value.lastIndexOf("\n", pos - 1) + 1, pos)).toString();
    var text = textbox.value.slice(pos, textbox.selectionEnd).replace(/(\n)/g, "$1" + indent);
    insertCodeAtCaret("{\n" + ind + indent + text + "\n" + ind + "}");
    pos += 2 + ind.length + indent.length + text.length;
    textbox.setSelectionRange(pos, pos);



    Code for Select lines:
    var textbox = codeElementWrapper;
    var endPos = textbox.value.indexOf("\n", textbox.selectionEnd) + 1;
    textbox.setSelectionRange(textbox.value.lastIndexOf("\n", textbox.selectionStart - 1) + 1, endPos ? endPos : textbox.value.length);




    Detailed description for Comment/Uncomment code Enhanced:
    Priorities:
    1. No selection -->
      1. Inside a comment --> Uncomment that comment
      2. At the end of a line --> /*..*/ (where the dots resembles spaces) is inserted, and the caret is placed between the spaces
      3. The current line is (un)commented
    2. Selection -->
      1. Selection is a valid comment --> That comment is uncommented
      2. Selection is commented.
    The script can comment text that already contains comments correctly. Then a "Block comment is used". Block comments may be nested - the script still uncomments correctly.
  • edited August 2011

    UPDATES:

    Optimized:

    Improved:

    Added:

  • edited August 2011
    Does anyone know why <br />:s appear in some of the code boxes (actually <pre>:s ...) above? They should not be there, they got there by themselves! If I edit the affected posts, they do not even contain <br />!
    (Press ctrl+f and search for <br /> to find them.)
  • edited September 2011

    UPDATES:

    Optimized:

    • Nearly all scripts by banthaz.

    Improved:

    • Nearly all scripts by banthaz.
      Better scrolling.

    Fixed:

    • Nearly all scripts by banthaz.
      Better scrolling.
    • "Replace Enhanced"
      You can now insert the text "\n" or "\t" (without getting it converted into a new line or tab character), by writing "\\n" or "\\t", respectively, which wasn't working before.
  • [Moderator action: spam deleted]
  • UPDATES:

    Fixed:

    • "Stylish section in the Add-ons Manager - Fix top row"
      Fixed for Firefox 8.

    Note:

    • Hopefully, my scripts will work with Orion in the future! I'm working on it, but I haven't got very much time.
  • edited December 2011

    UPDATES:

    Optimized:

    • All scripts by banthaz.

    Improved:

    Fixed:

    • All scripts by banthaz.
      Now work with Orion.

    Note:

    • All scripts by banthaz now rely on Stylish specific functions.
    • None of the scripts by banthaz work properly with Stylish 1.2.4 or older!
  • edited December 2011

    UPDATES:

    Optimized:

    Improved:

    • "Comment/Uncomment code Enhanced" by banthaz
      Caret placed just before a /* -> Nearest */ to the right is found, and it will be uncommented.
      Caret placed just after a */ -> Nearest /* to the left is found, and it will be uncommented.

    Added:

    • "Brackets"
    • "Select lines"
    • All scripts by banthaz now work with the Scratchpad, too, if you use Orion (set devtools.editor.component to orion in about:config). In each Scratchpad window you must run an "init" script once first, though.
  • edited January 2012

    UPDATES:

    Fixed:

    Improved:

    • "Replace Enhanced" by banthaz
      Simplified, which makes it more stable and easy to use.
      It now checks your RegExps and executed replace terms for errors.
  • edited January 2012

    UPDATES:

    Fixed:

    • "Replace Enhanced" by banthaz
      If RegExp mode was used, using a executable replace term didn't work.
  • edited January 2012

    UPDATES:

    Fixed:

  • UPDATES:

    Fixed:

    • "Replace Enhanced" by banthaz
      When displaying all matches, or when executing the replace term, the automatic string-to-number conversion didnt work for 0 (zero).
  • UPDATES:

    Improved:

  • edited June 2013
    Use external editor https://gist.github.com/LouCypher/3218906
    The link returns 403 error.
    Please replace it with
    https://loucypher.googlecode.com/svn/custombuttons/xml/DOM Inspector.xml
  • Sounds interesting - but I don't get it. Is it like using the It's All Text! extension? If so, what's the difference? How do I "install" it?
  • edited July 2012
    Is it like using the It's All Text! extension?

    Yes?

    If so, what's the difference?

    I don't know.

    How do I "install" it?

    keyconfig.

  • Now I get it. Sometimes things doesn't move to quickly in my brain ...
    The link returns 403 error.
    Please replace it with
    https://loucypher.googlecode.com/svn/custombuttons/xml/DOM Inspector.xml
    Thanks, fixed!

    Man, I must correct the markup of my posts here some time. It's horrible! And, indeed, update my scripts - buggy and badly coded are what they are (even if they do their job somewhat well) ... well, that's what happens when you code as a beginner and run out of enthusiasm ...
  • edited May 2013
    "Design" from Sprymedia :
    Design is a suite of web-design and development assistive tools which can be utilised on any web-page. Encompassing utilities for grid layout, measurement and alignment, Design is a uniquely powerful JavaScript bookmarklet.

    Design features the following components:

    - Grid - overlays a highly configurable layout grid over a web-page. Grid can be set to match any set of dimensions, allowing easy development of CSS layouts in the web-browser.
    - Rule - displays rulers on a page, with all the expected features of the rulers found in a desktop design application, including guides which snap to block display elements and origin location control.
    - Unit - allows measurements to be made between any two points on a web-page, giving basic information about each of the points clicked on, and drawing a line on the page for the measurement.
    - Crosshair - draws a crosshair cursor on the page to assist in layout alignment. Cursor information is also presented in a tooltip.
  • edited February 2014
    FoxiMirror: aka Shadia The Light Inspector

    "better replacement for DomInspector, allows viewing dom structure of any open document (most useful for xul); xbl bindings, event listeners and css rules for any node ability to search through all the css rules in document ability to search nodes in document using xpath.

    Principal key (that i try):
    - F1 : open it (with tooltip for keys usable)
    - Mum7 : Open its DOM inspector


    Found by mikedl : in [Bug] DOMi "Search By Id" is broken:

    FoxiMirror: aka Shadia The Light Inspector
  • By leaverou, This page show many clean Demos around Transformations :
    Animatable One property, two values, endless possiblities

    And This (https://developer.mozilla.org/) lists all CSS properties and indicates if and how they are animatable.
    CSS animated properties
  • edited March 2014

    Animate.css, a bunch of cool, fun, and cross-browser animations for you to use in your projects.

  • It's always frustrating to use an Unicode character like icon and it can't be shown by an user which have not the right font installed on its machine...
    - Replacing icons with font glyphs for design elements?
    - Suggestion: allow @import from Google Web Fonts in styles hosted on userstyles.org
    - How to use @font-face (to add a special ICON) with Userstyles ?
    - Replacing icons with font glyphs for design elements?
    - question about data:image/png;base64

    A Solution ?? : FREE Fonts with support for much of the unicode standard ,(nearly the Arial Unicode MS which is only installed by a Microsoft program) :
    Code2000 (Wikipedia)

    fonts2u : Code2000 font
    fonts2u : Code2002 font
    fonts2u : Code2001 font
  • myfmyf
    edited March 2014
    Ad "icon image / glyph" added with userstyle:
    Remember you can use SVG, even without base64.
    body:before { content: url('data:image/svg+xml,\ <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40">\ <style>circle,path{stroke-width:5;stroke:rgb(30,30,30);stroke-linecap:round;fill:none}<\/style>\ <circle r="5" cx="15" cy="10" />\ <circle r="5" cx="25" cy="10" />\ <path d="m5,15 a 15 15 0 0 0 30 0"/></svg>\ ') 'Weee!' }
    134 x 55 - 1K
Sign In or Register to comment.