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

banthaz · August 2011

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.

banthaz · August 2011

Custom Buttons
Buttons to install via Custom Buttons by Yan, cubegm and SCClockDr.

DOM Inspector by LouCypher
Extends DOM Inspector. Old version of InspectorWidget, new version of InspectorWidget and Inspect Context combined - into a single button!

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.)

LouCypher · 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()
```

makondo · August 2011

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.

banthaz · August 2011

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!

banthaz · August 2011

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);

banthaz · August 2011

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.

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.
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.
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:

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
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.

banthaz · August 2011

UPDATES:

Optimized:

"Insert text at caret - Choose from a menu"
"Go to line"
"Replace Enhanced"
"Insert 'Headers'"

Improved:

"Insert text at caret - Choose from a menu"
Simplified. Non-execute/Insert list items can now have a custom text too.

Added:

"rgb()-hex converter"

banthaz · 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.)

banthaz · 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.

mod_wastrel · September 2011

[Moderator action: spam deleted]

banthaz · November 2011

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.

banthaz · December 2011

UPDATES:

Optimized:

All scripts by banthaz.

Improved:

"Replace Enhanced"
New advanced functions.

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!

banthaz · December 2011

UPDATES:

Optimized:

"Replace Enhanced"
"Comment/Uncomment code Enhanced" by banthaz

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.

banthaz · December 2011

UPDATES:

Fixed:

"Comment/Uncomment code Enhanced" by banthaz
Minor bugs.
"Replace Enhanced" by banthaz
Several critical and minor bugs.

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.

banthaz · January 2012

UPDATES:

Fixed:

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

banthaz · January 2012

UPDATES:

Fixed:

"Comment/Uncomment code Enhanced" by banthaz
One very minor bug.
"Replace Enhanced" by banthaz
Fixed many more or less minor bugs.
Replaced the complicated and buggy system of escaping characters.

banthaz · January 2012

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).

banthaz · January 2012

UPDATES:

Improved:

"Comment/Uncomment code Enhanced" by banthaz
Lots of bugfixes, a lot of new features.
"Replace Enhanced" by banthaz
Lots of bugfixes, a lot simpler code, by now using the replace method more efficiently.

LouCypher · July 2012

Use external editor https://gist.github.com/LouCypher/3218906

DOM Inspector by LouCypher

The link returns 403 error.
Please replace it with
https://loucypher.googlecode.com/svn/custombuttons/xml/DOM Inspector.xml

banthaz · July 2012

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?

LouCypher · 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.

banthaz · July 2012

Now I get it. Sometimes things doesn't move to quickly in my brain ...

DOM Inspector by LouCypher

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 ...

decembre · 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.

decembre · June 2013

An online Tool :
CSS3 Drop Shadows Generator

decembre · 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

decembre · February 2014

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

LouCypher · March 2014

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

decembre · March 2014

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

myf · 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!'
}

hideheader · March 2014

http://www.google.com/search?q=convert+font+to+svg

Howdy, Stranger!

Categories

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

Comments

UPDATES:

Optimized:

Improved:

Added:

UPDATES:

Optimized:

Improved:

Fixed:

UPDATES:

Fixed:

Note:

UPDATES:

Optimized:

Improved:

Fixed:

Note:

UPDATES:

Optimized:

Improved:

Added:

UPDATES:

Fixed:

Improved:

UPDATES:

Fixed:

UPDATES:

Fixed:

UPDATES:

Fixed:

UPDATES:

Improved:

Howdy, Stranger!

Quick Links

Categories

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

Comments

UPDATES:

Optimized:

Improved:

Added:

UPDATES:

Optimized:

Improved:

Fixed:

UPDATES:

Fixed:

Note:

UPDATES:

Optimized:

Improved:

Fixed:

Note:

UPDATES:

Optimized:

Improved:

Added:

UPDATES:

Fixed:

Improved:

UPDATES:

Fixed:

UPDATES:

Fixed:

UPDATES:

Fixed:

UPDATES:

Improved: