open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Original content is flickering before stylish applies the user style #15

Browse Source
This commit is contained in:
Jason Barnabe 2015-01-30 10:36:46 -06:00
parent 07d3cdda40
commit 7747cab98f
2 changed files with 51 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
apply.js
View File

@ -1,6 +1,4 @@
chrome.extension.sendMessage({method: "getStyles", matchUrl: location.href, enabled: true, updateBadge: window == window.top}, function(response) {
response.forEach(applyStyle);
});
chrome.extension.sendMessage({method: "getStyles", matchUrl: location.href, enabled: true, asHash: true}, applyStyles);
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
switch(request.name) {
@ -12,7 +10,12 @@ chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
//fallthrough
case "styleAdded":
if (request.style.enabled == "true") {
applyStyle(request.style);
chrome.extension.sendMessage({method: "getStyles", matchUrl: location.href, enabled: true, id: request.style.id, asHash: true}, applyStyles);
}
break;
case "styleApply":
for (var styleId in request.styles) {
applySections(styleId, request.styles[styleId]);
}
}
});
@ -24,16 +27,18 @@ function removeStyle(id) {
}
}
function applyStyle(s) {
chrome.extension.sendMessage({method: "getStyleApplies", style: s, url: location.href}, function(response) {
if (response && response.length > 0) {
applySections(s, response);
}
});
function applyStyles(styleHash) {
for (var styleId in styleHash) {
applySections(styleId, styleHash[styleId]);
}
}
function applySections(style, sections) {
var styleElement;
function applySections(styleId, sections) {
var styleElement = document.getElementById("stylish-" + styleId);
// Already there.
if (styleElement) {
return;
}
if (document.documentElement instanceof SVGSVGElement) {
// SVG document, make an SVG style element.
styleElement = document.createElementNS("http://www.w3.org/2000/svg", "style");
@ -41,7 +46,7 @@ function applySections(style, sections) {
// This will make an HTML style element. If there's SVG embedded in an HTML document, this works on the SVG too.
styleElement = document.createElement("style");
}
styleElement.setAttribute("id", "stylish-" + style.id);
styleElement.setAttribute("id", "stylish-" + styleId);
styleElement.setAttribute("class", "stylish");
styleElement.setAttribute("type", "text/css");
styleElement.appendChild(document.createTextNode(sections.map(function(section) {

56
background.js
View File

@ -1,21 +1,19 @@
// This happens right away, sometimes so fast that the content script isn't even ready. That's
// 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});
// Don't show the badge for frames
if (data.frameId == 0) {
chrome.browserAction.setBadgeText({text: getBadgeText(Object.keys(styleHash)), tabId: data.tabId});
}
});
});
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
switch (request.method) {
case "getStyles":
getStyles(request, function(r) {
sendResponse(r);
if (localStorage["show-badge"] == "true") {
if (request.updateBadge) {
var t = getBadgeText(r);
console.log("Tab " + sender.tab.id + " (" + sender.tab.url + ") badge text set to '" + t + "'.");
chrome.browserAction.setBadgeText({text: t, tabId: sender.tab.id});
} else {
console.log("Tab " + sender.tab.id + " (" + sender.tab.url + ") doesn't get badge text.");
}
}
});
return true;
case "getStyleApplies":
sendResponse(getApplicableSections(request.style, request.url));
getStyles(request, sendResponse);
return true;
case "saveStyle":
saveStyle(request, sendResponse);
@ -35,23 +33,35 @@ function getStyles(options, callback) {
var url = "url" in options ? options.url : null;
var id = "id" in options ? options.id : null;
var matchUrl = "matchUrl" in options ? options.matchUrl : null;
// Return as a hash from style to applicable sections? Can only be used with matchUrl.
var asHash = "asHash" in options ? options.asHash : false;
var callCallback = function() {
callback(cachedStyles.filter(function(style) {
var styles = asHash ? {} : [];
cachedStyles.forEach(function(style) {
if (enabled != null && fixBoolean(style.enabled) != enabled) {
return false;
return;
}
if (url != null && style.url != url) {
return false;
return;
}
if (id != null && style.id != id) {
return false;
return;
}
if (matchUrl != null && getApplicableSections(style, matchUrl).length == 0) {
return false;
if (matchUrl != null) {
var applicableSections = getApplicableSections(style, matchUrl);
if (applicableSections.length > 0) {
if (asHash) {
styles[style.id] = applicableSections;
} else {
styles.push(style)
}
}
} else {
styles.push(style);
}
return true;
}));
});
callback(styles);
}
if (cachedStyles) {