Bug 778582 (r=mfinkle)

This commit is contained in:
Lucas Rocha 2012-08-28 16:17:02 +01:00
parent a6763e2ff3
commit 0429a3c1af
7 changed files with 190 additions and 124 deletions

View File

@ -9,7 +9,7 @@
<link rel="stylesheet" href="chrome://browser/skin/aboutReader.css" type="text/css"/>
</head>
<body onload="AboutReader.init();" onunload="AboutReader.uninit();">
<body>
<div id="reader-header" class="header">
<div id="reader-domain" class="domain"></div>
<h1 id="reader-title"></h1>
@ -35,8 +35,6 @@
<li><a id="toggle-button" class="button toggle-button" href="#"></a></li>
</ul>
<script type="application/javascript;version=1.8" src="chrome://browser/content/aboutReader.js">
</script>
</body>
</html>

View File

@ -17,12 +17,85 @@ XPCOMUtils.defineLazyGetter(window, "gChromeWin", function ()
.QueryInterface(Ci.nsIDOMChromeWindow));
function dump(s) {
Services.console.logStringMessage("Reader: " + s);
Services.console.logStringMessage("AboutReader: " + s);
}
let gStrings = Services.strings.createBundle("chrome://browser/locale/aboutReader.properties");
let AboutReader = {
let AboutReader = function(doc, win) {
dump("Init()");
this._doc = doc;
this._win = win;
Services.obs.addObserver(this, "Reader:FaviconReturn", false);
this._article = null;
dump("Feching toolbar, header and content notes from about:reader");
this._headerElement = doc.getElementById("reader-header");
this._domainElement = doc.getElementById("reader-domain");
this._titleElement = doc.getElementById("reader-title");
this._creditsElement = doc.getElementById("reader-credits");
this._contentElement = doc.getElementById("reader-content");
this._toolbarElement = doc.getElementById("reader-toolbar");
this._toolbarEnabled = false;
this._scrollOffset = win.pageYOffset;
let body = doc.body;
body.addEventListener("touchstart", this, false);
body.addEventListener("click", this, false);
win.addEventListener("scroll", this, false);
win.addEventListener("popstate", this, false);
win.addEventListener("resize", this, false);
this._setupAllDropdowns();
this._setupButton("toggle-button", this._onReaderToggle.bind(this));
this._setupButton("list-button", this._onList.bind(this));
this._setupButton("share-button", this._onShare.bind(this));
let colorSchemeOptions = [
{ name: gStrings.GetStringFromName("aboutReader.colorSchemeLight"),
value: "light"},
{ name: gStrings.GetStringFromName("aboutReader.colorSchemeDark"),
value: "dark"}
];
let colorScheme = Services.prefs.getCharPref("reader.color_scheme");
this._setupSegmentedButton("color-scheme-buttons", colorSchemeOptions, colorScheme, this._setColorScheme.bind(this));
this._setColorScheme(colorScheme);
let fontTitle = gStrings.GetStringFromName("aboutReader.textTitle");
this._setupStepControl("font-size-control", fontTitle, this._onFontSizeChange.bind(this));
this._fontSize = 0;
this._setFontSize(Services.prefs.getIntPref("reader.font_size"));
let marginTitle = gStrings.GetStringFromName("aboutReader.marginTitle");
this._setupStepControl("margin-size-control", marginTitle, this._onMarginSizeChange.bind(this));
this._marginSize = 0;
this._setMarginSize(Services.prefs.getIntPref("reader.margin_size"));
dump("Decoding query arguments");
let queryArgs = this._decodeQueryString(win.location.href);
this._isReadingListItem = (queryArgs.readingList == "1");
this._updateToggleButton();
let url = queryArgs.url;
let tabId = queryArgs.tabId;
if (tabId) {
dump("Loading from tab with ID: " + tabId + ", URL: " + url);
this._loadFromTab(tabId, url);
} else {
dump("Fetching page with URL: " + url);
this._loadFromURL(url);
}
}
AboutReader.prototype = {
_STEP_INCREMENT: 0,
_STEP_DECREMENT: 1,
@ -31,75 +104,6 @@ let AboutReader = {
".content .wp-caption img, " +
".content figure img",
init: function Reader_init() {
dump("Init()");
Services.obs.addObserver(this, "Reader:FaviconReturn", false);
this._article = null;
dump("Feching toolbar, header and content notes from about:reader");
this._headerElement = document.getElementById("reader-header");
this._domainElement = document.getElementById("reader-domain");
this._titleElement = document.getElementById("reader-title");
this._creditsElement = document.getElementById("reader-credits");
this._contentElement = document.getElementById("reader-content");
this._toolbarElement = document.getElementById("reader-toolbar");
this._toolbarEnabled = false;
this._scrollOffset = window.pageYOffset;
let body = document.body;
body.addEventListener("touchstart", this, false);
body.addEventListener("click", this, false);
window.addEventListener("scroll", this, false);
window.addEventListener("popstate", this, false);
window.addEventListener("resize", this, false);
this._setupAllDropdowns();
this._setupButton("toggle-button", this._onReaderToggle.bind(this));
this._setupButton("list-button", this._onList.bind(this));
this._setupButton("share-button", this._onShare.bind(this));
let colorSchemeOptions = [
{ name: gStrings.GetStringFromName("aboutReader.colorSchemeLight"),
value: "light"},
{ name: gStrings.GetStringFromName("aboutReader.colorSchemeDark"),
value: "dark"}
];
let colorScheme = Services.prefs.getCharPref("reader.color_scheme");
this._setupSegmentedButton("color-scheme-buttons", colorSchemeOptions, colorScheme, this._setColorScheme.bind(this));
this._setColorScheme(colorScheme);
let fontTitle = gStrings.GetStringFromName("aboutReader.textTitle");
this._setupStepControl("font-size-control", fontTitle, this._onFontSizeChange.bind(this));
this._fontSize = 0;
this._setFontSize(Services.prefs.getIntPref("reader.font_size"));
let marginTitle = gStrings.GetStringFromName("aboutReader.marginTitle");
this._setupStepControl("margin-size-control", marginTitle, this._onMarginSizeChange.bind(this));
this._marginSize = 0;
this._setMarginSize(Services.prefs.getIntPref("reader.margin_size"));
dump("Decoding query arguments");
let queryArgs = this._decodeQueryString(window.location.href);
this._isReadingListItem = (queryArgs.readingList == "1");
this._updateToggleButton();
let url = queryArgs.url;
let tabId = queryArgs.tabId;
if (tabId) {
dump("Loading from tab with ID: " + tabId + ", URL: " + url);
this._loadFromTab(tabId, url);
} else {
dump("Fetching page with URL: " + url);
this._loadFromURL(url);
}
},
observe: function(aMessage, aTopic, aData) {
switch(aTopic) {
case "Reader:FaviconReturn": {
@ -111,6 +115,9 @@ let AboutReader = {
},
handleEvent: function Reader_handleEvent(aEvent) {
if (!aEvent.isTrusted)
return;
switch (aEvent.type) {
case "touchstart":
this._scrolled = false;
@ -140,18 +147,20 @@ let AboutReader = {
Services.obs.removeObserver(this, "Reader:FaviconReturn", false);
let body = document.body;
let body = this._doc.body;
body.removeEventListener("touchstart", this, false);
body.removeEventListener("click", this, false);
window.removeEventListener("scroll", this, false);
window.removeEventListener("popstate", this, false);
window.removeEventListener("resize", this, false);
let win = this._win;
win.removeEventListener("scroll", this, false);
win.removeEventListener("popstate", this, false);
win.removeEventListener("resize", this, false);
this._hideContent();
},
_updateToggleButton: function Reader_updateToggleButton() {
let classes = document.getElementById("toggle-button").classList;
let classes = this._doc.getElementById("toggle-button").classList;
if (this._isReadingListItem) {
classes.add("on");
@ -229,9 +238,11 @@ let AboutReader = {
if (this._marginSize === newMarginSize)
return;
let doc = this._doc;
this._marginSize = Math.max(5, Math.min(25, newMarginSize));
document.body.style.marginLeft = this._marginSize + "%";
document.body.style.marginRight = this._marginSize + "%";
doc.body.style.marginLeft = this._marginSize + "%";
doc.body.style.marginRight = this._marginSize + "%";
this._updateImageMargins();
@ -249,7 +260,7 @@ let AboutReader = {
if (this._fontSize === newFontSize)
return;
let bodyClasses = document.body.classList;
let bodyClasses = this._doc.body.classList;
if (this._fontSize > 0)
bodyClasses.remove("font-size" + this._fontSize);
@ -264,7 +275,7 @@ let AboutReader = {
if (this._colorScheme === newColorScheme)
return;
let bodyClasses = document.body.classList;
let bodyClasses = this._doc.body.classList;
if (this._colorScheme)
bodyClasses.remove(this._colorScheme);
@ -280,8 +291,9 @@ let AboutReader = {
},
_setToolbarVisibility: function Reader_setToolbarVisibility(visible) {
if (history.state)
history.back();
let win = this._win;
if (win.history.state)
win.history.back();
if (!this._toolbarEnabled)
return;
@ -341,15 +353,17 @@ let AboutReader = {
if (this._article.url !== url)
return;
let link = document.createElement('link');
let doc = this._doc;
let link = doc.createElement('link');
link.rel = 'shortcut icon';
link.href = faviconUrl;
document.getElementsByTagName('head')[0].appendChild(link);
doc.getElementsByTagName('head')[0].appendChild(link);
},
_updateImageMargins: function Reader_updateImageMargins() {
let windowWidth = window.innerWidth;
let windowWidth = this._win.innerWidth;
let contentWidth = this._contentElement.offsetWidth;
let maxWidthStyle = windowWidth + "px !important";
@ -378,7 +392,7 @@ let AboutReader = {
img.style.cssText = cssText;
}
let imgs = document.querySelectorAll(this._BLOCK_IMAGES_SELECTOR);
let imgs = this._doc.querySelectorAll(this._BLOCK_IMAGES_SELECTOR);
for (let i = imgs.length; --i >= 0;) {
let img = imgs[i];
@ -397,7 +411,7 @@ let AboutReader = {
this._contentElement.innerHTML = error;
this._contentElement.style.display = "block";
document.title = error;
this._doc.title = error;
},
_showContent: function Reader_showContent(article) {
@ -409,7 +423,7 @@ let AboutReader = {
this._creditsElement.innerHTML = article.byline;
this._titleElement.innerHTML = article.title;
document.title = article.title;
this._doc.title = article.title;
this._headerElement.style.display = "block";
@ -451,45 +465,56 @@ let AboutReader = {
},
_setupStepControl: function Reader_setupStepControl(id, name, callback) {
let stepControl = document.getElementById(id);
let doc = this._doc;
let stepControl = doc.getElementById(id);
let title = document.createElement("h1");
let title = this._doc.createElement("h1");
title.innerHTML = name;
stepControl.appendChild(title);
let plusButton = document.createElement("div");
let plusButton = doc.createElement("div");
plusButton.className = "button plus-button";
stepControl.appendChild(plusButton);
let minusButton = document.createElement("div");
let minusButton = doc.createElement("div");
minusButton.className = "button minus-button";
stepControl.appendChild(minusButton);
plusButton.addEventListener("click", function(aEvent) {
if (!aEvent.isTrusted)
return;
aEvent.stopPropagation();
callback(this._STEP_INCREMENT);
}.bind(this), true);
minusButton.addEventListener("click", function(aEvent) {
if (!aEvent.isTrusted)
return;
aEvent.stopPropagation();
callback(this._STEP_DECREMENT);
}.bind(this), true);
},
_setupSegmentedButton: function Reader_setupSegmentedButton(id, options, initialValue, callback) {
let segmentedButton = document.getElementById(id);
let doc = this._doc;
let segmentedButton = doc.getElementById(id);
for (let i = 0; i < options.length; i++) {
let option = options[i];
let item = document.createElement("li");
let link = document.createElement("a");
let item = doc.createElement("li");
let link = doc.createElement("a");
link.innerHTML = option.name;
item.appendChild(link);
segmentedButton.appendChild(item);
link.addEventListener("click", function(aEvent) {
if (!aEvent.isTrusted)
return;
aEvent.stopPropagation();
let items = segmentedButton.children;
@ -507,16 +532,22 @@ let AboutReader = {
},
_setupButton: function Reader_setupButton(id, callback) {
let button = document.getElementById(id);
let button = this._doc.getElementById(id);
button.addEventListener("click", function(aEvent) {
if (!aEvent.isTrusted)
return;
aEvent.stopPropagation();
callback();
}, true);
},
_setupAllDropdowns: function Reader_setupAllDropdowns() {
let dropdowns = document.getElementsByClassName("dropdown");
let doc = this._doc;
let win = this._win;
let dropdowns = doc.getElementsByClassName("dropdown");
for (let i = dropdowns.length - 1; i >= 0; i--) {
let dropdown = dropdowns[i];
@ -527,7 +558,7 @@ let AboutReader = {
if (!dropdownToggle || !dropdownPopup)
continue;
let dropdownArrow = document.createElement("div");
let dropdownArrow = doc.createElement("div");
dropdownArrow.className = "dropdown-arrow";
dropdownPopup.appendChild(dropdownArrow);
@ -538,29 +569,35 @@ let AboutReader = {
let toggleLeft = dropdownToggle.offsetLeft;
let popupShift = (toggleWidth - popupWidth) / 2;
let popupLeft = Math.max(0, Math.min(window.innerWidth - popupWidth, toggleLeft + popupShift));
let popupLeft = Math.max(0, Math.min(win.innerWidth - popupWidth, toggleLeft + popupShift));
dropdownPopup.style.left = popupLeft + "px";
let arrowShift = (toggleWidth - arrowWidth) / 2;
let arrowLeft = toggleLeft - popupLeft + arrowShift;
dropdownArrow.style.left = arrowLeft + "px";
}
};
win.addEventListener("resize", function(aEvent) {
if (!aEvent.isTrusted)
return;
window.addEventListener("resize", function(aEvent) {
updatePopupPosition();
}, true);
dropdownToggle.addEventListener("click", function(aEvent) {
if (!aEvent.isTrusted)
return;
aEvent.stopPropagation();
let dropdownClasses = dropdown.classList;
if (dropdownClasses.contains("open")) {
history.back();
win.history.back();
} else {
updatePopupPosition();
if (!this._closeAllDropdowns())
history.pushState({ dropdown: 1 }, document.title);
this._pushDropdownState();
dropdownClasses.add("open");
}
@ -568,12 +605,31 @@ let AboutReader = {
}
},
_pushDropdownState: function Reader_pushDropdownState() {
// FIXME: We're getting a NS_ERROR_UNEXPECTED error when we try
// to do win.history.pushState() here (see bug 682296). This is
// a workaround that allows us to push history state on the target
// content document.
let doc = this._doc;
let body = doc.body;
if (this._pushStateScript)
body.removeChild(this._pushStateScript);
this._pushStateScript = doc.createElement('script');
this._pushStateScript.type = "text/javascript";
this._pushStateScript.innerHTML = 'history.pushState({ dropdown: 1 }, document.title);';
body.appendChild(this._pushStateScript);
},
_closeAllDropdowns : function Reader_closeAllDropdowns() {
let dropdowns = document.querySelectorAll(".dropdown.open");
let dropdowns = this._doc.querySelectorAll(".dropdown.open");
for (let i = dropdowns.length - 1; i >= 0; i--) {
dropdowns[i].classList.remove("open");
}
return (dropdowns.length > 0)
}
}
};

View File

@ -36,6 +36,7 @@ XPCOMUtils.defineLazyGetter(this, "NetUtil", function() {
[
["HelperApps", "chrome://browser/content/HelperApps.js"],
["SelectHelper", "chrome://browser/content/SelectHelper.js"],
["AboutReader", "chrome://browser/content/aboutReader.js"],
["WebAppRT", "chrome://browser/content/WebAppRT.js"],
].forEach(function (aScript) {
let [name, script] = aScript;
@ -2683,6 +2684,14 @@ Tab.prototype = {
this.browser.removeEventListener("pagehide", listener, true);
}.bind(this), true);
}
if (/^about:reader/.test(target.documentURI)) {
let aboutReader = new AboutReader(this.browser.contentDocument, this.browser.contentWindow);
this.browser.addEventListener("pagehide", function listener() {
aboutReader.uninit();
this.browser.removeEventListener("pagehide", listener, true);
}.bind(this), true);
}
break;
}

View File

@ -61,7 +61,8 @@ let modules = {
},
reader: {
uri: "chrome://browser/content/aboutReader.html",
privileged: true
privileged: false,
hide: true
},
feedback: {
uri: "chrome://browser/content/aboutFeedback.xhtml",

View File

@ -5,20 +5,6 @@
%filter substitution
%include defines.inc
@font-face {
font-family: 'OpenSansRegular';
src: url('chrome://browser/skin/fonts/opensans-regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'OpenSansLight';
src: url('chrome://browser/skin/fonts/opensans-light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
html {
-moz-text-size-adjust: none;
}

View File

@ -8,6 +8,22 @@
@namespace url("http://www.w3.org/1999/xhtml");
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@-moz-document url-prefix(about:reader) {
@font-face {
font-family: 'OpenSansRegular';
src: url('chrome://browser/skin/fonts/opensans-regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'OpenSansLight';
src: url('chrome://browser/skin/fonts/opensans-light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
}
::-moz-selection {
background-color: @color_background_highlight@;
color: @color_text_highlight@;

View File

@ -12,7 +12,7 @@ chrome.jar:
skin/aboutApps.css (aboutApps.css)
* skin/aboutDownloads.css (aboutDownloads.css)
skin/aboutFeedback.css (aboutFeedback.css)
* skin/aboutReader.css (aboutReader.css)
skin/aboutReader.css (aboutReader.css)
* skin/browser.css (browser.css)
* skin/content.css (content.css)
skin/config.css (config.css)