mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-17 07:15:46 +00:00
Bug 766948 - Implement new Reader style (r=mfinkle)
This commit is contained in:
Lucas Rocha
parent
4d855b443c
commit
5857b42262
@ -11,6 +11,9 @@
|
||||
|
||||
<body onload="AboutReader.init();" onunload="AboutReader.uninit();">
|
||||
<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">
|
||||
|
||||
@ -26,6 +26,11 @@ let AboutReader = {
|
||||
_STEP_INCREMENT: 0,
|
||||
_STEP_DECREMENT: 1,
|
||||
|
||||
_BLOCK_IMAGES_SELECTOR: ".content p > img:only-child, " +
|
||||
".content p > a:only-child > img:only-child, " +
|
||||
".content .wp-caption img, " +
|
||||
".content figure img",
|
||||
|
||||
init: function Reader_init() {
|
||||
dump("Init()");
|
||||
|
||||
@ -34,7 +39,10 @@ let AboutReader = {
|
||||
this._article = null;
|
||||
|
||||
dump("Feching toolbar, header and content notes from about:reader");
|
||||
this._titleElement = document.getElementById("reader-header");
|
||||
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");
|
||||
|
||||
@ -47,6 +55,7 @@ let AboutReader = {
|
||||
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));
|
||||
@ -57,9 +66,7 @@ let AboutReader = {
|
||||
{ name: gStrings.GetStringFromName("aboutReader.colorSchemeLight"),
|
||||
value: "light"},
|
||||
{ name: gStrings.GetStringFromName("aboutReader.colorSchemeDark"),
|
||||
value: "dark"},
|
||||
{ name: gStrings.GetStringFromName("aboutReader.colorSchemeSepia"),
|
||||
value: "sepia"}
|
||||
value: "dark"}
|
||||
];
|
||||
|
||||
let colorScheme = Services.prefs.getCharPref("reader.color_scheme");
|
||||
@ -124,6 +131,9 @@ let AboutReader = {
|
||||
if (!aEvent.state)
|
||||
this._closeAllDropdowns();
|
||||
break;
|
||||
case "resize":
|
||||
this._updateImageMargins();
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
@ -137,6 +147,7 @@ let AboutReader = {
|
||||
body.removeEventListener("click", this, false);
|
||||
window.removeEventListener("scroll", this, false);
|
||||
window.removeEventListener("popstate", this, false);
|
||||
window.removeEventListener("resize", this, false);
|
||||
|
||||
this._hideContent();
|
||||
},
|
||||
@ -224,6 +235,8 @@ let AboutReader = {
|
||||
document.body.style.marginLeft = this._marginSize + "%";
|
||||
document.body.style.marginRight = this._marginSize + "%";
|
||||
|
||||
this._updateImageMargins();
|
||||
|
||||
Services.prefs.setIntPref("reader.margin_size", this._marginSize);
|
||||
},
|
||||
|
||||
@ -337,8 +350,52 @@ let AboutReader = {
|
||||
document.getElementsByTagName('head')[0].appendChild(link);
|
||||
},
|
||||
|
||||
_updateImageMargins: function Reader_updateImageMargins() {
|
||||
let windowWidth = window.innerWidth;
|
||||
let contentWidth = this._contentElement.offsetWidth;
|
||||
let maxWidthStyle = windowWidth + "px !important";
|
||||
|
||||
let setImageMargins = function(img) {
|
||||
if (!img._originalWidth)
|
||||
img._originalWidth = img.offsetWidth;
|
||||
|
||||
let imgWidth = img._originalWidth;
|
||||
|
||||
// If the image is taking more than half of the screen, just make
|
||||
// it fill edge-to-edge.
|
||||
if (imgWidth < contentWidth && imgWidth > windowWidth * 0.55)
|
||||
imgWidth = windowWidth;
|
||||
|
||||
let sideMargin = Math.max((contentWidth - windowWidth) / 2,
|
||||
(contentWidth - imgWidth) / 2);
|
||||
|
||||
let imageStyle = sideMargin + "px !important";
|
||||
let widthStyle = imgWidth + "px !important";
|
||||
|
||||
let cssText = "max-width: " + maxWidthStyle + ";" +
|
||||
"width: " + widthStyle + ";" +
|
||||
"margin-left: " + imageStyle + ";" +
|
||||
"margin-right: " + imageStyle + ";";
|
||||
|
||||
img.style.cssText = cssText;
|
||||
}
|
||||
|
||||
let imgs = document.querySelectorAll(this._BLOCK_IMAGES_SELECTOR);
|
||||
for (let i = imgs.length; --i >= 0;) {
|
||||
let img = imgs[i];
|
||||
|
||||
if (img.width > 0) {
|
||||
setImageMargins(img);
|
||||
} else {
|
||||
img.onload = function() {
|
||||
setImageMargins(img);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_showError: function Reader_showError(error) {
|
||||
this._titleElement.style.display = "none";
|
||||
this._headerElement.style.display = "none";
|
||||
this._contentElement.innerHTML = error;
|
||||
this._contentElement.style.display = "block";
|
||||
|
||||
@ -348,13 +405,19 @@ let AboutReader = {
|
||||
_showContent: function Reader_showContent(article) {
|
||||
this._article = article;
|
||||
|
||||
let domain = Services.io.newURI(article.url, null, null).host;
|
||||
this._domainElement.innerHTML = domain;
|
||||
|
||||
this._titleElement.innerHTML = article.title;
|
||||
this._titleElement.style.display = "block";
|
||||
document.title = article.title;
|
||||
|
||||
this._headerElement.style.display = "block";
|
||||
|
||||
this._contentElement.innerHTML = article.content;
|
||||
this._updateImageMargins();
|
||||
|
||||
this._contentElement.style.display = "block";
|
||||
|
||||
document.title = article.title;
|
||||
|
||||
this._toolbarEnabled = true;
|
||||
this._setToolbarVisibility(true);
|
||||
@ -363,12 +426,12 @@ let AboutReader = {
|
||||
},
|
||||
|
||||
_hideContent: function Reader_hideContent() {
|
||||
this._titleElement.style.display = "none";
|
||||
this._headerElement.style.display = "none";
|
||||
this._contentElement.style.display = "none";
|
||||
},
|
||||
|
||||
_showProgress: function Reader_showProgress() {
|
||||
this._titleElement.style.display = "none";
|
||||
this._headerElement.style.display = "none";
|
||||
this._contentElement.innerHTML = gStrings.GetStringFromName("aboutReader.loading");
|
||||
this._contentElement.style.display = "block";
|
||||
},
|
||||
|
||||
@ -12,6 +12,13 @@
|
||||
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;
|
||||
}
|
||||
@ -20,152 +27,306 @@ body {
|
||||
font-family: "OpenSansRegular","Droid Sans",sans-serif;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
background-repeat: repeat;
|
||||
}
|
||||
|
||||
.light {
|
||||
background-image: url('chrome://browser/skin/images/reader-light-bg.png');
|
||||
background-color: #ffffff;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.dark {
|
||||
background-image: url('chrome://browser/skin/images/reader-dark-bg.png');
|
||||
background-color: #000000;
|
||||
color: #eeeeee;
|
||||
}
|
||||
|
||||
.sepia {
|
||||
background-image: url('chrome://browser/skin/images/reader-sepia-bg.png');
|
||||
color: #332e20;
|
||||
}
|
||||
|
||||
.header {
|
||||
font-family: "Droid Serif",serif;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 2px solid;
|
||||
-moz-border-bottom-colors: #ff9400 #ee6700;
|
||||
text-align: left;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.light > .header {
|
||||
-moz-border-bottom-colors: #ff9400 #ee6700;
|
||||
.header > .domain {
|
||||
margin-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid;
|
||||
}
|
||||
|
||||
.dark > .header {
|
||||
-moz-border-bottom-colors: #ff9400 #ee6700;
|
||||
.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;
|
||||
}
|
||||
|
||||
.sepia > .header {
|
||||
-moz-border-bottom-colors: #c1531b #75391c;
|
||||
.header > .credits {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.font-size1 > .header {
|
||||
.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 {
|
||||
.font-size2 > .header > h1 {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.font-size3 > .header {
|
||||
.font-size3 > .header > h1 {
|
||||
font-size: 27px;
|
||||
}
|
||||
|
||||
.font-size4 > .header {
|
||||
.font-size4 > .header > h1 {
|
||||
font-size: 29px;
|
||||
}
|
||||
|
||||
.font-size5 > .header {
|
||||
.font-size5 > .header > h1 {
|
||||
font-size: 31px;
|
||||
}
|
||||
|
||||
.font-size6 > .header {
|
||||
.font-size6 > .header > h1 {
|
||||
font-size: 33px;
|
||||
}
|
||||
|
||||
.font-size7 > .header {
|
||||
.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 {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.content a {
|
||||
text-decoration: underline;
|
||||
text-decoration: underline !important;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.light > .content a,
|
||||
.light > .content a:visited,
|
||||
.light > .content a:hover,
|
||||
.light > .content a:active {
|
||||
color: #ee6700;
|
||||
color: #ee6700 !important;
|
||||
}
|
||||
|
||||
.dark > .content a,
|
||||
.dark > .content a:visited,
|
||||
.dark > .content a:hover,
|
||||
.dark > .content a:active {
|
||||
color: #ff9400;
|
||||
}
|
||||
|
||||
.sepia > .content a,
|
||||
.sepia > .content a:visited,
|
||||
.sepia > .content a:hover,
|
||||
.sepia > .content a:active {
|
||||
color: #c1531b;
|
||||
color: #ff9400 !important;
|
||||
}
|
||||
|
||||
.content * {
|
||||
max-width: 100% !important;
|
||||
overflow: scroll !important;
|
||||
}
|
||||
|
||||
.content img {
|
||||
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;
|
||||
padding-left: 23px !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;
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
.font-size2 > .content {
|
||||
font-size: 12px;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
.font-size3 > .content {
|
||||
font-size: 14px;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.font-size4 > .content {
|
||||
font-size: 16px;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
.font-size5 > .content {
|
||||
font-size: 18px;
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
.font-size6 > .content {
|
||||
font-size: 20px;
|
||||
font-size: 20px !important;
|
||||
}
|
||||
|
||||
.font-size7 > .content {
|
||||
font-size: 22px;
|
||||
font-size: 22px !important;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
@ -223,7 +384,6 @@ body {
|
||||
.dropdown-toggle {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.dropdown-popup {
|
||||
@ -295,7 +455,7 @@ body {
|
||||
.segmented-button > li > a:hover
|
||||
.segmented-button > li > a:visited {
|
||||
display: block;
|
||||
padding: 10px 16px;
|
||||
padding: 10px 34px;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
border-radius: 4px;
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
OpenSans Regular (opensans-regular.tff) is released under
|
||||
OpenSans Regular (opensans-regular.tff) and
|
||||
OpenSans Light (opensans-light.tff) are released under
|
||||
the Apache License 2.0:
|
||||
|
||||
http://www.fontsquirrel.com/license/open-sans
|
||||
|
||||
BIN
mobile/android/themes/core/fonts/opensans-light.ttf
Normal file
BIN
mobile/android/themes/core/fonts/opensans-light.ttf
Normal file
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 KiB |
@ -22,6 +22,7 @@ chrome.jar:
|
||||
% override chrome://global/skin/netError.css chrome://browser/skin/netError.css
|
||||
|
||||
skin/fonts/opensans-regular.ttf (fonts/opensans-regular.ttf)
|
||||
skin/fonts/opensans-light.ttf (fonts/opensans-light.ttf)
|
||||
skin/images/addons-32.png (images/addons-32.png)
|
||||
skin/images/arrowleft-16.png (images/arrowleft-16.png)
|
||||
skin/images/arrowright-16.png (images/arrowright-16.png)
|
||||
@ -53,9 +54,6 @@ chrome.jar:
|
||||
skin/images/row-bg-light.png (images/row-bg-light.png)
|
||||
skin/images/row-bg-normal.png (images/row-bg-normal.png)
|
||||
skin/images/addons-amo-hdpi.png (images/addons-amo-hdpi.png)
|
||||
skin/images/reader-light-bg.png (images/reader-light-bg.png)
|
||||
skin/images/reader-dark-bg.png (images/reader-dark-bg.png)
|
||||
skin/images/reader-sepia-bg.png (images/reader-sepia-bg.png)
|
||||
skin/images/reader-plus-icon-mdpi.png (images/reader-plus-icon-mdpi.png)
|
||||
skin/images/reader-plus-icon-hdpi.png (images/reader-plus-icon-hdpi.png)
|
||||
skin/images/reader-plus-icon-xhdpi.png (images/reader-plus-icon-xhdpi.png)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user