Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-21 01:05:45 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1541563 - Sync 131 - Aligned breakpoints and XHR breakpoints panes r=loganfsmyth

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D25986

--HG--
extra : moz-landing-system : lando
This commit is contained in:
David Walsh 2019-04-05 17:30:36 +00:00
parent 9d957462b6
commit 499adcfc41
10 changed files with 110 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
devtools/client/debugger/new/src/components/SecondaryPanes/Breakpoints/Breakpoints.css
View File

@ -6,20 +6,24 @@
margin: 2px 3px;
}
.pane.breakpoints-list {
padding-bottom: 0.35em;
}
.breakpoints-list * {
user-select: none;
}
.breakpoints-list {
margin-top: 4px;
margin-bottom: 4px;
}
.breakpoints-list .breakpoint-heading {
text-overflow: ellipsis;
overflow: hidden;
display: flex;
width: 100%;
align-items: center;
font-size: 12px;
line-height: 16px;
}
.breakpoint-heading:not(:first-child) {
margin-top: 2px;
}
.breakpoints-list .breakpoint-heading .filename {
@ -34,10 +38,8 @@
.breakpoints-list .breakpoint-heading,
.breakpoints-list .breakpoint {
font-size: 12px;
color: var(--theme-content-color1);
position: relative;
transition: all 0.25s ease;
cursor: pointer;
}
@ -45,53 +47,56 @@
.breakpoints-list .breakpoint,
.breakpoints-exceptions,
.breakpoints-exceptions-caught {
padding: 0.25em 1em;
display: flex;
align-items: center;
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px;
padding-inline-start: 16px;
padding-inline-end: 12px;
}
.breakpoints-exceptions {
padding-bottom: 0.5em;
padding-top: 0.5em;
padding-bottom: 3px;
padding-top: 3px;
user-select: none;
}
.breakpoints-list .breakpoint {
min-height: var(--breakpoint-expression-height);
overflow: hidden;
}
.breakpoints-exceptions-caught {
padding: 0 1em 0.5em 3em;
margin-top: -0.25em;
padding-bottom: 3px;
padding-top: 3px;
padding-inline-start: 36px;
}
html[dir="rtl"] .breakpoints-exceptions-caught {
padding: 0 3em 0.5em 1em;
.breakpoints-exceptions-options {
padding-top: 4px;
padding-bottom: 4px;
}
.xhr-breakpoints-pane .breakpoints-exceptions-options {
border-bottom: 1px solid var(--theme-splitter-color);
}
.breakpoints-exceptions-options:not(.empty) {
border-bottom: 1px solid var(--theme-splitter-color);
margin-bottom: 3px;
}
.breakpoints-exceptions input,
.breakpoints-exceptions-caught input {
padding-inline-start: 2px;
margin-top: 0px;
margin-bottom: 0px;
margin-inline-start: 0;
margin-inline-end: 2px;
vertical-align: text-bottom;
}
.breakpoint-exceptions-label {
padding-top: 2px;
padding-inline-start: 2px;
line-height: 14px;
padding-inline-end: 8px;
cursor: default;
}
.breakpoints-list .breakpoint,
.breakpoints-exceptions,
.breakpoints-exceptions-caught {
display: flex;
align-items: center;
overflow: hidden;
text-overflow: ellipsis;
}
html[dir="rtl"] .breakpoints-list .breakpoint,
@ -128,11 +133,17 @@ html .breakpoints-list .breakpoint.paused {
background-color: var(--search-overlays-semitransparent);
}
.breakpoint-line-close {
margin-inline-start: 4px;
}
.breakpoints-list .breakpoint .breakpoint-line {
font-size: 11px;
color: var(--theme-comment);
min-width: 16px;
text-align: end;
padding-top: 1px;
padding-bottom: 1px;
}
.breakpoints-list .breakpoint:hover .breakpoint-line,
@ -145,24 +156,24 @@ html .breakpoints-list .breakpoint.paused {
}
.breakpoints-list .breakpoint-label {
max-width: calc(100% - var(--breakpoint-expression-right-clear-space));
display: inline-block;
padding-inline-end: 8px;
cursor: pointer;
flex-grow: 1;
text-overflow: ellipsis;
overflow: hidden;
padding-top: 2px;
font-size: 11px;
}
.breakpoints-list .breakpoint-label,
.breakpoints-list .breakpoint-label span,
.breakpoint-line-close {
line-height: 1.4em;
display: inline;
line-height: 14px;
}
.breakpoint-checkbox {
margin-inline-start: 0;
margin-inline-start: 0px;
margin-top: 0px;
margin-bottom: 0px;
vertical-align: text-bottom;
}

60
devtools/client/debugger/new/src/components/SecondaryPanes/Breakpoints/index.js
View File

@ -77,43 +77,49 @@ class Breakpoints extends Component<Props> {
renderBreakpoints() {
const { breakpointSources, selectedSource } = this.props;
if (!breakpointSources.length) {
return null;
}
const sources = [
...breakpointSources.map(({ source, breakpoints }) => source)
];
return [
...breakpointSources.map(({ source, breakpoints, i }) => {
const path = getDisplayPath(source, sources);
const sortedBreakpoints = sortSelectedBreakpoints(
breakpoints,
selectedSource
);
return (
<div className="pane breakpoints-list">
{breakpointSources.map(({ source, breakpoints, i }) => {
const path = getDisplayPath(source, sources);
const sortedBreakpoints = sortSelectedBreakpoints(
breakpoints,
selectedSource
);
return [
<BreakpointHeading
source={source}
sources={sources}
path={path}
key={source.url}
/>,
...sortedBreakpoints.map(breakpoint => (
<Breakpoint
breakpoint={breakpoint}
return [
<BreakpointHeading
source={source}
selectedSource={selectedSource}
key={makeBreakpointId(
getSelectedLocation(breakpoint, selectedSource)
)}
/>
))
];
})
];
sources={sources}
path={path}
key={source.url}
/>,
...sortedBreakpoints.map(breakpoint => (
<Breakpoint
breakpoint={breakpoint}
source={source}
selectedSource={selectedSource}
key={makeBreakpointId(
getSelectedLocation(breakpoint, selectedSource)
)}
/>
))
];
})}
</div>
);
}
render() {
return (
<div className="pane breakpoints-list">
<div>
{this.renderExceptionsOptions()}
{this.renderBreakpoints()}
</div>

2
devtools/client/debugger/new/src/components/SecondaryPanes/Expressions.css
View File

@ -44,7 +44,7 @@
.expressions-list {
/* TODO: add normalize */
margin: 0;
padding: 0;
padding: 4px 0px;
}
.expression-input-container {

5
devtools/client/debugger/new/src/components/SecondaryPanes/SecondaryPanes.css
View File

@ -57,3 +57,8 @@
width: 20em;
overflow: auto;
}
.secondary-panes input[type="checkbox"] {
margin: 0;
margin-inline-end: 4px;
}

45
devtools/client/debugger/new/src/components/SecondaryPanes/XHRBreakpoints.css
View File

@ -3,7 +3,7 @@
* file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
.xhr-input-container {
display: block;
display: flex;
border: 1px solid transparent;
}
@ -19,27 +19,25 @@
border: 1px solid red;
}
.xhr-container label {
display: flex;
}
.xhr-input-form {
display: inline-flex;
width: 100%;
padding: 0.5em 1em 0.5em 1em;
padding-inline-start: 20px;
padding-inline-end: 12px;
}
.xhr-checkbox {
margin-inline-start: 0;
margin-inline-end: 4px;
}
.xhr-input-url {
border: 1px;
padding: 0em 0.6em 0em 0.6em;
padding: 3px 0px;
flex-grow: 1;
background-color: var(--theme-sidebar-background);
font-size: 12px;
line-height: 18px;
font-size: inherit;
line-height: 14px;
color: var(--theme-body-color);
}
@ -57,26 +55,26 @@
border-left: 4px solid transparent;
width: 100%;
color: var(--theme-body-color);
padding: 0.25em 1em;
padding-inline-start: 16px;
padding-inline-end: 12px;
background-color: var(--theme-body-background);
display: flex;
align-items: center;
position: relative;
min-height: var(--breakpoint-expression-height);
}
:root.theme-light .xhr-container:hover {
background-color: var(--theme-selection-background-hover);
background-color: var(--search-overlays-semitransparent);
}
:root.theme-dark .xhr-container:hover {
background-color: var(--theme-selection-background-hover);
background-color: var(--search-overlays-semitransparent);
}
.xhr-label-method {
padding: 0px 2px 0px 2px;
line-height: 15px;
line-height: 14px;
display: inline-block;
margin-inline-end: 2px;
}
.xhr-input-method {
@ -96,27 +94,18 @@
text-overflow: ellipsis;
overflow: hidden;
padding: 0px 2px 0px 2px;
line-height: 15px;
font-size: 11px;
line-height: 14px;
}
.xhr-container label {
flex-grow: 1;
display: flex;
padding-inline-end: 36px;
align-items: center;
overflow-x: hidden;
}
.xhr-container__close-btn {
position: absolute;
top: calc(50% - 8px);
}
[dir="ltr"] .xhr-container__close-btn {
right: 12px;
}
[dir="rtl"] .xhr-container__close-btn {
left: 12px;
display: flex;
padding-top: 2px;
padding-bottom: 2px;
}

2
devtools/client/debugger/new/src/components/shared/Accordion.css
View File

@ -74,7 +74,7 @@
.accordion ._content {
border-bottom: 1px solid var(--theme-splitter-color);
font-size: 12px;
font-size: var(--theme-body-font-size);
}
.accordion div:last-child ._content {

2
devtools/client/debugger/new/test/mochitest/browser_dbg-breakpoints-actions.js
View File

@ -3,7 +3,7 @@
* file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
function openFirstBreakpointContextMenu(dbg) {
rightClickElement(dbg, "breakpointItem", 3);
rightClickElement(dbg, "breakpointItem", 2);
}
// Tests to see if we can trigger a breakpoint action via the context menu

2
devtools/client/debugger/new/test/mochitest/browser_dbg-breakpoints-cond.js
View File

@ -144,7 +144,7 @@ add_task(async function() {
is(bp.options.condition, "1", "breakpoint is created with the condition");
await assertEditorBreakpoint(dbg, 5, { hasCondition: true });
rightClickElement(dbg, "breakpointItem", 3);
rightClickElement(dbg, "breakpointItem", 2);
info('select "remove condition"');
selectContextMenuItem(dbg, selectors.breakpointContextMenu.removeCondition);
await waitForBreakpointWithoutCondition(dbg, "simple2", 5);

4
devtools/client/debugger/new/test/mochitest/browser_dbg-breakpoints.js
View File

@ -53,7 +53,7 @@ add_task(async function() {
assertEmptyLines(dbg, [1, 2]);
assertBreakpointSnippet(dbg, 3, "return x + y;");
rightClickElement(dbg, "breakpointItem", 3);
rightClickElement(dbg, "breakpointItem", 2);
const disableBreakpointDispatch = waitForDispatch(dbg, "SET_BREAKPOINT");
selectContextMenuItem(dbg, selectors.breakpointContextMenu.disableSelf);
await disableBreakpointDispatch;
@ -63,7 +63,7 @@ add_task(async function() {
is(bp1.disabled, true, "first breakpoint is disabled");
is(bp2.disabled, false, "second breakpoint is enabled");
rightClickElement(dbg, "breakpointItem", 3);
rightClickElement(dbg, "breakpointItem", 2);
const enableBreakpointDispatch = waitForDispatch(dbg, "SET_BREAKPOINT");
selectContextMenuItem(dbg, selectors.breakpointContextMenu.enableSelf);
await enableBreakpointDispatch;

2
devtools/client/debugger/new/test/mochitest/helpers.js
View File

@ -1134,7 +1134,7 @@ async function assertEditorBreakpoint(dbg, line, shouldExist) {
}
function assertBreakpointSnippet(dbg, index, snippet) {
const actualSnippet = findElement(dbg, "breakpointLabel", 3).innerText;
const actualSnippet = findElement(dbg, "breakpointLabel", 2).innerText;
is(snippet, actualSnippet, `Breakpoint ${index} snippet`);
}