Skip to content

Instantly share code, notes, and snippets.

var words = ["a",


A proposal for updating our style inspector and style editor.

For now it is a rough draft put together quickly. It will need to be refined a lot and will require discussions and, later, should be turned into a plan with bugs being filed.

Many of the things described below already work this way today, I just haven't had the chance yet to describe them as such. A list highlighting what exists today, what doesn't and what should be changed has yet to be created.


To achieve 2 main goals:

* Open Browser Toolbox after building your Nightly with the patch from bug 965872 applied.
* Go to Scratchpad Tab
* Run this script
let { devtools } = Cu.import("resource://gre/modules/devtools/Loader.jsm", {});
let { require } = devtools;
let {StorageFront} = require("devtools/server/actors/storage");
grssam / CSSPropertyValueScratchpad.js
Created July 29, 2013 18:19
Run this script in Scratchpad in Latest Nightly to get a key-value pair of all the prefix-free properties vs their possible standard values.
/* -sp-context: browser */
let domUtils = Cc[";1"].getService(Ci.inIDOMUtils)
let properties = {};
.forEach(x=> {
properties[x] = domUtils.getCSSValuesForProperty(x)
grssam / index.html
Last active December 19, 2015 07:39
A CodePen by Girish Sharma. Metro-like loading animation with CSS3 - Prefix-free loading animation, inspired by Metro and Windows 8
<div class="loader more">
grssam / index.html
Created July 3, 2013 14:37
A CodePen by Girish Sharma. Metro-like loading animation with CSS3 - Prefix-free loading animation, inspired by Metro and Windows 8
<div class="loader">
grssam / overloadedArguments.js
Created June 21, 2013 20:47
Arguments Overloading FTW
* Converts any input box on a page to a CSS selector search and suggestion box.
* @constructor
* @param {nsIDOMDocument} aContentDocument
* The content document which inspector is attached to.
* @param {nsiInputElement|String} aInputNode
* The input element or the selector for teh input element to which the
* panel will be attached and from where search input will be taken.
* @param {Object} aOptions
grssam / scratchpad.js
Created February 15, 2013 21:19
trying to select the doctype element
let tempScope = {};
Components.utils.import("resource:///modules/devtools/Target.jsm", tempScope);
let TargetFactory = tempScope.TargetFactory;
let target = TargetFactory.forTab(gBrowser.selectedTab);
gDevTools.showToolbox(target).then(function(toolbox) {
toolbox.selectTool("inspector").then(function(inspector) {
grssam / background.js
Created November 2, 2012 21:08
Get the background color from an image.
* Function to get the background color from an image.
* Its just one of the various approaches to get the result.
* Works for most of the cases and should be fast.
* It is advised to perform this kind of computation from a worker.
* @param imgEl [object HTMLImageElement]
* The image object for which background is needed.
* @param aDoc [object HTMLDocument]
* The document object.
grssam / test.diff
Created September 14, 2012 15:40
test patch
# HG changeset patch
# User Girish Sharma <>
# Date 1347637171 -19800
# Node ID da31829c11c69e85a392a4161f6167c6e2297f94
# Parent a97775b456cf873ca6f809e03ff62e02028e7fe0
[mq]: scratchpad
diff --git a/browser/devtools/webconsole/HUDService.jsm b/browser/devtools/webconsole/HUDService.jsm
--- a/browser/devtools/webconsole/HUDService.jsm
+++ b/browser/devtools/webconsole/HUDService.jsm