зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1417837 - Part 3: Replace all IDs in about:reader documents with class names. r=Gijs
Since the readerized article content will have its class names stripped but will retain its original IDs, and we don't want our aboutReader.css rules targetting UI elements to match anything in the article. MozReview-Commit-ID: JuXTo8Nth5Q --HG-- extra : rebase_source : dde58f56e55f82ddda364ec5978e43fe71be875c
This commit is contained in:
Cameron McCormack
Родитель
b8a6e87467
Коммит
544acb33d3
|
|
@ -32,7 +32,7 @@ Migrated from Robocop: https://bugzilla.mozilla.org/show_bug.cgi?id=1184186
|
|||
yield promiseBrowserEvent(browser, "load");
|
||||
|
||||
let doc = browser.contentDocument;
|
||||
let title = doc.getElementById("reader-title");
|
||||
let title = doc.querySelector(".reader-title");
|
||||
|
||||
// We need to wait for reader content to appear because AboutReader.jsm
|
||||
// asynchronously fetches the content after about:reader loads.
|
||||
|
|
|
|||
|
|
@ -2,6 +2,9 @@
|
|||
* 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/. */
|
||||
|
||||
/* Avoid adding ID selector rules in this style sheet, since they could
|
||||
* inadvertently match elements in the article content. */
|
||||
|
||||
html {
|
||||
-moz-text-size-adjust: none;
|
||||
}
|
||||
|
|
@ -33,39 +36,39 @@ body.serif {
|
|||
font-family: serif;
|
||||
}
|
||||
|
||||
#container.font-size1 {
|
||||
.container.font-size1 {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
#container.font-size2 {
|
||||
.container.font-size2 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#container.font-size3 {
|
||||
.container.font-size3 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#container.font-size4 {
|
||||
.container.font-size4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#container.font-size5 {
|
||||
.container.font-size5 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#container.font-size6 {
|
||||
.container.font-size6 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#container.font-size7 {
|
||||
.container.font-size7 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
#container.font-size8 {
|
||||
.container.font-size8 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#container.font-size9 {
|
||||
.container.font-size9 {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
|
|
@ -119,7 +122,7 @@ body.dark > .container > .content blockquote {
|
|||
border-left-color: #777777 !important;
|
||||
}
|
||||
|
||||
#reader-message {
|
||||
.reader-message {
|
||||
margin-top: 40px;
|
||||
display: none;
|
||||
text-align: center;
|
||||
|
|
@ -217,7 +220,7 @@ body.dark > .container > .content blockquote {
|
|||
}
|
||||
|
||||
.dropdown-toggle,
|
||||
#reader-popup {
|
||||
.dropdown-popup {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
|
|
@ -249,9 +252,9 @@ body.dark > .container > .content blockquote {
|
|||
/* Only used on desktop */
|
||||
.dropdown-popup > hr,
|
||||
.dropdown-arrow,
|
||||
#font-type-buttons > button > .name,
|
||||
#content-width-buttons,
|
||||
#line-height-buttons {
|
||||
.font-type-buttons > button > .name,
|
||||
.content-width-buttons,
|
||||
.line-height-buttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -260,37 +263,37 @@ body.dark > .container > .content blockquote {
|
|||
bottom: 0;
|
||||
}
|
||||
|
||||
#font-type-buttons,
|
||||
#font-size-buttons,
|
||||
#color-scheme-buttons {
|
||||
.font-type-buttons,
|
||||
.font-size-buttons,
|
||||
.color-scheme-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#font-type-buttons > button,
|
||||
#color-scheme-buttons > button {
|
||||
.font-type-buttons > button,
|
||||
.color-scheme-buttons > button {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#font-type-buttons > button,
|
||||
#font-size-buttons > button {
|
||||
.font-type-buttons > button,
|
||||
.font-size-buttons > button {
|
||||
width: 50%;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#font-type-buttons > button {
|
||||
.font-type-buttons > button {
|
||||
font-size: 24px;
|
||||
color: #AFB1B3;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
#font-type-buttons > button:active,
|
||||
#font-type-buttons > button.selected {
|
||||
.font-type-buttons > button:active,
|
||||
.font-type-buttons > button.selected {
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
#font-size-sample {
|
||||
.font-size-sample {
|
||||
flex: 0;
|
||||
font-size: 24px;
|
||||
color: #000000;
|
||||
|
|
@ -324,7 +327,7 @@ body.dark > .container > .content blockquote {
|
|||
padding: 0 5px;
|
||||
}
|
||||
|
||||
#color-scheme-buttons > button {
|
||||
.color-scheme-buttons > button {
|
||||
width: 33%;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #BFBFBF;
|
||||
|
|
@ -333,8 +336,8 @@ body.dark > .container > .content blockquote {
|
|||
font-size: 14px;
|
||||
}
|
||||
|
||||
#color-scheme-buttons > button:active,
|
||||
#color-scheme-buttons > button.selected {
|
||||
.color-scheme-buttons > button:active,
|
||||
.color-scheme-buttons > button.selected {
|
||||
border: 2px solid #0A84FF;
|
||||
}
|
||||
|
||||
|
|
@ -414,29 +417,29 @@ body.dark > .container > .content blockquote {
|
|||
* must be added to CLASSES_TO_PRESERVE in ReaderMode.jsm, so that
|
||||
* Readability.js doesn't strip them out */
|
||||
|
||||
#moz-reader-content {
|
||||
.moz-reader-content {
|
||||
display: none;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
#moz-reader-content a {
|
||||
.moz-reader-content a {
|
||||
text-decoration: underline !important;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#moz-reader-content a,
|
||||
#moz-reader-content a:visited,
|
||||
#moz-reader-content a:hover,
|
||||
#moz-reader-content a:active {
|
||||
.moz-reader-content a,
|
||||
.moz-reader-content a:visited,
|
||||
.moz-reader-content a:hover,
|
||||
.moz-reader-content a:active {
|
||||
color: #00acff !important;
|
||||
}
|
||||
|
||||
#moz-reader-content * {
|
||||
.moz-reader-content * {
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
#moz-reader-content p {
|
||||
.moz-reader-content p {
|
||||
line-height: 1.4em !important;
|
||||
margin: 0px !important;
|
||||
margin-bottom: 20px !important;
|
||||
|
|
@ -444,8 +447,8 @@ body.dark > .container > .content blockquote {
|
|||
|
||||
/* Covers all images showing edge-to-edge using a
|
||||
an optional caption text */
|
||||
#moz-reader-content .wp-caption,
|
||||
#moz-reader-content figure {
|
||||
.moz-reader-content .wp-caption,
|
||||
.moz-reader-content figure {
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
margin: 0px !important;
|
||||
|
|
@ -454,17 +457,17 @@ body.dark > .container > .content blockquote {
|
|||
|
||||
/* Images marked to be shown edge-to-edge with an
|
||||
optional captio ntext */
|
||||
#moz-reader-content p > img:only-child,
|
||||
#moz-reader-content p > a:only-child > img:only-child,
|
||||
#moz-reader-content .wp-caption img,
|
||||
#moz-reader-content figure img {
|
||||
.moz-reader-content p > img:only-child,
|
||||
.moz-reader-content p > a:only-child > img:only-child,
|
||||
.moz-reader-content .wp-caption img,
|
||||
.moz-reader-content figure img {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* Account for body padding to make image full width */
|
||||
#moz-reader-content img[moz-reader-full-width] {
|
||||
.moz-reader-content img[moz-reader-full-width] {
|
||||
width: calc(100% + 40px);
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
|
|
@ -472,9 +475,9 @@ body.dark > .container > .content blockquote {
|
|||
}
|
||||
|
||||
/* Image caption text */
|
||||
#moz-reader-content .caption,
|
||||
#moz-reader-content .wp-caption-text,
|
||||
#moz-reader-content figcaption {
|
||||
.moz-reader-content .caption,
|
||||
.moz-reader-content .wp-caption-text,
|
||||
.moz-reader-content figcaption {
|
||||
font-size: 0.9em;
|
||||
font-family: sans-serif;
|
||||
margin: 0px !important;
|
||||
|
|
@ -483,13 +486,13 @@ body.dark > .container > .content blockquote {
|
|||
|
||||
/* Ensure all pre-formatted code inside the reader content
|
||||
are properly wrapped inside content width */
|
||||
#moz-reader-content code,
|
||||
#moz-reader-content pre {
|
||||
.moz-reader-content code,
|
||||
.moz-reader-content pre {
|
||||
white-space: pre-wrap !important;
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
|
||||
#moz-reader-content blockquote {
|
||||
.moz-reader-content blockquote {
|
||||
margin: 0px !important;
|
||||
margin-bottom: 20px !important;
|
||||
padding: 0px !important;
|
||||
|
|
@ -498,29 +501,29 @@ body.dark > .container > .content blockquote {
|
|||
border-left: 2px solid !important;
|
||||
}
|
||||
|
||||
#moz-reader-content ul,
|
||||
#moz-reader-content ol {
|
||||
.moz-reader-content ul,
|
||||
.moz-reader-content ol {
|
||||
margin: 0px !important;
|
||||
margin-bottom: 20px !important;
|
||||
padding: 0px !important;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
#moz-reader-content ul {
|
||||
.moz-reader-content ul {
|
||||
padding-inline-start: 30px !important;
|
||||
list-style: disc !important;
|
||||
}
|
||||
|
||||
#moz-reader-content ol {
|
||||
.moz-reader-content ol {
|
||||
padding-inline-start: 35px !important;
|
||||
list-style: decimal !important;
|
||||
}
|
||||
|
||||
/* Hide elements with common "hidden" class names */
|
||||
#moz-reader-content .visually-hidden,
|
||||
#moz-reader-content .visuallyhidden,
|
||||
#moz-reader-content .hidden,
|
||||
#moz-reader-content .invisible,
|
||||
#moz-reader-content .sr-only {
|
||||
.moz-reader-content .visually-hidden,
|
||||
.moz-reader-content .visuallyhidden,
|
||||
.moz-reader-content .hidden,
|
||||
.moz-reader-content .invisible,
|
||||
.moz-reader-content .sr-only {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,13 +38,12 @@ function NarrateControls(mm, win, languagePromise) {
|
|||
}
|
||||
|
||||
let dropdown = win.document.createElement("ul");
|
||||
dropdown.className = "dropdown";
|
||||
dropdown.id = "narrate-dropdown";
|
||||
dropdown.className = "dropdown narrate-dropdown";
|
||||
// We need inline svg here for the animation to work (bug 908634 & 1190881).
|
||||
// eslint-disable-next-line no-unsanitized/property
|
||||
dropdown.innerHTML =
|
||||
localize`<li>
|
||||
<button class="dropdown-toggle button" id="narrate-toggle"
|
||||
<button class="dropdown-toggle button narrate-toggle"
|
||||
title="${"narrate"}" hidden>
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
|
|
@ -58,11 +57,11 @@ function NarrateControls(mm, win, languagePromise) {
|
|||
100% { transform: scaleY(1); }
|
||||
}
|
||||
|
||||
#waveform > rect {
|
||||
.waveform > rect {
|
||||
fill: #808080;
|
||||
}
|
||||
|
||||
.speaking #waveform > rect {
|
||||
.speaking .waveform > rect {
|
||||
fill: #58bf43;
|
||||
transform-box: fill-box;
|
||||
transform-origin: 50% 50%;
|
||||
|
|
@ -72,15 +71,15 @@ function NarrateControls(mm, win, languagePromise) {
|
|||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
#waveform > rect:nth-child(2) { animation-delay: 250ms; }
|
||||
#waveform > rect:nth-child(3) { animation-delay: 500ms; }
|
||||
#waveform > rect:nth-child(4) { animation-delay: 750ms; }
|
||||
#waveform > rect:nth-child(5) { animation-delay: 1000ms; }
|
||||
#waveform > rect:nth-child(6) { animation-delay: 1250ms; }
|
||||
#waveform > rect:nth-child(7) { animation-delay: 1500ms; }
|
||||
.waveform > rect:nth-child(2) { animation-delay: 250ms; }
|
||||
.waveform > rect:nth-child(3) { animation-delay: 500ms; }
|
||||
.waveform > rect:nth-child(4) { animation-delay: 750ms; }
|
||||
.waveform > rect:nth-child(5) { animation-delay: 1000ms; }
|
||||
.waveform > rect:nth-child(6) { animation-delay: 1250ms; }
|
||||
.waveform > rect:nth-child(7) { animation-delay: 1500ms; }
|
||||
|
||||
</style>
|
||||
<g id="waveform">
|
||||
<g class="waveform">
|
||||
<rect x="1" y="8" width="2" height="8" rx=".5" ry=".5" />
|
||||
<rect x="4" y="5" width="2" height="14" rx=".5" ry=".5" />
|
||||
<rect x="7" y="8" width="2" height="8" rx=".5" ry=".5" />
|
||||
|
|
@ -93,18 +92,18 @@ function NarrateControls(mm, win, languagePromise) {
|
|||
</button>
|
||||
</li>
|
||||
<li class="dropdown-popup">
|
||||
<div id="narrate-control" class="narrate-row">
|
||||
<button disabled id="narrate-skip-previous"
|
||||
<div class="narrate-row narrate-control">
|
||||
<button disabled class="narrate-skip-previous"
|
||||
title="${"back"}"></button>
|
||||
<button id="narrate-start-stop" title="${"start"}"></button>
|
||||
<button disabled id="narrate-skip-next"
|
||||
<button class="narrate-start-stop" title="${"start"}"></button>
|
||||
<button disabled class="narrate-skip-next"
|
||||
title="${"forward"}"></button>
|
||||
</div>
|
||||
<div id="narrate-rate" class="narrate-row">
|
||||
<input id="narrate-rate-input" value="0" title="${"speed"}"
|
||||
<div class="narrate-row narrate-rate">
|
||||
<input class="narrate-rate-input" value="0" title="${"speed"}"
|
||||
step="5" max="100" min="-100" type="range">
|
||||
</div>
|
||||
<div id="narrate-voices" class="narrate-row"></div>
|
||||
<div class="narrate-row narrate-voices"></div>
|
||||
<div class="dropdown-arrow"></div>
|
||||
</li>`;
|
||||
|
||||
|
|
@ -114,14 +113,14 @@ function NarrateControls(mm, win, languagePromise) {
|
|||
let selectLabel = gStrings.GetStringFromName("selectvoicelabel");
|
||||
this.voiceSelect = new VoiceSelect(win, selectLabel);
|
||||
this.voiceSelect.element.addEventListener("change", this);
|
||||
this.voiceSelect.element.id = "voice-select";
|
||||
this.voiceSelect.element.classList.add("voice-select");
|
||||
win.speechSynthesis.addEventListener("voiceschanged", this);
|
||||
dropdown.querySelector("#narrate-voices").appendChild(
|
||||
dropdown.querySelector(".narrate-voices").appendChild(
|
||||
this.voiceSelect.element);
|
||||
|
||||
dropdown.addEventListener("click", this, true);
|
||||
|
||||
let rateRange = dropdown.querySelector("#narrate-rate > input");
|
||||
let rateRange = dropdown.querySelector(".narrate-rate > input");
|
||||
rateRange.addEventListener("change", this);
|
||||
|
||||
// The rate is stored as an integer.
|
||||
|
|
@ -129,7 +128,7 @@ function NarrateControls(mm, win, languagePromise) {
|
|||
|
||||
this._setupVoices();
|
||||
|
||||
let tb = win.document.getElementById("reader-toolbar");
|
||||
let tb = win.document.querySelector(".reader-toolbar");
|
||||
tb.appendChild(dropdown);
|
||||
}
|
||||
|
||||
|
|
@ -137,7 +136,7 @@ NarrateControls.prototype = {
|
|||
handleEvent(evt) {
|
||||
switch (evt.type) {
|
||||
case "change":
|
||||
if (evt.target.id == "narrate-rate-input") {
|
||||
if (evt.target.classList.contains("narrate-rate-input")) {
|
||||
this._onRateInput(evt);
|
||||
} else {
|
||||
this._onVoiceChange();
|
||||
|
|
@ -188,7 +187,7 @@ NarrateControls.prototype = {
|
|||
this.voiceSelect.addOptions(options);
|
||||
}
|
||||
|
||||
let narrateToggle = win.document.getElementById("narrate-toggle");
|
||||
let narrateToggle = win.document.querySelector(".narrate-toggle");
|
||||
let histogram = Services.telemetry.getKeyedHistogramById(
|
||||
"NARRATE_CONTENT_BY_LANGUAGE_2");
|
||||
let initial = !this._voicesInitialized;
|
||||
|
|
@ -235,14 +234,12 @@ NarrateControls.prototype = {
|
|||
},
|
||||
|
||||
_onButtonClick(evt) {
|
||||
switch (evt.target.id) {
|
||||
case "narrate-skip-previous":
|
||||
let classList = evt.target.classList;
|
||||
if (classList.contains("narrate-skip-previous")) {
|
||||
this.narrator.skipPrevious();
|
||||
break;
|
||||
case "narrate-skip-next":
|
||||
} else if (classList.contains("narrate-skip-next")) {
|
||||
this.narrator.skipNext();
|
||||
break;
|
||||
case "narrate-start-stop":
|
||||
} else if (classList.contains("narrate-start-stop")) {
|
||||
if (this.narrator.speaking) {
|
||||
this.narrator.stop();
|
||||
} else {
|
||||
|
|
@ -255,21 +252,20 @@ NarrateControls.prototype = {
|
|||
this._updateSpeechControls(false);
|
||||
});
|
||||
}
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
_updateSpeechControls(speaking) {
|
||||
let dropdown = this._doc.getElementById("narrate-dropdown");
|
||||
let dropdown = this._doc.querySelector(".narrate-dropdown");
|
||||
dropdown.classList.toggle("keep-open", speaking);
|
||||
dropdown.classList.toggle("speaking", speaking);
|
||||
|
||||
let startStopButton = this._doc.getElementById("narrate-start-stop");
|
||||
let startStopButton = this._doc.querySelector(".narrate-start-stop");
|
||||
startStopButton.title =
|
||||
gStrings.GetStringFromName(speaking ? "stop" : "start");
|
||||
|
||||
this._doc.getElementById("narrate-skip-previous").disabled = !speaking;
|
||||
this._doc.getElementById("narrate-skip-next").disabled = !speaking;
|
||||
this._doc.querySelector(".narrate-skip-previous").disabled = !speaking;
|
||||
this._doc.querySelector(".narrate-skip-next").disabled = !speaking;
|
||||
|
||||
if (speaking) {
|
||||
TelemetryStopwatch.start("NARRATE_CONTENT_SPEAKTIME_MS", this);
|
||||
|
|
@ -332,7 +328,7 @@ NarrateControls.prototype = {
|
|||
|
||||
get rate() {
|
||||
return this._convertRate(
|
||||
this._doc.getElementById("narrate-rate-input").value);
|
||||
this._doc.querySelector(".narrate-rate-input").value);
|
||||
},
|
||||
|
||||
get voice() {
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ Narrator.prototype = {
|
|||
// are no other strong references, and it will be GC'ed. Instead,
|
||||
// we rely on the window's lifetime and use it as a weak reference.
|
||||
this._treeWalkerRef.set(this._win,
|
||||
this._doc.createTreeWalker(this._doc.getElementById("container"),
|
||||
this._doc.createTreeWalker(this._doc.querySelector(".container"),
|
||||
nf.SHOW_ELEMENT, filter, false));
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,17 +12,17 @@ Cu.import("resource://testing-common/ContentTaskUtils.jsm");
|
|||
this.EXPORTED_SYMBOLS = [ "NarrateTestUtils" ];
|
||||
|
||||
this.NarrateTestUtils = {
|
||||
TOGGLE: "#narrate-toggle",
|
||||
POPUP: "#narrate-dropdown .dropdown-popup",
|
||||
VOICE_SELECT: "#narrate-voices .select-toggle",
|
||||
VOICE_OPTIONS: "#narrate-voices .options",
|
||||
VOICE_SELECTED: "#narrate-voices .options .option.selected",
|
||||
VOICE_SELECT_LABEL: "#narrate-voices .select-toggle .current-voice",
|
||||
RATE: "#narrate-rate-input",
|
||||
START: "#narrate-dropdown:not(.speaking) #narrate-start-stop",
|
||||
STOP: "#narrate-dropdown.speaking #narrate-start-stop",
|
||||
BACK: "#narrate-skip-previous",
|
||||
FORWARD: "#narrate-skip-next",
|
||||
TOGGLE: ".narrate-toggle",
|
||||
POPUP: ".narrate-dropdown .dropdown-popup",
|
||||
VOICE_SELECT: ".narrate-voices .select-toggle",
|
||||
VOICE_OPTIONS: ".narrate-voices .options",
|
||||
VOICE_SELECTED: ".narrate-voices .options .option.selected",
|
||||
VOICE_SELECT_LABEL: ".narrate-voices .select-toggle .current-voice",
|
||||
RATE: ".narrate-rate-input",
|
||||
START: ".narrate-dropdown:not(.speaking) .narrate-start-stop",
|
||||
STOP: ".narrate-dropdown.speaking .narrate-start-stop",
|
||||
BACK: ".narrate-skip-previous",
|
||||
FORWARD: ".narrate-skip-next",
|
||||
|
||||
isVisible(element) {
|
||||
let style = element.ownerGlobal.getComputedStyle(element);
|
||||
|
|
@ -68,7 +68,7 @@ this.NarrateTestUtils = {
|
|||
}
|
||||
|
||||
let voiceOption = window.document.querySelector(
|
||||
`#narrate-voices .option[data-value="${voiceUri}"]`);
|
||||
`.narrate-voices .option[data-value="${voiceUri}"]`);
|
||||
|
||||
voiceOption.focus();
|
||||
voiceOption.click();
|
||||
|
|
|
|||
|
|
@ -55,14 +55,15 @@ var AboutReader = function(mm, win, articlePromise) {
|
|||
this._articlePromise = articlePromise;
|
||||
}
|
||||
|
||||
this._headerElementRef = Cu.getWeakReference(doc.getElementById("reader-header"));
|
||||
this._domainElementRef = Cu.getWeakReference(doc.getElementById("reader-domain"));
|
||||
this._titleElementRef = Cu.getWeakReference(doc.getElementById("reader-title"));
|
||||
this._readTimeElementRef = Cu.getWeakReference(doc.getElementById("reader-estimated-time"));
|
||||
this._creditsElementRef = Cu.getWeakReference(doc.getElementById("reader-credits"));
|
||||
this._contentElementRef = Cu.getWeakReference(doc.getElementById("moz-reader-content"));
|
||||
this._toolbarElementRef = Cu.getWeakReference(doc.getElementById("reader-toolbar"));
|
||||
this._messageElementRef = Cu.getWeakReference(doc.getElementById("reader-message"));
|
||||
this._headerElementRef = Cu.getWeakReference(doc.querySelector(".reader-header"));
|
||||
this._domainElementRef = Cu.getWeakReference(doc.querySelector(".reader-domain"));
|
||||
this._titleElementRef = Cu.getWeakReference(doc.querySelector(".reader-title"));
|
||||
this._readTimeElementRef = Cu.getWeakReference(doc.querySelector(".reader-estimated-time"));
|
||||
this._creditsElementRef = Cu.getWeakReference(doc.querySelector(".reader-credits"));
|
||||
this._contentElementRef = Cu.getWeakReference(doc.querySelector(".moz-reader-content"));
|
||||
this._toolbarElementRef = Cu.getWeakReference(doc.querySelector(".reader-toolbar"));
|
||||
this._messageElementRef = Cu.getWeakReference(doc.querySelector(".reader-message"));
|
||||
this._containerElementRef = Cu.getWeakReference(doc.querySelector(".container"));
|
||||
|
||||
this._scrollOffset = win.pageYOffset;
|
||||
|
||||
|
|
@ -173,6 +174,10 @@ AboutReader.prototype = {
|
|||
return this._messageElementRef.get();
|
||||
},
|
||||
|
||||
get _containerElement() {
|
||||
return this._containerElementRef.get();
|
||||
},
|
||||
|
||||
get _isToolbarVertical() {
|
||||
if (this._toolbarVertical !== undefined) {
|
||||
return this._toolbarVertical;
|
||||
|
|
@ -200,26 +205,26 @@ AboutReader.prototype = {
|
|||
|
||||
case "Reader:AddButton": {
|
||||
if (message.data.id && message.data.image &&
|
||||
!this._doc.getElementById(message.data.id)) {
|
||||
!this._doc.getElementsByClassName(message.data.id)[0]) {
|
||||
let btn = this._doc.createElement("button");
|
||||
btn.setAttribute("class", "button");
|
||||
btn.setAttribute("style", "background-image: url('" + message.data.image + "')");
|
||||
btn.setAttribute("id", message.data.id);
|
||||
btn.dataset.buttonid = message.data.id;
|
||||
btn.className = "button " + message.data.id;
|
||||
btn.style.backgroundImage = "url('" + message.data.image + "')";
|
||||
if (message.data.title)
|
||||
btn.setAttribute("title", message.data.title);
|
||||
btn.title = message.data.title;
|
||||
if (message.data.text)
|
||||
btn.textContent = message.data.text;
|
||||
let tb = this._doc.getElementById("reader-toolbar");
|
||||
let tb = this._toolbarElement;
|
||||
tb.appendChild(btn);
|
||||
this._setupButton(message.data.id, button => {
|
||||
this._mm.sendAsyncMessage("Reader:Clicked-" + button.getAttribute("id"), { article: this._article });
|
||||
this._mm.sendAsyncMessage("Reader:Clicked-" + button.dataset.buttonid, { article: this._article });
|
||||
});
|
||||
}
|
||||
break;
|
||||
}
|
||||
case "Reader:RemoveButton": {
|
||||
if (message.data.id) {
|
||||
let btn = this._doc.getElementById(message.data.id);
|
||||
let btn = this._doc.getElementsByClassName(message.data.id)[0];
|
||||
if (btn)
|
||||
btn.remove();
|
||||
}
|
||||
|
|
@ -303,7 +308,7 @@ AboutReader.prototype = {
|
|||
},
|
||||
|
||||
_setFontSize(newFontSize) {
|
||||
let containerClasses = this._doc.getElementById("container").classList;
|
||||
let containerClasses = this._containerElement.classList;
|
||||
|
||||
if (this._fontSize > 0)
|
||||
containerClasses.remove("font-size" + this._fontSize);
|
||||
|
|
@ -318,14 +323,14 @@ AboutReader.prototype = {
|
|||
const FONT_SIZE_MAX = 9;
|
||||
|
||||
// Sample text shown in Android UI.
|
||||
let sampleText = this._doc.getElementById("font-size-sample");
|
||||
let sampleText = this._doc.querySelector(".font-size-sample");
|
||||
sampleText.textContent = gStrings.GetStringFromName("aboutReader.fontTypeSample");
|
||||
|
||||
let currentSize = Services.prefs.getIntPref("reader.font_size");
|
||||
currentSize = Math.max(FONT_SIZE_MIN, Math.min(FONT_SIZE_MAX, currentSize));
|
||||
|
||||
let plusButton = this._doc.getElementById("font-size-plus");
|
||||
let minusButton = this._doc.getElementById("font-size-minus");
|
||||
let plusButton = this._doc.querySelector(".plus-button");
|
||||
let minusButton = this._doc.querySelector(".minus-button");
|
||||
|
||||
function updateControls() {
|
||||
if (currentSize === FONT_SIZE_MIN) {
|
||||
|
|
@ -375,7 +380,7 @@ AboutReader.prototype = {
|
|||
},
|
||||
|
||||
_setContentWidth(newContentWidth) {
|
||||
let containerClasses = this._doc.getElementById("container").classList;
|
||||
let containerClasses = this._containerElement.classList;
|
||||
|
||||
if (this._contentWidth > 0)
|
||||
containerClasses.remove("content-width" + this._contentWidth);
|
||||
|
|
@ -392,8 +397,8 @@ AboutReader.prototype = {
|
|||
let currentContentWidth = Services.prefs.getIntPref("reader.content_width");
|
||||
currentContentWidth = Math.max(CONTENT_WIDTH_MIN, Math.min(CONTENT_WIDTH_MAX, currentContentWidth));
|
||||
|
||||
let plusButton = this._doc.getElementById("content-width-plus");
|
||||
let minusButton = this._doc.getElementById("content-width-minus");
|
||||
let plusButton = this._doc.querySelector(".content-width-plus-button");
|
||||
let minusButton = this._doc.querySelector(".content-width-minus-button");
|
||||
|
||||
function updateControls() {
|
||||
if (currentContentWidth === CONTENT_WIDTH_MIN) {
|
||||
|
|
@ -443,7 +448,7 @@ AboutReader.prototype = {
|
|||
},
|
||||
|
||||
_setLineHeight(newLineHeight) {
|
||||
let contentClasses = this._doc.getElementById("moz-reader-content").classList;
|
||||
let contentClasses = this._contentElement.classList;
|
||||
|
||||
if (this._lineHeight > 0)
|
||||
contentClasses.remove("line-height" + this._lineHeight);
|
||||
|
|
@ -460,8 +465,8 @@ AboutReader.prototype = {
|
|||
let currentLineHeight = Services.prefs.getIntPref("reader.line_height");
|
||||
currentLineHeight = Math.max(LINE_HEIGHT_MIN, Math.min(LINE_HEIGHT_MAX, currentLineHeight));
|
||||
|
||||
let plusButton = this._doc.getElementById("line-height-plus");
|
||||
let minusButton = this._doc.getElementById("line-height-minus");
|
||||
let plusButton = this._doc.querySelector(".line-height-plus-button");
|
||||
let minusButton = this._doc.querySelector(".line-height-minus-button");
|
||||
|
||||
function updateControls() {
|
||||
if (currentLineHeight === LINE_HEIGHT_MIN) {
|
||||
|
|
@ -876,7 +881,7 @@ AboutReader.prototype = {
|
|||
|
||||
_setupSegmentedButton(id, options, initialValue, callback) {
|
||||
let doc = this._doc;
|
||||
let segmentedButton = doc.getElementById(id);
|
||||
let segmentedButton = doc.getElementsByClassName(id)[0];
|
||||
|
||||
for (let i = 0; i < options.length; i++) {
|
||||
let option = options[i];
|
||||
|
|
@ -930,7 +935,7 @@ AboutReader.prototype = {
|
|||
this._setButtonTip(id, titleEntity);
|
||||
}
|
||||
|
||||
let button = this._doc.getElementById(id);
|
||||
let button = this._doc.getElementsByClassName(id)[0];
|
||||
if (textEntity) {
|
||||
button.textContent = gStrings.GetStringFromName(textEntity);
|
||||
}
|
||||
|
|
@ -951,12 +956,12 @@ AboutReader.prototype = {
|
|||
* @param Localizable string providing UI element usage tip.
|
||||
*/
|
||||
_setButtonTip(id, titleEntity) {
|
||||
let button = this._doc.getElementById(id);
|
||||
let button = this._doc.getElementsByClassName(id)[0];
|
||||
button.setAttribute("title", gStrings.GetStringFromName(titleEntity));
|
||||
},
|
||||
|
||||
_setupStyleDropdown() {
|
||||
let dropdownToggle = this._doc.querySelector("#style-dropdown .dropdown-toggle");
|
||||
let dropdownToggle = this._doc.querySelector(".style-dropdown .dropdown-toggle");
|
||||
dropdownToggle.setAttribute("title", gStrings.GetStringFromName("aboutReader.toolbar.typeControls"));
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -11,52 +11,52 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div id="container" class="container">
|
||||
<div id="reader-header" class="header">
|
||||
<a id="reader-domain" class="domain"></a>
|
||||
<div class="container">
|
||||
<div class="header reader-header">
|
||||
<a class="domain reader-domain"></a>
|
||||
<div class="domain-border"></div>
|
||||
<h1 id="reader-title"></h1>
|
||||
<div id="reader-credits" class="credits"></div>
|
||||
<div id="meta-data" class="meta-data">
|
||||
<div id="reader-estimated-time"></div>
|
||||
<h1 class="reader-title"></h1>
|
||||
<div class="credits reader-credits"></div>
|
||||
<div class="meta-data">
|
||||
<div class="reader-estimated-time"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<div id="moz-reader-content"></div>
|
||||
<div class="moz-reader-content"></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div id="reader-message"></div>
|
||||
<div class="reader-message"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul id="reader-toolbar" class="toolbar">
|
||||
<li><button id="close-button" class="button close-button"/></li>
|
||||
<ul id="style-dropdown" class="dropdown">
|
||||
<ul class="toolbar reader-toolbar">
|
||||
<li><button class="button close-button"/></li>
|
||||
<ul class="dropdown style-dropdown">
|
||||
<li><button class="dropdown-toggle button style-button"/></li>
|
||||
<li id="reader-popup" class="dropdown-popup">
|
||||
<div id="font-type-buttons"></div>
|
||||
<li class="dropdown-popup">
|
||||
<div class="font-type-buttons"></div>
|
||||
<hr>
|
||||
<div id="font-size-buttons">
|
||||
<button id="font-size-minus" class="minus-button"/>
|
||||
<button id="font-size-sample"/>
|
||||
<button id="font-size-plus" class="plus-button"/>
|
||||
<div class="font-size-buttons">
|
||||
<button class="minus-button"/>
|
||||
<button class="font-size-sample"/>
|
||||
<button class="plus-button"/>
|
||||
</div>
|
||||
<hr>
|
||||
<div id="content-width-buttons">
|
||||
<button id="content-width-minus" class="content-width-minus-button"/>
|
||||
<button id="content-width-plus" class="content-width-plus-button"/>
|
||||
<div class="content-width-buttons">
|
||||
<button class="content-width-minus-button"/>
|
||||
<button class="content-width-plus-button"/>
|
||||
</div>
|
||||
<hr>
|
||||
<div id="line-height-buttons">
|
||||
<button id="line-height-minus" class="line-height-minus-button"/>
|
||||
<button id="line-height-plus" class="line-height-plus-button"/>
|
||||
<div class="line-height-buttons">
|
||||
<button class="line-height-minus-button"/>
|
||||
<button class="line-height-plus-button"/>
|
||||
</div>
|
||||
<hr>
|
||||
<div id="color-scheme-buttons"></div>
|
||||
<div class="color-scheme-buttons"></div>
|
||||
<div class="dropdown-arrow"/>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ add_task(async function() {
|
|||
await pageShownPromise;
|
||||
await ContentTask.spawn(browser, null, async function() {
|
||||
// make sure there is a reading time on the page and that it displays the correct information
|
||||
let readingTimeElement = content.document.getElementById("reader-estimated-time");
|
||||
let readingTimeElement = content.document.querySelector(".reader-estimated-time");
|
||||
ok(readingTimeElement, "Reading time element should be in document");
|
||||
is(readingTimeElement.textContent, "9-12 minutes", "Reading time should be '9-12 minutes'");
|
||||
});
|
||||
|
|
@ -37,7 +37,7 @@ add_task(async function() {
|
|||
await pageShownPromise;
|
||||
await ContentTask.spawn(browser, null, async function() {
|
||||
// make sure there is a reading time on the page and that it displays the correct information
|
||||
let readingTimeElement = content.document.getElementById("reader-estimated-time");
|
||||
let readingTimeElement = content.document.querySelector(".reader-estimated-time");
|
||||
ok(readingTimeElement, "Reading time element should be in document");
|
||||
is(readingTimeElement.textContent, "1 minute", "Reading time should be '1 minute'");
|
||||
});
|
||||
|
|
@ -57,7 +57,7 @@ add_task(async function() {
|
|||
await pageShownPromise;
|
||||
await ContentTask.spawn(browser, null, async function() {
|
||||
// make sure there is a reading time on the page and that it displays the correct information
|
||||
let readingTimeElement = content.document.getElementById("reader-estimated-time");
|
||||
let readingTimeElement = content.document.querySelector(".reader-estimated-time");
|
||||
ok(readingTimeElement, "Reading time element should be in document");
|
||||
is(readingTimeElement.textContent, "3 minutes", "Reading time should be '3 minutes'");
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,6 +2,9 @@
|
|||
* 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/. */
|
||||
|
||||
/* Avoid adding ID selector rules in this style sheet, since they could
|
||||
* inadvertently match elements in the article content. */
|
||||
|
||||
body {
|
||||
padding: 64px 51px;
|
||||
}
|
||||
|
|
@ -43,80 +46,80 @@ body.serif .remove-button {
|
|||
font-family: Georgia, "Times New Roman", serif;
|
||||
}
|
||||
|
||||
#container {
|
||||
.container {
|
||||
max-width: 30em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#container.font-size1 {
|
||||
.container.font-size1 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#container.font-size2 {
|
||||
.container.font-size2 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#container.font-size3 {
|
||||
.container.font-size3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#container.font-size4 {
|
||||
.container.font-size4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#container.font-size5 {
|
||||
.container.font-size5 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#container.font-size6 {
|
||||
.container.font-size6 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
#container.font-size7 {
|
||||
.container.font-size7 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#container.font-size8 {
|
||||
.container.font-size8 {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
#container.font-size9 {
|
||||
.container.font-size9 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
#container.content-width1 {
|
||||
.container.content-width1 {
|
||||
max-width: 20em;
|
||||
}
|
||||
|
||||
#container.content-width2 {
|
||||
.container.content-width2 {
|
||||
max-width: 25em;
|
||||
}
|
||||
|
||||
#container.content-width3 {
|
||||
.container.content-width3 {
|
||||
max-width: 30em;
|
||||
}
|
||||
|
||||
#container.content-width4 {
|
||||
.container.content-width4 {
|
||||
max-width: 35em;
|
||||
}
|
||||
|
||||
#container.content-width5 {
|
||||
.container.content-width5 {
|
||||
max-width: 40em;
|
||||
}
|
||||
|
||||
#container.content-width6 {
|
||||
.container.content-width6 {
|
||||
max-width: 45em;
|
||||
}
|
||||
|
||||
#container.content-width7 {
|
||||
.container.content-width7 {
|
||||
max-width: 50em;
|
||||
}
|
||||
|
||||
#container.content-width8 {
|
||||
.container.content-width8 {
|
||||
max-width: 55em;
|
||||
}
|
||||
|
||||
#container.content-width9 {
|
||||
.container.content-width9 {
|
||||
max-width: 60em;
|
||||
}
|
||||
|
||||
|
|
@ -189,7 +192,7 @@ body:not(.loaded) .toolbar:-moz-locale-dir(rtl) {
|
|||
|
||||
/* Loading/error message */
|
||||
|
||||
#reader-message {
|
||||
.reader-message {
|
||||
margin-top: 40px;
|
||||
display: none;
|
||||
text-align: center;
|
||||
|
|
@ -328,91 +331,91 @@ body:not(.loaded) .toolbar:-moz-locale-dir(rtl) {
|
|||
|
||||
/*======= Font style popup =======*/
|
||||
|
||||
#font-type-buttons,
|
||||
#font-size-buttons,
|
||||
#color-scheme-buttons,
|
||||
#content-width-buttons,
|
||||
#line-height-buttons {
|
||||
.font-type-buttons,
|
||||
.font-size-buttons,
|
||||
.color-scheme-buttons,
|
||||
.content-width-buttons,
|
||||
.line-height-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#font-type-buttons > button:first-child {
|
||||
.font-type-buttons > button:first-child {
|
||||
border-top-left-radius: 3px;
|
||||
}
|
||||
#font-type-buttons > button:last-child {
|
||||
.font-type-buttons > button:last-child {
|
||||
border-top-right-radius: 3px;
|
||||
}
|
||||
#color-scheme-buttons > button:first-child {
|
||||
.color-scheme-buttons > button:first-child {
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
#color-scheme-buttons > button:last-child {
|
||||
.color-scheme-buttons > button:last-child {
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
|
||||
#font-type-buttons > button,
|
||||
#font-size-buttons > button,
|
||||
#color-scheme-buttons > button,
|
||||
#content-width-buttons > button,
|
||||
#line-height-buttons > button {
|
||||
.font-type-buttons > button,
|
||||
.font-size-buttons > button,
|
||||
.color-scheme-buttons > button,
|
||||
.content-width-buttons > button,
|
||||
.line-height-buttons > button {
|
||||
text-align: center;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#font-type-buttons > button,
|
||||
#font-size-buttons > button,
|
||||
#content-width-buttons > button,
|
||||
#line-height-buttons > button {
|
||||
.font-type-buttons > button,
|
||||
.font-size-buttons > button,
|
||||
.content-width-buttons > button,
|
||||
.line-height-buttons > button {
|
||||
width: 50%;
|
||||
background-color: transparent;
|
||||
border-left: 1px solid #B5B5B5;
|
||||
border-bottom: 1px solid #B5B5B5;
|
||||
}
|
||||
|
||||
#color-scheme-buttons > button {
|
||||
.color-scheme-buttons > button {
|
||||
width: 33.33%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#color-scheme-buttons > .dark-button {
|
||||
.color-scheme-buttons > .dark-button {
|
||||
margin-top: -1px;
|
||||
height: 61px;
|
||||
}
|
||||
|
||||
#font-type-buttons > button:first-child,
|
||||
#font-size-buttons > button:first-child,
|
||||
#content-width-buttons > button:first-child,
|
||||
#line-height-buttons > button:first-child {
|
||||
.font-type-buttons > button:first-child,
|
||||
.font-size-buttons > button:first-child,
|
||||
.content-width-buttons > button:first-child,
|
||||
.line-height-buttons > button:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
#font-type-buttons > button {
|
||||
.font-type-buttons > button {
|
||||
display: inline-block;
|
||||
font-size: 62px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#font-size-buttons > button,
|
||||
#color-scheme-buttons > button,
|
||||
#content-width-buttons > button,
|
||||
#line-height-buttons > button {
|
||||
.font-size-buttons > button,
|
||||
.color-scheme-buttons > button,
|
||||
.content-width-buttons > button,
|
||||
.line-height-buttons > button {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
#font-type-buttons > button:active:hover,
|
||||
#font-type-buttons > button.selected,
|
||||
#color-scheme-buttons > button:active:hover,
|
||||
#color-scheme-buttons > button.selected {
|
||||
.font-type-buttons > button:active:hover,
|
||||
.font-type-buttons > button.selected,
|
||||
.color-scheme-buttons > button:active:hover,
|
||||
.color-scheme-buttons > button.selected {
|
||||
box-shadow: inset 0 -3px 0 0 #fc6420;
|
||||
}
|
||||
|
||||
#font-type-buttons > button:active:hover,
|
||||
#font-type-buttons > button.selected {
|
||||
.font-type-buttons > button:active:hover,
|
||||
.font-type-buttons > button.selected {
|
||||
border-bottom: 1px solid #FC6420;
|
||||
}
|
||||
|
||||
/* Make the serif button content the same size as the sans-serif button content. */
|
||||
#font-type-buttons > button > .description {
|
||||
.font-type-buttons > button > .description {
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
margin-top: -5px;
|
||||
|
|
@ -420,64 +423,64 @@ body:not(.loaded) .toolbar:-moz-locale-dir(rtl) {
|
|||
|
||||
/* Font sizes are different per-platform, so we need custom CSS to line them up. */
|
||||
%ifdef XP_MACOSX
|
||||
#font-type-buttons > .sans-serif-button > .name {
|
||||
.font-type-buttons > .sans-serif-button > .name {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#font-type-buttons > .sans-serif-button > .description {
|
||||
.font-type-buttons > .sans-serif-button > .description {
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
#font-type-buttons > .serif-button > .name {
|
||||
.font-type-buttons > .serif-button > .name {
|
||||
font-size: 63px;
|
||||
}
|
||||
%elifdef XP_WIN
|
||||
#font-type-buttons > .sans-serif-button > .name {
|
||||
.font-type-buttons > .sans-serif-button > .name {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
#font-type-buttons > .sans-serif-button > .description {
|
||||
.font-type-buttons > .sans-serif-button > .description {
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
#font-type-buttons > .serif-button > .name {
|
||||
.font-type-buttons > .serif-button > .name {
|
||||
font-size: 63px;
|
||||
}
|
||||
%else
|
||||
#font-type-buttons > .sans-serif-button > .name {
|
||||
.font-type-buttons > .sans-serif-button > .name {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#font-type-buttons > .sans-serif-button > .description {
|
||||
.font-type-buttons > .sans-serif-button > .description {
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
||||
#font-type-buttons > .serif-button > .name {
|
||||
.font-type-buttons > .serif-button > .name {
|
||||
font-size: 70px;
|
||||
}
|
||||
%endif
|
||||
|
||||
.button:hover,
|
||||
#font-size-buttons > button:hover,
|
||||
#font-type-buttons > button:hover,
|
||||
#content-width-buttons > button:hover,
|
||||
#line-height-buttons > button:hover {
|
||||
.font-size-buttons > button:hover,
|
||||
.font-type-buttons > button:hover,
|
||||
.content-width-buttons > button:hover,
|
||||
.line-height-buttons > button:hover {
|
||||
background-color: #ebebeb;
|
||||
}
|
||||
|
||||
.dropdown.open,
|
||||
.button:active,
|
||||
#font-size-buttons > button:active,
|
||||
#font-size-buttons > button.selected,
|
||||
#content-width-buttons > button:active,
|
||||
#content-width-buttons > button.selected,
|
||||
#line-height-buttons > button:active,
|
||||
#line-height-buttons > button.selected {
|
||||
.font-size-buttons > button:active,
|
||||
.font-size-buttons > button.selected,
|
||||
.content-width-buttons > button:active,
|
||||
.content-width-buttons > button.selected,
|
||||
.line-height-buttons > button:active,
|
||||
.line-height-buttons > button.selected {
|
||||
background-color: #dadada;
|
||||
}
|
||||
|
||||
/* Only used on Android */
|
||||
#font-size-sample {
|
||||
.font-size-sample {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -561,178 +564,178 @@ body:not(.loaded) .toolbar:-moz-locale-dir(rtl) {
|
|||
* must be added to CLASSES_TO_PRESERVE in ReaderMode.jsm, so that
|
||||
* Readability.js doesn't strip them out */
|
||||
|
||||
#moz-reader-content {
|
||||
.moz-reader-content {
|
||||
display: none;
|
||||
font-size: 1em;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
#moz-reader-content.line-height1 {
|
||||
.moz-reader-content.line-height1 {
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
#moz-reader-content.line-height2 {
|
||||
.moz-reader-content.line-height2 {
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
#moz-reader-content.line-height3 {
|
||||
.moz-reader-content.line-height3 {
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
#moz-reader-content.line-height4 {
|
||||
.moz-reader-content.line-height4 {
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
#moz-reader-content.line-height5 {
|
||||
.moz-reader-content.line-height5 {
|
||||
line-height: 1.8em;
|
||||
}
|
||||
|
||||
#moz-reader-content.line-height6 {
|
||||
.moz-reader-content.line-height6 {
|
||||
line-height: 2.0em;
|
||||
}
|
||||
|
||||
#moz-reader-content.line-height7 {
|
||||
.moz-reader-content.line-height7 {
|
||||
line-height: 2.2em;
|
||||
}
|
||||
|
||||
#moz-reader-content.line-height8 {
|
||||
.moz-reader-content.line-height8 {
|
||||
line-height: 2.4em;
|
||||
}
|
||||
|
||||
#moz-reader-content.line-height9 {
|
||||
.moz-reader-content.line-height9 {
|
||||
line-height: 2.6em;
|
||||
}
|
||||
|
||||
@media print {
|
||||
#moz-reader-content p,
|
||||
#moz-reader-content code,
|
||||
#moz-reader-content pre,
|
||||
#moz-reader-content blockquote,
|
||||
#moz-reader-content ul,
|
||||
#moz-reader-content ol,
|
||||
#moz-reader-content li,
|
||||
#moz-reader-content figure,
|
||||
#moz-reader-content .wp-caption {
|
||||
.moz-reader-content p,
|
||||
.moz-reader-content code,
|
||||
.moz-reader-content pre,
|
||||
.moz-reader-content blockquote,
|
||||
.moz-reader-content ul,
|
||||
.moz-reader-content ol,
|
||||
.moz-reader-content li,
|
||||
.moz-reader-content figure,
|
||||
.moz-reader-content .wp-caption {
|
||||
margin: 0 0 10px 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
#moz-reader-content h1,
|
||||
#moz-reader-content h2,
|
||||
#moz-reader-content h3 {
|
||||
.moz-reader-content h1,
|
||||
.moz-reader-content h2,
|
||||
.moz-reader-content h3 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#moz-reader-content h1 {
|
||||
.moz-reader-content h1 {
|
||||
font-size: 1.6em;
|
||||
line-height: 1.25em;
|
||||
}
|
||||
|
||||
#moz-reader-content h2 {
|
||||
.moz-reader-content h2 {
|
||||
font-size: 1.2em;
|
||||
line-height: 1.51em;
|
||||
}
|
||||
|
||||
#moz-reader-content h3 {
|
||||
.moz-reader-content h3 {
|
||||
font-size: 1em;
|
||||
line-height: 1.66em;
|
||||
}
|
||||
|
||||
#moz-reader-content a:link {
|
||||
.moz-reader-content a:link {
|
||||
text-decoration: underline;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#moz-reader-content a:link,
|
||||
#moz-reader-content a:link:hover,
|
||||
#moz-reader-content a:link:active {
|
||||
.moz-reader-content a:link,
|
||||
.moz-reader-content a:link:hover,
|
||||
.moz-reader-content a:link:active {
|
||||
color: #0095dd;
|
||||
}
|
||||
|
||||
#moz-reader-content a:visited {
|
||||
.moz-reader-content a:visited {
|
||||
color: #c2e;
|
||||
}
|
||||
|
||||
#moz-reader-content * {
|
||||
.moz-reader-content * {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#moz-reader-content p,
|
||||
#moz-reader-content p,
|
||||
#moz-reader-content code,
|
||||
#moz-reader-content pre,
|
||||
#moz-reader-content blockquote,
|
||||
#moz-reader-content ul,
|
||||
#moz-reader-content ol,
|
||||
#moz-reader-content li,
|
||||
#moz-reader-content figure,
|
||||
#moz-reader-content .wp-caption {
|
||||
.moz-reader-content p,
|
||||
.moz-reader-content p,
|
||||
.moz-reader-content code,
|
||||
.moz-reader-content pre,
|
||||
.moz-reader-content blockquote,
|
||||
.moz-reader-content ul,
|
||||
.moz-reader-content ol,
|
||||
.moz-reader-content li,
|
||||
.moz-reader-content figure,
|
||||
.moz-reader-content .wp-caption {
|
||||
margin: -10px -10px 20px -10px;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#moz-reader-content li {
|
||||
.moz-reader-content li {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#moz-reader-content li > ul,
|
||||
#moz-reader-content li > ol {
|
||||
.moz-reader-content li > ul,
|
||||
.moz-reader-content li > ol {
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
|
||||
#moz-reader-content p > img:only-child,
|
||||
#moz-reader-content p > a:only-child > img:only-child,
|
||||
#moz-reader-content .wp-caption img,
|
||||
#moz-reader-content figure img {
|
||||
.moz-reader-content p > img:only-child,
|
||||
.moz-reader-content p > a:only-child > img:only-child,
|
||||
.moz-reader-content .wp-caption img,
|
||||
.moz-reader-content figure img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#moz-reader-content img[moz-reader-center] {
|
||||
.moz-reader-content img[moz-reader-center] {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
#moz-reader-content .caption,
|
||||
#moz-reader-content .wp-caption-text
|
||||
#moz-reader-content figcaption {
|
||||
.moz-reader-content .caption,
|
||||
.moz-reader-content .wp-caption-text
|
||||
.moz-reader-content figcaption {
|
||||
font-size: 0.9em;
|
||||
line-height: 1.48em;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#moz-reader-content code,
|
||||
#moz-reader-content pre {
|
||||
.moz-reader-content code,
|
||||
.moz-reader-content pre {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
#moz-reader-content blockquote {
|
||||
.moz-reader-content blockquote {
|
||||
padding: 0;
|
||||
padding-inline-start: 16px;
|
||||
}
|
||||
|
||||
#moz-reader-content ul,
|
||||
#moz-reader-content ol {
|
||||
.moz-reader-content ul,
|
||||
.moz-reader-content ol {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#moz-reader-content ul {
|
||||
.moz-reader-content ul {
|
||||
padding-inline-start: 30px;
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
#moz-reader-content ol {
|
||||
.moz-reader-content ol {
|
||||
padding-inline-start: 30px;
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
/* Hide elements with common "hidden" class names */
|
||||
#moz-reader-content .visually-hidden,
|
||||
#moz-reader-content .visuallyhidden,
|
||||
#moz-reader-content .hidden,
|
||||
#moz-reader-content .invisible,
|
||||
#moz-reader-content .sr-only {
|
||||
.moz-reader-content .visually-hidden,
|
||||
.moz-reader-content .visuallyhidden,
|
||||
.moz-reader-content .hidden,
|
||||
.moz-reader-content .invisible,
|
||||
.moz-reader-content .sr-only {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
/* Avoid adding ID selector rules in this style sheet, since they could
|
||||
* inadvertently match elements in the article content. */
|
||||
|
||||
.narrating {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
|
@ -45,20 +48,20 @@ body.dark .narrate-word-highlight {
|
|||
border-bottom-color: #6f6f6f;
|
||||
}
|
||||
|
||||
#narrate-dropdown {
|
||||
.narrate-dropdown {
|
||||
--border-color: #e5e5e5;
|
||||
}
|
||||
|
||||
#narrate-toggle > svg {
|
||||
.narrate-toggle > svg {
|
||||
display: block;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.dropdown-popup button {
|
||||
.narrate-dropdown > .dropdown-popup button {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.dropdown-popup button:hover:not(:disabled) {
|
||||
.narrate-dropdown > .dropdown-popup button:hover:not(:disabled) {
|
||||
background-color: #eaeaea;
|
||||
}
|
||||
|
||||
|
|
@ -75,7 +78,7 @@ body.dark .narrate-word-highlight {
|
|||
|
||||
/* Control buttons */
|
||||
|
||||
#narrate-control > button {
|
||||
.narrate-control > button {
|
||||
background-size: 24px 24px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
|
|
@ -86,40 +89,40 @@ body.dark .narrate-word-highlight {
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#narrate-control > button:not(:first-child) {
|
||||
.narrate-control > button:not(:first-child) {
|
||||
border-left: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
#narrate-skip-previous {
|
||||
.narrate-skip-previous {
|
||||
border-top-left-radius: 3px;
|
||||
background-image: url("chrome://global/skin/narrate/back.svg");
|
||||
-moz-context-properties: fill;
|
||||
fill: rgb(128 128 128);
|
||||
}
|
||||
|
||||
#narrate-skip-next {
|
||||
.narrate-skip-next {
|
||||
border-top-right-radius: 3px;
|
||||
background-image: url("chrome://global/skin/narrate/forward.svg");
|
||||
-moz-context-properties: fill;
|
||||
fill: rgb(128 128 128);
|
||||
}
|
||||
|
||||
#narrate-skip-previous:disabled,
|
||||
#narrate-skip-next:disabled {
|
||||
.narrate-skip-previous:disabled,
|
||||
.narrate-skip-next:disabled {
|
||||
fill: rgb(128 128 128 / 50%);
|
||||
}
|
||||
|
||||
#narrate-start-stop {
|
||||
.narrate-start-stop {
|
||||
background-image: url("chrome://global/skin/narrate/start.svg");
|
||||
}
|
||||
|
||||
#narrate-dropdown.speaking #narrate-start-stop {
|
||||
.narrate-dropdown.speaking .narrate-start-stop {
|
||||
background-image: url("chrome://global/skin/narrate/stop.svg");
|
||||
}
|
||||
|
||||
/* Rate control */
|
||||
|
||||
#narrate-rate::before, #narrate-rate::after {
|
||||
.narrate-rate::before, .narrate-rate::after {
|
||||
content: '';
|
||||
width: 48px;
|
||||
height: 40px;
|
||||
|
|
@ -128,30 +131,30 @@ body.dark .narrate-word-highlight {
|
|||
background-size: 24px auto;
|
||||
}
|
||||
|
||||
#narrate-rate::before {
|
||||
.narrate-rate::before {
|
||||
background-image: url("chrome://global/skin/narrate/slow.svg");
|
||||
}
|
||||
|
||||
#narrate-rate::after {
|
||||
.narrate-rate::after {
|
||||
background-image: url("chrome://global/skin/narrate/fast.svg");
|
||||
}
|
||||
|
||||
#narrate-rate-input {
|
||||
.narrate-rate-input {
|
||||
margin: 0 1px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#narrate-rate-input::-moz-range-track {
|
||||
.narrate-rate-input::-moz-range-track {
|
||||
background-color: #979797;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
#narrate-rate-input::-moz-range-progress {
|
||||
.narrate-rate-input::-moz-range-progress {
|
||||
background-color: #2EA3FF;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
#narrate-rate-input::-moz-range-thumb {
|
||||
.narrate-rate-input::-moz-range-thumb {
|
||||
background-color: #808080;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
|
|
@ -159,7 +162,7 @@ body.dark .narrate-word-highlight {
|
|||
border-width: 0;
|
||||
}
|
||||
|
||||
#narrate-rate-input:active::-moz-range-thumb {
|
||||
.narrate-rate-input:active::-moz-range-thumb {
|
||||
background-color: #2EA3FF;
|
||||
}
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче