mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-17 07:15:46 +00:00
Bug 778582 (r=mfinkle)
This commit is contained in:
Lucas Rocha
parent
28c6ba9813
commit
a6763e2ff3
@ -10,7 +10,15 @@
|
||||
</head>
|
||||
|
||||
<body onload="AboutReader.init();" onunload="AboutReader.uninit();">
|
||||
<iframe id="frame" src="about:readercontent"></iframe>
|
||||
<div id="reader-header" class="header">
|
||||
<div id="reader-domain" class="domain"></div>
|
||||
<h1 id="reader-title"></h1>
|
||||
<div id="reader-credits" class="credits"></div>
|
||||
</div>
|
||||
|
||||
<div id="reader-content" class="content">
|
||||
</div>
|
||||
|
||||
<ul id="reader-toolbar" class="toolbar toolbar-hidden">
|
||||
<li><a id="share-button" class="button share-button" href="#"></a></li>
|
||||
<ul class="dropdown">
|
||||
@ -27,7 +35,8 @@
|
||||
<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>
|
||||
<script type="application/javascript;version=1.8" src="chrome://browser/content/aboutReader.js">
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@ -39,19 +39,20 @@ let AboutReader = {
|
||||
this._article = null;
|
||||
|
||||
dump("Feching toolbar, header and content notes from about:reader");
|
||||
this._frame = document.getElementById("frame");
|
||||
this._headerElement = this._frame.contentDocument.getElementById("reader-header");
|
||||
this._domainElement = this._frame.contentDocument.getElementById("reader-domain");
|
||||
this._creditsElement = this._frame.contentDocument.getElementById("reader-credits");
|
||||
this._contentElement = this._frame.contentDocument.getElementById("reader-content");
|
||||
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._frame.contentDocument.addEventListener("DOMSubtreeModified", this, false);
|
||||
this._frame.contentDocument.addEventListener("MozScrolledAreaChanged", this, false);
|
||||
this._frame.contentDocument.addEventListener("touchstart", this, false);
|
||||
this._frame.contentDocument.addEventListener("click", this, 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);
|
||||
@ -131,25 +132,17 @@ let AboutReader = {
|
||||
case "resize":
|
||||
this._updateImageMargins();
|
||||
break;
|
||||
case "DOMSubtreeModified":
|
||||
case "MozScrolledAreaChanged":
|
||||
let newHeight = this._frame.contentDocument.body.offsetHeight + "px";
|
||||
if (this._frame.style.height != newHeight) {
|
||||
this._frame.style.height = newHeight;
|
||||
}
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
uninit: function Reader_uninit() {
|
||||
dump("Uninit()");
|
||||
|
||||
Services.obs.removeObserver(this, "Reader:FaviconReturn");
|
||||
Services.obs.removeObserver(this, "Reader:FaviconReturn", false);
|
||||
|
||||
this._frame.contentDocument.removeEventListener("touchstart", this, false);
|
||||
this._frame.contentDocument.removeEventListener("click", this, false);
|
||||
this._frame.contentDocument.removeEventListener("DOMSubtreeModified", this, false);
|
||||
this._frame.contentDocument.removeEventListener("MozScrolledAreaChanged", this, false);
|
||||
let body = document.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);
|
||||
@ -237,9 +230,8 @@ let AboutReader = {
|
||||
return;
|
||||
|
||||
this._marginSize = Math.max(5, Math.min(25, newMarginSize));
|
||||
let bodyStyle = this._frame.contentDocument.body.style;
|
||||
bodyStyle.marginLeft = this._marginSize + "%";
|
||||
bodyStyle.marginRight = this._marginSize + "%";
|
||||
document.body.style.marginLeft = this._marginSize + "%";
|
||||
document.body.style.marginRight = this._marginSize + "%";
|
||||
|
||||
this._updateImageMargins();
|
||||
|
||||
@ -257,7 +249,7 @@ let AboutReader = {
|
||||
if (this._fontSize === newFontSize)
|
||||
return;
|
||||
|
||||
let bodyClasses = this._frame.contentDocument.body.classList;
|
||||
let bodyClasses = document.body.classList;
|
||||
|
||||
if (this._fontSize > 0)
|
||||
bodyClasses.remove("font-size" + this._fontSize);
|
||||
@ -273,16 +265,12 @@ let AboutReader = {
|
||||
return;
|
||||
|
||||
let bodyClasses = document.body.classList;
|
||||
let frameClasses = this._frame.contentDocument.body.classList;
|
||||
|
||||
if (this._colorScheme) {
|
||||
if (this._colorScheme)
|
||||
bodyClasses.remove(this._colorScheme);
|
||||
frameClasses.remove(this._colorScheme);
|
||||
}
|
||||
|
||||
this._colorScheme = newColorScheme;
|
||||
bodyClasses.add(this._colorScheme);
|
||||
frameClasses.add(this._colorScheme);
|
||||
|
||||
Services.prefs.setCharPref("reader.color_scheme", this._colorScheme);
|
||||
},
|
||||
@ -420,7 +408,7 @@ let AboutReader = {
|
||||
|
||||
this._creditsElement.innerHTML = article.byline;
|
||||
|
||||
this._frame.contentDocument.getElementById("reader-title").innerHTML = article.title;
|
||||
this._titleElement.innerHTML = article.title;
|
||||
document.title = article.title;
|
||||
|
||||
this._headerElement.style.display = "block";
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
|
||||
|
||||
chrome.jar:
|
||||
% content browser %content/ contentaccessible=yes
|
||||
% content browser %content/
|
||||
|
||||
* content/about.xhtml (content/about.xhtml)
|
||||
content/config.xhtml (content/config.xhtml)
|
||||
@ -16,7 +16,6 @@ chrome.jar:
|
||||
content/aboutDownloads.js (content/aboutDownloads.js)
|
||||
content/aboutFeedback.xhtml (content/aboutFeedback.xhtml)
|
||||
content/aboutReader.html (content/aboutReader.html)
|
||||
content/aboutReaderContent.html (content/aboutReaderContent.html)
|
||||
content/aboutReader.js (content/aboutReader.js)
|
||||
content/Readability.js (content/Readability.js)
|
||||
content/JSDOMParser.js (content/JSDOMParser.js)
|
||||
|
||||
@ -61,13 +61,7 @@ let modules = {
|
||||
},
|
||||
reader: {
|
||||
uri: "chrome://browser/content/aboutReader.html",
|
||||
privileged: true,
|
||||
hide: true
|
||||
},
|
||||
readercontent: {
|
||||
uri: "chrome://browser/content/aboutReaderContent.html",
|
||||
privileged: false,
|
||||
hide: true
|
||||
privileged: true
|
||||
},
|
||||
feedback: {
|
||||
uri: "chrome://browser/content/aboutFeedback.xhtml",
|
||||
|
||||
@ -10,7 +10,6 @@ contract @mozilla.org/network/protocol/about;1?what=home {322ba47e-7047-4f71-aeb
|
||||
contract @mozilla.org/network/protocol/about;1?what=apps {322ba47e-7047-4f71-aebf-cb7d69325cd9}
|
||||
contract @mozilla.org/network/protocol/about;1?what=downloads {322ba47e-7047-4f71-aebf-cb7d69325cd9}
|
||||
contract @mozilla.org/network/protocol/about;1?what=reader {322ba47e-7047-4f71-aebf-cb7d69325cd9}
|
||||
contract @mozilla.org/network/protocol/about;1?what=readercontent {322ba47e-7047-4f71-aebf-cb7d69325cd9}
|
||||
contract @mozilla.org/network/protocol/about;1?what=feedback {322ba47e-7047-4f71-aebf-cb7d69325cd9}
|
||||
#ifdef MOZ_SAFE_BROWSING
|
||||
contract @mozilla.org/network/protocol/about;1?what=blocked {322ba47e-7047-4f71-aebf-cb7d69325cd9}
|
||||
|
||||
@ -2,26 +2,336 @@
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
|
||||
* You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
body {
|
||||
font-family: "OpenSansRegular","Droid Sans",sans-serif;
|
||||
%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;
|
||||
}
|
||||
|
||||
#frame {
|
||||
border: 0;
|
||||
width: 100%;
|
||||
@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;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "OpenSansRegular","Droid Sans",sans-serif;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.light {
|
||||
background-color: #ffffff;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.dark {
|
||||
background-color: #000000;
|
||||
color: #eeeeee;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: left;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header > .domain {
|
||||
margin-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid;
|
||||
}
|
||||
|
||||
.header > h1 {
|
||||
font-family: "OpenSansLight","Droid Sans",sans-serif;
|
||||
font-weight: normal;
|
||||
line-height: 1.1em;
|
||||
width: 100%;
|
||||
margin: 0px;
|
||||
margin-top: 32px;
|
||||
margin-bottom: 16px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.header > .credits {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.light > .header > .domain {
|
||||
color: #ee7600;
|
||||
border-bottom-color: #d0d0d0;
|
||||
}
|
||||
|
||||
.light > .header > h1 {
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.light > .header > .credits {
|
||||
color: #898989;
|
||||
}
|
||||
|
||||
.dark > .header > .domain {
|
||||
color: #ff9400;
|
||||
border-bottom-color: #777777;
|
||||
}
|
||||
|
||||
.dark > .header > h1 {
|
||||
color: #eeeeee;
|
||||
}
|
||||
|
||||
.dark > .header > .credits {
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
.font-size1 > .header > h1 {
|
||||
font-size: 23px;
|
||||
}
|
||||
|
||||
.font-size2 > .header > h1 {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.font-size3 > .header > h1 {
|
||||
font-size: 27px;
|
||||
}
|
||||
|
||||
.font-size4 > .header > h1 {
|
||||
font-size: 29px;
|
||||
}
|
||||
|
||||
.font-size5 > .header > h1 {
|
||||
font-size: 31px;
|
||||
}
|
||||
|
||||
.font-size6 > .header > h1 {
|
||||
font-size: 33px;
|
||||
}
|
||||
|
||||
.font-size7 > .header > h1 {
|
||||
font-size: 35px;
|
||||
}
|
||||
|
||||
/* This covers caption, domain, and credits
|
||||
texts in the reader UI */
|
||||
.font-size1 > .content .wp-caption-text,
|
||||
.font-size1 > .content figcaption,
|
||||
.font-size1 > .header > .domain,
|
||||
.font-size1 > .header > .credits {
|
||||
font-size: 6px;
|
||||
}
|
||||
|
||||
.font-size2 > .content .wp-caption-text,
|
||||
.font-size2 > .content figcaption,
|
||||
.font-size2 > .header > .domain,
|
||||
.font-size2 > .header > .credits {
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.font-size3 > .content .wp-caption-text,
|
||||
.font-size3 > .content figcaption,
|
||||
.font-size3 > .header > .domain,
|
||||
.font-size3 > .header > .credits {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.font-size4 > .content .wp-caption-text,
|
||||
.font-size4 > .content figcaption,
|
||||
.font-size4 > .header > .domain,
|
||||
.font-size4 > .header > .credits {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.font-size5 > .content .wp-caption-text,
|
||||
.font-size5 > .content figcaption,
|
||||
.font-size5 > .header > .domain,
|
||||
.font-size5 > .header > .credits {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.font-size6 > .content .wp-caption-text,
|
||||
.font-size6 > .content figcaption,
|
||||
.font-size6 > .header > .domain,
|
||||
.font-size6 > .header > .credits {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.font-size7 > .content .wp-caption-text,
|
||||
.font-size7 > .content figcaption,
|
||||
.font-size7 > .header > .domain,
|
||||
.font-size7 > .header > .credits {
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.content a {
|
||||
text-decoration: underline !important;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.light > .content a,
|
||||
.light > .content a:visited,
|
||||
.light > .content a:hover,
|
||||
.light > .content a:active {
|
||||
color: #ee6700 !important;
|
||||
}
|
||||
|
||||
.dark > .content a,
|
||||
.dark > .content a:visited,
|
||||
.dark > .content a:hover,
|
||||
.dark > .content a:active {
|
||||
color: #ff9400 !important;
|
||||
}
|
||||
|
||||
.content * {
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.content p {
|
||||
line-height: 1.4em !important;
|
||||
margin: 0px !important;
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
|
||||
/* Covers all images showing edge-to-edge using a
|
||||
an optional caption text */
|
||||
.content .wp-caption,
|
||||
.content figure {
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
margin: 0px !important;
|
||||
margin-bottom: 32px !important;
|
||||
}
|
||||
|
||||
/* Images marked to be shown edge-to-edge with an
|
||||
optional captio ntext */
|
||||
.content p > img:only-child,
|
||||
.content p > a:only-child > img:only-child,
|
||||
.content .wp-caption img,
|
||||
.content figure img {
|
||||
max-width: none !important;
|
||||
height: auto !important;
|
||||
display: block !important;
|
||||
margin-top: 0px !important;
|
||||
margin-bottom: 32px !important;
|
||||
}
|
||||
|
||||
/* If image is place inside one of these blocks
|
||||
there's no need to add margin at the bottom */
|
||||
.content .wp-caption img,
|
||||
.content figure img {
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
|
||||
/* Image caption text */
|
||||
.content .caption,
|
||||
.content .wp-caption-text,
|
||||
.content figcaption {
|
||||
margin: 0px !important;
|
||||
padding-top: 4px !important;
|
||||
}
|
||||
|
||||
.light > .content .caption,
|
||||
.light > .content .wp-caption-text,
|
||||
.light > .content figcaption {
|
||||
color: #898989;
|
||||
}
|
||||
|
||||
.dark > .content .caption,
|
||||
.dark > .content .wp-caption-text,
|
||||
.dark > .content figcaption {
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
/* Ensure all pre-formatted code inside the reader content
|
||||
are properly wrapped inside content width */
|
||||
.content code,
|
||||
.content pre {
|
||||
white-space: pre-wrap !important;
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
|
||||
.content blockquote {
|
||||
margin: 0px !important;
|
||||
margin-bottom: 20px !important;
|
||||
padding: 0px !important;
|
||||
padding-left: 16px !important;
|
||||
border: 0px !important;
|
||||
border-left: 2px solid !important;
|
||||
}
|
||||
|
||||
.light > .content blockquote {
|
||||
color: #898989 !important;
|
||||
border-left-color: #d0d0d0 !important;
|
||||
}
|
||||
|
||||
.dark > .content blockquote {
|
||||
color: #aaaaaa !important;
|
||||
border-left-color: #777777 !important;
|
||||
}
|
||||
|
||||
.content ul,
|
||||
.content ol {
|
||||
margin: 0px !important;
|
||||
margin-bottom: 20px !important;
|
||||
padding: 0px !important;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.content ul {
|
||||
padding-left: 30px !important;
|
||||
list-style: disk !important;
|
||||
}
|
||||
|
||||
.content ol {
|
||||
padding-left: 35px !important;
|
||||
list-style: decimal !important;
|
||||
}
|
||||
|
||||
.font-size1 > .content {
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
.font-size2 > .content {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
.font-size3 > .content {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.font-size4 > .content {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
.font-size5 > .content {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
.font-size6 > .content {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
|
||||
.font-size7 > .content {
|
||||
font-size: 22px !important;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
font-family: "Droid Sans",helvetica,arial,clean,sans-serif;
|
||||
-moz-transition-property: visibility, opacity;
|
||||
-moz-transition-property: visibility opacity;
|
||||
-moz-transition-duration: 0.7s;
|
||||
visibility: visible;
|
||||
opacity: 1.0;
|
||||
@ -36,7 +346,7 @@ body {
|
||||
}
|
||||
|
||||
.toolbar-hidden {
|
||||
-moz-transition-property: visibility, opacity;
|
||||
-moz-transition-property: visibility opacity;
|
||||
-moz-transition-duration: 0.7s;
|
||||
visibility: hidden;
|
||||
opacity: 0.0;
|
||||
|
||||
@ -8,22 +8,6 @@
|
||||
@namespace url("http://www.w3.org/1999/xhtml");
|
||||
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
|
||||
|
||||
@-moz-document url(about:readercontent) {
|
||||
@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@;
|
||||
|
||||
@ -12,8 +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/aboutReaderContent.css (aboutReaderContent.css)
|
||||
* skin/aboutReader.css (aboutReader.css)
|
||||
* skin/browser.css (browser.css)
|
||||
* skin/content.css (content.css)
|
||||
skin/config.css (config.css)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user