зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1565375 - The pause overlay should include stepping buttons. r=jlast
Differential Revision: https://phabricator.services.mozilla.com/D43516 --HG-- extra : moz-landing-system : lando
This commit is contained in:
Jason Laster
Родитель
e57f38026d
Коммит
a3fb20f8c6
|
|
@ -70,7 +70,7 @@ if (isDevelopment()) {
|
|||
pref("devtools.debugger.features.log-points", true);
|
||||
pref("devtools.debugger.features.inline-preview", true);
|
||||
pref("devtools.debugger.log-actions", true);
|
||||
pref("devtools.debugger.features.overlay-step-buttons", false);
|
||||
pref("devtools.debugger.features.overlay-step-buttons", true);
|
||||
}
|
||||
|
||||
export const prefs = new PrefsHelper("devtools", {
|
||||
|
|
|
|||
|
|
@ -83,4 +83,5 @@ pref("devtools.debugger.features.event-listeners-breakpoints", true);
|
|||
pref("devtools.debugger.features.dom-mutation-breakpoints", true);
|
||||
pref("devtools.debugger.features.log-points", true);
|
||||
pref("devtools.debugger.features.overlay-step-buttons", false);
|
||||
pref("devtools.debugger.features.overlay-step-buttons", true);
|
||||
pref("devtools.debugger.features.inline-preview", true);
|
||||
|
|
|
|||
|
|
@ -123,7 +123,7 @@
|
|||
|
||||
/* Highlighter - Infobar */
|
||||
|
||||
:-moz-native-anonymous [class$=infobar-container] {
|
||||
:-moz-native-anonymous [class$="infobar-container"] {
|
||||
position: absolute;
|
||||
max-width: 95%;
|
||||
|
||||
|
|
@ -131,7 +131,7 @@
|
|||
font-size: var(--highlighter-font-size);
|
||||
}
|
||||
|
||||
:-moz-native-anonymous [class$=infobar] {
|
||||
:-moz-native-anonymous [class$="infobar"] {
|
||||
position: relative;
|
||||
|
||||
padding: 5px;
|
||||
|
|
@ -148,18 +148,21 @@
|
|||
|
||||
/* Arrows */
|
||||
|
||||
:-moz-native-anonymous [class$=infobar-container] > [class$=infobar]:before {
|
||||
:-moz-native-anonymous
|
||||
[class$="infobar-container"]
|
||||
> [class$="infobar"]:before {
|
||||
left: calc(50% - var(--highlighter-bubble-arrow-size));
|
||||
border: var(--highlighter-bubble-arrow-size) solid var(--highlighter-bubble-border-color);
|
||||
border: var(--highlighter-bubble-arrow-size) solid
|
||||
var(--highlighter-bubble-border-color);
|
||||
}
|
||||
|
||||
:-moz-native-anonymous [class$=infobar-container] > [class$=infobar]:after {
|
||||
:-moz-native-anonymous [class$="infobar-container"] > [class$="infobar"]:after {
|
||||
left: calc(50% - 7px);
|
||||
border: 7px solid var(--highlighter-bubble-background-color);
|
||||
}
|
||||
|
||||
:-moz-native-anonymous [class$=infobar-container] > [class$=infobar]:before,
|
||||
:-moz-native-anonymous [class$=infobar-container] > [class$=infobar]:after {
|
||||
:-moz-native-anonymous [class$="infobar-container"] > [class$="infobar"]:before,
|
||||
:-moz-native-anonymous [class$="infobar-container"] > [class$="infobar"]:after {
|
||||
content: "";
|
||||
display: none;
|
||||
position: absolute;
|
||||
|
|
@ -169,15 +172,23 @@
|
|||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
:-moz-native-anonymous [class$=infobar-container][position="top"]:not([hide-arrow]) > [class$=infobar]:before,
|
||||
:-moz-native-anonymous [class$=infobar-container][position="top"]:not([hide-arrow]) > [class$=infobar]:after {
|
||||
:-moz-native-anonymous
|
||||
[class$="infobar-container"][position="top"]:not([hide-arrow])
|
||||
> [class$="infobar"]:before,
|
||||
:-moz-native-anonymous
|
||||
[class$="infobar-container"][position="top"]:not([hide-arrow])
|
||||
> [class$="infobar"]:after {
|
||||
border-bottom: 0;
|
||||
top: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
:-moz-native-anonymous [class$=infobar-container][position="bottom"]:not([hide-arrow]) > [class$=infobar]:before,
|
||||
:-moz-native-anonymous [class$=infobar-container][position="bottom"]:not([hide-arrow]) > [class$=infobar]:after {
|
||||
:-moz-native-anonymous
|
||||
[class$="infobar-container"][position="bottom"]:not([hide-arrow])
|
||||
> [class$="infobar"]:before,
|
||||
:-moz-native-anonymous
|
||||
[class$="infobar-container"][position="bottom"]:not([hide-arrow])
|
||||
> [class$="infobar"]:after {
|
||||
border-top: 0;
|
||||
bottom: 100%;
|
||||
display: block;
|
||||
|
|
@ -185,7 +196,7 @@
|
|||
|
||||
/* Text Container */
|
||||
|
||||
:-moz-native-anonymous [class$=infobar-text] {
|
||||
:-moz-native-anonymous [class$="infobar-text"] {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
|
|
@ -212,25 +223,25 @@
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
:-moz-native-anonymous [class$=infobar-dimensions],
|
||||
:-moz-native-anonymous [class$=infobar-grid-type],
|
||||
:-moz-native-anonymous [class$=infobar-flex-type] {
|
||||
:-moz-native-anonymous [class$="infobar-dimensions"],
|
||||
:-moz-native-anonymous [class$="infobar-grid-type"],
|
||||
:-moz-native-anonymous [class$="infobar-flex-type"] {
|
||||
border-inline-start: 1px solid #5a6169;
|
||||
margin-inline-start: 6px;
|
||||
padding-inline-start: 6px;
|
||||
}
|
||||
|
||||
:-moz-native-anonymous [class$=infobar-grid-type]:empty,
|
||||
:-moz-native-anonymous [class$=infobar-flex-type]:empty {
|
||||
:-moz-native-anonymous [class$="infobar-grid-type"]:empty,
|
||||
:-moz-native-anonymous [class$="infobar-flex-type"]:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:-moz-native-anonymous [class$=infobar-dimensions] {
|
||||
:-moz-native-anonymous [class$="infobar-dimensions"] {
|
||||
color: var(--highlighter-infobar-color);
|
||||
}
|
||||
|
||||
:-moz-native-anonymous [class$=infobar-grid-type],
|
||||
:-moz-native-anonymous [class$=infobar-flex-type] {
|
||||
:-moz-native-anonymous [class$="infobar-grid-type"],
|
||||
:-moz-native-anonymous [class$="infobar-flex-type"] {
|
||||
color: var(--grey-40);
|
||||
}
|
||||
|
||||
|
|
@ -496,9 +507,11 @@
|
|||
|
||||
/* Offset the UI so it is centered around the pointer */
|
||||
transform: translate(
|
||||
calc(var(--magnifier-width) / -2), calc(var(--magnifier-height) / -2));
|
||||
calc(var(--magnifier-width) / -2),
|
||||
calc(var(--magnifier-height) / -2)
|
||||
);
|
||||
|
||||
filter: drop-shadow(0 0 1px rgba(0,0,0,.4));
|
||||
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.4));
|
||||
|
||||
/* We don't need the UI to be reversed in RTL locales, otherwise the # would appear
|
||||
to the right of the hex code. Force LTR */
|
||||
|
|
@ -522,19 +535,21 @@
|
|||
height: var(--label-height);
|
||||
position: relative;
|
||||
|
||||
--label-horizontal-center:
|
||||
translateX(calc((var(--magnifier-width) - var(--label-width)) / 2));
|
||||
--label-horizontal-left:
|
||||
translateX(calc((-1 * var(--label-width) + var(--magnifier-width) / 2)));
|
||||
--label-horizontal-right:
|
||||
translateX(calc(var(--magnifier-width) / 2));
|
||||
--label-vertical-top:
|
||||
translateY(calc((-1 * var(--magnifier-height)) - var(--label-height)));
|
||||
--label-horizontal-center: translateX(
|
||||
calc((var(--magnifier-width) - var(--label-width)) / 2)
|
||||
);
|
||||
--label-horizontal-left: translateX(
|
||||
calc((-1 * var(--label-width) + var(--magnifier-width) / 2))
|
||||
);
|
||||
--label-horizontal-right: translateX(calc(var(--magnifier-width) / 2));
|
||||
--label-vertical-top: translateY(
|
||||
calc((-1 * var(--magnifier-height)) - var(--label-height))
|
||||
);
|
||||
|
||||
/* By default the color label container sits below the canvas.
|
||||
Here we just center it horizontally */
|
||||
transform: var(--label-horizontal-center);
|
||||
transition: transform .1s ease-in-out;
|
||||
transition: transform 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
/* If there isn't enough space below the canvas, we move the label container to the top */
|
||||
|
|
@ -547,7 +562,9 @@
|
|||
:-moz-native-anonymous .eye-dropper-root[left] .eye-dropper-color-container {
|
||||
transform: var(--label-horizontal-left);
|
||||
}
|
||||
:-moz-native-anonymous .eye-dropper-root[left][top] .eye-dropper-color-container {
|
||||
:-moz-native-anonymous
|
||||
.eye-dropper-root[left][top]
|
||||
.eye-dropper-color-container {
|
||||
transform: var(--label-horizontal-left) var(--label-vertical-top);
|
||||
}
|
||||
|
||||
|
|
@ -556,7 +573,9 @@
|
|||
:-moz-native-anonymous .eye-dropper-root[right] .eye-dropper-color-container {
|
||||
transform: var(--label-horizontal-right);
|
||||
}
|
||||
:-moz-native-anonymous .eye-dropper-root[right][top] .eye-dropper-color-container {
|
||||
:-moz-native-anonymous
|
||||
.eye-dropper-root[right][top]
|
||||
.eye-dropper-color-container {
|
||||
transform: var(--label-horizontal-right) var(--label-vertical-top);
|
||||
}
|
||||
|
||||
|
|
@ -598,7 +617,7 @@
|
|||
/* We don't have access to DevTools themes here, but some of these colors come from the
|
||||
themes. Theme variable names are given in comments. */
|
||||
--text-color: #585959; /* --theme-body-color-alt */
|
||||
--toolbar-background: #fcfcfc; /* --theme-toolbar-background */;
|
||||
--toolbar-background: #fcfcfc; /* --theme-toolbar-background */
|
||||
--toolbar-border: #dde1e4; /* --theme-splitter-color */
|
||||
--toolbar-box-shadow: 0 2px 2px 0 rgba(155, 155, 155, 0.26); /* --rdm-box-shadow */
|
||||
--overlay-background: #dde1e4a8;
|
||||
|
|
@ -627,44 +646,63 @@
|
|||
|
||||
:-moz-native-anonymous .paused-dbg-toolbar button {
|
||||
margin: 8px 4px 6px 6px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: 14px 14px;
|
||||
mask-size: 16px 16px;
|
||||
background-color: var(--text-color);
|
||||
|
||||
border: 0px;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
|
||||
:-moz-native-anonymous .paused-dbg-toolbar button:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
:-moz-native-anonymous .paused-dbg-divider {
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
margin-top: 8px;
|
||||
height: 16px;
|
||||
margin-top: 10px;
|
||||
background-color: var(--toolbar-border);
|
||||
}
|
||||
|
||||
:-moz-native-anonymous .paused-dbg-reason,
|
||||
:-moz-native-anonymous .paused-dbg-step-button-wrapper,
|
||||
:-moz-native-anonymous .paused-dbg-resume-button-wrapper {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
:-moz-native-anonymous .paused-dbg-step-button-wrapper,
|
||||
:-moz-native-anonymous .paused-dbg-resume-button-wrapper {
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
:-moz-native-anonymous button.paused-dbg-step-button {
|
||||
margin-left: 10px;
|
||||
margin-left: 6px;
|
||||
margin-right: 6px;
|
||||
mask-image: url(resource://devtools/client/debugger/images/stepOver.svg);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:-moz-native-anonymous button.paused-dbg-resume-button {
|
||||
margin-right: 10px;
|
||||
margin-right: 6px;
|
||||
margin-right: 6px;
|
||||
mask-image: url(resource://devtools/client/debugger/images/resume.svg);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:-moz-native-anonymous .paused-dbg-step-button-wrapper.hover,
|
||||
:-moz-native-anonymous .paused-dbg-resume-button-wrapper.hover {
|
||||
background-color: var(--toolbar-border);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
:-moz-native-anonymous .paused-dbg-reason {
|
||||
padding: 1px 16px;
|
||||
margin: 6px 0px;
|
||||
line-height: 16px;
|
||||
font-size: 14px;
|
||||
padding: 3px 16px;
|
||||
margin: 8px 0px;
|
||||
line-height: 20px;
|
||||
font-size: 18px;
|
||||
font: var(--highlighter-font-family);
|
||||
font-size: var(--highlighter-font-size);
|
||||
}
|
||||
|
|
@ -720,7 +758,7 @@
|
|||
|
||||
:-moz-native-anonymous .accessible-infobar-role {
|
||||
grid-area: role;
|
||||
color: #9CDCFE;
|
||||
color: #9cdcfe;
|
||||
}
|
||||
|
||||
:-moz-native-anonymous .accessible-infobar-name {
|
||||
|
|
@ -755,7 +793,9 @@
|
|||
width: 8px;
|
||||
display: inline-flex;
|
||||
background-color: var(--accessibility-highlighter-contrast-ratio-color);
|
||||
box-shadow: 0 0 0 1px var(--grey-40), 4px 3px var(--accessibility-highlighter-contrast-ratio-bg), 4px 3px 0 1px var(--grey-40);
|
||||
box-shadow: 0 0 0 1px var(--grey-40),
|
||||
4px 3px var(--accessibility-highlighter-contrast-ratio-bg),
|
||||
4px 3px 0 1px var(--grey-40);
|
||||
margin-inline-start: 3px;
|
||||
margin-inline-end: 9px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,6 +26,8 @@ function PausedDebuggerOverlay(highlighterEnv, options = {}) {
|
|||
this.resume = options.resume;
|
||||
this.stepOver = options.stepOver;
|
||||
|
||||
this.lastTarget = null;
|
||||
|
||||
this.markup = new CanvasFrameAnonymousContentHelper(
|
||||
highlighterEnv,
|
||||
this._buildMarkup.bind(this)
|
||||
|
|
@ -86,9 +88,18 @@ PausedDebuggerOverlay.prototype = {
|
|||
prefix,
|
||||
});
|
||||
|
||||
const stepWrapper = createNode(window, {
|
||||
parent: toolbar,
|
||||
attributes: {
|
||||
id: "step-button-wrapper",
|
||||
class: "step-button-wrapper",
|
||||
},
|
||||
prefix,
|
||||
});
|
||||
|
||||
createNode(window, {
|
||||
nodeType: "button",
|
||||
parent: toolbar,
|
||||
parent: stepWrapper,
|
||||
attributes: {
|
||||
id: "step-button",
|
||||
class: "step-button",
|
||||
|
|
@ -96,9 +107,18 @@ PausedDebuggerOverlay.prototype = {
|
|||
prefix,
|
||||
});
|
||||
|
||||
const resumeWrapper = createNode(window, {
|
||||
parent: toolbar,
|
||||
attributes: {
|
||||
id: "resume-button-wrapper",
|
||||
class: "resume-button-wrapper",
|
||||
},
|
||||
prefix,
|
||||
});
|
||||
|
||||
createNode(window, {
|
||||
nodeType: "button",
|
||||
parent: toolbar,
|
||||
parent: resumeWrapper,
|
||||
attributes: {
|
||||
id: "resume-button",
|
||||
class: "resume-button",
|
||||
|
|
@ -114,19 +134,57 @@ PausedDebuggerOverlay.prototype = {
|
|||
this.hide();
|
||||
this.markup.destroy();
|
||||
this.env = null;
|
||||
this.lastTarget = null;
|
||||
},
|
||||
|
||||
onClick(target) {
|
||||
if (target.id == "paused-dbg-step-button") {
|
||||
const { id } = target;
|
||||
if (!id) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (id.includes("paused-dbg-step-button")) {
|
||||
this.stepOver();
|
||||
} else if (target.id == "paused-dbg-resume-button") {
|
||||
} else if (id.includes("paused-dbg-resume-button")) {
|
||||
this.resume();
|
||||
}
|
||||
},
|
||||
|
||||
onMouseMove(target) {
|
||||
// Not an element we care about
|
||||
if (!target.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If the user didn't change targets, do nothing
|
||||
if (this.lastTarget && this.lastTarget.id === target.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
target.id.includes("step-button") ||
|
||||
target.id.includes("resume-button")
|
||||
) {
|
||||
// The hover should be applied to the wrapper (icon's parent node)
|
||||
const newTarget = target.parentNode.id.includes("wrapper")
|
||||
? target.parentNode
|
||||
: target;
|
||||
|
||||
// Remove the hover class if the user has changed buttons
|
||||
if (this.lastTarget && this.lastTarget != newTarget) {
|
||||
this.lastTarget.classList.remove("hover");
|
||||
}
|
||||
newTarget.classList.add("hover");
|
||||
this.lastTarget = newTarget;
|
||||
} else if (this.lastTarget) {
|
||||
// Remove the hover class if the user isn't on a button
|
||||
this.lastTarget.classList.remove("hover");
|
||||
}
|
||||
},
|
||||
|
||||
handleEvent(e) {
|
||||
switch (e.type) {
|
||||
case "click":
|
||||
case "mousedown":
|
||||
this.onClick(e.target);
|
||||
break;
|
||||
case "DOMMouseScroll":
|
||||
|
|
@ -136,7 +194,9 @@ PausedDebuggerOverlay.prototype = {
|
|||
// important.
|
||||
e.preventDefault();
|
||||
break;
|
||||
case "mouseover":
|
||||
|
||||
case "mousemove":
|
||||
this.onMouseMove(e.target);
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
|
@ -150,6 +210,11 @@ PausedDebuggerOverlay.prototype = {
|
|||
return false;
|
||||
}
|
||||
|
||||
// Only track mouse movement when the the overlay is shown
|
||||
// Prevents mouse tracking when the user isn't paused
|
||||
const { pageListenerTarget } = this.env;
|
||||
pageListenerTarget.addEventListener("mousemove", this);
|
||||
|
||||
// Show the highlighter's root element.
|
||||
const root = this.getElement("root");
|
||||
root.removeAttribute("hidden");
|
||||
|
|
@ -171,6 +236,9 @@ PausedDebuggerOverlay.prototype = {
|
|||
return;
|
||||
}
|
||||
|
||||
const { pageListenerTarget } = this.env;
|
||||
pageListenerTarget.removeEventListener("mousemove", this);
|
||||
|
||||
// Hide the overlay.
|
||||
this.getElement("root").setAttribute("hidden", "true");
|
||||
},
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче