mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-24 05:11:16 +00:00
Backed out changeset c5ce4a2b9ddb (bug 1764120) for causing for causing mochitest failures on browser_fontSize_change.js. CLOSED TREE
This commit is contained in:
criss
parent
bd5fdde02e
commit
915e00a5a7
@ -296,7 +296,6 @@ pref("media.videocontrols.picture-in-picture.video-toggle.always-show", false);
|
||||
pref("media.videocontrols.picture-in-picture.video-toggle.min-video-secs", 45);
|
||||
pref("media.videocontrols.picture-in-picture.video-toggle.position", "right");
|
||||
pref("media.videocontrols.picture-in-picture.video-toggle.has-used", false);
|
||||
pref("media.videocontrols.picture-in-picture.display-text-tracks.toggle.enabled", true);
|
||||
pref("media.videocontrols.picture-in-picture.display-text-tracks.size", "medium");
|
||||
pref("media.videocontrols.keyboard-tab-to-all-controls", true);
|
||||
|
||||
|
||||
@ -1332,6 +1332,9 @@ class PictureInPictureChild extends JSWindowActorChild {
|
||||
}
|
||||
break;
|
||||
}
|
||||
case TEXT_TRACK_FONT_SIZE:
|
||||
this.setTextTrackFontSize();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1388,15 +1391,6 @@ class PictureInPictureChild extends JSWindowActorChild {
|
||||
this.updateWebVTTTextTracksDisplay(cues);
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle the visibility of the subtitles in the PiP window
|
||||
*/
|
||||
toggleTextTracks() {
|
||||
let textTracks = this.document.getElementById("texttracks");
|
||||
textTracks.style.display =
|
||||
textTracks.style.display === "none" ? "" : "none";
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes existing text tracks on the Picture in Picture window.
|
||||
*
|
||||
@ -1490,7 +1484,6 @@ class PictureInPictureChild extends JSWindowActorChild {
|
||||
|
||||
if (!this.isSubtitlesEnabled) {
|
||||
this.isSubtitlesEnabled = true;
|
||||
this.sendAsyncMessage("PictureInPicture:ShowSubtitlesButton");
|
||||
}
|
||||
|
||||
let allCuesArray = [...textTrackCues];
|
||||
@ -1802,14 +1795,6 @@ class PictureInPictureChild extends JSWindowActorChild {
|
||||
}
|
||||
break;
|
||||
}
|
||||
case "PictureInPicture:ToggleTextTracks": {
|
||||
this.toggleTextTracks();
|
||||
break;
|
||||
}
|
||||
case "PictureInPicture:ChangeFontSizeTextTracks": {
|
||||
this.setTextTrackFontSize();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1831,10 +1816,6 @@ class PictureInPictureChild extends JSWindowActorChild {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the font size on the PiP window using the current font size value from
|
||||
* the "media.videocontrols.picture-in-picture.display-text-tracks.size" pref
|
||||
*/
|
||||
setTextTrackFontSize() {
|
||||
const fontSize = Services.prefs.getStringPref(
|
||||
TEXT_TRACK_FONT_SIZE,
|
||||
@ -1864,6 +1845,8 @@ class PictureInPictureChild extends JSWindowActorChild {
|
||||
this.observerFunction
|
||||
);
|
||||
|
||||
Services.prefs.addObserver(TEXT_TRACK_FONT_SIZE, this.observerFunction);
|
||||
|
||||
let originatingWindow = originatingVideo.ownerGlobal;
|
||||
if (originatingWindow) {
|
||||
originatingWindow.addEventListener("pagehide", this);
|
||||
@ -2463,9 +2446,6 @@ class PictureInPictureChildVideoWrapper {
|
||||
updatePiPTextTracks(text) {
|
||||
if (!this.#PictureInPictureChild.isSubtitlesEnabled && text) {
|
||||
this.#PictureInPictureChild.isSubtitlesEnabled = true;
|
||||
this.#PictureInPictureChild.sendAsyncMessage(
|
||||
"PictureInPicture:ShowSubtitlesButton"
|
||||
);
|
||||
}
|
||||
let pipWindowTracksContainer = this.#PictureInPictureChild.document.getElementById(
|
||||
"texttracks"
|
||||
|
||||
@ -130,13 +130,6 @@ class PictureInPictureParent extends JSWindowActorParent {
|
||||
}
|
||||
break;
|
||||
}
|
||||
case "PictureInPicture:ShowSubtitlesButton": {
|
||||
let player = PictureInPicture.getWeakPipPlayer(this);
|
||||
if (player) {
|
||||
player.showSubtitlesButton();
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,10 +17,6 @@ const AUDIO_TOGGLE_ENABLED_PREF =
|
||||
"media.videocontrols.picture-in-picture.audio-toggle.enabled";
|
||||
const KEYBOARD_CONTROLS_ENABLED_PREF =
|
||||
"media.videocontrols.picture-in-picture.keyboard-controls.enabled";
|
||||
const CAPTIONS_TOGGLE_ENABLED_PREF =
|
||||
"media.videocontrols.picture-in-picture.display-text-tracks.toggle.enabled";
|
||||
const TEXT_TRACK_FONT_SIZE_PREF =
|
||||
"media.videocontrols.picture-in-picture.display-text-tracks.size";
|
||||
|
||||
// Time to fade the Picture-in-Picture video controls after first opening.
|
||||
const CONTROLS_FADE_TIMEOUT_MS = 3000;
|
||||
@ -74,10 +70,6 @@ function setIsMutedState(isMuted) {
|
||||
Player.isMuted = isMuted;
|
||||
}
|
||||
|
||||
function showSubtitlesButton() {
|
||||
Player.showSubtitlesButton();
|
||||
}
|
||||
|
||||
/**
|
||||
* The Player object handles initializing the player, holds state, and handles
|
||||
* events for updating state.
|
||||
@ -179,27 +171,10 @@ let Player = {
|
||||
this.controls.addEventListener("mouseleave", () => {
|
||||
this.onMouseLeave();
|
||||
});
|
||||
this.controls.addEventListener("mouseout", event => {
|
||||
this.onMouseOut(event);
|
||||
});
|
||||
this.controls.addEventListener("mouseenter", () => {
|
||||
this.onMouseEnter();
|
||||
});
|
||||
|
||||
for (let radio of document.querySelectorAll(
|
||||
'input[type=radio][name="cc-size"]'
|
||||
)) {
|
||||
radio.addEventListener("change", event => {
|
||||
this.onSubtitleChange(event.target.id);
|
||||
});
|
||||
}
|
||||
|
||||
document
|
||||
.querySelector("#subtitles-toggle")
|
||||
.addEventListener("change", () => {
|
||||
this.onToggleChange();
|
||||
});
|
||||
|
||||
// If the content process hosting the video crashes, let's
|
||||
// just close the window for now.
|
||||
browser.addEventListener("oop-browser-crashed", this);
|
||||
@ -230,18 +205,6 @@ let Player = {
|
||||
window.requestAnimationFrame(() => {
|
||||
window.focus();
|
||||
});
|
||||
|
||||
let fontSize = Services.prefs.getCharPref(
|
||||
TEXT_TRACK_FONT_SIZE_PREF,
|
||||
"medium"
|
||||
);
|
||||
|
||||
// fallback to medium if the pref value is not a valid option
|
||||
if (fontSize === "small" || fontSize === "large") {
|
||||
document.querySelector(`#${fontSize}`).checked = "true";
|
||||
} else {
|
||||
document.querySelector("#medium").checked = "true";
|
||||
}
|
||||
},
|
||||
|
||||
uninit() {
|
||||
@ -366,19 +329,6 @@ let Player = {
|
||||
},
|
||||
|
||||
closePipWindow(closeData) {
|
||||
// Set the subtitles font size prefs
|
||||
Services.prefs.setBoolPref(
|
||||
CAPTIONS_TOGGLE_ENABLED_PREF,
|
||||
document.querySelector("#subtitles-toggle").checked
|
||||
);
|
||||
for (let radio of document.querySelectorAll(
|
||||
'input[type=radio][name="cc-size"]'
|
||||
)) {
|
||||
if (radio.checked) {
|
||||
Services.prefs.setCharPref(TEXT_TRACK_FONT_SIZE_PREF, radio.id);
|
||||
break;
|
||||
}
|
||||
}
|
||||
const { reason } = closeData;
|
||||
PictureInPicture.closeSinglePipWindow({ reason, actorRef: this.actor });
|
||||
},
|
||||
@ -426,11 +376,6 @@ let Player = {
|
||||
PictureInPicture.focusTabAndClosePip(window, this.actor);
|
||||
break;
|
||||
}
|
||||
|
||||
case "closed-caption": {
|
||||
document.querySelector("#settings").classList.toggle("hide");
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -442,15 +387,6 @@ let Player = {
|
||||
},
|
||||
|
||||
onKeyDown(event) {
|
||||
// We don't want to send a keydown event if the event target was one of the
|
||||
// font sizes in the settings panel
|
||||
if (
|
||||
event.target.parentElement?.parentElement?.classList?.contains(
|
||||
"font-size-selection"
|
||||
)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
this.actor.sendAsyncMessage("PictureInPicture:KeyDown", {
|
||||
altKey: event.altKey,
|
||||
shiftKey: event.shiftKey,
|
||||
@ -460,28 +396,6 @@ let Player = {
|
||||
});
|
||||
},
|
||||
|
||||
onSubtitleChange(size) {
|
||||
Services.prefs.setCharPref(TEXT_TRACK_FONT_SIZE_PREF, size);
|
||||
|
||||
this.actor.sendAsyncMessage("PictureInPicture:ChangeFontSizeTextTracks");
|
||||
},
|
||||
|
||||
onToggleChange() {
|
||||
// The subtitles toggle has been click in the settings panel so we toggle
|
||||
// the overlay above the font sizes and send a message to toggle the
|
||||
// visibility of the subtitles and set the toggle pref
|
||||
document
|
||||
.querySelector(".font-size-selection")
|
||||
.classList.toggle("font-size-overlay");
|
||||
this.actor.sendAsyncMessage("PictureInPicture:ToggleTextTracks");
|
||||
|
||||
this.captionsToggleEnabled = !this.captionsToggleEnabled;
|
||||
Services.prefs.setBoolPref(
|
||||
CAPTIONS_TOGGLE_ENABLED_PREF,
|
||||
this.captionsToggleEnabled
|
||||
);
|
||||
},
|
||||
|
||||
/**
|
||||
* PiP Corner Snapping Helper Function
|
||||
* Determines the quadrant the PiP window is currently in.
|
||||
@ -695,33 +609,6 @@ let Player = {
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Hide the settings panel when a mouse out occurs
|
||||
* @param {Event} event The mouseout event
|
||||
*/
|
||||
onMouseOut(event) {
|
||||
if (
|
||||
(event.target.id === "controls" || event.target.id === "close") &&
|
||||
!event.relatedTarget
|
||||
) {
|
||||
document.querySelector("#settings").classList.add("hide");
|
||||
}
|
||||
},
|
||||
|
||||
showSubtitlesButton() {
|
||||
let subtitlesContent = document.querySelectorAll(".subtitles");
|
||||
for (let ele of subtitlesContent) {
|
||||
ele.hidden = false;
|
||||
}
|
||||
this.captionsToggleEnabled = true;
|
||||
// If the CAPTIONS_TOGGLE_ENABLED_PREF pref is false then we will click
|
||||
// the UI toggle to change the toggle to unchecked. This will call
|
||||
// onToggleChange where this.captionsToggleEnabled will be updated
|
||||
if (!Services.prefs.getBoolPref(CAPTIONS_TOGGLE_ENABLED_PREF, true)) {
|
||||
document.querySelector("#subtitles-toggle").click();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Event handler for resizing the PiP Window
|
||||
*
|
||||
|
||||
@ -51,38 +51,6 @@
|
||||
<div class="gap" hidden="true"></div>
|
||||
<button id="audio" class="control-item" hidden="true" tabindex="1"
|
||||
data-l10n-id="pictureinpicture-mute"/>
|
||||
<div class="gap subtitles" hidden="true"></div>
|
||||
<button id="closed-caption" class="control-item closed-caption subtitles" hidden="true" tabindex="1"></button>
|
||||
<div id="settings" class="hide">
|
||||
<div class="panel">
|
||||
<div class="box">
|
||||
<div class="subtitle-grid">
|
||||
<label data-l10n-id="pictureinpicture-subtitles-label" class="bold"></label>
|
||||
<label class="switch">
|
||||
<input id="subtitles-toggle" type="checkbox" tabindex="1" checked=""/>
|
||||
<span class="slider" role="presentation"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="grey-line"></div>
|
||||
<div class="font-size-selection">
|
||||
<label data-l10n-id="pictureinpicture-font-size-label" class="bold"></label>
|
||||
<label>
|
||||
<input id="small" type="radio" name="cc-size" tabindex="1"/>
|
||||
<span data-l10n-id="pictureinpicture-font-size-small"></span>
|
||||
</label>
|
||||
<label>
|
||||
<input id="medium" type="radio" name="cc-size" tabindex="1"/>
|
||||
<span data-l10n-id="pictureinpicture-font-size-medium"></span>
|
||||
</label>
|
||||
<label>
|
||||
<input id="large" type="radio" name="cc-size" tabindex="1"/>
|
||||
<span data-l10n-id="pictureinpicture-font-size-large"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="arrow"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@ -19,13 +19,3 @@ pictureinpicture-unpip =
|
||||
|
||||
pictureinpicture-close =
|
||||
.aria-label = Close
|
||||
|
||||
pictureinpicture-subtitles-label = Subtitles
|
||||
|
||||
pictureinpicture-font-size-label = Font size
|
||||
|
||||
pictureinpicture-font-size-small = Small
|
||||
|
||||
pictureinpicture-font-size-medium = Medium
|
||||
|
||||
pictureinpicture-font-size-large = Large
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
<!-- 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/.-->
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="m13.15 2.25.6.6v7.3l-.6.6h-1.9c-.28 0-.5.22-.5.5v2.15l-3.04-2.43c-.18-.14-.4-.22-.62-.22H2.85l-.6-.6v-7.3l.6-.6h10.3ZM13 1H3c-1.1 0-2 .9-2 2v7c0 1.1.9 2 2 2h4l3.75 3H12v-3h1c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2ZM6.27 7.73H4.86a.62.62 0 0 0-.62.62v.01c0 .342.278.62.62.62h1.41a.62.62 0 0 0 .62-.62v-.01a.62.62 0 0 0-.62-.62Zm2.24 0h2.63a.62.62 0 0 1 .62.62v.01a.62.62 0 0 1-.62.62H8.51a.62.62 0 0 1-.62-.62v-.01a.62.62 0 0 1 .62-.62Zm2.63-2.75H9.73a.62.62 0 0 0-.62.62v.01c0 .342.278.62.62.62h1.41a.62.62 0 0 0 .62-.62V5.6a.62.62 0 0 0-.62-.62Zm-6.28 0h2.63a.62.62 0 0 1 .62.62v.01a.62.62 0 0 1-.62.62H4.86a.62.62 0 0 1-.62-.62V5.6a.62.62 0 0 1 .62-.62Z" fill="context-fill"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB |
@ -36,7 +36,7 @@ toolkit.jar:
|
||||
skin/classic/global/media/closedCaptionButton-cc-on.svg (../../shared/media/closedCaptionButton-cc-on.svg)
|
||||
skin/classic/global/media/fullscreenEnterButton.svg (../../shared/media/fullscreenEnterButton.svg)
|
||||
skin/classic/global/media/fullscreenExitButton.svg (../../shared/media/fullscreenExitButton.svg)
|
||||
skin/classic/global/media/closed-caption-settings-button.svg (../../shared/media/closed-caption-settings-button.svg)
|
||||
|
||||
# Text recognition widget
|
||||
|
||||
skin/classic/global/media/textrecognition.css (../../shared/media/textrecognition.css)
|
||||
|
||||
@ -48,12 +48,9 @@ browser {
|
||||
#controls button {
|
||||
appearance: none;
|
||||
border: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#controls[keying] button:-moz-focusring,
|
||||
.switch > input:focus-visible + .slider,
|
||||
.font-size-selection > label > input:focus-visible {
|
||||
#controls[keying] button:-moz-focusring {
|
||||
outline: 2px solid #fff;
|
||||
box-shadow: 1px 2px 5px #000;
|
||||
}
|
||||
@ -155,147 +152,3 @@ body:fullscreen #controls[showing]:hover .control-item:not(:hover) {
|
||||
#unpip:-moz-locale-dir(rtl) {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.closed-caption {
|
||||
background-image: url("chrome://global/skin/media/closed-caption-settings-button.svg");
|
||||
color: white;
|
||||
}
|
||||
|
||||
.closed-caption:dir(rtl) {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.box {
|
||||
-moz-window-dragging: no-drag;
|
||||
background-color: #2B2A33;
|
||||
text-align: start;
|
||||
font-size: 1em;
|
||||
width: 186px;
|
||||
padding: 0 8px;
|
||||
margin: 0;
|
||||
margin-inline-start: -70px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 590;
|
||||
}
|
||||
|
||||
.box > input[type="radio"]{
|
||||
background-color: red;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.box label:not(.switch) {
|
||||
color: white;
|
||||
padding: 8px;
|
||||
font-family: sans-serif;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: absolute;
|
||||
bottom: 22px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
border: 10px solid transparent;
|
||||
border-top-color: #2B2A33;
|
||||
width: 0;
|
||||
height: 0;
|
||||
inset-inline-start: -25px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.font-size-selection {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.grey-line {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #8F8F9D;
|
||||
}
|
||||
|
||||
.font-size-selection > label > input[type="radio"] {
|
||||
appearance: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid #8f8f9d;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.font-size-selection > label > input[type="radio"]:checked {
|
||||
border: 4px solid #00ddff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.subtitle-grid {
|
||||
display: grid;
|
||||
grid-template-rows: auto;
|
||||
grid-template-columns: auto 46px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 32px;
|
||||
height: 16px;
|
||||
grid-column: 2;
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
transition: transform 250ms;
|
||||
border-radius: 13px;
|
||||
background-color: #55545f;
|
||||
}
|
||||
|
||||
.slider::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
inset-inline-start: 2px;
|
||||
bottom: 2px;
|
||||
background-color: #2B2A33;
|
||||
transition: transform 250ms;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: #00ddff;
|
||||
}
|
||||
|
||||
input:checked + .slider::before {
|
||||
transform: translateX(16px);
|
||||
}
|
||||
|
||||
input:checked + .slider:dir(rtl)::before {
|
||||
transform: translateX(-16px);
|
||||
}
|
||||
|
||||
.font-size-overlay {
|
||||
opacity: 0.4;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (max-height: 325px) {
|
||||
.subtitles {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user