Bug 1120735 - Implement desktop reader mode controls. r=jaws,bnicholson

This commit is contained in:
Margaret Leibovic 2015-01-21 17:21:11 -08:00
parent d4f5d4d66a
commit e6f2411ed6
16 changed files with 528 additions and 114 deletions

View File

@ -854,3 +854,15 @@ pref("media.gmp-gmpopenh264.provider.enabled", true);
// auto = color automatically adjusts according to ambient light level
// (auto only works on platforms where the 'devicelight' event is enabled)
pref("reader.color_scheme", "auto");
// Color scheme values available in reader mode UI.
pref("reader.color_scheme.values", "[\"light\",\"dark\",\"auto\"]");
// The font type in reader (charis-sil, clear-sans)
pref("reader.font_type", "clear-sans");
// Font type values available in reader mode UI.
pref("reader.font_type.values", "[\"charis-sil\",\"clear-sans\"]");
// Whether to use a vertical or horizontal toolbar.
pref("reader.toolbar.vertical", false);

View File

@ -25,11 +25,11 @@ body {
color: #eeeeee;
}
.sans-serif {
.clear-sans {
font-family: sans-serif;
}
.serif {
.charis-sil {
font-family: serif;
}
@ -107,61 +107,61 @@ body {
color: #aaaaaa;
}
.font-size1 > .header > h1 {
.font-size1 > body > .header > h1 {
font-size: 27px;
}
.font-size2 > .header > h1 {
.font-size2 > body > .header > h1 {
font-size: 29px;
}
.font-size3 > .header > h1 {
.font-size3 > body > .header > h1 {
font-size: 31px;
}
.font-size4 > .header > h1 {
.font-size4 > body > .header > h1 {
font-size: 33px;
}
.font-size5 > .header > h1 {
.font-size5 > body > .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-size1 > body > .content .wp-caption-text,
.font-size1 > body > .content figcaption,
.font-size1 > body > .header > .domain,
.font-size1 > body > .header > .credits {
font-size: 10px;
}
.font-size2 > .content .wp-caption-text,
.font-size2 > .content figcaption,
.font-size2 > .header > .domain,
.font-size2 > .header > .credits {
.font-size2 > body > .content .wp-caption-text,
.font-size2 > body > .content figcaption,
.font-size2 > body > .header > .domain,
.font-size2 > body > .header > .credits {
font-size: 13px;
}
.font-size3 > .content .wp-caption-text,
.font-size3 > .content figcaption,
.font-size3 > .header > .domain,
.font-size3 > .header > .credits {
.font-size3 > body > .content .wp-caption-text,
.font-size3 > body > .content figcaption,
.font-size3 > body > .header > .domain,
.font-size3 > body > .header > .credits {
font-size: 15px;
}
.font-size4 > .content .wp-caption-text,
.font-size4 > .content figcaption,
.font-size4 > .header > .domain,
.font-size4 > .header > .credits {
.font-size4 > body > .content .wp-caption-text,
.font-size4 > body > .content figcaption,
.font-size4 > body > .header > .domain,
.font-size4 > body > .header > .credits {
font-size: 17px;
}
.font-size5 > .content .wp-caption-text,
.font-size5 > .content figcaption,
.font-size5 > .header > .domain,
.font-size5 > .header > .credits {
.font-size5 > body > .content .wp-caption-text,
.font-size5 > body > .content figcaption,
.font-size5 > body > .header > .domain,
.font-size5 > body > .header > .credits {
font-size: 19px;
}
@ -296,27 +296,27 @@ body {
}
.font-size1-sample,
.font-size1 > .content {
.font-size1 > body > .content {
font-size: 14px !important;
}
.font-size2-sample,
.font-size2 > .content {
.font-size2 > body > .content {
font-size: 16px !important;
}
.font-size3-sample,
.font-size3 > .content {
.font-size3 > body > .content {
font-size: 18px !important;
}
.font-size4-sample,
.font-size4 > .content {
.font-size4 > body > .content {
font-size: 20px !important;
}
.font-size5-sample,
.font-size5 > .content {
.font-size5 > body > .content {
font-size: 22px !important;
}
@ -488,6 +488,12 @@ body {
font-size: 12px;
}
/* desktop-only controls */
.close-button,
.list-button {
display: none;
}
.toggle-button.on {
background-image: url('chrome://browser/skin/images/reader-toggle-on-icon-mdpi.png');
}

View File

@ -4542,13 +4542,22 @@ pref("reader.font_size", 3);
// (auto only works on platforms where the 'devicelight' event is enabled)
pref("reader.color_scheme", "light");
// Color scheme values available in reader mode UI.
pref("reader.color_scheme.values", "[\"light\",\"dark\",\"sepia\"]");
// The font type in reader (sans-serif, serif)
pref("reader.font_type", "sans-serif");
// Font type values available in reader mode UI.
pref("reader.font_type.values", "[\"serif\",\"sans-serif\"]");
// Whether or not the user has interacted with the reader mode toolbar.
// This is used to show a first-launch tip in reader mode.
pref("reader.has_used_toolbar", false);
// Whether to use a vertical or horizontal toolbar.
pref("reader.toolbar.vertical", true);
#if defined(XP_LINUX) && defined(MOZ_GMP_SANDBOX)
// Whether to allow, on a Linux system that doesn't support the necessary sandboxing
// features, loading Gecko Media Plugins unsandboxed. However, EME CDMs will not be

View File

@ -56,34 +56,29 @@ let AboutReader = function(mm, win) {
doc.addEventListener("visibilitychange", this, false);
this._setupStyleDropdown();
this._setupButton("close-button", this._onReaderClose.bind(this));
this._setupButton("toggle-button", this._onReaderToggle.bind(this));
this._setupButton("share-button", this._onShare.bind(this));
let colorSchemeOptions = [
{ name: gStrings.GetStringFromName("aboutReader.colorSchemeDark"),
value: "dark"},
{ name: gStrings.GetStringFromName("aboutReader.colorSchemeLight"),
value: "light"},
{ name: gStrings.GetStringFromName("aboutReader.colorSchemeAuto"),
value: "auto"}
];
let colorSchemeValues = JSON.parse(Services.prefs.getCharPref("reader.color_scheme.values"));
let colorSchemeOptions = colorSchemeValues.map((value) => {
return { name: gStrings.GetStringFromName("aboutReader.colorScheme." + value),
value: value,
itemClass: value + "-button" };
});
let colorScheme = Services.prefs.getCharPref("reader.color_scheme");
this._setupSegmentedButton("color-scheme-buttons", colorSchemeOptions, colorScheme, this._setColorSchemePref.bind(this));
this._setColorSchemePref(colorScheme);
let fontTypeSample = gStrings.GetStringFromName("aboutReader.fontTypeSample");
let fontTypeOptions = [
{ name: fontTypeSample,
description: gStrings.GetStringFromName("aboutReader.fontTypeSerif"),
value: "serif",
linkClass: "serif" },
{ name: fontTypeSample,
description: gStrings.GetStringFromName("aboutReader.fontTypeSansSerif"),
value: "sans-serif",
linkClass: "sans-serif"
},
];
let fontTypeValues = JSON.parse(Services.prefs.getCharPref("reader.font_type.values"));
let fontTypeOptions = fontTypeValues.map((value) => {
return { name: fontTypeSample,
description: gStrings.GetStringFromName("aboutReader.fontType." + value),
value: value,
linkClass: value };
});
let fontType = Services.prefs.getCharPref("reader.font_type");
this._setupSegmentedButton("font-type-buttons", fontTypeOptions, fontType, this._setFontType.bind(this));
@ -112,13 +107,11 @@ let AboutReader = function(mm, win) {
this._setupSegmentedButton("font-size-buttons", fontSizeOptions, fontSize, this._setFontSize.bind(this));
this._setFontSize(fontSize);
let queryArgs = this._decodeQueryString(win.location.href);
// Track status of reader toolbar add/remove toggle button
this._isReadingListItem = -1;
this._updateToggleButton();
this._loadArticle(queryArgs.url);
this._loadArticle();
}
AboutReader.prototype = {
@ -163,6 +156,13 @@ AboutReader.prototype = {
return this._messageElementRef.get();
},
get _isToolbarVertical() {
if (this._toolbarVertical !== undefined) {
return this._toolbarVertical;
}
return this._toolbarVertical = Services.prefs.getBoolPref("reader.toolbar.vertical");
},
receiveMessage: function (message) {
switch (message.name) {
case "Reader:Added": {
@ -253,6 +253,10 @@ AboutReader.prototype = {
this._mm.sendAsyncMessage("Reader:ListStatusRequest", { url: this._article.url });
},
_onReaderClose: function Reader_onToggle() {
this._win.location.href = this._getOriginalUrl();
},
_onReaderToggle: function Reader_onToggle() {
if (!this._article)
return;
@ -278,13 +282,13 @@ AboutReader.prototype = {
},
_setFontSize: function Reader_setFontSize(newFontSize) {
let bodyClasses = this._doc.body.classList;
let htmlClasses = this._doc.documentElement.classList;
if (this._fontSize > 0)
bodyClasses.remove("font-size" + this._fontSize);
htmlClasses.remove("font-size" + this._fontSize);
this._fontSize = newFontSize;
bodyClasses.add("font-size" + this._fontSize);
htmlClasses.add("font-size" + this._fontSize);
Services.prefs.setIntPref("reader.font_size", this._fontSize);
},
@ -438,7 +442,8 @@ AboutReader.prototype = {
this._mm.sendAsyncMessage("Reader:SystemUIVisibility", { visible: visible });
},
_loadArticle: Task.async(function* (url) {
_loadArticle: Task.async(function* () {
let url = this._getOriginalUrl();
this._showProgressDelayed();
let article = yield this._getArticle(url);
@ -617,18 +622,17 @@ AboutReader.prototype = {
}.bind(this), 300);
},
_decodeQueryString: function Reader_decodeQueryString(url) {
let result = {};
let query = url.split("?")[1];
if (query) {
let pairs = query.split("&");
for (let i = 0; i < pairs.length; i++) {
let [name, value] = pairs[i].split("=");
result[name] = decodeURIComponent(value);
}
/**
* Returns the original article URL for this about:reader view.
*/
_getOriginalUrl: function() {
let url = this._win.location.href;
let searchParams = new URLSearchParams(url.split("?")[1]);
if (!searchParams.has("url")) {
Cu.reportError("Error finding original URL for about:reader URL: " + url);
return url;
}
return result;
return decodeURIComponent(searchParams.get("url"));
},
_setupSegmentedButton: function Reader_setupSegmentedButton(id, options, initialValue, callback) {
@ -643,6 +647,9 @@ AboutReader.prototype = {
link.textContent = option.name;
item.appendChild(link);
if (option.itemClass !== undefined)
item.classList.add(option.itemClass);
if (option.linkClass !== undefined)
link.classList.add(option.linkClass);
@ -655,7 +662,7 @@ AboutReader.prototype = {
link.style.MozUserSelect = 'none';
segmentedButton.appendChild(item);
link.addEventListener("click", function(aEvent) {
item.addEventListener("click", function(aEvent) {
if (!aEvent.isTrusted)
return;
@ -696,24 +703,30 @@ AboutReader.prototype = {
let win = this._win;
let dropdown = doc.getElementById("style-dropdown");
let dropdownToggle = dropdown.querySelector(".dropdown-toggle");
let dropdownPopup = dropdown.querySelector(".dropdown-popup");
let dropdownArrow = dropdown.querySelector(".dropdown-arrow");
let updatePopupPosition = function() {
let popupWidth = dropdownPopup.offsetWidth + 30;
let arrowWidth = dropdownArrow.offsetWidth;
let toggleWidth = dropdownToggle.offsetWidth;
let toggleLeft = dropdownToggle.offsetLeft;
let updatePopupPosition = () => {
if (this._isToolbarVertical) {
let toggleHeight = dropdownToggle.offsetHeight;
let toggleTop = dropdownToggle.offsetTop;
let popupTop = toggleTop - toggleHeight / 2;
dropdownPopup.style.top = popupTop + "px";
} else {
let popupWidth = dropdownPopup.offsetWidth + 30;
let arrowWidth = dropdownArrow.offsetWidth;
let toggleWidth = dropdownToggle.offsetWidth;
let toggleLeft = dropdownToggle.offsetLeft;
let popupShift = (toggleWidth - popupWidth) / 2;
let popupLeft = Math.max(0, Math.min(win.innerWidth - popupWidth, toggleLeft + popupShift));
dropdownPopup.style.left = popupLeft + "px";
let popupShift = (toggleWidth - popupWidth) / 2;
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";
let arrowShift = (toggleWidth - arrowWidth) / 2;
let arrowLeft = toggleLeft - popupLeft + arrowShift;
dropdownArrow.style.left = arrowLeft + "px";
}
};
win.addEventListener("resize", event => {
@ -730,14 +743,12 @@ AboutReader.prototype = {
event.stopPropagation();
if (!this._getToolbarVisibility())
return;
if (dropdown.classList.contains("open")) {
dropdown.classList.remove("open");
} else {
dropdown.classList.add("open");
updatePopupPosition();
}
}, true);
}
},
};

View File

@ -25,6 +25,7 @@
</div>
<ul id="reader-toolbar" class="toolbar toolbar-hidden">
<li><a id="close-button" class="button close-button" href="#"></a></li>
<li><a id="share-button" class="button share-button" href="#"></a></li>
<ul id="style-dropdown" class="dropdown">
<li><a class="dropdown-toggle button style-button" href="#"></a></li>
@ -38,6 +39,7 @@
</li>
</ul>
<li><a id="toggle-button" class="button toggle-button" href="#"></a></li>
<li><a id="list-button" class="button list-button" href="#"></a></li>
</ul>
</body>

View File

@ -5,15 +5,20 @@
aboutReader.loading=Loading...
aboutReader.loadError=Failed to load article from page
aboutReader.colorSchemeLight=Light
aboutReader.colorSchemeDark=Dark
aboutReader.colorSchemeSepia=Sepia
aboutReader.colorSchemeAuto=Auto
aboutReader.colorScheme.light=Light
aboutReader.colorScheme.dark=Dark
aboutReader.colorScheme.sepia=Sepia
aboutReader.colorScheme.auto=Auto
# LOCALIZATION NOTE (aboutReader.fontTypeSerif, aboutReader.fontTypeSansSerif):
# These are the names of the fonts that are used.
aboutReader.fontTypeSerif=Charis SIL Compact
aboutReader.fontTypeSansSerif=Clear Sans
# LOCALIZATION NOTE (aboutReader.fontType.serif, aboutReader.fontType.sans-serif):
# These are the styles of typeface that are used on desktop.
aboutReader.fontType.serif=Serif
aboutReader.fontType.sans-serif=Sans-serif
# LOCALIZATION NOTE (aboutReader.fontType.charis-sil, aboutReader.fontType.clear-sans):
# These are the names of the fonts that are used on Android
aboutReader.fontType.charis-sil=Charis SIL Compact
aboutReader.fontType.clear-sans=Clear Sans
# LOCALIZATION NOTE (aboutReader.fontTypeSample): String used to sample font types.
aboutReader.fontTypeSample=Aa

View File

@ -196,6 +196,13 @@ toolkit.jar:
skin/classic/global/in-content/radio.svg (../../shared/in-content/radio.svg)
skin/classic/global/in-content/sorter.png (../../shared/in-content/sorter.png)
skin/classic/global/in-content/sorter@2x.png (../../shared/in-content/sorter@2x.png)
skin/classic/global/reader/RM-Add-24x24.svg (../../shared/reader/RM-Add-24x24.svg)
skin/classic/global/reader/RM-Close-24x24.svg (../../shared/reader/RM-Close-24x24.svg)
skin/classic/global/reader/RM-Close-hover-24x24.svg (../../shared/reader/RM-Close-hover-24x24.svg)
skin/classic/global/reader/RM-Delete-24x24.svg (../../shared/reader/RM-Delete-24x24.svg)
skin/classic/global/reader/RM-Reading-List-24x24.svg (../../shared/reader/RM-Reading-List-24x24.svg)
skin/classic/global/reader/RM-Type-Controls-24x24.svg (../../shared/reader/RM-Type-Controls-24x24.svg)
skin/classic/global/reader/RM-Type-Controls-Arrow.svg (../../shared/reader/RM-Type-Controls-Arrow.svg)
skin/classic/global/scale/scale-tray-horiz.gif (scale/scale-tray-horiz.gif)
skin/classic/global/scale/scale-tray-vert.gif (scale/scale-tray-vert.gif)
skin/classic/global/splitter/dimple.png (splitter/dimple.png)

View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#808080" d="M12,2C6.477,2,2,6.477,2,12c0,5.523,4.477,10,10,10s10-4.477,10-10
C22,6.477,17.523,2,12,2z M17.714,12.714h-5v5h-1.429v-5h-5v-1.429h5v-5h1.429v5h5V12.714z"/>
</svg>

After

Width:  |  Height:  |  Size: 481 B

View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g>
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#808080" points="20,6.748 17.338,4.079 12.038,9.391 6.661,4 4,6.669
9.377,12.059 4.157,17.292 6.819,19.961 12.039,14.728 17.298,20 19.959,17.331 14.701,12.06 "/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 499 B

View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g>
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" points="20,6.748 17.338,4.079 12.038,9.391 6.661,4 4,6.669
9.377,12.059 4.157,17.292 6.819,19.961 12.039,14.728 17.298,20 19.959,17.331 14.701,12.06 "/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 498 B

View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#808080" d="M12,2C6.477,2,2,6.477,2,12c0,5.523,4.477,10,10,10s10-4.477,10-10
C22,6.477,17.523,2,12,2z M11.286,6.286 M6.286,12.714v-1.429h11.429v1.429H6.286z"/>
</svg>

After

Width:  |  Height:  |  Size: 473 B

View File

@ -0,0 +1,46 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g>
<rect x="8" y="10" fill-rule="evenodd" clip-rule="evenodd" fill="#808080" width="14" height="4"/>
<rect x="8" y="16" fill-rule="evenodd" clip-rule="evenodd" fill="#808080" width="14" height="4"/>
<rect x="8" y="4" fill-rule="evenodd" clip-rule="evenodd" fill="#808080" width="14" height="4"/>
<circle fill-rule="evenodd" clip-rule="evenodd" fill="#808080" cx="4" cy="6" r="2"/>
<circle fill-rule="evenodd" clip-rule="evenodd" fill="#808080" cx="4" cy="12" r="2"/>
<circle fill-rule="evenodd" clip-rule="evenodd" fill="#808080" cx="4" cy="18" r="2"/>
</g>
<g enable-background="new ">
<g>
<defs>
<rect id="SVGID_2_" x="-197" y="-1054" width="22" height="34"/>
</defs>
<clipPath id="SVGID_1_">
<use xlink:href="#SVGID_2_" overflow="visible"/>
</clipPath>
<g clip-path="url(#SVGID_1_)">
<defs>
<rect id="SVGID_6_" x="-293" y="-1459" width="1080" height="2896"/>
</defs>
<clipPath id="SVGID_3_">
<use xlink:href="#SVGID_6_" overflow="visible"/>
</clipPath>
</g>
<g clip-path="url(#SVGID_1_)">
<defs>
<rect id="SVGID_10_" x="-293" y="-1459" width="1080" height="2896"/>
</defs>
<clipPath id="SVGID_5_">
<use xlink:href="#SVGID_10_" overflow="visible"/>
</clipPath>
</g>
<g clip-path="url(#SVGID_1_)">
<defs>
<rect id="SVGID_16_" x="-293" y="-1459" width="1080" height="2896"/>
</defs>
<clipPath id="SVGID_7_">
<use xlink:href="#SVGID_16_" overflow="visible"/>
</clipPath>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g>
<path fill="#808080" d="M8.23,18.748v-1.016l1.182-0.146c0.065-0.013,0.12-0.055,0.166-0.127s0.052-0.143,0.02-0.215L8.513,14.07
H4.236l-1.104,3.096c-0.039,0.104-0.02,0.199,0.059,0.283s0.153,0.13,0.225,0.137l1.123,0.146v1.016H0.232v-1.016l1.123-0.166
L5.837,5.008h2.275l4.443,12.197c0.052,0.124,0.103,0.21,0.151,0.259s0.145,0.089,0.288,0.122l0.762,0.146v1.016H8.23z
M6.296,8.084l-1.68,4.805h3.398L6.296,8.084z"/>
<path fill="#808080" d="M20.05,18.748l-0.264-0.996c-0.345,0.234-0.706,0.443-1.083,0.625c-0.331,0.156-0.702,0.298-1.112,0.425
c-0.409,0.127-0.835,0.19-1.277,0.19c-0.364,0-0.704-0.06-1.02-0.181s-0.592-0.293-0.829-0.518s-0.424-0.497-0.561-0.815
S13.7,16.801,13.7,16.404c0-0.299,0.024-0.576,0.073-0.83s0.146-0.49,0.293-0.708s0.356-0.426,0.63-0.625s0.637-0.392,1.089-0.581
s1.008-0.377,1.665-0.566s1.445-0.384,2.363-0.586v-0.244c0-0.098,0.003-0.186,0.01-0.264c0-0.091,0.003-0.182,0.01-0.273
c0.007-0.189-0.013-0.392-0.059-0.61s-0.137-0.42-0.273-0.605s-0.329-0.338-0.576-0.459s-0.569-0.181-0.967-0.181
c-0.137,0-0.259,0.003-0.366,0.01s-0.197,0.016-0.269,0.029c-0.085,0.013-0.159,0.026-0.225,0.039v1.895h-2.061
c-0.169,0.013-0.319-0.003-0.449-0.049c-0.11-0.039-0.213-0.107-0.308-0.205s-0.142-0.25-0.142-0.459
c0-0.371,0.132-0.703,0.396-0.996c0.263-0.293,0.607-0.542,1.033-0.747s0.904-0.363,1.435-0.474
c0.529-0.111,1.058-0.166,1.585-0.166c0.572,0,1.096,0.042,1.57,0.127s0.883,0.249,1.224,0.493c0.342,0.244,0.604,0.587,0.79,1.03
s0.278,1.025,0.278,1.748v5.137c0,0.124,0.042,0.229,0.127,0.317s0.188,0.138,0.312,0.151l0.879,0.059v0.938H20.05z M19.793,13.592
c-0.645,0.13-1.177,0.264-1.597,0.4s-0.754,0.293-1.001,0.469s-0.42,0.376-0.518,0.601s-0.146,0.487-0.146,0.786
c0,0.208,0.034,0.402,0.103,0.581s0.166,0.335,0.293,0.469s0.278,0.239,0.454,0.317s0.368,0.117,0.576,0.117
c0.215,0,0.432-0.023,0.649-0.068s0.415-0.094,0.591-0.146c0.208-0.065,0.407-0.14,0.596-0.225V13.592z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -0,0 +1,42 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<polygon opacity="0.15" fill-rule="evenodd" clip-rule="evenodd" points="16.583,0.015 16.569,0 4.583,12 16.569,24 16.583,23.985
"/>
<g enable-background="new ">
<g>
<defs>
<rect id="SVGID_2_" x="-125" y="-1086.667" width="22" height="34"/>
</defs>
<clipPath id="SVGID_1_">
<use xlink:href="#SVGID_2_" overflow="visible"/>
</clipPath>
<g clip-path="url(#SVGID_1_)">
<defs>
<rect id="SVGID_6_" x="-221" y="-1491.667" width="1080" height="2896"/>
</defs>
<clipPath id="SVGID_3_">
<use xlink:href="#SVGID_6_" overflow="visible"/>
</clipPath>
</g>
<g clip-path="url(#SVGID_1_)">
<defs>
<rect id="SVGID_10_" x="-221" y="-1491.667" width="1080" height="2896"/>
</defs>
<clipPath id="SVGID_5_">
<use xlink:href="#SVGID_10_" overflow="visible"/>
</clipPath>
</g>
<g clip-path="url(#SVGID_1_)">
<defs>
<rect id="SVGID_16_" x="-221" y="-1491.667" width="1080" height="2896"/>
</defs>
<clipPath id="SVGID_7_">
<use xlink:href="#SVGID_16_" overflow="visible"/>
</clipPath>
</g>
</g>
</g>
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#FBFBFB" points="16.575,1.021 16.561,1.008 5.583,12 16.577,23.008
16.591,22.994 "/>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -9,17 +9,20 @@ body {
margin-right: auto;
}
.light {
.light,
.light-button {
color: #333333;
background-color: #ffffff;
}
.dark {
.dark,
.dark-button {
color: #eeeeee;
background-color: #333333;
}
.sepia {
.sepia,
.sepia-button {
color: #333333;
background-color: #f0ece7;
}
@ -32,6 +35,32 @@ body {
font-family: serif;
}
.font-size1,
.font-size1-sample {
font-size: 14px;
}
.font-size2,
.font-size2-sample {
font-size: 16px;
}
.font-size3,
.font-size3-sample {
font-size: 18px;
}
.font-size4,
.font-size4-sample {
font-size: 20px;
}
.font-size5,
.font-size5-sample {
font-size: 22px;
}
/* Loading/error message */
.message {
@ -39,7 +68,7 @@ body {
display: none;
text-align: center;
width: 100%;
font-size: 16px;
font-size: 0.9rem;
}
/* Header */
@ -50,8 +79,8 @@ body {
}
.domain {
font-size: 16px;
line-height: 24px;
font-size: 0.9rem;
line-height: 1.33rem;
padding-bottom: 4px;
font-family: sans-serif;
text-decoration: none;
@ -69,16 +98,16 @@ body {
}
.header > h1 {
font-size: 24px;
line-height: 30px;
font-size: 1.33rem;
line-height: 1.66rem;
width: 100%;
margin: 30px 0;
padding: 0;
}
.header > .credits {
font-size: 16px;
line-height: 24px;
font-size: 0.9rem;
line-height: 1.33rem;
margin: 0 0 30px 0;
padding: 0;
font-style: italic;
@ -88,8 +117,8 @@ body {
.content {
display: none;
font-size: 18px;
line-height: 26px;
font-size: 1rem;
line-height: 1.44rem;
}
.content h1,
@ -99,18 +128,18 @@ body {
}
.content h1 {
font-size: 24px;
line-height: 30px;
font-size: 1.33rem;
line-height: 1.66rem;
}
.content h2 {
font-size: 20px;
line-height: 26px;
font-size: 1.1rem;
line-height: 1.66rem;
}
.content h3 {
font-size: 18px;
line-height: 26px;
font-size: 1rem;
line-height: 1.66rem;
}
.content a {
@ -149,8 +178,8 @@ body {
.content .caption,
.content .wp-caption-text,
.content figcaption {
font-size: 16px;
line-height: 24px;
font-size: 0.9rem;
line-height: 1.33rem;
font-style: italic;
}
@ -191,5 +220,184 @@ body {
/* Toolbar */
.toolbar {
font-family: sans-serif;
position: fixed;
height: 100%;
top: 0px;
left: 0px;
margin: 0;
padding: 0;
list-style: none;
background-color: #FBFBFB;
-moz-user-select: none;
border-right: 1px solid #B5B5B5;
}
.button {
color: white;
display: block;
background-position: center;
background-size: 24px 24px;
background-repeat: no-repeat;
padding: 4px;
height: 32px;
width: 32px;
border-bottom: 1px solid #c1c1c1;
}
.dropdown {
text-align: center;
list-style: none;
margin: 0px;
padding: 0px;
}
.dropdown li {
margin: 0px;
padding: 0px;
}
.dropdown-popup {
text-align: start;
position: absolute;
left: 48px; /* offset to account for toolbar width */
z-index: 1000;
background-color: #FBFBFB;
font-size: 14px;
visibility: hidden;
cursor: pointer;
border-radius: 4px;
border: 1px solid #B5B5B5;
box-shadow: 0px 1px 12px #666;
color: black;
}
.dropdown-popup > hr {
width: 100%;
height: 0px;
border: 0px;
border-top: 1px solid #B5B5B5;
margin: 0;
}
.open > .dropdown-popup {
visibility: visible;
}
.dropdown-arrow {
position: absolute;
top: 30px; /* offset arrow from top of popup */
left: -16px;
width: 24px;
height: 24px;
background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg");
display: block;
}
#font-type-buttons,
.segmented-button {
display: flex;
flex-direction: row;
list-style: none;
white-space: nowrap;
padding: 0;
}
#font-type-buttons > li,
.segmented-button > li {
flex: 1 0 auto;
text-align: center;
border-left: 1px solid #B5B5B5;
padding: 10px;
}
#font-type-buttons > li {
width: 50px; /* combined with flex, this acts as a minimum width */
}
.segmented-button > li {
width: 30px; /* combined with flex, this acts as a minimum width */
line-height: 20px;
}
#font-type-buttons > li:first-child,
.segmented-button > li:first-child {
border-left: 0px;
}
#font-type-buttons > li > a,
.segmented-button > li > a {
vertical-align: middle;
text-decoration: none;
}
#font-type-buttons > li > a {
display: inline-block;
font-size: 48px;
line-height: 50px;
}
.segmented-button > li > a {
display: block;
font-family: sans-serif;
font-weight: lighter;
}
#font-type-buttons > li:active:hover,
#font-type-buttons > li.selected {
border-bottom: 3px solid #FC6420;
}
.button:hover,
#font-size-buttons > li:hover {
background-color: #EBEBEB;
}
.dropdown.open,
.button:active,
#font-size-buttons > li:active,
#font-size-buttons > li.selected {
background-color: #DADADA;
}
#font-type-buttons > li > .sans-serif {
font-weight: lighter;
}
#font-type-buttons > li > div {
color: #666;
font-size: 12px;
}
/* Android-only controls */
.share-button {
display: none;
}
.close-button {
background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg");
height: 60px;
background-position: center 8px;
}
.close-button:active,
.close-button:hover {
background-image: url("chrome://global/skin/reader/RM-Close-hover-24x24.svg");
background-color: #d94141;
}
.style-button {
background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg");
}
.toggle-button.on {
background-image: url("chrome://global/skin/reader/RM-Delete-24x24.svg");
}
.toggle-button {
background-image: url("chrome://global/skin/reader/RM-Add-24x24.svg");
}
.list-button {
background-image: url("chrome://global/skin/reader/RM-Reading-List-24x24.svg");
}

View File

@ -187,6 +187,14 @@ toolkit.jar:
skin/classic/global/printpreview/arrow-right-end.png (printpreview/arrow-right-end.png)
skin/classic/global/radio/radio-check.gif (radio/radio-check.gif)
skin/classic/global/radio/radio-check-dis.gif (radio/radio-check-dis.gif)
skin/classic/global/reader/RM-Add-24x24.svg (../../shared/reader/RM-Add-24x24.svg)
skin/classic/global/reader/RM-Close-24x24.svg (../../shared/reader/RM-Close-24x24.svg)
skin/classic/global/reader/RM-Close-hover-24x24.svg (../../shared/reader/RM-Close-hover-24x24.svg)
skin/classic/global/reader/RM-Delete-24x24.svg (../../shared/reader/RM-Delete-24x24.svg)
skin/classic/global/reader/RM-Reading-List-24x24.svg (../../shared/reader/RM-Reading-List-24x24.svg)
skin/classic/global/reader/RM-Type-Controls-24x24.svg (../../shared/reader/RM-Type-Controls-24x24.svg)
skin/classic/global/reader/RM-Type-Controls-Arrow.svg (../../shared/reader/RM-Type-Controls-Arrow.svg)
skin/classic/global/scrollbar/slider.gif (scrollbar/slider.gif)
skin/classic/global/splitter/grip-bottom.gif (splitter/grip-bottom.gif)
skin/classic/global/splitter/grip-top.gif (splitter/grip-top.gif)
@ -383,6 +391,13 @@ toolkit.jar:
skin/classic/aero/global/printpreview/arrow-right-end.png (printpreview/arrow-right-end-aero.png)
skin/classic/aero/global/radio/radio-check.gif (radio/radio-check.gif)
skin/classic/aero/global/radio/radio-check-dis.gif (radio/radio-check-dis.gif)
skin/classic/aero/global/reader/RM-Add-24x24.svg (../../shared/reader/RM-Add-24x24.svg)
skin/classic/aero/global/reader/RM-Close-24x24.svg (../../shared/reader/RM-Close-24x24.svg)
skin/classic/aero/global/reader/RM-Close-hover-24x24.svg (../../shared/reader/RM-Close-hover-24x24.svg)
skin/classic/aero/global/reader/RM-Delete-24x24.svg (../../shared/reader/RM-Delete-24x24.svg)
skin/classic/aero/global/reader/RM-Reading-List-24x24.svg (../../shared/reader/RM-Reading-List-24x24.svg)
skin/classic/aero/global/reader/RM-Type-Controls-24x24.svg (../../shared/reader/RM-Type-Controls-24x24.svg)
skin/classic/aero/global/reader/RM-Type-Controls-Arrow.svg (../../shared/reader/RM-Type-Controls-Arrow.svg)
skin/classic/aero/global/scrollbar/slider.gif (scrollbar/slider.gif)
skin/classic/aero/global/splitter/grip-bottom.gif (splitter/grip-bottom.gif)
skin/classic/aero/global/splitter/grip-top.gif (splitter/grip-top.gif)