Bug 1120735 - Implement desktop reader mode controls. r=jaws,bnicholson
--HG-- extra : rebase_source : 931f6bd5497ca84fa54eb0f8365acf940a7cd86f
@ -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);
|
||||
|
@ -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');
|
||||
}
|
||||
|
@ -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
|
||||
|
@ -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);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
@ -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>
|
||||
|
@ -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
|
||||
|
@ -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)
|
||||
|
6
toolkit/themes/shared/reader/RM-Add-24x24.svg
Normal 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 |
8
toolkit/themes/shared/reader/RM-Close-24x24.svg
Normal 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 |
8
toolkit/themes/shared/reader/RM-Close-hover-24x24.svg
Normal 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 |
6
toolkit/themes/shared/reader/RM-Delete-24x24.svg
Normal 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 |
46
toolkit/themes/shared/reader/RM-Reading-List-24x24.svg
Normal 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 |
23
toolkit/themes/shared/reader/RM-Type-Controls-24x24.svg
Normal 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 |
42
toolkit/themes/shared/reader/RM-Type-Controls-Arrow.svg
Normal 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 |
@ -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");
|
||||
}
|
||||
|
@ -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)
|
||||
|