Merge pull request #6 from jhubert/default-box-size

Allow the user to specify a default box size

chrome/source/_locales/en/messages.json

@@ -7,6 +7,7 @@
   "optionsHeader": { "message": "Live CSS Editor Options", "description": "The headline at the top of the options page" },
   "optionsKeyCommandLabel": { "message": "What key command would you like to use to open the editor?", "description": "The label for the key command option" },
   "optionsKeyCommandKeys": { "message": "Command + Shift + ", "description": "The other keys that need to be pressed to trigger the editor. Always the Command and Shift keys" },
+  "optionsBoxSizeLabel": { "message": "How big should the editor be when it first opens?", "description": "The label for the box size options" },
   "optionsWarnLabel": { "message": "Should the editor warn you before closing?", "description": "The label for the warning option" },
   "optionsSaveLabel": { "message": "Should the editor remember your CSS for a page even when you close it?", "description": "The label for the save option" },
   "optionsModifyLabel": { "message": "Should the CSS you wrote for a page be remembered and loaded when you visit?", "description": "The label for the modify option" },
@@ -18,4 +19,4 @@
   "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" }
-}
+}

chrome/source/bg.js

@@ -40,7 +40,8 @@ function injectEditor() {
   var warn = getItem('warn') === "true" ? true : false,
     save = getItem('save') === "true" ? true : false,
     modify = getItem('modify') === "true" ? true : false,
-    code = "LiveCSSEditor({ warn : " + warn + ", save : " + save + ", modify : " + modify + " });";
+    boxsize = getItem('boxsize'),
+    code = "LiveCSSEditor({ warn : " + warn + ", save : " + save + ", modify : " + modify + ", boxsize : '" + boxsize + "' });";
 
   chrome.tabs.executeScript(null, {file: "css_editor.js"}, function (response) {
     chrome.tabs.executeScript(null, {code: code});
@@ -85,4 +86,4 @@ chrome.extension.onMessage.addListener(
 // Called when the user clicks on the browser action.
 chrome.browserAction.onClicked.addListener(function(tab) {
   injectEditor();
-});
+});

chrome/source/css_editor.js

@@ -3,7 +3,7 @@
 var LiveCSSEditor = function (settings) {
   "use strict";
 
-  settings = settings || { warn: true, save: true, modify: true };
+  settings = settings || { warn: true, save: true, modify: true, boxsize: null };
 
   var cssCache = '',
     keyupTimer = null,
@@ -109,20 +109,21 @@ var LiveCSSEditor = function (settings) {
   function getStorage(key) {
     if (settings.save === true) {
       return window.localStorage.getItem('livecsseditor-' + key + '-' + urlKey);
-    } else {
-      return false;
     }
   }
 
   function setStorage(key, value) {
     if (settings.save === true) {
       window.localStorage.setItem('livecsseditor-' + key + '-' + urlKey, value);
       return true;
-    } else {
-      return false;
     }
   }
 
+  function unsetStorage(key) {
+    window.localStorage.removeItem('livecsseditor-' + key + '-' + urlKey);
+    return true;
+  }
+
   function toggleBottom() {
     var panel = getEl('panel'), position;
 
@@ -153,12 +154,53 @@ var LiveCSSEditor = function (settings) {
     setStorage('positionLR', position);
   }
 
-  function resetBoxSize() {
+  function getBoxSize() {
+    var values = ['', ''];
+
+    if (getStorage('boxsize') && getStorage('boxsize') !== ',') {
+      values = getStorage('boxsize').replace(/px/g, '').split(',');
+    } else if (settings.boxsize) {
+      values = settings.boxsize.split(',');
+    }
+
+    return values;
+  }
+
+  function currentBoxSize() {
+    var style = getEl('code').style,
+      width = parseInt(style.width, 10) || '',
+      height = parseInt(style.height, 10) || '';
+
+    return [width, height].join(',');
+  }
+
+  function setBoxSize(boxsize) {
     var code = getEl('code');
 
-    code.style.width = '';
-    code.style.height = '';
-    setStorage('boxsize', null);
+    code.style.width = (boxsize[0] && boxsize[0] + 'px') || '';
+    code.style.height = (boxsize[1] && boxsize[1] + 'px') || '';
+
+    return true;
+  }
+
+  function resetBoxSize() {
+    var boxsize,
+      code = getEl('code'),
+      defaultBoxSize = settings && settings.boxsize;
+
+    // If the user hits resize when it's already at the default box size
+    // remove the sizing entirely to allow them to resize with the handler
+    if (!getStorage('boxsize') && currentBoxSize() === defaultBoxSize) {
+      code.style.width = '';
+      code.style.height = '';
+      return true;
+    }
+
+    unsetStorage('boxsize');
+
+    boxsize = getBoxSize();
+
+    setBoxSize(boxsize);
 
     return true;
   }
@@ -172,15 +214,19 @@ var LiveCSSEditor = function (settings) {
   }
 
   function removeEditor() {
-    var panel = getEl('panel'), code = getEl('code');
+    var panel = getEl('panel'), code = getEl('code'), boxSize = currentBoxSize();
 
     if (settings.save !== true && settings.warn === true && code.value !== '') {
       if (!confirm(chrome.i18n.getMessage("warningOnClose"))) {
         return;
       }
     }
 
-    setStorage('boxsize', code.style.width + ',' + code.style.height);
+    if (boxSize === ',') {
+      unsetStorage('boxsize');
+    } else {
+      setStorage('boxsize', currentBoxSize());
+    }
 
     resetCSSTag();
     panel.parentElement.removeChild(panel);
@@ -221,7 +267,6 @@ var LiveCSSEditor = function (settings) {
 
   function addEditorPane() {
     var objPanel = document.createElement('div'),
-      boxsize = getStorage('boxsize') && getStorage('boxsize').split(','),
       code;
 
     objPanel.setAttribute('id', 'LiveCSSEditor-panel');
@@ -231,6 +276,8 @@ var LiveCSSEditor = function (settings) {
 
     code = getEl('code');
 
+    setBoxSize(getBoxSize());
+
     if (getStorage('position') === 'bottom') {
       toggleBottom();
     }
@@ -241,11 +288,6 @@ var LiveCSSEditor = function (settings) {
       toggleLeftRight();
     }
 
-    if (boxsize) {
-      code.style.width = boxsize[0];
-      code.style.height = boxsize[1];
-    }
-
     activateButtons();
 
     code.focus();

chrome/source/manifest.json

@@ -25,4 +25,4 @@
     "48": "icon48.png",
     "128": "icon128.png"
   }
-}
+}

chrome/source/options.html

@@ -30,6 +30,11 @@ <h1 data-message="optionsHeader">Live CSS Edit Options</h1>
   <span data-message="optionsKeyCommandKeys">Command + Shift + </span><input type="text" id="keycode-string" onkeydown="return getKeyCode(event);"> <input type="hidden" id="keycode-value">
 </fieldset>
 
+<fieldset>
+  <p><label for="box-size-w" data-message="optionsBoxSizeLabel">Default Editor Box Size (WxH in px):</label></p>
+  <input type="text" id="box-size-w" placeholder="W">x<input type="text" id="box-size-h" placeholder="H">px
+</fieldset>
+
 <fieldset>
   <p data-message="optionsWarnLabel">Warn before closing the editor:</p>
   <input type="radio" name="warn" id="warn-yes"> <label for="warn-yes" data-message="optionsYes">Yes</label>
@@ -50,4 +55,4 @@ <h1 data-message="optionsHeader">Live CSS Edit Options</h1>
 
 <p><button id="save-button" data-message="optionsSaveButton">Save</button></p>
 </body>
-</html>
+</html>

chrome/source/options.js

@@ -1,4 +1,4 @@
-var keyCommand, warn, save, modify, keyString, keyValue, warnYes, warnNo, saveYes, saveNo, modifyYes, modifyNo, charMap = {
+var keyCommand, warn, save, modify, keyString, keyValue, warnYes, warnNo, saveYes, saveNo, modifyYes, modifyNo, boxSize, boxSizeH, boxSizeW, charMap = {
   8 : "backspace",
   9 : "tab",
   13 : "enter",
@@ -70,6 +70,7 @@ function stringFromCharCode(code) {
 // Saves options to localStorage.
 function save_options() {
   localStorage["keycode"] = keyValue.value;
+  localStorage["boxsize"] = boxSizeW.value.replace(/[^\d]/g, '') + ',' + boxSizeH.value.replace(/[^\d]/g, '');
 
   if (warnYes.checked) {
     localStorage["warn"] = true;
@@ -111,6 +112,12 @@ function restore_options() {
     keyCommand = 69;
   }
 
+  if (typeof boxSize !== "undefined") {
+    var boxSizes = boxSize.split(',');
+    boxSizeW.value = boxSizes[0];
+    boxSizeH.value = boxSizes[1];
+  }
+
   keyString.value = stringFromCharCode(keyCommand);
   keyValue.value = keyCommand;
 
@@ -138,6 +145,8 @@ function init() {
   warn = localStorage["warn"];
   save = localStorage["save"];
   modify = localStorage["modify"];
+  boxSize = localStorage["boxsize"];
+
   keyString = document.getElementById('keycode-string');
   keyValue = document.getElementById('keycode-value');
   warnYes = document.getElementById('warn-yes');
@@ -146,6 +155,8 @@ function init() {
   saveNo = document.getElementById('save-no');
   modifyYes = document.getElementById('modify-yes');
   modifyNo = document.getElementById('modify-no');
+  boxSizeH = document.getElementById('box-size-h');
+  boxSizeW = document.getElementById('box-size-w');
 
   var objects = document.getElementsByTagName('*'), i;
   for(i = 0; i < objects.length; i++) {
@@ -168,4 +179,4 @@ function getKeyCode(e) {
 
 window.onload = function () {
   init();
-}
+}