mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-21 01:05:45 +00:00
Bug 1503853 - Add progress overlay command buttons. r=bhackett
Reviewers: bhackett Tags: Bug #: 1503853 Differential Revision: https://phabricator.services.mozilla.com/D10551
This commit is contained in:
Jason Laster
parent
8a2c48dfe9
commit
d78a0d1bfe
@ -25,40 +25,34 @@ Cu.evalInSandbox(
|
||||
);
|
||||
const RecordReplayControl = sandbox.RecordReplayControl;
|
||||
|
||||
function el(window, tag, attrs, ...children) {
|
||||
const node = window.document.createElement(tag);
|
||||
for (const attr in attrs) {
|
||||
node[attr] = attrs[attr];
|
||||
}
|
||||
|
||||
if (attrs) {
|
||||
for (const child of children) {
|
||||
node.appendChild(child);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
// Windows in the middleman process are initially set up as about:blank pages.
|
||||
// This method fills them in with a canvas filling the tab, and an overlay that
|
||||
// can be displayed over that canvas.
|
||||
function setupContents(window) {
|
||||
// The middlemanOverlay element is shown when the active child is replaying.
|
||||
const overlay = (window.middlemanOverlay = window.document.createElement("div"));
|
||||
overlay.style.position = "absolute";
|
||||
overlay.style.visibility = "hidden";
|
||||
overlay.style.backgroundColor = "#F9F9FA";
|
||||
overlay.style.width = "100%";
|
||||
overlay.style.height = "29px";
|
||||
overlay.style.left = "0px";
|
||||
overlay.style.bottom = "0px";
|
||||
overlay.style["border-top"] = "1px solid #DCE1E4";
|
||||
// The overlay shows the recording timeline
|
||||
window.document.body.appendChild(createOverlay(window));
|
||||
|
||||
// The middlemanProgressBar element is contained in the overlay and shows any
|
||||
// progress made on the current operation.
|
||||
const progressBar = window.document.createElement("div");
|
||||
progressBar.style.position = "relative";
|
||||
progressBar.style.width = "calc(100% - 20px)";
|
||||
progressBar.style.height = "6px";
|
||||
progressBar.style.background = "#DCDCDC";
|
||||
progressBar.style.margin = "11px 10px";
|
||||
overlay.appendChild(progressBar);
|
||||
|
||||
const progress = (window.middlemanProgress = window.document.createElement("div"));
|
||||
progress.style.position = "absolute";
|
||||
progress.style.width = "0";
|
||||
progress.style.height = "100%";
|
||||
progress.style.background = "#B7B6B6";
|
||||
|
||||
progressBar.appendChild(progress);
|
||||
|
||||
window.document.body.prepend(overlay);
|
||||
window.document.querySelector(".play-button")
|
||||
.onclick = () => RecordReplayControl.resume(true);
|
||||
window.document.querySelector(".rewind-button")
|
||||
.onclick = () => RecordReplayControl.resume(false);
|
||||
window.document.querySelector(".pause-button")
|
||||
.onclick = () => RecordReplayControl.pause();
|
||||
|
||||
// The middlemanCanvas element fills the tab's contents.
|
||||
const canvas = window.middlemanCanvas = window.document.createElement("canvas");
|
||||
@ -67,11 +61,125 @@ function setupContents(window) {
|
||||
window.document.body.prepend(canvas);
|
||||
}
|
||||
|
||||
function createOverlay(window) {
|
||||
const div = (attrs, ...children) => el(window, "div", attrs, ...children);
|
||||
|
||||
const overlayStyles = `
|
||||
:root {
|
||||
--pause-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M5 12.503l.052-9a.5.5 0 0 0-1-.006l-.052 9a.5.5 0 0 0 1 .006zM12 12.497l-.05-9A.488.488 0 0 0 11.474 3a.488.488 0 0 0-.473.503l.05 9a.488.488 0 0 0 .477.497.488.488 0 0 0 .473-.503z"/></g></svg>');
|
||||
--play-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M4 12.5l8-5-8-5v10zm-1 0v-10a1 1 0 0 1 1.53-.848l8 5a1 1 0 0 1 0 1.696l-8 5A1 1 0 0 1 3 12.5z" /></g></svg>');
|
||||
}
|
||||
|
||||
#overlay {
|
||||
position: absolute;
|
||||
background: #F9F9FA;
|
||||
width: 100%;
|
||||
height: 29px;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
border-top: 1px solid #DCE1E4;
|
||||
}
|
||||
|
||||
.overlay-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.progressBar {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background: #DCDCDC;
|
||||
margin: 11px 10px 11px 0;
|
||||
}
|
||||
|
||||
.progress {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
background: #B7B6B6;
|
||||
}
|
||||
|
||||
.commands {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.command-button {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.command-button:hover {
|
||||
background: #efefef;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 15px;
|
||||
height: 19px;
|
||||
background: #6A6A6A;
|
||||
mask-size: 15px 19px;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.play-button {
|
||||
mask-image: var(--play-image);
|
||||
margin-right: 5px;
|
||||
margin-left: 2px;
|
||||
display: none;
|
||||
}
|
||||
.rewind-button {
|
||||
mask-image: var(--play-image);
|
||||
transform: scaleX(-1);
|
||||
margin-left: 5px;
|
||||
margin-right: 2px;
|
||||
display: none;
|
||||
}
|
||||
.pause-button {
|
||||
mask-image: var(--pause-image);
|
||||
margin-left: 5px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.paused .pause-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.paused .play-button {
|
||||
display: block;
|
||||
}
|
||||
.paused .rewind-button {
|
||||
display: block;
|
||||
}
|
||||
`;
|
||||
|
||||
return div(
|
||||
{ id: "overlay", className: "paused" },
|
||||
el(window, "style", { innerHTML: overlayStyles }),
|
||||
div(
|
||||
{ className: "overlay-container " },
|
||||
div(
|
||||
{ className: "commands" },
|
||||
div(
|
||||
{ className: "command-button" },
|
||||
div({ className: "rewind-button btn" })
|
||||
),
|
||||
div(
|
||||
{ className: "command-button" },
|
||||
div({ className: "play-button btn" })
|
||||
),
|
||||
div(
|
||||
{ className: "command-button" },
|
||||
div({ className: "pause-button btn" })
|
||||
)
|
||||
),
|
||||
div({ className: "progressBar" }, div({ className: "progress" }))
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function getOverlay(window) {
|
||||
if (!window.middlemanOverlay) {
|
||||
if (!window.document.querySelector("#overlay")) {
|
||||
setupContents(window);
|
||||
}
|
||||
return window.middlemanOverlay;
|
||||
return window.document.querySelector("#overlay");
|
||||
}
|
||||
|
||||
function getCanvas(window) {
|
||||
@ -138,13 +246,10 @@ function updateWindowOverlay(window) {
|
||||
}
|
||||
|
||||
const overlay = getOverlay(window);
|
||||
const position = RecordReplayControl.recordingPosition() || 1;
|
||||
if (position === undefined) {
|
||||
overlay.style.visibility = "hidden";
|
||||
} else {
|
||||
overlay.style.visibility = "visible";
|
||||
window.middlemanProgress.style.width = (Math.round(position * 10000) / 100) + "%";
|
||||
}
|
||||
const position = RecordReplayControl.recordingPosition();
|
||||
overlay.className = position ? "paused" : "";
|
||||
overlay.querySelector(".progress")
|
||||
.style.width = (Math.round((position || 1) * 10000) / 100) + "%";
|
||||
}
|
||||
|
||||
// Entry point for when we need to update the overlay's contents or visibility.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user