Adding upstream version 86.0.1.upstream/86.0.1upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

1 files changed, 263 insertions, 0 deletions

diff --git a/toolkit/themes/shared/narrate.css b/toolkit/themes/shared/narrate.css
new file mode 100644
index 0000000000..fa23670fd9
--- /dev/null
+++ b/toolkit/themes/shared/narrate.css
@@ -0,0 +1,263 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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. */
+:root {
+  --blue-60: #0060df;
+}
+.narrating {
+  position: relative;
+  z-index: 1;
+}
+
+body.light .narrating {
+  background-color: #ffc;
+}
+
+body.sepia .narrating {
+  background-color: #e0d7c5;
+}
+
+body.dark .narrating {
+  background-color: #242424;
+}
+
+.narrate-word-highlight {
+  position: absolute;
+  display: none;
+  transform: translate(-50%, calc(-50% - 2px));
+  z-index: -1;
+  border-bottom-style: solid;
+  border-bottom-width: 7px;
+  transition: left 0.1s ease, width 0.1s ease;
+}
+
+.narrating > .narrate-word-highlight {
+  display: inline-block;
+}
+
+.narrate-word-highlight.newline {
+  transition: none;
+}
+
+body.light .narrate-word-highlight {
+  border-bottom-color: #ffe087;
+}
+
+body.sepia .narrate-word-highlight {
+  border-bottom-color: #bdb5a5;
+}
+
+body.dark .narrate-word-highlight {
+  border-bottom-color: #6f6f6f;
+}
+
+.narrate-dropdown {
+  --border-color: #e5e5e5;
+  --current-voice: #7f7f7f;
+}
+.dark .narrate-dropdown {
+  --border-color: #65646a;
+  --current-voice: #a09eac;
+}
+
+.narrate-toggle {
+  background-image: url("chrome://global/skin/narrate/headphone.svg");
+}
+
+.speaking .narrate-toggle {
+  /* This shows with an animation. */
+  background-image: url("chrome://global/skin/narrate/headphone-active.svg");
+}
+
+.narrate-dropdown > .dropdown-popup button {
+  background-color: transparent;
+}
+
+.narrate-dropdown > .dropdown-popup button:enabled:hover,
+.narrate-dropdown > .dropdown-popup button:enabled:focus {
+  background-color: var(--popup-button-hover);
+}
+
+.narrate-dropdown > .dropdown-popup {
+  top: -34px;
+}
+
+.narrate-dropdown .dropdown-arrow {
+  top: 40px;
+}
+
+.narrate-row {
+  display: flex;
+  align-items: center;
+  min-height: 40px;
+  box-sizing: border-box;
+}
+
+.narrate-row:not(.narrate-voices) {
+  direction: ltr;
+}
+
+.narrate-row:not(:first-child) {
+  border-top: 1px solid var(--border-color);
+}
+
+/* Control buttons */
+
+.narrate-control > button {
+  background-size: 24px 24px;
+  background-repeat: no-repeat;
+  background-position: center center;
+  height: 64px;
+  width: 82px;
+  border: none;
+  color: #666;
+  box-sizing: border-box;
+}
+
+.narrate-control > button:not(:first-child) {
+  border-inline-start: 1px solid var(--popup-line);
+}
+
+.narrate-skip-previous {
+  border-top-left-radius: 3px;
+  background-image: url("chrome://global/skin/narrate/back.svg");
+}
+
+.narrate-skip-next {
+  border-top-right-radius: 3px;
+  background-image: url("chrome://global/skin/narrate/forward.svg");
+}
+
+.narrate-start-stop {
+  background-image: url("chrome://global/skin/narrate/start.svg");
+}
+
+.narrate-dropdown.speaking .narrate-start-stop {
+  background-image: url("chrome://global/skin/narrate/stop.svg");
+}
+
+/* Rate control */
+
+.narrate-rate::before, .narrate-rate::after {
+  content: '';
+  width: 48px;
+  height: 40px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 24px auto;
+  -moz-context-properties: fill;
+  fill: var(--icon-fill);
+}
+
+.narrate-rate::before {
+  background-image: url("chrome://global/skin/narrate/slow.svg");
+}
+
+.narrate-rate::after {
+  background-image: url("chrome://global/skin/narrate/fast.svg");
+}
+
+.narrate-rate-input {
+  margin: 0 1px;
+  flex-grow: 1;
+  background-color: var(--popup-bgcolor);
+  width: 148px;
+}
+
+.narrate-rate-input::-moz-range-track {
+  background-color: var(--icon-fill);
+  height: 2px;
+}
+
+.narrate-rate-input::-moz-range-progress {
+  background-color: var(--active-color);
+  height: 2px;
+}
+
+.narrate-rate-input::-moz-range-thumb {
+  background-color: var(--icon-fill);
+  height: 16px;
+  width: 16px;
+  border-radius: 8px;
+  border-width: 0;
+}
+
+.narrate-rate-input:active::-moz-range-thumb {
+  background-color: var(--blue-60);
+}
+
+/* Voice selection */
+
+.voiceselect {
+  width: 246px;
+}
+
+.voiceselect > button.select-toggle,
+.voiceselect > .options > button.option {
+  appearance: none;
+  border: none;
+  width: 100%;
+  min-height: 40px;
+}
+
+.voiceselect.open > button.select-toggle {
+  border-bottom: 1px solid var(--border-color);
+}
+
+.voiceselect > button.select-toggle::after {
+  content: '';
+  background-image: url("chrome://global/skin/narrate/arrow.svg");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 12px 12px;
+  display: inline-block;
+  width: 1.5em;
+  height: 1em;
+  vertical-align: middle;
+}
+
+.voiceselect > .options > button.option:not(:first-child) {
+  border-top: 1px solid var(--border-color);
+}
+
+.voiceselect > .options > button.option  {
+  box-sizing: border-box;
+}
+
+.voiceselect > .options:not(.hovering) > button.option:focus {
+  background-color: #eaeaea;
+}
+
+body.dark .voiceselect > .options:not(.hovering) > button.option:focus {
+  background-color: var(--popup-button-hover);
+}
+
+.voiceselect > .options:not(.hovering) > button.option:hover:not(:focus) {
+  background-color: transparent;
+}
+
+.voiceselect > .options > button.option::-moz-focus-inner {
+  outline: none;
+  border: 0;
+}
+
+.voiceselect > .options {
+  display: none;
+  overflow-y: auto;
+}
+
+.voiceselect.open > .options {
+  display: block;
+}
+
+.current-voice {
+  color: var(--current-voice);
+}
+
+.voiceselect:not(.open) > button,
+.voiceselect .option:last-child {
+  border-radius: 0 0 3px 3px;
+}