Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

refactor

  • Loading branch information...
commit f9c043c96be29e6ae32842d79d320d85ce43ad02 1 parent 421ca54
@chjj authored
View
0  CHANGELOG.md 100755 → 100644
File mode changed
View
0  LICENSE 100755 → 100644
File mode changed
View
0  README.md 100755 → 100644
File mode changed
View
13 background.html 100755 → 100644
@@ -1,5 +1,9 @@
<!doctype html><title></title><script>(function() {
+/**
+ * Background
+ */
+
// make the icon functional
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.sendRequest(tab.id, {toggle: true});
@@ -8,12 +12,16 @@
// a simple get request
chrome.extension.onRequest.addListener(function(req, sender, send) {
if (!req.get) return;
- var xhr = new XMLHttpRequest();
- var timeout = setTimeout(function() {
+
+ var xhr = new XMLHttpRequest()
+ , timeout;
+
+ timeout = setTimeout(function() {
xhr.onreadystatechange = function() {};
xhr.abort();
send({err:'Timeout.'});
}, 5000);
+
xhr.onreadystatechange = function() {
if (+xhr.readyState === 4) {
clearTimeout(timeout);
@@ -24,6 +32,7 @@
}
}
};
+
xhr.open('GET', req.get, true);
xhr.send();
});
View
0  design/icon128.png 100755 → 100644
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
0  design/icon19.png 100755 → 100644
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
14 design/iframe.css 100755 → 100644
@@ -1,7 +1,13 @@
+/**
+ * Form Controls
+ */
+
html, body { margin: 0; padding: 0; overflow: hidden; }
div {
- height: 20px; margin: 0; padding: 5px; border-top: #b6bac0 solid 1px; font: 12px/1 verdana, sans-serif;
+ height: 20px; margin: 0; padding: 5px;
+ border-top: #b6bac0 solid 1px;
+ font: 12px/1 verdana, sans-serif;
background: -webkit-gradient(linear, 0% 100%, 0% 0%, color-stop(0.1, #e5e5e5), color-stop(1.0, #fff));
background: linear-gradient(90deg, #e5e5e5 10%, #fff 100%)
}
@@ -21,8 +27,10 @@ div > label > input {
}
textarea {
- height: 219px; width: 100%; padding: 5px; margin: 0;
+ height: 219px; width: 100%;
+ padding: 5px; margin: 0;
resize: none; font: 11px/1.4 monospace;
- border: #b6bac0 solid 1px; background: #fff;
+ border: #b6bac0 solid 1px;
+ background: #fff;
outline: none !important;
}
View
4 design/style.css 100755 → 100644
@@ -1,3 +1,7 @@
+/**
+ * Frame
+ */
+
[id="LIVE.STYLESHEETS"] {
outline: 0; border: 0; margin: 0; padding: 0; overflow: hidden;
position: fixed; z-index: 10000; top: auto; right: 0; bottom: 0; left: 0;
View
363 live.js 100755 → 100644
@@ -1,25 +1,31 @@
-// Live Stylesheet Editing
-// (c) Copyright 2010-2011, Christopher Jeffrey (//github.com/chjj)
-// See LICENSE for more info.
-(function() {
+/**
+ * Live Stylesheets (https://github.com/chjj/Live-Stylesheets)
+ * Live CSS Editing for Google Chrome.
+ * Copyright (c) 2010-2011, Christopher Jeffrey. (MIT Licensed)
+ */
+
+(function() {
// the "toggle" key code - default is F9
-var KEY_CODE = 120;
+var KEY_CODE = 120;
// the number of spaces in a tab
-var TAB_SIZE = 8;
+var TAB_SIZE = 8;
// whether to use spaces for tabs or not
var USE_SPACES = false;
// the amount of time to wait after a key
// stroke before updating the page's CSS
-var UPDATE_TIME = 300;
+var UPDATE_TIME = 300;
-// detect whether the CSS is minfied and attempt
+// detect whether the CSS is minfied and attempt
// to unminify and pretty print it - EXPERIMENTAL
var UNMINIFY = false;
-// ========= DONT EDIT BELOW HERE ========= //
+/**
+ * Don't edit below here <--
+ */
+
var TAB_CHARACTERS;
if (USE_SPACES) {
TAB_CHARACTERS = Array(TAB_SIZE + 1).join(' ');
@@ -27,11 +33,17 @@ if (USE_SPACES) {
TAB_CHARACTERS = '\t';
}
-var doc = this.document, root = doc.documentElement, slice = [].slice;
+var window = this
+ , doc = this.document
+ , root = doc.documentElement
+ , slice = [].slice;
-var _unminify = function(text) {
- //return (/}[^\s]/.test(text)) ? (text
- return (!/[\r\n]/.test(text)) ? (text
+/**
+ * Helpers
+ */
+
+var unminify = function(text) {
+ return !/[\r\n]/.test(text) ? (text
.replace(/\r\n/g, '\n')
.replace(/\r/g, '\n')
.replace(/([^\s};])(})/g, '$1 $2')
@@ -39,10 +51,10 @@ var _unminify = function(text) {
.replace(/(\w)({)/g, '$1 $2')
.replace(/({)(\w)/g, '$1 $2')
.replace(/([;:,])([^\s])/g, '$1 $2')
-
+
// pretty print
- .replace(/([;{])[\x20\t]*(\w)/g, '$1\n\t$2')
- .replace(/([\w;])[\x20\t]*(})/g, '$1\n$2')
+ .replace(/([;{])[ \t]*(\w)/g, '$1\n\t$2')
+ .replace(/([\w;])[ \t]*(})/g, '$1\n$2')
) : text;
};
@@ -50,7 +62,7 @@ var getTextContent = function(el) {
if (el && el.textContent != null) {
var text = el.textContent;
if (UNMINIFY) {
- text = _unminify(text);
+ text = unminify(text);
}
if (USE_SPACES) {
text = text.replace(/\t/g, TAB_CHARACTERS);
@@ -60,7 +72,7 @@ var getTextContent = function(el) {
};
var keyCheck = function(func) {
- return function(ev) {
+ return function(ev) {
if (ev.keyCode === KEY_CODE) {
func();
ev.preventDefault();
@@ -69,15 +81,24 @@ var keyCheck = function(func) {
};
var reqCheck = function(name, func) {
- return function(req) {
- if (req[name] !== undefined) func();
+ return function(req) {
+ if (req[name] !== undefined) func();
};
};
+/**
+ * Initialization
+ */
+
var load = function(func) {
- var styles = {}, current, total = 0;
-
- // ========== HELPERS ========== //
+ var styles = {}
+ , current
+ , total = 0;
+
+ /**
+ * Helpers
+ */
+
var setCurrent = function(name, change) {
current = name;
if (styles[name]) {
@@ -89,38 +110,41 @@ var load = function(func) {
}
}
};
-
+
var addStyle = function(name, el) {
styles[name] = el;
- select.innerHTML +=
- '<option id="' + name + '" value="' + name + '">'
+ select.innerHTML +=
+ '<option id="' + name + '" value="' + name + '">'
+ name + '</option>';
};
-
- // ========= CREATE THE CHROME ========= //
- // need to wrap everything in an iframe so the
+
+ /**
+ * Create the Chrome
+ */
+
+ // need to wrap everything in an iframe so the
// elements are not affected by the page's stylesheet
var frame = (function() {
var link, el = doc.createElement('iframe');
// "unselectable" id
- el.id = 'LIVE.STYLESHEETS';
- // append it to HTML to avoid
+ el.id = 'LIVE.STYLESHEETS';
+ // append it to HTML to avoid
// interfere with "body > :last-child"
- root.appendChild(el);
+ root.appendChild(el);
link = el.contentDocument.createElement('link');
link.href = chrome.extension.getURL('design/iframe.css');
link.rel = 'stylesheet';
el.contentDocument.head.appendChild(link);
return el;
})();
-
+
// options bar that sits on top of the edit box
var bar = (function() {
var el = doc.createElement('div');
frame.contentDocument.body.appendChild(el);
return el;
})();
-
+
// the stylesheet edit text box
var edit = (function() {
var el = doc.createElement('textarea');
@@ -129,8 +153,8 @@ var load = function(func) {
frame.contentDocument.body.appendChild(el);
return el;
})();
-
- // button to swap the edit box's position
+
+ // button to swap the edit box's position
// in case it is covering part of the page
var swap = (function() {
var el = doc.createElement('button');
@@ -148,7 +172,7 @@ var load = function(func) {
}, false);
return el;
})();
-
+
// select box for the list of stylesheets
var select = (function() {
var el = doc.createElement('select');
@@ -158,7 +182,7 @@ var load = function(func) {
}, false);
return el;
})();
-
+
// add a new stylesheet, needs cleaning
var add = (function() {
var el = doc.createElement('button');
@@ -175,10 +199,10 @@ var load = function(func) {
}, false);
return el;
})();
-
- // a stylesheet with animations is really annoying to
+
+ // a stylesheet with animations is really annoying to
// edit - the animations will play every key stroke
- // this adds a "no animations" checkbox to temporarily
+ // this adds a "no animations" checkbox to temporarily
// disable animations
var check = (function() {
var label, el = doc.createElement('input');
@@ -198,12 +222,73 @@ var load = function(func) {
}, false);
return el;
})();
-
- // =========== LOAD STYLESHEETS ============ //
- (function load(done) {
- var el = doc.querySelectorAll('link[rel="stylesheet"], style'),
- pending = el.length;
-
+
+ /**
+ * Bind Events
+ */
+
+ var update
+ , scroll = 0;
+
+ // toggle the frame in and out
+ var toggle = function() {
+ if (frame.style.display !== 'block') {
+ frame.style.display = 'block';
+ edit.focus();
+ } else {
+ frame.style.display = 'none';
+ if (styles[current]) {
+ styles[current].textContent = edit.value;
+ }
+ }
+ };
+
+ frame.contentDocument.addEventListener('keydown', keyCheck(toggle), false);
+
+ // update the stylesheet every key stroke
+ edit.addEventListener('keyup', function(ev) {
+ if (!styles[current]
+ || ev.keyCode === KEY_CODE) return;
+ if (UPDATE_TIME) {
+ if (update) {
+ clearTimeout(update);
+ update = null;
+ }
+ update = setTimeout(function() {
+ styles[current].textContent = edit.value;
+ update = null;
+ }, UPDATE_TIME);
+ } else {
+ styles[current].textContent = edit.value;
+ }
+ }, false);
+
+ // a hacksy way to get tab working as it should
+ edit.addEventListener('keydown', function(ev) {
+ if (+ev.keyCode === 9) {
+ var start = edit.selectionStart, cur = edit.value;
+ edit.value = cur.slice(0, start) + TAB_CHARACTERS + cur.slice(start);
+ start += TAB_CHARACTERS.length;
+ edit.setSelectionRange(start, start);
+ edit.scrollTop = scroll;
+ ev.preventDefault();
+ ev.stopPropagation();
+ }
+ scroll = edit.scrollTop;
+ }, false);
+
+ edit.addEventListener('click', function() {
+ scroll = edit.scrollTop;
+ }, false);
+
+ /**
+ * Load
+ */
+
+ (function(done) {
+ var el = doc.querySelectorAll('link[rel="stylesheet"], style')
+ , pending = el.length;
+
if (!pending) {
var style = doc.createElement('style');
style.textContent = '/* No stylesheet found. */';
@@ -211,11 +296,13 @@ var load = function(func) {
el = [ style ];
pending++;
}
-
- // get the stylesheets through XHR,
+
+ // get the stylesheets through XHR,
// add STYLE elements in place of LINKs
slice.call(el).forEach(function(el) {
- var name = el.href;
+ var name = el.href
+ , style;
+
if (name) {
name = name.replace(/^[^:\/]+:\/\/[^\/]+/, '');
} else {
@@ -225,129 +312,85 @@ var load = function(func) {
name = 'style[' + (total++) + ']';
}
name = name.slice(0, 40);
-
- if (el.href) {
- var style = doc.createElement('style');
- addStyle(name, style);
- chrome.extension.sendRequest({get: el.href}, function(res) {
- var err = res.err, css = res.text;
-
- if (err) {
- console.log('ERROR:', err);
- css = '/* Unable to load '
- + (el.href || '').replace(/</g, '&lt;').replace(/>/g, '&gt;')
- + ' */';
- }
-
- // turn @import "foo"; into @import url("foo");
- css = css.replace(
- /(@import\s+)(["'][^'"]+["'])([^\n;]*;)/gi,
- '$1url($2)$3'
- );
-
- // need to fix url()'s in the stylesheet
- // by prefixing them with the LINK's @href
- css = css.replace(/url\(([^)]+)\)/gi, function(str, url) {
- // trim quotes and space
- url = url.trim().replace(/^['"]|['"]$/g, '');
-
- // absolute url - return as normal
- if (/^([^:\/]+:|\/\/)/.test(url)) return str;
-
- if (url[0] !== '/') {
- // resolve new relative path
- return 'url("'
- + el.href.replace(/\/[^\/]*$/g, '')
- + '/' + url + '")';
+
+ // STYLE elements
+ if (!el.href) {
+ addStyle(name, el);
+ return --pending || done();
+ }
+
+ style = doc.createElement('style');
+ addStyle(name, style);
+
+ chrome.extension.sendRequest({get: el.href}, function(res) {
+ var err = res.err
+ , css = res.text;
+
+ if (err) {
+ console.error('Request Error:', err);
+ css = '/* Unable to load '
+ + (el.href || '').replace(/</g, '&lt;')
+ .replace(/>/g, '&gt;')
+ + ' */';
+ }
+
+ // turn @import "foo"; into @import url("foo");
+ css = css.replace(
+ /(@import\s+)(["'][^'"]+["'])([^\n;]*;)/gi,
+ '$1url($2)$3'
+ );
+
+ // need to fix url()'s in the stylesheet
+ // by prefixing them with the LINK's @href
+ css = css.replace(/url\(([^)]+)\)/gi, function(str, url) {
+ // trim quotes and space
+ url = url.trim().replace(/^['"]|['"]$/g, '');
+
+ // absolute url - return as normal
+ if (/^([^:\/]+:|\/\/)/.test(url)) return str;
+
+ if (url[0] !== '/') {
+ // resolve new relative path
+ return 'url("'
+ + el.href.replace(/\/[^\/]*$/g, '')
+ + '/' + url + '")';
+ } else {
+ // resolve to absolute url, hosts might be different
+ // make sure `el.href` is a fully resolved url first
+ var cap = el.href.match(/^(?:[^:\/]+:)?\/\/[^\/]+/);
+ if (cap) {
+ return 'url("' + cap[0] + url + '")';
} else {
- // resolve to absolute url, hosts might be different
- // make sure `el.href` is a fully resolved url first
- var cap = el.href.match(/^(?:[^:\/]+:)?\/\/[^\/]+/);
- if (cap) {
- return 'url("' + cap[0] + url + '")';
- } else {
- return str;
- }
+ return str;
}
- });
-
- style.textContent = css;
- if (el.media) style.media = el.media;
- el.parentNode.replaceChild(style, el);
- --pending || done();
+ }
});
- } else {
- addStyle(name, el);
+
+ style.textContent = css;
+ if (el.media) style.media = el.media;
+
+ el.parentNode.replaceChild(style, el);
--pending || done();
- }
+ });
});
})(function() {
+ // ensure the first
+ // stylesheet is selected
setCurrent(select.options[0].id);
-
- // ========= BIND EVENTS ========= //
- var update, scroll = 0;
-
- // toggle the frame in and out
- var toggle = function() {
- if (frame.style.display !== 'block') {
- frame.style.display = 'block';
- edit.focus();
- } else {
- frame.style.display = 'none';
- if (styles[current]) {
- styles[current].textContent = edit.value;
- }
- }
- };
-
- frame.contentDocument.addEventListener('keydown', keyCheck(toggle), false);
-
- // update the stylesheet every key stroke
- edit.addEventListener('keyup', function(ev) {
- if (!styles[current] || ev.keyCode === KEY_CODE) return;
- if (UPDATE_TIME) {
- if (update) {
- clearTimeout(update);
- update = null;
- }
- update = setTimeout(function() {
- styles[current].textContent = edit.value;
- update = null;
- }, UPDATE_TIME);
- } else {
- styles[current].textContent = edit.value;
- }
- }, false);
-
- // a hacksy way to get tab working as it should
- edit.addEventListener('keydown', function(ev) {
- if (+ev.keyCode === 9) {
- var start = edit.selectionStart, cur = edit.value;
- edit.value = cur.slice(0, start) + TAB_CHARACTERS + cur.slice(start);
- start += TAB_CHARACTERS.length;
- edit.setSelectionRange(start, start);
- edit.scrollTop = scroll;
- ev.preventDefault();
- ev.stopPropagation();
- }
- scroll = edit.scrollTop;
- }, false);
-
- edit.addEventListener('click', function() {
- scroll = edit.scrollTop;
- }, false);
-
+
// execute the callback
return func(toggle);
});
};
-// toggle the frame whenever the F9 key
-// is pressed or whenever the icon is clicked
+/**
+ * Toggle
+ */
+
(function() {
var _toggle;
-
- // we need this for lazy loading
+
+ // lazy loading
var toggle = function() {
if (!_toggle) {
load(function(func) {
@@ -358,7 +401,7 @@ var load = function(func) {
_toggle();
}
};
-
+
chrome.extension.onRequest.addListener(reqCheck('toggle', toggle));
doc.addEventListener('keydown', keyCheck(toggle), false);
})();
View
0  manifest.json 100755 → 100644
File mode changed
Please sign in to comment.
Something went wrong with that request. Please try again.