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", "message": "Show number of styles active for the current site on the toolbar button",
"description": "Label for the checkbox controlling toolbar badge text." "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": { "sectionAdd": {
"message": "Add another section", "message": "Add another section",
"description": "Label for the button to add a 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.sendMessage({method: "getStyles", matchUrl: location.href, enabled: true, asHash: true}, applyStyles);
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) { chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
switch(request.name) { switch (request.method) {
case "styleDeleted": case "styleDeleted":
removeStyle(request.id); removeStyle(request.id);
break; break;

View File

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

View File

@ -22,7 +22,7 @@
#sections { #sections {
padding-left: 290px; padding-left: 290px;
} }
h2 { #sections h2 {
margin-top: 8px; margin-top: 8px;
} }
#basic-info { #basic-info {
@ -38,7 +38,7 @@
#sections > div:not(:first-child) { #sections > div:not(:first-child) {
border-top: 2px solid black; border-top: 2px solid black;
} }
label { #basic-info label {
display: inline-block; display: inline-block;
width: 10em; width: 10em;
vertical-align: top; vertical-align: top;
@ -86,6 +86,8 @@
vertical-align: bottom; vertical-align: bottom;
} }
</style> </style>
<script src="storage.js"></script>
<script src="messaging.js"></script>
<script src="localization.js"></script> <script src="localization.js"></script>
</head> </head>
<body id="stylish-edit"> <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="to-mozilla"></button><img id="to-mozilla-help" src="help.png"><br><br>
<button id="save-button"></button> <button id="save-button"></button>
<a href="manage.html"><button id="cancel-button"></button></a> <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> </div>
<section id="sections"> <section id="sections">
<h2><span id="sections-heading"></span> <img id="sections-help" src="help.png"></h2> <h2><span id="sections-heading"></span> <img id="sections-help" src="help.png"></h2>

17
edit.js
View File

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

View File

@ -15,8 +15,7 @@ function showStyles(styles) {
styles.map(createStyleElement).forEach(function(e) { styles.map(createStyleElement).forEach(function(e) {
installed.appendChild(e); installed.appendChild(e);
}); });
// prefs may be defaulted in storage.js - at this point they'll have been loaded loadPrefs(["show-badge"]);
loadPrefs();
} }
function createStyleElement(style) { function createStyleElement(style) {
@ -127,7 +126,7 @@ function getStyleElement(event) {
} }
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) { chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
switch(request.name) { switch (request.method) {
case "styleUpdated": case "styleUpdated":
handleUpdate(request.style); handleUpdate(request.style);
break; 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"); document.title = t("manageTitle");
tE("manage-heading", "manageHeading"); tE("manage-heading", "manageHeading");
tE("manage-text", "manageText", null, false); tE("manage-text", "manageText", null, false);

View File

@ -21,10 +21,20 @@ function getDatabase(ready, error) {
} else if (stylishDb.version == "1.4") { } else if (stylishDb.version == "1.4") {
dbV15(stylishDb, error, ready); dbV15(stylishDb, error, ready);
} else { } else {
defaultPrefs();
ready(stylishDb); ready(stylishDb);
} }
} }
function defaultPrefs() {
if (!("show-badge" in localStorage)) {
localStorage["show-badge"] = true;
}
if (!("smart-indent" in localStorage)) {
localStorage["smart-indent"] = true;
}
}
function dbV11(d, error, done) { function dbV11(d, error, done) {
d.changeVersion(d.version, '1.1', function (t) { d.changeVersion(d.version, '1.1', function (t) {
t.executeSql('CREATE TABLE styles (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, url TEXT, updateUrl TEXT, md5Url TEXT, name TEXT NOT NULL, code TEXT NOT NULL, enabled INTEGER NOT NULL, originalCode TEXT NULL);'); t.executeSql('CREATE TABLE styles (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, url TEXT, updateUrl TEXT, md5Url TEXT, name TEXT NOT NULL, code TEXT NOT NULL, enabled INTEGER NOT NULL, originalCode TEXT NULL);');
@ -67,12 +77,9 @@ function dbV14(d, error, done) {
} }
function dbV15(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) { d.changeVersion(d.version, '1.5', function (t) {
t.executeSql('ALTER TABLE styles ADD COLUMN originalMd5 TEXT NULL;'); 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) { function enableStyle(id, enabled) {
@ -83,7 +90,7 @@ function enableStyle(id, enabled) {
chrome.extension.sendMessage({method: "styleChanged"}); chrome.extension.sendMessage({method: "styleChanged"});
chrome.extension.sendMessage({method: "getStyles", id: id}, function(styles) { chrome.extension.sendMessage({method: "getStyles", id: id}, function(styles) {
handleUpdate(styles[0]); handleUpdate(styles[0]);
notifyAllTabs({name:"styleUpdated", style: styles[0]}); notifyAllTabs({method:"styleUpdated", style: styles[0]});
}); });
}); });
}); });
@ -98,7 +105,7 @@ function deleteStyle(id) {
}, reportError, function() { }, reportError, function() {
chrome.extension.sendMessage({method: "styleChanged"}); chrome.extension.sendMessage({method: "styleChanged"});
handleDelete(id); handleDelete(id);
notifyAllTabs({name:"styleDeleted", id: id}); notifyAllTabs({method: "styleDeleted", id: id});
}); });
}); });
} }
@ -124,3 +131,39 @@ function getDomains(url) {
} }
return domains; 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);
});
}