Add option for smart indentation in editor

This commit is contained in:
Jason Barnabe 2015-02-08 22:02:08 -06:00
parent e9c34da152
commit d879b5e0c4
7 changed files with 92 additions and 64 deletions

View File

@ -153,6 +153,10 @@
"message": "Show number of styles active for the current site on the toolbar button",
"description": "Label for the checkbox controlling toolbar badge text."
},
"prefSmartIndent": {
"message": "Use smart indentation",
"description": "Label for the checkbox controlling smart indentation option for the style editor."
},
"sectionAdd": {
"message": "Add another section",
"description": "Label for the button to add a section"

View File

@ -1,7 +1,7 @@
chrome.extension.sendMessage({method: "getStyles", matchUrl: location.href, enabled: true, asHash: true}, applyStyles);
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
switch(request.name) {
switch (request.method) {
case "styleDeleted":
removeStyle(request.id);
break;

View File

@ -2,7 +2,7 @@
// why the content script also asks for this stuff.
chrome.webNavigation.onCommitted.addListener(function(data) {
getStyles({matchUrl: data.url, enabled: true, asHash: true}, function(styleHash) {
chrome.tabs.sendMessage(data.tabId, {name: "styleApply", styles: styleHash});
chrome.tabs.sendMessage(data.tabId, {method: "styleApply", styles: styleHash});
// Don't show the badge for frames
if (data.frameId == 0) {
chrome.browserAction.setBadgeText({text: getBadgeText(Object.keys(styleHash)), tabId: data.tabId});
@ -291,7 +291,7 @@ function saveFromJSONComplete(id, callback) {
}
function saveFromJSONStyleReloaded(updateType, style, callback) {
notifyAllTabs({name:updateType, style: style});
notifyAllTabs({method: updateType, style: style});
if (callback) {
callback(style);
}

View File

@ -1,8 +1,8 @@
<html>
<head>
<script src="codemirror/lib/codemirror.js"></script>
<link rel="stylesheet" href="codemirror/lib/codemirror.css">
<script src="codemirror/mode/css/css.js"></script>
<script src="codemirror/lib/codemirror.js"></script>
<link rel="stylesheet" href="codemirror/lib/codemirror.css">
<script src="codemirror/mode/css/css.js"></script>
<style type="text/css">
body {
margin: 0px;
@ -22,7 +22,7 @@
#sections {
padding-left: 290px;
}
h2 {
#sections h2 {
margin-top: 8px;
}
#basic-info {
@ -38,7 +38,7 @@
#sections > div:not(:first-child) {
border-top: 2px solid black;
}
label {
#basic-info label {
display: inline-block;
width: 10em;
vertical-align: top;
@ -50,9 +50,9 @@
height: 10em;
width: 40em;
}
.CodeMirror {
border: solid #CCC 1px;
}
.CodeMirror {
border: solid #CCC 1px;
}
.applies-to ul {
display: inline-block;
margin: 0;
@ -86,6 +86,8 @@
vertical-align: bottom;
}
</style>
<script src="storage.js"></script>
<script src="messaging.js"></script>
<script src="localization.js"></script>
</head>
<body id="stylish-edit">
@ -98,6 +100,10 @@
<button id="to-mozilla"></button><img id="to-mozilla-help" src="help.png"><br><br>
<button id="save-button"></button>
<a href="manage.html"><button id="cancel-button"></button></a>
<div id="options">
<h2 id="options-heading"></h2>
<input id="smart-indent" type="checkbox"><label id="smart-indent-label" for="smart-indent"></label>
</div>
</div>
<section id="sections">
<h2><span id="sections-heading"></span> <img id="sections-help" src="help.png"></h2>

27
edit.js
View File

@ -15,15 +15,15 @@ sectionTemplate.innerHTML = '<label>' + t('sectionCode') + '</label><textarea cl
var editors = [] // array of all CodeMirror instances
// replace given textarea with the CodeMirror editor
function setupCodeMirror(textarea) {
var cm = CodeMirror.fromTextArea(textarea, {
mode: 'css',
lineNumbers: true,
lineWrapping: true
});
editors.push(cm);
var cm = CodeMirror.fromTextArea(textarea, {
mode: 'css',
lineNumbers: true,
lineWrapping: true,
smartIndent: localStorage["smart-indent"] == null || localStorage["smart-indent"] == "true"
});
editors.push(cm);
}
function makeDirty() {
dirty = true;
}
@ -125,6 +125,7 @@ window.addEventListener("load", init, false);
function init() {
tE("sections-help", "helpAlt", "alt");
loadPrefs(["smart-indent"]);
var params = getParams();
if (!params.id) { // match should be 2 - one for the whole thing, one for the parentheses
// This is an add
@ -324,7 +325,7 @@ function getParams() {
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
var installed = document.getElementById("installed");
switch(request.name) {
switch (request.method) {
case "styleUpdated":
if (styleId == request.id) {
initWithStyle(request.style);
@ -336,6 +337,13 @@ chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
window.close();
break;
}
break;
case "prefChanged":
if (request.prefName == "smart-indent") {
editors.forEach(function(editor) {
editor.setOption("smartIndent", request.value);
});
}
}
});
@ -345,6 +353,9 @@ tE("to-mozilla", "styleToMozillaFormat");
tE("save-button", "styleSaveLabel");
tE("cancel-button", "styleCancelEditLabel");
tE("sections-heading", "styleSectionsTitle");
tE("options-heading", "optionsHeading");
tE("smart-indent-label", "prefSmartIndent");
document.getElementById("name").addEventListener("change", makeDirty, false);
document.getElementById("enabled").addEventListener("change", makeDirty, false);
document.getElementById("to-mozilla").addEventListener("click", showMozillaFormat, false);

View File

@ -15,8 +15,7 @@ function showStyles(styles) {
styles.map(createStyleElement).forEach(function(e) {
installed.appendChild(e);
});
// prefs may be defaulted in storage.js - at this point they'll have been loaded
loadPrefs();
loadPrefs(["show-badge"]);
}
function createStyleElement(style) {
@ -127,7 +126,7 @@ function getStyleElement(event) {
}
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
switch(request.name) {
switch (request.method) {
case "styleUpdated":
handleUpdate(request.style);
break;
@ -335,41 +334,6 @@ function jsonEquals(a, b, property) {
}
}
function getType(o) {
if (typeof o == "undefined" || typeof o == "string") {
return typeof o;
}
if (o instanceof Array) {
return "array";
}
throw "Not supported - " + o;
}
function isCheckbox(el) {
return el.nodeName.toLowerCase() == "input" && "checkbox" == el.type.toLowerCase();
}
function changePref(event) {
var el = event.target;
localStorage[el.id] = isCheckbox(el) ? el.checked : el.value;
notifyAllTabs({method: "prefChanged"});
}
function loadPrefs() {
["show-badge"].forEach(function(id) {
var value = localStorage[id];
var el = document.getElementById(id);
if (isCheckbox(el)) {
if (value == "true") {
el.checked = true;
}
} else {
el.value = value;
}
el.addEventListener("change", changePref);
});
}
document.title = t("manageTitle");
tE("manage-heading", "manageHeading");
tE("manage-text", "manageText", null, false);

View File

@ -21,7 +21,17 @@ function getDatabase(ready, error) {
} else if (stylishDb.version == "1.4") {
dbV15(stylishDb, error, ready);
} else {
ready(stylishDb);
defaultPrefs();
ready(stylishDb);
}
}
function defaultPrefs() {
if (!("show-badge" in localStorage)) {
localStorage["show-badge"] = true;
}
if (!("smart-indent" in localStorage)) {
localStorage["smart-indent"] = true;
}
}
@ -67,12 +77,9 @@ function dbV14(d, error, done) {
}
function dbV15(d, error, done) {
if (!("show-badge" in localStorage)) {
localStorage["show-badge"] = true;
}
d.changeVersion(d.version, '1.5', function (t) {
t.executeSql('ALTER TABLE styles ADD COLUMN originalMd5 TEXT NULL;');
}, error, function() { done(d, error, done)});
}, error, function() { dbV15(d, error, done)});
}
function enableStyle(id, enabled) {
@ -83,7 +90,7 @@ function enableStyle(id, enabled) {
chrome.extension.sendMessage({method: "styleChanged"});
chrome.extension.sendMessage({method: "getStyles", id: id}, function(styles) {
handleUpdate(styles[0]);
notifyAllTabs({name:"styleUpdated", style: styles[0]});
notifyAllTabs({method:"styleUpdated", style: styles[0]});
});
});
});
@ -98,7 +105,7 @@ function deleteStyle(id) {
}, reportError, function() {
chrome.extension.sendMessage({method: "styleChanged"});
handleDelete(id);
notifyAllTabs({name:"styleDeleted", id: id});
notifyAllTabs({method: "styleDeleted", id: id});
});
});
}
@ -124,3 +131,39 @@ function getDomains(url) {
}
return domains;
}
function getType(o) {
if (typeof o == "undefined" || typeof o == "string") {
return typeof o;
}
if (o instanceof Array) {
return "array";
}
throw "Not supported - " + o;
}
function isCheckbox(el) {
return el.nodeName.toLowerCase() == "input" && "checkbox" == el.type.toLowerCase();
}
function changePref(event) {
var el = event.target;
var value = isCheckbox(el) ? el.checked : el.value;
localStorage[el.id] = value
notifyAllTabs({method: "prefChanged", prefName: el.id, value: value});
}
function loadPrefs(prefNames) {
prefNames.forEach(function(id) {
var value = localStorage[id];
var el = document.getElementById(id);
if (isCheckbox(el)) {
if (value == "true") {
el.checked = true;
}
} else {
el.value = value;
}
el.addEventListener("change", changePref);
});
}