Skip to content

Commit

Permalink
Merge pull request #10 from jhubert/key-commands
Browse files Browse the repository at this point in the history
Use Chrome commands instead of custom key commands
  • Loading branch information
jhubert committed Dec 2, 2014
2 parents c6c64b7 + 0f2f903 commit a4f518c
Show file tree
Hide file tree
Showing 8 changed files with 167 additions and 285 deletions.
4 changes: 3 additions & 1 deletion chrome/source/_locales/en/messages.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,5 +18,7 @@
"buttonLabelClose": { "message": "Close Editor", "description": "The hover text for the close button" },
"buttonLabelBottom": { "message": "Toggle top / bottom position", "description": "The hover text for the top/bottom position button" },
"buttonLabelLeftRight": { "message": "Toggle left / right position", "description": "The hover text for the left/right position button" },
"buttonLabelReset": { "message": "Reset the box size", "description": "The hover text for the reset box size button" }
"buttonLabelReset": { "message": "Reset the box size", "description": "The hover text for the reset box size button" },
"errorChromeURL": { "message": "Live CSS Editor does not work on the Chrome Extensions page. You should try it on a regular website.", "description": "Error message shown to a user when trying to use the extension on a chrome:// URL." },
"errorFileURL": { "message": "Please allow access to file URLs in the extensions screen and then try again.", "description": "Error message shown to a user when trying to use the extension on a file:// URL without permissions." }
}
142 changes: 74 additions & 68 deletions chrome/source/bg.js
Original file line number Diff line number Diff line change
@@ -1,89 +1,95 @@
function setItem(key, value) {
try {
window.localStorage.removeItem(key);
window.localStorage.setItem(key, value);
} catch(e) {
/*jslint browser: true, devel: true, maxerr: 50, indent: 2 */
/*global chrome */

}
}

function getItem(key) {
var value;
try {
value = window.localStorage.getItem(key);
}catch(e) {
value = "false";
}
return value;
}

function clearStorage() {
window.localStorage.clear();
}

function injectEditor() {
(function () {
"use strict";

if (typeof localStorage.warn === "undefined") {
setItem('warn', 'true');
function setItem(key, value) {
try {
window.localStorage.removeItem(key);
window.localStorage.setItem(key, value);
} catch (ignore) {}
}

if (typeof localStorage.save === "undefined") {
setItem('save', 'true');
function getItem(key) {
var value;
try {
value = window.localStorage.getItem(key);
} catch (ignore) {}
return value;
}

if (typeof localStorage.keycode === "undefined") {
setItem('keycode', 69);
function setupDefaults() {
if (!localStorage.hasOwnProperty('warn')) {
setItem('warn', 'true');
}

if (!localStorage.hasOwnProperty('save')) {
setItem('save', 'true');
}
}

chrome.tabs.insertCSS(null, {file: "css_editor.css"});
function injectEditor() {
setupDefaults();

var warn = getItem('warn') === "true" ? true : false,
save = getItem('save') === "true" ? true : false,
modify = getItem('modify') === "true" ? true : false,
boxsize = getItem('boxsize'),
code = "LiveCSSEditor({ warn : " + warn + ", save : " + save + ", modify : " + modify + ", boxsize : '" + boxsize + "' });";
chrome.tabs.insertCSS(null, {file: "css_editor.css"});

chrome.tabs.executeScript(null, {file: "css_editor.js"}, function (response) {
chrome.tabs.executeScript(null, {code: code});
});
}
var options = {
warn: getItem('warn') === "true",
save: getItem('save') === "true",
modify: getItem('modify') === "true",
boxsize: getItem('boxsize') || ''
},
code = 'LiveCSSEditor(' + JSON.stringify(options) + ');';

function cleanupEditor() {
chrome.tabs.executeScript(null, {file: "remove_editor.js"});
}
chrome.tabs.executeScript(null, {file: "css_editor.js"}, function () {
chrome.tabs.executeScript(null, {code: code});
});
}

function loadExistingStyles() {
chrome.tabs.executeScript(null, {file: "existing_styles.js"});
}
function loadExistingStyle(tabId) {
if (getItem('modify') === 'true') {
chrome.browserAction.setBadgeText({ text: "*", tabId: tabId });
chrome.tabs.executeScript(null, {file: "existing_styles.js"});
}
}

chrome.extension.onMessage.addListener(
function(request, sender, sendResponse) {
if (request.settings) {
sendResponse({ setting : request.settings, value : getItem(request.settings) });
return;
function handleFileSchemeAccess(isAllowedAccess) {
if (isAllowedAccess) {
injectEditor();
} else {
if (confirm(chrome.i18n.getMessage('errorFileURL'))) {
chrome.tabs.create({ url: 'chrome://extensions/?id=' + chrome.runtime.id });
}
}
if (request.modify) {
if (getItem('modify') === 'true') {
chrome.browserAction.setBadgeText ( { text: "*", tabId: sender.tab.id } );
loadExistingStyles();
}

chrome.extension.onMessage.addListener(
function (request, sender, sendResponse) {
if (request.modify) {
loadExistingStyle(sender.tab.id);
}
if (request.openExtensions) {
alert('hi');
}
sendResponse({});
}
);

// Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function (tab) {
var url = tab.url;

if (url.indexOf('chrome') === 0) {
alert(chrome.i18n.getMessage('errorChromeURL'));
return;
}
if (request.start) {

if (url.indexOf('file:///') === 0) {
chrome.extension.isAllowedFileSchemeAccess(handleFileSchemeAccess);
} else {
injectEditor();
}
if (request.stop) {
if (getItem('save') !== "true" && getItem('warn') === "true" && !confirm('Are you sure?')) {
return;
}
cleanupEditor();
}
sendResponse({});
}
);
});

// Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {
injectEditor();
});
}());
20 changes: 14 additions & 6 deletions chrome/source/css_editor.js
Original file line number Diff line number Diff line change
Expand Up @@ -205,6 +205,18 @@ var LiveCSSEditor = function (settings) {
return true;
}

function saveBoxSize() {
var boxSize = currentBoxSize();

if (boxSize === ',') {
unsetStorage('boxsize');
} else {
setStorage('boxsize', currentBoxSize());
}

return true;
}

function resetCSSTag() {
var css = getEl('PageCSS');

Expand All @@ -214,19 +226,15 @@ var LiveCSSEditor = function (settings) {
}

function removeEditor() {
var panel = getEl('panel'), code = getEl('code'), boxSize = currentBoxSize();
var panel = getEl('panel'), code = getEl('code');

if (settings.save !== true && settings.warn === true && code.value !== '') {
if (!confirm(chrome.i18n.getMessage("warningOnClose"))) {
return;
}
}

if (boxSize === ',') {
unsetStorage('boxsize');
} else {
setStorage('boxsize', currentBoxSize());
}
saveBoxSize();

resetCSSTag();
panel.parentElement.removeChild(panel);
Expand Down
20 changes: 1 addition & 19 deletions chrome/source/inject.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,3 @@
/* Set up the key commands based on the keycode setting */
chrome.extension.sendMessage({ settings : 'keycode' }, function (response) {
var keyCommand = response && parseInt(response.value, 0);

window.addEventListener("keydown", function(event) {
// Bind to both command (for Mac) and control (for Win/Linux)
var modifier = event.ctrlKey || event.metaKey;

if (modifier && event.shiftKey && event.keyCode == keyCommand) {
if (document.getElementById('LiveCSSEditor-panel')) {
chrome.extension.sendMessage({ stop : true }, function(response) {});
} else {
chrome.extension.sendMessage({ start : true }, function(response) {});
}
}
}, false);
});

/* Tell the extension to load the existing CSS if there is any */
(function () {
var url = document.location,
Expand All @@ -24,4 +6,4 @@ chrome.extension.sendMessage({ settings : 'keycode' }, function (response) {
if (css && css !== '') {
chrome.extension.sendMessage({ modify : 'true' }, function (response) {});
}
}());
}());
7 changes: 7 additions & 0 deletions chrome/source/manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,13 @@
"default_text": "none",
"name": "__MSG_extBrowserActionName__"
},
"commands": {
"_execute_browser_action": {
"suggested_key": {
"default": "Ctrl+Shift+E"
}
}
},
"icons": {
"16": "icon16.png",
"48": "icon48.png",
Expand Down
25 changes: 4 additions & 21 deletions chrome/source/options.html
Original file line number Diff line number Diff line change
@@ -1,33 +1,16 @@
<html>
<head>
<title>Live CSS Edit Options</title>
<style type="text/css" media="screen">
/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 3.3.0
build: 3167
*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}

/* Written by Jeremy Baker */
body { font-family: arial; font-size: 13px; padding: 15px; }
fieldset { padding: 1em; border-width: 0; border-top: 1px solid #ccc; background-color: #efefef; margin-bottom: 5px; }
label { padding-right: 10px; }
h1 { font-size: 2em; font-weight: bold; margin-bottom: 0.5em; margin-}
p { margin-bottom: 1em; }
input[type="text"] { width: 6em; padding: 4px; }
</style>
<link rel="stylesheet" type="text/css" href="options.css">
<script type="text/javascript" src="options.js"></script>
</head>
<body>

<h1 data-message="optionsHeader">Live CSS Edit Options</h1>
<h1 data-message="optionsHeader">Live CSS Editor Options</h1>

<fieldset>
<p><label for="keycode-string" data-message="optionsKeyCommandLabel">Key Command for opening the editor:</label></p>
<span data-message="optionsKeyCommandKeys">Command + Shift + </span><input type="text" id="keycode-string" onkeydown="return getKeyCode(event);"> <input type="hidden" id="keycode-value">
<p><label for="keycode-string" data-message="optionsKeyCommandLabel">Key Command for opening the editor</label></p>
<p>This configuration is now handled by the Chrome Keyboard Shortcuts manager at the bottom of the extensions page: chrome://extensions.</p>
</fieldset>

<fieldset>
Expand Down
Loading

0 comments on commit a4f518c

Please sign in to comment.