Wait for background page to load on Chrome startup

At startup Chrome lazy-loads extension's background page,
thus occasionally breaking apply.js and Stylish own pages

apply.js

@@ -1,7 +1,14 @@
-var request = {method: "getStyles", matchUrl: location.href, enabled: true, asHash: true};
+requestStyles();
-if (location.href.indexOf(chrome.extension.getURL("")) == 0) {
+
-	chrome.extension.getBackgroundPage().getStyles(request, applyStyles);
+function requestStyles() {
-} else {
+	var request = {method: "getStyles", matchUrl: location.href, enabled: true, asHash: true};
+	if (location.href.indexOf(chrome.extension.getURL("")) == 0) {
+		var bg = chrome.extension.getBackgroundPage();
+		if (bg && bg.getStyles) {
+			bg.getStyles(request, applyStyles);
+			return;
+		}
+	}
 	chrome.extension.sendMessage(request, applyStyles);
 }
 
@@ -63,6 +70,10 @@ function removeStyle(id, doc) {
 }
 
 function applyStyles(styleHash) {
+	if (!styleHash) { // Chrome is starting up
+		requestStyles();
+		return;
+	}
 	if ("disableAll" in styleHash) {
 		disableAll(styleHash.disableAll);
 		delete styleHash.disableAll;

background.js

@@ -393,16 +393,7 @@ function openURL(options) {
 	});
 }
 
-var codeMirrorThemes = [chrome.i18n.getMessage("default")];
+var codeMirrorThemes;
-chrome.runtime.getPackageDirectoryEntry(function(rootDir) {
+getCodeMirrorThemes(function(themes) {
-	rootDir.getDirectory("codemirror/theme", {create: false}, function(themeDir) {
+	 codeMirrorThemes = themes;
-		themeDir.createReader().readEntries(function(entries) {
-			entries
-				.filter(function(entry) { return entry.isFile })
-				.sort(function(a, b) { return a.name < b.name ? -1 : 1 })
-				.forEach(function(entry) {
-					codeMirrorThemes.push(entry.name.replace(/\.css$/, ""));
-				});
-		});
-	});
 });

edit.js

@@ -172,15 +172,25 @@ function initCodeMirror() {
 
 	// preload the theme so that CodeMirror can calculate its metrics in DOMContentLoaded->loadPrefs()
 	var theme = prefs.getPref("editor.theme");
-	var themes = chrome.extension.getBackgroundPage().codeMirrorThemes;
+	document.getElementById("cm-theme").href = theme == "default" ? "" : "codemirror/theme/" + theme + ".css";
-	document.getElementById("cm-theme").href = themes.indexOf(theme) <= 0 ? "" : "codemirror/theme/" + theme + ".css";
 
 	// initialize global editor controls
 	document.addEventListener("DOMContentLoaded", function() {
 		function concatOption(html, option) {
 			return html + "<option>" + option + "</option>";
 		}
-		document.getElementById("editor.theme").innerHTML = themes.reduce(concatOption, "");
+		var bg = chrome.extension.getBackgroundPage();
+		var themeControl = document.getElementById("editor.theme");
+		if (bg && bg.codeMirrorThemes) {
+			themeControl.innerHTML = bg.codeMirrorThemes.reduce(concatOption, "");
+		} else {
+			// Chrome is starting up and shows our edit.html, but the background page isn't loaded yet
+			themeControl.innerHTML = concatOption("", theme == "default" ? t(theme) : theme);
+			getCodeMirrorThemes(function(themes) {
+				themeControl.innerHTML = themes.reduce(concatOption, "");
+				themeControl.selectedIndex = Math.max(0, themes.indexOf(theme));
+			});
+		}
 		document.getElementById("editor.keyMap").innerHTML = Object.keys(CM.keyMap).sort().reduce(concatOption, "");
 		var controlPrefs = {};
 		document.querySelectorAll("#options *[data-option][id^='editor.']").forEach(function(option) {
@@ -208,7 +218,7 @@ function acmeEventListener(event) {
 		case "theme":
 			var themeLink = document.getElementById("cm-theme");
 			// use non-localized "default" internally
-			if (!value || el.selectedIndex <= 0) {
+			if (!value || value == "default" || value == t("default")) {
 				value = "default";
 				if (prefs.getPref(el.id) != value) {
 					prefs.setPref(el.id, value);
@@ -638,11 +648,18 @@ function init() {
 		return;
 	}
 	// This is an edit
-	chrome.extension.sendMessage({method: "getStyles", id: params.id}, function(styles) {
+	requestStyle();
-		var style = styles[0];
+	function requestStyle() {
-		styleId = style.id;
+		chrome.extension.sendMessage({method: "getStyles", id: params.id}, function callback(styles) {
-		initWithStyle(style);
+			if (!styles) { // Chrome is starting up and shows edit.html
-	});
+				requestStyle();
+				return;
+			}
+			var style = styles[0];
+			styleId = style.id;
+			initWithStyle(style);
+		});
+	}
 }
 
 function initWithStyle(style) {
@@ -831,7 +848,6 @@ function getParams() {
 }
 
 chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
-	var installed = document.getElementById("installed");
 	switch (request.method) {
 		case "styleUpdated":
 			if (styleId == request.id) {

health.js

@@ -1,7 +1,11 @@
-chrome.extension.sendMessage({method: "healthCheck"}, function(ok) {
+healthCheck();
-	if (!ok) {
+
-		if (confirm(t("dbError"))) {
+function healthCheck() {
+	chrome.extension.sendMessage({method: "healthCheck"}, function(ok) {
+		if (ok === undefined) { // Chrome is starting up
+			healthCheck();
+		} else if (!ok && confirm(t("dbError"))) {
 			window.open("http://userstyles.org/dberror");
 		}
-	}
+	});
-});
+}

manage.js

@@ -28,6 +28,10 @@ loadPrefs({
 });
 
 function showStyles(styles) {
+	if (!styles) { // Chrome is starting up
+		chrome.extension.sendMessage({method: "getStyles"}, showStyles);
+		return;
+	}
 	styles.sort(function(a, b) { return a.name.localeCompare(b.name)});
 	var installed = document.getElementById("installed");
 	styles.map(createStyleElement).forEach(function(e) {

storage.js

@@ -223,3 +223,22 @@ var prefs = {
 	},
 	removePref: function(key) { setPref(key, undefined) }
 };
+
+function getCodeMirrorThemes(callback) {
+	chrome.runtime.getPackageDirectoryEntry(function(rootDir) {
+		rootDir.getDirectory("codemirror/theme", {create: false}, function(themeDir) {
+			themeDir.createReader().readEntries(function(entries) {
+				var themes = [chrome.i18n.getMessage("default")];
+				entries
+					.filter(function(entry) { return entry.isFile })
+					.sort(function(a, b) { return a.name < b.name ? -1 : 1 })
+					.forEach(function(entry) {
+						themes.push(entry.name.replace(/\.css$/, ""));
+					});
+				if (callback) {
+					callback(themes);
+				}
+			});
+		});
+	});
+}