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

Backed out 25 changesets (bug 1520957) for causing test_smart-trace-grouping.html failures CLOSED TREE

Browse Source 
Backed out changeset 62545dd149d1 (bug 1520957)
Backed out changeset adfbaafc65e5 (bug 1520957)
Backed out changeset d3e2f8a52ea7 (bug 1520957)
Backed out changeset 1b068291a658 (bug 1520957)
Backed out changeset 83af92e6dcf5 (bug 1520957)
Backed out changeset 9e2970c8196c (bug 1520957)
Backed out changeset d3c9d833d45a (bug 1520957)
Backed out changeset 452045302b9f (bug 1520957)
Backed out changeset 38d601fa5c4e (bug 1520957)
Backed out changeset 27d0649dccc7 (bug 1520957)
Backed out changeset 314832e1b783 (bug 1520957)
Backed out changeset 2a0d5bc06991 (bug 1520957)
Backed out changeset 07d417fb91d2 (bug 1520957)
Backed out changeset b74cd7c3ae9b (bug 1520957)
Backed out changeset f1f01efee767 (bug 1520957)
Backed out changeset 118720bcf7bd (bug 1520957)
Backed out changeset 6a62f14cbf21 (bug 1520957)
Backed out changeset ea1cf6443c80 (bug 1520957)
Backed out changeset 20c18820bfa0 (bug 1520957)
Backed out changeset 4cc5d60694d2 (bug 1520957)
Backed out changeset f33a4bd9b1b7 (bug 1520957)
Backed out changeset ffde784e1ece (bug 1520957)
Backed out changeset 6bf766fe8789 (bug 1520957)
Backed out changeset 4931e64c987f (bug 1520957)
Backed out changeset 7605e6295916 (bug 1520957)
This commit is contained in:
Ciure Andrei 2019-01-19 03:44:50 +02:00
parent 55f31ee1a6
commit 1ff926c9f1
142 changed files with 2125 additions and 3403 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

742
devtools/client/debugger/new/dist/debugger.css vendored
View File

@ -360,8 +360,8 @@ button.invoke-getter {
background:url("resource://devtools/client/debugger/new/images/arrow.svg") no-repeat;
background-size:contain;
background-position:center center;
width: 10px;
height: 10px;
width: 9px;
height: 9px;
border:0;
padding:0;
margin-inline-start: 1px;
@ -1011,6 +1011,215 @@ menuseparator {
* 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/>. */
.arrow,
.worker,
.refresh,
.shortcut,
.add-button {
fill: var(--theme-splitter-color);
}
.img.folder,
.img.domain,
.img.file,
.img.extension,
.img.worker {
background-color: var(--theme-comment);
}
.worker,
.file,
.folder,
.sources-list .source-icon,
.extension {
position: relative;
top: 2px;
}
.domain,
.worker,
.refresh,
.add-button {
position: relative;
top: 1px;
}
.worker svg,
.refresh svg,
.shortcut svg,
.add-button svg {
width: 15px;
}
.img.domain,
.img.folder {
width: 15px;
height: 15px;
}
.img.extension,
.img.worker {
width: 13px;
height: 13px;
margin-inline-start: 2px;
}
.img.result-item-icon {
height: 18px;
width: 18px;
}
.img.domain {
mask: url("resource://devtools/client/debugger/new/images/domain.svg") no-repeat;
}
.img.folder {
mask: url("resource://devtools/client/debugger/new/images/folder.svg") no-repeat;
}
.img.coffeescript {
mask: url("resource://devtools/client/debugger/new/images/coffeescript.svg") no-repeat;
}
.img.javascript {
mask: url("resource://devtools/client/debugger/new/images/javascript.svg") no-repeat;
}
.img.tab {
mask: url("resource://devtools/client/debugger/new/images/tab.svg") no-repeat;
}
.img.react {
mask: url("resource://devtools/client/debugger/new/images/react.svg") no-repeat;
}
.img.typescript {
mask: url("resource://devtools/client/debugger/new/images/typescript.svg") no-repeat;
}
.img.extension {
mask: url("resource://devtools/client/debugger/new/images/extension.svg") no-repeat;
}
.img.file {
mask: url("resource://devtools/client/debugger/new/images/file.svg") no-repeat;
width: 13px;
height: 13px;
}
.img.worker {
mask: url("resource://devtools/client/debugger/new/images/worker.svg") no-repeat;
}
.img.domain,
.img.folder,
.img.file,
.sources-list .img.source-icon,
.img.extension,
.img.worker {
mask-size: 100%;
margin-inline-end: 5px;
display: inline-block;
}
.img.result-item-icon {
mask-size: 100%;
margin-inline-end: 15px;
margin-inline-start: 5px;
display: inline-block;
}
.refresh svg,
.shortcut svg,
.worker svg {
margin-inline-end: 5px;
}
.img.arrow {
mask: url("resource://devtools/client/debugger/new/images/arrow.svg");
margin-inline-end: 5px;
margin-top: 3px;
width: 9px;
height: 9px;
padding-top: 9px;
background: var(--disclosure-arrow);
mask-size: 100%;
display: inline-block;
margin-bottom: 1px;
transform: rotate(-90deg);
transition: transform 0.18s ease;
}
html[dir="ltr"] .img.arrow {
transform: rotate(-90deg);
}
html[dir="rtl"] .img.arrow {
transform: rotate(90deg);
}
.arrow svg {
transition: transform 0.125s ease;
width: 10px;
margin-inline-end: 5px;
transform: rotate(-90deg);
}
html[dir="rtl"] .arrow svg,
.arrow svg:dir(rtl),
.arrow svg:-moz-locale-dir(rtl) {
transform: rotate(90deg);
}
.arrow.expanded.expanded svg {
transform: rotate(0deg);
}
.arrow.hidden {
visibility: hidden;
}
.webpack svg {
width: 15px;
height: 15px;
margin-right: 5px;
vertical-align: sub;
}
.function svg {
height: 10px;
width: 15px;
}
.function path {
fill: var(--theme-body-color);
}
.angular svg,
.source-icon svg {
width: 15px;
height: 15px;
margin-right: 5px;
vertical-align: sub;
}
.angular,
.webpack {
opacity: 0.8;
}
.theme-dark .angular,
.theme-dark .webpack {
opacity: 0.5;
}
.source-icon svg {
fill: var(--theme-comment);
}
/* 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/>. */
.managed-tree .tree {
-webkit-user-select: none;
-moz-user-select: none;
@ -1064,12 +1273,6 @@ html[dir="rtl"] .managed-tree .tree .node > div {
height: 12px;
/* makes span appear like an image */
display: inline-block;
background: var(--theme-body-color);
mask-size: 100%;
}
.img.arrow.arrow.expanded {
transform: rotate(0deg);
}
/* 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
@ -1170,6 +1373,9 @@ img.close::before {
transform: translate(0, 0px);
transition: transform 0.25s ease-in-out;
padding: 5px;
-webkit-border-start: 1px solid;
border-inline-start: 1px solid;
border-image: var(--separator-border-image) 1 1;
height: inherit;
}
@ -1208,390 +1414,6 @@ html .toggle-button.end.vertical svg {
* 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/>. */
.arrow,
.worker,
.refresh,
.shortcut,
.add-button {
fill: var(--theme-splitter-color);
}
.img.folder,
.img.domain,
.img.file,
.img.extension,
.img.worker {
background-color: var(--theme-comment);
}
.worker,
.file,
.folder,
.sources-list .source-icon,
.extension {
position: relative;
top: 2px;
}
.domain,
.worker,
.refresh,
.add-button {
position: relative;
top: 1px;
}
.worker svg,
.refresh svg,
.shortcut svg,
.add-button svg {
width: 15px;
}
.img.domain,
.img.folder {
width: 15px;
height: 15px;
}
.img.extension,
.img.worker {
width: 13px;
height: 13px;
margin-inline-start: 2px;
}
.img.result-item-icon {
height: 18px;
width: 18px;
}
.img.domain {
mask: url("resource://devtools/client/debugger/new/images/domain.svg") no-repeat;
mask-size: 100%;
}
.img.folder {
mask: url("resource://devtools/client/debugger/new/images/folder.svg") no-repeat;
mask-size: 100%;
}
.img.coffeescript {
mask: url("resource://devtools/client/debugger/new/images/coffeescript.svg") no-repeat;
mask-size: 100%;
}
.img.javascript {
mask: url("resource://devtools/client/debugger/new/images/javascript.svg") no-repeat;
mask-size: 100%;
}
.img.tab {
mask: url("resource://devtools/client/debugger/new/images/tab.svg") no-repeat;
mask-size: 100%;
}
.img.react {
mask: url("resource://devtools/client/debugger/new/images/react.svg") no-repeat;
mask-size: 100%;
}
.img.aframe {
background-image: url("resource://devtools/client/debugger/new/images/aframe.svg");
background-size: 15px 15px;
}
.img.babel {
mask: url("resource://devtools/client/debugger/new/images/babel.svg") no-repeat;
mask-size: 100%;
}
.img.backbone {
mask: url("resource://devtools/client/debugger/new/images/backbone.svg") no-repeat;
mask-size: 100%;
}
.img.choo {
mask: url("resource://devtools/client/debugger/new/images/choo.svg") no-repeat;
mask-size: 100%;
}
.img.dojo {
background-image: url("resource://devtools/client/debugger/new/images/dojo.svg");
}
.img.ember {
background-image: url("resource://devtools/client/debugger/new/images/ember.svg");
}
.img.immutable {
mask: url("resource://devtools/client/debugger/new/images/immutable.svg") no-repeat;
mask-size: 100%;
}
.img.jquery {
mask: url("resource://devtools/client/debugger/new/images/jquery.svg") no-repeat;
mask-size: 100%;
}
.img.lodash {
mask: url("resource://devtools/client/debugger/new/images/lodash.svg") no-repeat;
mask-size: 100%;
}
span.img.marko {
background-image: url("resource://devtools/client/debugger/new/images/marko.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.img.mobx {
background-image: url("resource://devtools/client/debugger/new/images/mobx.svg");
}
.img.next-circle {
mask: url("resource://devtools/client/debugger/new/images/next-circle.svg") no-repeat;
mask-size: 100%;
}
.img.next {
mask: url("resource://devtools/client/debugger/new/images/next.svg") no-repeat;
mask-size: 100%;
}
.img.nextjs {
background-image: url("resource://devtools/client/debugger/new/images/nextjs.svg");
}
.img.nuxtjs {
background-image: url("resource://devtools/client/debugger/new/images/nuxtjs.svg");
}
.img.preact {
background-image: url("resource://devtools/client/debugger/new/images/preact.svg");
}
.img.pug {
background-image: url("resource://devtools/client/debugger/new/images/pug.svg");
}
.img.redux {
mask: url("resource://devtools/client/debugger/new/images/redux.svg") no-repeat;
mask-size: 100%;
}
.img.rxjs {
background-image: url("resource://devtools/client/debugger/new/images/rxjs.svg");
}
.img.sencha-extjs {
background-image: url("resource://devtools/client/debugger/new/images/sencha-extjs.svg");
}
.img.underscore {
mask: url("resource://devtools/client/debugger/new/images/underscore.svg") no-repeat;
mask-size: 100%;
}
.img.webpack {
background-image: url("resource://devtools/client/debugger/new/images/webpack.svg");
background-repeat: no-repeat;
}
.img.vue {
background: url("resource://devtools/client/debugger/new/images/vuejs.svg") 1px 1px no-repeat;
background-size: 15px;
}
.img.typescript {
mask: url("resource://devtools/client/debugger/new/images/typescript.svg") no-repeat;
mask-size: 100%;
}
.img.extension {
mask: url("resource://devtools/client/debugger/new/images/extension.svg") no-repeat;
mask-size: 100%;
}
.img.toggle-panes {
mask: url("resource://devtools/client/debugger/new/images/toggle-panes.svg") no-repeat;
mask-size: 100%;
}
.img.file {
mask: url("resource://devtools/client/debugger/new/images/file.svg") no-repeat;
mask-size: 100%;
width: 13px;
height: 13px;
}
.img.worker {
mask: url("resource://devtools/client/debugger/new/images/worker.svg") no-repeat;
mask-size: 100%;
}
.img.plus {
mask: url("resource://devtools/client/debugger/new/images/plus.svg") no-repeat;
mask-size: 100%;
height: 16px;
width: 16px;
}
.img.magnifying-glass {
mask: url("resource://devtools/client/debugger/new/images/magnifying-glass.svg") no-repeat;
mask-size: 100%;
}
.img.case-match {
mask: url("resource://devtools/client/debugger/new/images/case-match.svg") no-repeat;
mask-size: 100%;
}
.img.regex-match {
mask: url("resource://devtools/client/debugger/new/images/regex-match.svg") no-repeat;
mask-size: 100%;
}
.img.whole-word-match {
mask: url("resource://devtools/client/debugger/new/images/whole-word-match.svg") no-repeat;
mask-size: 100%;
}
.img.breadcrumb {
mask: url("resource://devtools/client/debugger/new/images/breadcrumbs-divider.svg") no-repeat;
mask-size: 100%;
}
.img.home {
mask: url("resource://devtools/client/debugger/new/images/home.svg") no-repeat;
mask-size: 100%;
}
.img.angular {
background-image: url("resource://devtools/client/debugger/new/images/angular.svg");
background-repeat: no-repeat;
}
.img.angular,
.img.webpack,
.img.vue,
.img.aframe,
.img.dojo,
.img.ember,
.img.marko,
.img.mobx,
.img.nextjs,
.img.nuxtjs,
.img.preact,
.img.pug,
.img.rxjs,
.img.sencha-extjs {
background-size: 15px 15px;
background-color: transparent;
width: 15px;
height: 15px;
position: relative;
}
.sources-list .img.angular,
.sources-list .img.webpack,
.sources-list .img.vue,
.sources-list .img.aframe,
.sources-list .img.dojo,
.sources-list .img.ember,
.sources-list .img.marko,
.sources-list .img.mobx,
.sources-list .img.nextjs,
.sources-list .img.nuxtjs,
.sources-list .img.preact,
.sources-list .img.pug,
.sources-list .img.rxjs,
.sources-list .img.sencha-extjs {
top: 3px;
}
.img.domain,
.img.folder,
.img.file,
.sources-list .img.source-icon,
.img.extension,
.img.worker {
mask-size: 100%;
margin-inline-end: 5px;
display: inline-block;
}
.img.result-item-icon {
mask-size: 100%;
margin-inline-end: 15px;
margin-inline-start: 5px;
display: inline-block;
}
.img.refresh,
.img.shortcut,
.img.worker,
.img.arrow {
margin-inline-end: 5px;
}
.img.arrow {
mask: url("resource://devtools/client/debugger/new/images/arrow.svg");
margin-inline-end: 4px;
width: 10px;
height: 10px;
padding-top: 9px;
background: var(--disclosure-arrow);
mask-size: 100%;
display: inline-block;
transform: rotate(-90deg);
transition: transform 0.18s ease;
}
html[dir="rtl"] .img.arrow {
transform: rotate(90deg);
}
.arrow {
transition: transform 0.125s ease;
height: 10px;
width: 10px;
transform: rotate(-90deg);
vertical-align: -1px;
}
html[dir="rtl"] .arrow,
.arrow:dir(rtl),
.arrow:-moz-locale-dir(rtl) {
transform: rotate(90deg);
}
.arrow.expanded {
transform: rotate(0deg);
}
.arrow.hidden {
visibility: hidden;
}
.angular,
.webpack {
opacity: 0.8;
}
.theme-dark .angular,
.theme-dark .webpack {
opacity: 0.5;
}
.source-icon svg {
fill: var(--theme-comment);
}
/* 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/>. */
.search-shadow {
border: 1px solid var(--theme-toolbar-background);
border-bottom: 1px solid var(--theme-splitter-color);
@ -1632,14 +1454,9 @@ html[dir="rtl"] .arrow,
width: 22px;
}
.search-field .img.loader {
.search-field i.loader {
padding-top: 4px;
margin-right: 8px;
mask-image: url("resource://devtools/client/debugger/new/images/loader.svg");
mask-size: 100%;
width: 20px;
height: 20px;
margin-top: 6px;
}
.search-field input {
@ -1727,14 +1544,6 @@ html[dir="rtl"] .arrow,
padding-right: 5px;
}
.search-field .search-nav-buttons .img.arrow-up {
mask: url("resource://devtools/client/debugger/new/images/arrow-up.svg") no-repeat;
}
.search-field .search-nav-buttons .img.arrow-down {
mask: url("resource://devtools/client/debugger/new/images/arrow-down.svg") no-repeat;
}
.search-field .search-nav-buttons .nav-btn:hover {
background: var(--theme-toolbar-background-hover);
}
@ -2010,7 +1819,8 @@ menuseparator {
z-index: 999;
}
.outline-filter {
padding: 4px 10px 0 10px;
margin: 5px 0 0 0;
padding: 0px 10px;
}
.outline-filter-input {
@ -2180,7 +1990,8 @@ menuseparator {
margin-inline-end: 5px;
}
.source-icon {
.source-icon,
.source-icon svg {
width: 15px;
height: 15px;
}
@ -2237,6 +2048,9 @@ menuseparator {
white-space: nowrap;
color: inherit;
display: block;
position: absolute;
top: 0;
left: 0;
border-bottom: 1px solid var(--theme-splitter-color);
}
@ -2250,7 +2064,7 @@ menuseparator {
height: 13px;
}
.theme-dark .sources-clear-root {
.theme-dark .sources-clear-root svg {
fill: var(--theme-body-color);
}
@ -2258,11 +2072,11 @@ menuseparator {
opacity: 0.5;
}
.sources-clear-root .breadcrumb {
.sources-clear-root .breadcrumb svg {
width: 5px;
margin: 0 2px 0 6px;
vertical-align: bottom;
background: var(--theme-body-color-alt);
top: 2px;
position: absolute;
margin-right: 5px;
}
.sources-clear-root-label {
@ -2273,6 +2087,7 @@ menuseparator {
display: flex;
flex: 1;
flex-direction: column;
height: 100%;
}
.sources-list {
@ -2285,8 +2100,8 @@ menuseparator {
display: flex;
}
.sources-list .managed-tree .tree {
padding: 4px 0;
.sources-list .managed-tree .tree-node:first-child {
margin-top: 4px;
}
.sources-list .managed-tree .tree .node {
@ -2294,11 +2109,11 @@ menuseparator {
width: 100%;
}
.sources-list .img {
margin-inline-end: 5px;
.sources-list .tree .img.arrow {
margin-right: 5px;
}
.sources-list .tree .focused .img:not(.vue):not(.angular):not(.webpack):not(.dojo):not(.ember):not(.aframe):not(.marko):not(.mobx):not(.nextjs):not(.nuxtjs):not(.preact):not(.pug):not(.rxjs):not(.sencha-extjs),
.sources-list .tree .focused .img:not(.vue):not(.angular),
.sources-list .managed-tree .tree .node.focused .img.blackBox {
background: #ffffff;
}
@ -2313,6 +2128,10 @@ menuseparator {
color: inherit;
}
.sources-list .tree .img.arrow.expanded {
transform: rotate(0deg);
}
.theme-dark .source-list .tree .node.focused {
background-color: var(--theme-tab-toolbar-background);
}
@ -2326,10 +2145,6 @@ menuseparator {
display: inline-block;
}
.sources-list .tree .arrow {
vertical-align: 1px;
}
.sources-list .tree .node .no-arrow {
width: 10px;
display: inline-block;
@ -2422,10 +2237,6 @@ menuseparator {
height: 100%;
}
.source-outline-panel.has-root .thread-header {
margin-top: 4px;
}
.sources-list .managed-tree .tree .node .img.blackBox {
mask: url("resource://devtools/client/debugger/new/images/blackBox.svg") no-repeat;
mask-size: 100%;
@ -2454,6 +2265,7 @@ menuseparator {
display: block;
}
.sources-list-custom-root .sources-list,
.sources-list-custom-root .no-sources-message {
position: absolute;
top: 26px;
@ -2568,7 +2380,7 @@ menuseparator {
.source-footer .mapped-source,
.source-footer .cursor-position {
color: var(--theme-body-color);
padding-right: 2.5px;
padding-left: 2.5px;
}
.source-footer .mapped-source {
@ -2675,11 +2487,11 @@ menuseparator {
padding: 0;
width: 16px;
}
.search-bottom-bar .search-modifiers .img {
width: 16px;
.search-bottom-bar .search-modifiers button svg {
fill: var(--theme-comment);
height: 16px;
vertical-align: bottom;
background-color: var(--theme-comment);
width: 16px;
}
.search-bottom-bar .search-modifiers button:hover {
@ -2690,11 +2502,11 @@ menuseparator {
background: var(--theme-selection-background);
}
.search-bottom-bar .search-modifiers button.active .img {
background-color: var(--theme-selection-background);
.search-bottom-bar .search-modifiers button.active svg {
fill: var(--theme-selection-background);
}
.theme-dark .search-bottom-bar .search-modifiers button.active .img {
.theme-dark .search-bottom-bar .search-modifiers button.active svg {
fill: white;
}
@ -3051,10 +2863,6 @@ menuseparator {
min-width: 0 !important;
}
.CodeMirror.cm-s-mozilla, .CodeMirror-scroll, .CodeMirror-sizer {
overflow-anchor: none;
}
.theme-dark {
--theme-conditional-breakpoint-color: #9fa4a9;
}
@ -3101,7 +2909,7 @@ html[dir="rtl"] .editor-mount {
}
.theme-dark .cm-s-mozilla .empty-line .CodeMirror-linenumber {
color: var(--grey-50);
color: var(--grey-60);
}
:not(.empty-line):not(.new-breakpoint)
@ -3765,11 +3573,6 @@ html[dir="rtl"] .breakpoints-list .breakpoint .breakpoint-line {
.frames ul .frames-group.expanded .badge {
color: var(--theme-highlight-blue);
}
.group-description-name {
padding-left: 5px;
}
/* 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/>. */
@ -3829,12 +3632,12 @@ html[dir="rtl"] .breakpoints-list .breakpoint .breakpoint-line {
.frames ul {
list-style: none;
margin-top: 4px;
margin: 0;
padding: 0;
}
.frames ul li {
padding: 2px 10px 2px 20px;
padding: 7px 10px 7px 21px;
overflow: hidden;
display: flex;
justify-content: space-between;
@ -3928,9 +3731,9 @@ html[dir="rtl"] .breakpoints-list .breakpoint .breakpoint-line {
}
.annotation-logo {
mask-size: 100%;
display: inline-block;
width: 12px;
margin-inline-start: 4px;
}
:root.theme-dark .annotation-logo:not(.angular) svg path {
@ -4306,47 +4109,6 @@ html[dir="rtl"] .command-bar {
* 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/>. */
.event-listeners-content {
padding: 4px 20px;
}
.event-listeners-content ul {
padding: 0;
list-style-type: none;
}
.event-listener-group {
user-select: none;
}
.event-listeners-content .arrow {
margin-inline-end: 0;
position: relative;
top: 1px;
}
html[dir="ltr"] .event-listeners-content .arrow.expanded {
transform: rotate(0deg);
}
html[dir="rtl"] .event-listeners-content .arrow.expanded {
transform: rotate(90deg);
}
.event-listener-event {
display: flex;
align-items: center;
margin-inline-start: 30px;
}
.event-listener-event input {
margin-inline-end: 4px;
margin-inline-start: 0px;
}
/* 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/>. */
.object-node.default-property {
opacity: 0.6;
}
@ -4458,6 +4220,10 @@ html[dir="rtl"] .object-node {
display: flex;
}
.secondary-panes .accordion .plus {
margin-top: -2px;
}
.secondary-panes .accordion .plus svg {
width: 12px;
margin-top: 3px;

69
devtools/client/debugger/new/dist/parser-worker.js vendored
View File

@ -880,15 +880,11 @@ function parseVueScript(code) {
}
function parseConsoleScript(text, opts) {
try {
return _parse(text, {
plugins: ["objectRestSpread"],
...opts,
allowAwaitOutsideFunction: true
});
} catch (e) {
return null;
}
}
function parseScript(text, opts) {
@ -23037,7 +23033,8 @@ function locationKey(start) {
return `${start.line}:${start.column}`;
}
function mapOriginalExpression(expression, ast, mappings) {
function mapOriginalExpression(expression, mappings) {
const ast = (0, _ast.parseConsoleScript)(expression);
const scopes = (0, _getScopes.buildScopeList)(ast, "");
let shouldUpdate = false;
@ -23501,8 +23498,6 @@ Object.defineProperty(exports, "__esModule", {
});
exports.default = mapExpression;
var _ast = __webpack_require__(1375);
var _mapOriginalExpression = __webpack_require__(3613);
var _mapOriginalExpression2 = _interopRequireDefault(_mapOriginalExpression);
@ -23517,10 +23512,6 @@ var _mapAwaitExpression2 = _interopRequireDefault(_mapAwaitExpression);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/* 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/>. */
function mapExpression(expression, mappings, bindings, shouldMapBindings = true, shouldMapAwait = true) {
const mapped = {
await: false,
@ -23528,23 +23519,22 @@ function mapExpression(expression, mappings, bindings, shouldMapBindings = true,
originalExpression: false
};
const ast = (0, _ast.parseConsoleScript)(expression);
try {
if (mappings && ast) {
if (mappings) {
const beforeOriginalExpression = expression;
expression = (0, _mapOriginalExpression2.default)(expression, ast, mappings);
expression = (0, _mapOriginalExpression2.default)(expression, mappings);
mapped.originalExpression = beforeOriginalExpression !== expression;
}
if (shouldMapBindings && ast) {
if (shouldMapBindings) {
const beforeBindings = expression;
expression = (0, _mapBindings2.default)(expression, ast, bindings);
expression = (0, _mapBindings2.default)(expression, bindings);
mapped.bindings = beforeBindings !== expression;
}
if (shouldMapAwait) {
const beforeAwait = expression;
expression = (0, _mapAwaitExpression2.default)(expression, ast);
expression = (0, _mapAwaitExpression2.default)(expression);
mapped.await = beforeAwait !== expression;
}
} catch (e) {
@ -23555,7 +23545,9 @@ function mapExpression(expression, mappings, bindings, shouldMapBindings = true,
expression,
mapped
};
}
} /* 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/>. */
/***/ }),
@ -23570,6 +23562,8 @@ Object.defineProperty(exports, "__esModule", {
});
exports.default = mapExpressionBindings;
var _ast = __webpack_require__(1375);
var _helpers = __webpack_require__(1411);
var _generator = __webpack_require__(2365);
@ -23584,6 +23578,10 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/* 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/>. */
function getAssignmentTarget(node, bindings) {
if (t.isObjectPattern(node)) {
for (const property of node.properties) {
@ -23626,10 +23624,6 @@ function getAssignmentTarget(node, bindings) {
// translates new bindings `var a = 3` into `self.a = 3`
// and existing bindings `var a = 3` into `a = 3` for re-assignments
/* 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/>. */
function globalizeDeclaration(node, bindings) {
return node.declarations.map(declaration => t.expressionStatement(t.assignmentExpression("=", getAssignmentTarget(declaration.id, bindings), declaration.init)));
}
@ -23654,7 +23648,9 @@ function replaceNode(ancestors, node) {
}
}
function mapExpressionBindings(expression, ast, bindings = []) {
function mapExpressionBindings(expression, bindings = []) {
const ast = (0, _ast.parseConsoleScript)(expression);
let isMapped = false;
let shouldUpdate = true;
@ -44375,13 +44371,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
* 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/>. */
function hasTopLevelAwait(ast) {
function hasTopLevelAwait(expression) {
const ast = (0, _ast.parseConsoleScript)(expression);
const hasAwait = (0, _ast.hasNode)(ast, (node, ancestors, b) => t.isAwaitExpression(node) && (0, _helpers.isTopLevel)(ancestors));
return hasAwait;
return hasAwait && ast;
}
function wrapExpressionFromAst(ast) {
function wrapExpression(ast) {
const statements = ast.program.body;
const lastStatement = statements[statements.length - 1];
const body = statements.slice(0, -1).concat(t.returnStatement(lastStatement.expression));
@ -44391,27 +44388,15 @@ function wrapExpressionFromAst(ast) {
return (0, _generator2.default)(newAst).code;
}
function mapTopLevelAwait(expression, ast) {
if (!ast) {
// If there's no ast this means the expression is malformed. And if the
// expression contains the await keyword, we still want to wrap it in an
// async iife in order to get a meaningful message (without this, the
// engine will throw an Error stating that await keywords are only valid
// in async functions and generators).
if (expression.includes("await ")) {
return `(async () => { ${expression} })();`;
function mapTopLevelAwait(expression) {
const ast = hasTopLevelAwait(expression);
if (ast) {
return wrapExpression(ast);
}
return expression;
}
if (!hasTopLevelAwait(ast)) {
return expression;
}
return wrapExpressionFromAst(ast);
}
/***/ }),
/***/ 398:

263
devtools/client/debugger/new/dist/vendors.css vendored
View File

@ -58,8 +58,8 @@
background:url("resource://devtools/client/debugger/new/images/arrow.svg") no-repeat;
background-size:contain;
background-position:center center;
width: 10px;
height: 10px;
width: 9px;
height: 9px;
border:0;
padding:0;
margin-inline-start: 1px;
@ -239,247 +239,44 @@ html[dir="rtl"] .tree-node button.arrow {
.img.domain {
mask: url("resource://devtools/client/debugger/new/images/domain.svg") no-repeat;
mask-size: 100%;
}
.img.folder {
mask: url("resource://devtools/client/debugger/new/images/folder.svg") no-repeat;
mask-size: 100%;
}
.img.coffeescript {
mask: url("resource://devtools/client/debugger/new/images/coffeescript.svg") no-repeat;
mask-size: 100%;
}
.img.javascript {
mask: url("resource://devtools/client/debugger/new/images/javascript.svg") no-repeat;
mask-size: 100%;
}
.img.tab {
mask: url("resource://devtools/client/debugger/new/images/tab.svg") no-repeat;
mask-size: 100%;
}
.img.react {
mask: url("resource://devtools/client/debugger/new/images/react.svg") no-repeat;
mask-size: 100%;
}
.img.aframe {
background-image: url("resource://devtools/client/debugger/new/images/aframe.svg");
background-size: 15px 15px;
}
.img.babel {
mask: url("resource://devtools/client/debugger/new/images/babel.svg") no-repeat;
mask-size: 100%;
}
.img.backbone {
mask: url("resource://devtools/client/debugger/new/images/backbone.svg") no-repeat;
mask-size: 100%;
}
.img.choo {
mask: url("resource://devtools/client/debugger/new/images/choo.svg") no-repeat;
mask-size: 100%;
}
.img.dojo {
background-image: url("resource://devtools/client/debugger/new/images/dojo.svg");
}
.img.ember {
background-image: url("resource://devtools/client/debugger/new/images/ember.svg");
}
.img.immutable {
mask: url("resource://devtools/client/debugger/new/images/immutable.svg") no-repeat;
mask-size: 100%;
}
.img.jquery {
mask: url("resource://devtools/client/debugger/new/images/jquery.svg") no-repeat;
mask-size: 100%;
}
.img.lodash {
mask: url("resource://devtools/client/debugger/new/images/lodash.svg") no-repeat;
mask-size: 100%;
}
span.img.marko {
background-image: url("resource://devtools/client/debugger/new/images/marko.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.img.mobx {
background-image: url("resource://devtools/client/debugger/new/images/mobx.svg");
}
.img.next-circle {
mask: url("resource://devtools/client/debugger/new/images/next-circle.svg") no-repeat;
mask-size: 100%;
}
.img.next {
mask: url("resource://devtools/client/debugger/new/images/next.svg") no-repeat;
mask-size: 100%;
}
.img.nextjs {
background-image: url("resource://devtools/client/debugger/new/images/nextjs.svg");
}
.img.nuxtjs {
background-image: url("resource://devtools/client/debugger/new/images/nuxtjs.svg");
}
.img.preact {
background-image: url("resource://devtools/client/debugger/new/images/preact.svg");
}
.img.pug {
background-image: url("resource://devtools/client/debugger/new/images/pug.svg");
}
.img.redux {
mask: url("resource://devtools/client/debugger/new/images/redux.svg") no-repeat;
mask-size: 100%;
}
.img.rxjs {
background-image: url("resource://devtools/client/debugger/new/images/rxjs.svg");
}
.img.sencha-extjs {
background-image: url("resource://devtools/client/debugger/new/images/sencha-extjs.svg");
}
.img.underscore {
mask: url("resource://devtools/client/debugger/new/images/underscore.svg") no-repeat;
mask-size: 100%;
}
.img.webpack {
background-image: url("resource://devtools/client/debugger/new/images/webpack.svg");
background-repeat: no-repeat;
}
.img.vue {
background: url("resource://devtools/client/debugger/new/images/vuejs.svg") 1px 1px no-repeat;
background-size: 15px;
}
.img.typescript {
mask: url("resource://devtools/client/debugger/new/images/typescript.svg") no-repeat;
mask-size: 100%;
}
.img.extension {
mask: url("resource://devtools/client/debugger/new/images/extension.svg") no-repeat;
mask-size: 100%;
}
.img.toggle-panes {
mask: url("resource://devtools/client/debugger/new/images/toggle-panes.svg") no-repeat;
mask-size: 100%;
}
.img.file {
mask: url("resource://devtools/client/debugger/new/images/file.svg") no-repeat;
mask-size: 100%;
width: 13px;
height: 13px;
}
.img.worker {
mask: url("resource://devtools/client/debugger/new/images/worker.svg") no-repeat;
mask-size: 100%;
}
.img.plus {
mask: url("resource://devtools/client/debugger/new/images/plus.svg") no-repeat;
mask-size: 100%;
height: 16px;
width: 16px;
}
.img.magnifying-glass {
mask: url("resource://devtools/client/debugger/new/images/magnifying-glass.svg") no-repeat;
mask-size: 100%;
}
.img.case-match {
mask: url("resource://devtools/client/debugger/new/images/case-match.svg") no-repeat;
mask-size: 100%;
}
.img.regex-match {
mask: url("resource://devtools/client/debugger/new/images/regex-match.svg") no-repeat;
mask-size: 100%;
}
.img.whole-word-match {
mask: url("resource://devtools/client/debugger/new/images/whole-word-match.svg") no-repeat;
mask-size: 100%;
}
.img.breadcrumb {
mask: url("resource://devtools/client/debugger/new/images/breadcrumbs-divider.svg") no-repeat;
mask-size: 100%;
}
.img.home {
mask: url("resource://devtools/client/debugger/new/images/home.svg") no-repeat;
mask-size: 100%;
}
.img.angular {
background-image: url("resource://devtools/client/debugger/new/images/angular.svg");
background-repeat: no-repeat;
}
.img.angular,
.img.webpack,
.img.vue,
.img.aframe,
.img.dojo,
.img.ember,
.img.marko,
.img.mobx,
.img.nextjs,
.img.nuxtjs,
.img.preact,
.img.pug,
.img.rxjs,
.img.sencha-extjs {
background-size: 15px 15px;
background-color: transparent;
width: 15px;
height: 15px;
position: relative;
}
.sources-list .img.angular,
.sources-list .img.webpack,
.sources-list .img.vue,
.sources-list .img.aframe,
.sources-list .img.dojo,
.sources-list .img.ember,
.sources-list .img.marko,
.sources-list .img.mobx,
.sources-list .img.nextjs,
.sources-list .img.nuxtjs,
.sources-list .img.preact,
.sources-list .img.pug,
.sources-list .img.rxjs,
.sources-list .img.sencha-extjs {
top: 3px;
}
.img.domain,
@ -500,45 +297,49 @@ span.img.marko {
display: inline-block;
}
.img.refresh,
.img.shortcut,
.img.worker,
.img.arrow {
.refresh svg,
.shortcut svg,
.worker svg {
margin-inline-end: 5px;
}
.img.arrow {
mask: url("resource://devtools/client/debugger/new/images/arrow.svg");
margin-inline-end: 4px;
width: 10px;
height: 10px;
margin-inline-end: 5px;
margin-top: 3px;
width: 9px;
height: 9px;
padding-top: 9px;
background: var(--disclosure-arrow);
mask-size: 100%;
display: inline-block;
margin-bottom: 1px;
transform: rotate(-90deg);
transition: transform 0.18s ease;
}
html[dir="ltr"] .img.arrow {
transform: rotate(-90deg);
}
html[dir="rtl"] .img.arrow {
transform: rotate(90deg);
}
.arrow {
.arrow svg {
transition: transform 0.125s ease;
height: 10px;
width: 10px;
margin-inline-end: 5px;
transform: rotate(-90deg);
vertical-align: -1px;
}
html[dir="rtl"] .arrow,
.arrow:dir(rtl),
.arrow:-moz-locale-dir(rtl) {
html[dir="rtl"] .arrow svg,
.arrow svg:dir(rtl),
.arrow svg:-moz-locale-dir(rtl) {
transform: rotate(90deg);
}
.arrow.expanded {
.arrow.expanded.expanded svg {
transform: rotate(0deg);
}
@ -546,6 +347,30 @@ html[dir="rtl"] .arrow,
visibility: hidden;
}
.webpack svg {
width: 15px;
height: 15px;
margin-right: 5px;
vertical-align: sub;
}
.function svg {
height: 10px;
width: 15px;
}
.function path {
fill: var(--theme-body-color);
}
.angular svg,
.source-icon svg {
width: 15px;
height: 15px;
margin-right: 5px;
vertical-align: sub;
}
.angular,
.webpack {
opacity: 0.8;

529
devtools/client/debugger/new/dist/vendors.js vendored
View File

File diff suppressed because one or more lines are too long

66
devtools/client/debugger/new/images/Svg.js
View File

@ -6,9 +6,73 @@ const React = require("react");
import InlineSVG from "svg-inline-react";
const svg = {
"angle-brackets": require("./angle-brackets.svg"),
angular: require("./angular.svg"),
arrow: require("./arrow.svg"),
babel: require("./babel.svg"),
backbone: require("./backbone.svg"),
blackBox: require("./blackBox.svg"),
breadcrumb: require("./breadcrumbs-divider.svg"),
breakpoint: require("./breakpoint.svg"),
"column-breakpoint": require("./column-breakpoint.svg"),
"column-marker": require("./column-marker.svg"),
"magnifying-glass": require("./magnifying-glass.svg")
"case-match": require("./case-match.svg"),
choo: require("./choo.svg"),
close: require("./close.svg"),
coffeescript: require(`./coffeescript.svg`),
dojo: require("./dojo.svg"),
domain: require("./domain.svg"),
extension: require("./extension.svg"),
file: require("./file.svg"),
folder: require("./folder.svg"),
globe: require("./globe.svg"),
home: require("./home.svg"),
javascript: require("./javascript.svg"),
jquery: require("./jquery.svg"),
underscore: require("./underscore.svg"),
lodash: require("./lodash.svg"),
ember: require("./ember.svg"),
vuejs: require("./vuejs.svg"),
"magnifying-glass": require("./magnifying-glass.svg"),
"arrow-up": require("./arrow-up.svg"),
"arrow-down": require("./arrow-down.svg"),
pause: require("./pause.svg"),
"pause-exceptions": require("./pause-exceptions.svg"),
plus: require("./plus.svg"),
preact: require("./preact.svg"),
aframe: require("./aframe.svg"),
prettyPrint: require("./prettyPrint.svg"),
react: require("./react.svg"),
"regex-match": require("./regex-match.svg"),
redux: require("./redux.svg"),
immutable: require("./immutable.svg"),
resume: require("./resume.svg"),
settings: require("./settings.svg"),
stepIn: require("./stepIn.svg"),
stepOut: require("./stepOut.svg"),
stepOver: require("./stepOver.svg"),
subSettings: require("./subSettings.svg"),
tab: require("./tab.svg"),
toggleBreakpoints: require("./toggle-breakpoints.svg"),
togglePanes: require("./toggle-panes.svg"),
typescript: require("./typescript.svg"),
"whole-word-match": require("./whole-word-match.svg"),
worker: require("./worker.svg"),
"sad-face": require("devtools-mc-assets/assets/devtools/client/themes/images/sad-face.svg"),
refresh: require("devtools-mc-assets/assets/devtools/client/themes/images/reload.svg"),
webpack: require("./webpack.svg"),
node: require("./node.svg"),
express: require("./express.svg"),
pug: require("./pug.svg"),
extjs: require("./sencha-extjs.svg"),
mobx: require("./mobx.svg"),
marko: require("./marko.svg"),
nextjs: require("./nextjs.svg"),
showSources: require("./showSources.svg"),
showOutline: require("./showOutline.svg"),
nuxtjs: require("./nuxtjs.svg"),
rxjs: require("./rxjs.svg"),
loader: require('./loader.svg')
};
type SvgType = {

20
devtools/client/debugger/new/images/aframe.svg
View File

@ -1,20 +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 id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="100mm" width="100mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 354.33071 354.33071">
<metadata id="metadata7">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<g id="layer1" fill="#EF2D5E" transform="translate(0 -698.03)">
<path id="text3336" d="m102.28 749.3-88.657 293.97h72.114l14.848-63.206h86.112l14.845 63.206h73.81l-34.36-113.69-128.53 0.00011 30.967-129.8v-50.48z"/>
<rect id="rect3356" transform="rotate(237.21)" height="79.557" width="79.557" y="-311.53" x="-785.82"/>
<rect id="rect3362" transform="matrix(-.78208 .62317 -.62317 -.78208 0 0)" height="95.238" width="95.238" y="-885.85" x="318.72"/>
<rect id="rect3364" transform="rotate(12.582)" height="95.238" width="95.238" y="633.02" x="396.31"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

6
devtools/client/debugger/new/images/arrow-down.svg
View File

@ -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 xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1792 1792">
<path d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z" fill="#696969"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 495 B

6
devtools/client/debugger/new/images/arrow-up.svg
View File

@ -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 xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1792 1792">
<path d="M1395 1184q0 13-10 23l-50 50q-10 10-23 10t-23-10l-393-393-393 393q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l466 466q10 10 10 23z" fill="#696969"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 499 B

4
devtools/client/debugger/new/images/arrow.svg
View File

@ -1,6 +1,6 @@
<!-- 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 viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<path d="M5 8c-.25 0-.35-.1-.65-.4l-3.1-3.35C.75 3.7 1.1 3 1.75 3h6.5c.65 0 1 .7.5 1.25L5.65 7.6c-.3.3-.4.4-.65.4z"/>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" fill="context-fill #9B9B9B">
<path d="M8 13.4c-.5 0-.9-.2-1.2-.6L.4 5.2C0 4.7-.1 4.3.2 3.7S1 3 1.6 3h12.8c.6 0 1.2.1 1.4.7.3.6.2 1.1-.2 1.6l-6.4 7.6c-.3.4-.7.5-1.2.5z"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 400 B

After

Width:  |  Height:  |  Size: 493 B

107
devtools/client/debugger/new/images/babel.svg
View File

@ -1,107 +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 version="1.0" xmlns="http://www.w3.org/2000/svg"
width="418.000000pt" height="418.000000pt" viewBox="0 0 418.000000 418.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.11, written by Peter Selinger 2001-2013
</metadata>
<g transform="translate(0.000000,418.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path fill="#F9DC3E" d="M2610 3980 c0 -4 -15 -7 -32 -7 -31 -1 -93 -10 -93 -13 0 -1 -11 -3
-25 -5 -14 -2 -36 -6 -50 -10 -14 -4 -36 -8 -50 -10 -14 -2 -25 -4 -25 -5 0
-1 -7 -3 -15 -5 -8 -2 -51 -13 -95 -25 -44 -12 -86 -22 -92 -23 -7 0 -13 -4
-13 -9 0 -5 -4 -7 -9 -4 -4 3 -26 -1 -47 -9 -22 -7 -48 -17 -59 -21 -11 -4
-28 -9 -38 -11 -10 -1 -31 -10 -47 -18 -17 -9 -32 -15 -35 -15 -15 2 -115 -35
-115 -42 0 -5 -4 -7 -8 -4 -4 2 -27 -4 -50 -14 -23 -11 -42 -16 -42 -12 0 4
-4 2 -8 -4 -4 -7 -21 -20 -38 -30 -42 -26 -157 -101 -169 -111 -21 -16 -70
-44 -87 -50 -10 -3 -18 -9 -18 -14 0 -5 -9 -9 -20 -9 -11 0 -20 -4 -20 -9 0
-5 -9 -13 -20 -16 -11 -3 -20 -13 -20 -22 0 -11 5 -13 18 -8 9 4 23 7 30 6 6
-1 23 -3 37 -4 14 -1 25 -3 25 -4 0 -5 -49 -50 -79 -73 -18 -14 -42 -33 -54
-43 -11 -10 -37 -28 -57 -40 -51 -31 -80 -59 -80 -75 0 -8 -6 -12 -12 -9 -7 2
-24 0 -37 -5 -19 -6 -22 -11 -13 -20 19 -19 14 -24 -28 -25 -50 -1 -100 -21
-100 -39 0 -8 -10 -14 -25 -14 -25 0 -25 -1 -25 -80 l0 -80 33 0 c18 0 40 8
49 18 37 38 48 44 54 28 7 -18 -4 -39 -16 -31 -5 3 -11 1 -15 -4 -6 -11 16
-53 26 -49 4 2 34 28 67 58 32 30 69 63 81 73 24 19 81 31 81 17 0 -5 9 -12
21 -15 14 -5 34 2 62 22 23 15 44 31 45 36 2 4 10 7 18 7 8 0 14 5 14 10 0 6
7 10 15 10 8 0 15 5 15 11 0 5 4 7 10 4 5 -3 10 -2 10 3 0 5 8 12 18 16 20 6
50 25 70 44 7 7 18 10 23 7 5 -4 9 -1 9 5 0 6 5 8 10 5 6 -3 10 -1 10 4 0 6 6
11 14 11 8 0 22 7 30 16 9 8 25 16 36 17 11 1 20 5 20 9 0 4 9 8 20 8 11 0 20
4 20 8 0 17 30 8 36 -10 7 -24 -47 -185 -101 -305 -8 -17 -15 -33 -15 -36 0
-6 -244 -579 -296 -694 -14 -32 -31 -71 -39 -88 -7 -16 -22 -50 -33 -75 -11
-25 -31 -70 -45 -100 -39 -89 -66 -147 -193 -420 -73 -157 -320 -651 -358
-717 -18 -32 -49 -87 -68 -123 -20 -36 -54 -97 -77 -136 -49 -85 -47 -109 7
-99 l34 6 -20 -29 c-18 -25 -19 -32 -8 -47 11 -15 18 -16 44 -7 18 6 32 9 32
7 0 -3 15 3 32 13 31 17 34 17 49 1 12 -11 14 -20 7 -27 -27 -27 -97 -174
-105 -219 -5 -33 17 -29 47 8 62 76 61 76 36 16 -37 -85 -47 -127 -32 -127 28
0 168 184 238 311 30 54 41 62 93 69 3 1 24 8 47 16 24 9 48 17 53 18 6 2 17
6 25 9 8 3 33 11 55 17 22 6 49 15 60 20 28 11 118 44 128 46 4 1 8 2 10 4 1
1 11 3 21 5 10 2 22 7 25 12 3 4 11 9 16 10 6 1 36 13 68 27 31 14 57 23 57
20 0 -3 7 2 16 10 8 9 20 14 25 11 5 -4 9 -2 9 2 0 12 63 34 108 38 20 2 48 6
62 9 14 3 39 9 55 12 17 3 35 9 40 13 6 3 12 6 15 6 15 0 100 40 100 47 0 4 6
8 13 8 14 0 43 30 42 44 0 5 7 10 15 11 74 12 184 66 219 108 7 10 19 17 26
17 8 0 15 4 17 8 3 9 123 100 233 179 148 105 175 123 184 123 5 0 11 4 13 8
2 4 25 23 52 42 28 19 57 42 66 50 10 8 41 35 70 60 231 196 359 405 374 609
3 40 -2 63 -22 104 -24 49 -83 138 -106 163 -6 6 -27 31 -46 54 -19 24 -43 52
-52 62 -10 10 -18 22 -18 26 0 11 48 52 61 52 5 0 7 5 4 10 -3 6 -2 10 4 10
21 0 112 66 183 133 16 15 31 27 35 27 3 0 13 8 22 18 9 10 54 50 100 90 47
40 95 88 108 106 58 86 101 250 108 415 3 67 -22 179 -47 209 -8 9 -23 35 -33
57 -24 47 -165 191 -165 168 0 -4 -4 -3 -8 3 -4 6 -45 31 -92 55 -47 24 -88
48 -91 52 -3 4 -10 7 -15 5 -5 -1 -19 3 -31 10 -13 7 -23 11 -23 8 0 -3 -16 2
-35 10 -19 8 -35 11 -35 8 0 -4 -6 -2 -12 4 -7 6 -16 10 -21 10 -4 0 -49 6
-100 13 -50 7 -108 13 -127 14 -19 0 -38 5 -42 10 -5 6 -8 5 -8 -3 0 -8 -5
-10 -12 -5 -15 9 -178 12 -178 3z m770 -273 c0 4 5 2 12 -5 7 -7 20 -12 30
-12 10 0 18 -4 18 -10 0 -14 -12 -13 -56 7 -22 9 -43 16 -47 15 -5 -2 -6 2 -2
8 4 7 12 7 26 0 10 -6 19 -7 19 -3z m-805 -196 c3 -11 13 -18 23 -16 9 2 17 4
17 5 0 3 41 7 97 12 27 1 48 5 48 8 0 3 52 6 115 7 63 1 115 -2 115 -6 0 -4
14 -8 31 -8 17 0 35 -6 39 -14 5 -7 12 -10 16 -7 8 9 50 -41 63 -76 13 -33 35
-35 29 -2 -9 43 6 51 46 27 40 -25 41 -29 22 -84 -21 -57 -66 -101 -66 -63 0
19 -30 29 -31 11 -1 -8 -3 -19 -4 -25 -1 -5 -3 -18 -4 -28 0 -11 -10 -29 -21
-42 -11 -13 -20 -26 -20 -30 0 -3 -8 -15 -17 -26 -10 -10 -30 -35 -45 -54 -42
-56 -86 -100 -99 -100 -6 0 -40 -29 -76 -65 -35 -35 -85 -82 -111 -102 -26
-21 -49 -40 -52 -43 -3 -3 -39 -28 -80 -55 -41 -28 -76 -53 -78 -57 -2 -5 -16
-8 -31 -8 -15 0 -31 -3 -35 -7 -3 -4 -12 -8 -19 -9 -7 -1 -50 -17 -97 -35 -47
-18 -87 -34 -90 -34 -3 -1 -17 -7 -32 -13 -16 -7 -40 -17 -55 -24 -16 -6 -31
-11 -35 -10 -5 1 -8 -3 -8 -8 0 -5 -3 -9 -7 -8 -5 1 -17 -3 -28 -9 -11 -6 -23
-11 -28 -12 -4 0 -27 -9 -51 -20 -24 -10 -54 -22 -65 -26 -19 -6 -20 -4 -11
19 5 13 21 47 35 75 14 28 27 66 29 84 6 46 42 146 60 166 8 9 46 86 84 171
38 85 80 178 92 205 13 28 24 52 25 55 0 3 11 28 24 55 12 28 36 83 53 123 17
39 37 72 44 72 8 0 14 4 14 8 0 5 6 9 13 10 6 0 35 7 62 15 70 21 93 20 100
-2z m915 -93 c0 -15 -15 -8 -28 12 -7 12 -10 26 -6 32 6 10 33 -25 34 -44z
m-2452 -299 c-7 -5 -22 -9 -33 -9 -19 1 -19 1 -2 15 11 7 26 11 34 8 12 -5 12
-7 1 -14z m117 11 c-3 -5 -11 -10 -16 -10 -6 0 -7 5 -4 10 3 6 11 10 16 10 6
0 7 -4 4 -10z m-55 -45 c10 -13 9 -15 -8 -15 -15 0 -20 5 -16 15 4 8 7 15 9
15 1 0 8 -7 15 -15z m-26 -49 c-19 -14 -34 -12 -34 4 0 8 41 19 49 13 3 -2 -4
-10 -15 -17z m1551 -891 c22 -4 49 -7 60 -8 11 -1 22 -4 25 -7 9 -10 65 -33
74 -31 4 1 5 -11 1 -26 -10 -43 -87 -203 -96 -203 -5 0 -9 -7 -9 -15 0 -8 -3
-15 -7 -15 -5 0 -22 -14 -40 -30 -18 -17 -37 -30 -42 -30 -6 0 -11 -4 -11 -8
0 -4 -12 -15 -27 -24 -16 -9 -40 -28 -55 -42 -15 -14 -30 -26 -33 -26 -3 0
-16 -10 -29 -22 -12 -13 -38 -34 -56 -48 -18 -14 -56 -43 -84 -65 -28 -23 -73
-55 -101 -73 -27 -17 -54 -35 -60 -39 -20 -17 -221 -138 -260 -157 -22 -11
-43 -19 -47 -18 -5 1 -8 -3 -8 -8 0 -6 -5 -10 -11 -10 -6 0 -24 -9 -40 -21
-16 -11 -29 -17 -29 -12 0 4 -7 -1 -15 -11 -8 -11 -15 -17 -15 -13 0 8 -144
-65 -148 -75 -2 -5 -8 -8 -14 -8 -5 0 -61 -25 -123 -55 -63 -30 -116 -55 -118
-55 -3 0 -22 -8 -43 -17 -45 -19 -77 -26 -71 -16 2 5 111 223 241 485 131 263
242 481 248 484 5 4 26 8 46 10 38 4 77 11 77 14 0 1 7 3 15 5 36 7 146 36
160 42 20 8 41 14 62 17 9 1 23 7 31 14 7 7 16 10 19 7 3 -3 25 3 49 14 24 11
47 17 51 15 4 -3 8 0 8 5 0 6 3 10 8 9 10 -4 133 43 162 61 21 14 23 14 15 1
-7 -12 -6 -13 6 -4 8 5 46 11 84 13 39 2 71 4 73 6 2 1 11 1 20 -1 9 -2 35 -6
57 -9z m-590 -75 c3 -5 1 -10 -4 -10 -6 0 -11 5 -11 10 0 6 2 10 4 10 3 0 8
-4 11 -10z m-25 -10 c0 -5 -4 -10 -10 -10 -5 0 -10 5 -10 10 0 6 5 10 10 10 6
0 10 -4 10 -10z m-270 -1119 c0 -5 -7 -11 -15 -15 -15 -5 -20 5 -8 17 9 10 23
9 23 -2z m273 -84 c-3 -5 -11 -6 -19 -3 -8 3 -14 2 -14 -3 0 -4 -7 -8 -16 -8
-15 0 -15 2 -1 12 18 13 58 15 50 2z m-383 -51 c0 -2 -11 -11 -25 -20 -20 -13
-23 -13 -19 -2 3 8 13 17 22 19 10 3 18 5 20 6 1 0 2 -1 2 -3z m-125 -68 c-11
-6 -22 -14 -25 -18 -4 -5 -29 -18 -50 -25 -3 -1 -18 -7 -35 -14 -16 -7 -34
-14 -40 -15 -5 -1 -25 -10 -42 -19 -18 -10 -34 -16 -35 -15 -2 1 -48 -20 -103
-46 -112 -54 -150 -63 -172 -41 -8 8 -12 15 -9 15 3 0 8 0 11 0 3 0 20 6 39
14 19 8 37 12 40 8 3 -3 6 0 6 6 0 6 7 9 15 6 8 -4 15 -1 15 4 0 6 9 9 20 7
11 -2 20 1 20 6 0 6 4 8 9 4 5 -3 16 1 24 9 8 8 17 13 20 10 3 -3 19 2 36 11
17 8 31 13 31 9 0 -4 6 -1 13 5 8 6 17 8 20 4 4 -3 7 -1 7 5 0 7 7 12 15 12 8
0 39 11 69 24 30 13 57 22 60 18 3 -3 6 0 6 6 0 6 8 13 18 15 31 8 37 7 17 -5z
m-445 -105 c-19 -8 -38 -20 -42 -27 -6 -8 -8 -8 -8 1 0 21 31 43 58 42 26 -1
26 -1 -8 -16z m-330 -133 c0 -5 -5 -10 -11 -10 -5 0 -7 5 -4 10 3 6 8 10 11
10 2 0 4 -4 4 -10z"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 7.4 KiB

6
devtools/client/debugger/new/images/backbone.svg
View File

@ -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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="32" height="32" viewBox="0 0 32 32"><script/>
<path fill="#444444" d="M16 9.875l-9.539-5.438v23.698l9.539-5.438 9.539 5.438v-23.698l-9.539 5.438zM11.248 16.286l4.752-2.709 4.752 2.709-4.752 2.709-4.752-2.709zM9.618 9.643l3.399 1.938-3.399 1.938v-3.876zM9.618 19.053l3.145 1.792-3.145 1.793v-3.585zM22.382 22.638l-3.145-1.793 3.145-1.793v3.585zM18.982 11.581l3.399-1.938v3.876l-3.399-1.938z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 718 B

18
devtools/client/debugger/new/images/breadcrumbs-divider.svg
View File

@ -1,18 +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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="5" height="7">
<defs>
<linearGradient id="b">
<stop offset="0" stop-color="#9a9aba"/>
<stop offset="1" stop-color="#a6a6c2"/>
</linearGradient>
<linearGradient id="a">
<stop offset="0" stop-color="#8e8eb2"/>
<stop offset="1" stop-color="#9a9aba"/>
</linearGradient>
<linearGradient x1="3.616" y1="3.893" x2="1.285" y2="-.757" id="d" xlink:href="#a" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 .8684 0 1046.257)"/>
<linearGradient x1="2.232" y1="4.162" x2=".629" y2=".966" id="c" xlink:href="#b" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 .8684 0 1046.257)"/>
</defs>
<path d="M.2 1045.562l4.6 3.3-4.6 3.3 2-3.3z" fill="url(#c)" stroke="url(#d)" stroke-width=".4" stroke-linejoin="round" transform="translate(0 -1045.362)"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

6
devtools/client/debugger/new/images/case-match.svg
View File

@ -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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 16" stroke="none" fillrule="evenodd">
<path d="M10.919,13 L9.463,13 C9.29966585,13 9.16550052,12.9591671 9.0605,12.8775 C8.95549947,12.7958329 8.8796669,12.6943339 8.833,12.573 L8.077,10.508 L3.884,10.508 L3.128,12.573 C3.09066648,12.6803339 3.01716722,12.7783329 2.9075,12.867 C2.79783279,12.9556671 2.66366746,13 2.505,13 L1.042,13 L5.018,2.878 L6.943,2.878 L10.919,13 Z M4.367,9.178 L7.594,9.178 L6.362,5.811 C6.30599972,5.66166592 6.24416701,5.48550102 6.1765,5.2825 C6.108833,5.07949898 6.04233366,4.85900119 5.977,4.621 C5.91166634,4.85900119 5.84750032,5.08066564 5.7845,5.286 C5.72149969,5.49133436 5.65966697,5.67099923 5.599,5.825 L4.367,9.178 Z M18.892,13 L18.115,13 C17.9516658,13 17.8233338,12.9755002 17.73,12.9265 C17.6366662,12.8774998 17.5666669,12.7783341 17.52,12.629 L17.366,12.118 C17.1839991,12.2813341 17.0055009,12.4248327 16.8305,12.5485 C16.6554991,12.6721673 16.4746676,12.7759996 16.288,12.86 C16.1013324,12.9440004 15.903001,13.0069998 15.693,13.049 C15.4829989,13.0910002 15.2496679,13.112 14.993,13.112 C14.6896651,13.112 14.4096679,13.0711671 14.153,12.9895 C13.896332,12.9078329 13.6758342,12.7853342 13.4915,12.622 C13.3071657,12.4586658 13.1636672,12.2556679 13.061,12.013 C12.9583328,11.7703321 12.907,11.4880016 12.907,11.166 C12.907,10.895332 12.9781659,10.628168 13.1205,10.3645 C13.262834,10.100832 13.499665,9.8628344 13.831,9.6505 C14.162335,9.43816561 14.6033306,9.2620007 15.154,9.122 C15.7046694,8.9819993 16.3883292,8.90266676 17.205,8.884 L17.205,8.464 C17.205,7.98333093 17.103501,7.62750116 16.9005,7.3965 C16.697499,7.16549885 16.4023352,7.05 16.015,7.05 C15.7349986,7.05 15.5016676,7.08266634 15.315,7.148 C15.1283324,7.21333366 14.9661673,7.28683292 14.8285,7.3685 C14.6908326,7.45016707 14.5636672,7.52366634 14.447,7.589 C14.3303327,7.65433366 14.2020007,7.687 14.062,7.687 C13.9453327,7.687 13.8450004,7.65666697 13.761,7.596 C13.6769996,7.53533303 13.6093336,7.46066711 13.558,7.372 L13.243,6.819 C14.0690041,6.06299622 15.0653275,5.685 16.232,5.685 C16.6520021,5.685 17.0264983,5.75383264 17.3555,5.8915 C17.6845016,6.02916736 17.9633322,6.22049877 18.192,6.4655 C18.4206678,6.71050122 18.5944994,7.00333163 18.7135,7.344 C18.8325006,7.68466837 18.892,8.05799797 18.892,8.464 L18.892,13 Z M15.532,11.922 C15.7093342,11.922 15.8726659,11.9056668 16.022,11.873 C16.1713341,11.8403332 16.3124993,11.7913337 16.4455,11.726 C16.5785006,11.6606663 16.7068327,11.5801671 16.8305,11.4845 C16.9541673,11.3888329 17.0789993,11.2756673 17.205,11.145 L17.205,9.934 C16.7009975,9.95733345 16.279835,10.0004997 15.9415,10.0635 C15.603165,10.1265003 15.3313343,10.2069995 15.126,10.305 C14.9206656,10.4030005 14.7748337,10.5173327 14.6885,10.648 C14.6021662,10.7786673 14.559,10.9209992 14.559,11.075 C14.559,11.3783349 14.6488324,11.5953327 14.8285,11.726 C15.0081675,11.8566673 15.2426652,11.922 15.532,11.922 L15.532,11.922 Z"></path>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 3.1 KiB

60
devtools/client/debugger/new/images/choo.svg
View File

@ -1,60 +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/. -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<g id="Layer_2">
<path fill="#132028" d="M190.475,376V203.308H81.266c-27.129,0-50.139,26-58.222,62.035c-9.877,1.302-17.62,13.541-17.62,28.455
c0,14.914,7.743,27.153,17.62,28.455c7.291,32.507,26.733,56.84,50.385,61.294v68.669h395.95V376H190.475z"/>
</g>
<g id="Layer_3">
<path fill="#575A5B" d="M490.712,427.977c0,30.941-25.082,56.023-56.023,56.023c-25.804,0-47.519-17.451-54.023-41.19
c-6.504,23.739-28.219,41.19-54.023,41.19c-30.941,0-56.023-25.082-56.023-56.023c0-30.941,25.082-56.023,56.023-56.023
c25.804,0,47.519,17.451,54.023,41.19c6.504-23.739,28.219-41.19,54.023-41.19C465.629,371.954,490.712,397.036,490.712,427.977z
M161.24,203.308l29.75-113.845H94.232l29.75,113.845h-13.668c-33.865,0-61.319,40.513-61.319,90.489
c0,49.976,27.453,90.489,61.319,90.489H294.27V203.308H161.24z M162.321,420.431c-13.164,0-24.458,8.002-29.285,19.408
c-4.826-11.405-16.121-19.408-29.284-19.408c-17.554,0-31.785,14.23-31.785,31.784c0,17.554,14.23,31.785,31.785,31.785
c13.164,0,24.458-8.002,29.284-19.408C137.863,475.998,149.157,484,162.321,484c17.554,0,31.784-14.23,31.784-31.785
C194.106,434.661,179.875,420.431,162.321,420.431z"/>
</g>
<g id="Layer_4">
<path fill="#FFB636" d="M200.78,384.287h-16.028c-20.105,0-36.403-40.513-36.403-90.489c0-49.976,16.298-90.489,36.403-90.489
h16.028c-20.105,0-36.403,40.513-36.403,90.489C164.378,343.773,180.676,384.287,200.78,384.287z M122.236,293.797
c0-49.976,16.298-90.489,36.403-90.489H142.61c-20.105,0-36.403,40.513-36.403,90.489c0,49.976,16.298,90.489,36.403,90.489h16.028
C138.534,384.287,122.236,343.773,122.236,293.797z"/>
</g>
<g id="Layer_5">
<path fill="#FF473E" d="M489.353,384.287H294.27V85.761h195.083V384.287z M74.21,384.103h-7.99c-2.436,0-4.707,1.48-6.035,3.934
l-43.633,80.594C13.436,474.387,16.874,482,22.587,482h52.826c4.027,0,7.271-3.968,7.199-8.806l-1.203-80.594
C81.339,387.883,78.136,384.103,74.21,384.103z"/>
</g>
<g id="Layer_6">
<path fill="#EF2020" d="M497.28,66.397H286.342c-5.92,0-10.72,4.8-10.72,10.72v1.626c0,5.92,4.8,10.72,10.72,10.72H497.28
c5.921,0,10.72-4.8,10.72-10.72v-1.626C508,71.197,503.201,66.397,497.28,66.397z"/>
</g>
<g id="Layer_7">
<path fill="#76DFFF" d="M371.466,257.523h-40.952c-3.976,0-7.2-3.224-7.2-7.2V124.018c0-3.976,3.224-7.2,7.2-7.2h40.952
c3.976,0,7.2,3.224,7.2,7.2v126.305C378.666,254.3,375.442,257.523,371.466,257.523z M460.474,250.323V124.018
c0-3.976-3.224-7.2-7.2-7.2h-40.952c-3.976,0-7.2,3.224-7.2,7.2v126.305c0,3.976,3.224,7.2,7.2,7.2h40.952
C457.251,257.523,460.474,254.3,460.474,250.323z"/>
</g>
<g id="Layer_8">
<path fill="#132028" d="M489.353,339.586H294.27v-36.582h195.083V339.586z M111.17,52L94.206,89.463h96.758L174,52H111.17z
M326.643,414.954c-7.192,0-13.023,5.831-13.023,13.023S319.451,441,326.643,441c7.192,0,13.023-5.831,13.023-13.023
S333.835,414.954,326.643,414.954z M434.689,414.954c-7.192,0-13.023,5.831-13.023,13.023S427.496,441,434.689,441
s13.023-5.831,13.023-13.023S441.881,414.954,434.689,414.954z M103.752,444.827c-4.081,0-7.389,3.308-7.389,7.389
s3.308,7.389,7.389,7.389c4.081,0,7.389-3.308,7.389-7.389S107.833,444.827,103.752,444.827z M162.321,444.827
c-4.081,0-7.389,3.308-7.389,7.389s3.308,7.389,7.389,7.389s7.389-3.308,7.389-7.389S166.402,444.827,162.321,444.827z"/>
</g>
<g id="Layer_9">
<path fill="#FFB636" d="M196.709,444.208h-92.957c-4.91,0-8.891-3.98-8.891-8.891s3.98-8.891,8.891-8.891h90.449l36.759-22.53
c1.398-0.857,3.006-1.311,4.646-1.311H459.54c4.91,0,8.891,3.98,8.891,8.891s-3.98,8.891-8.891,8.891H238.114l-36.759,22.53
C199.957,443.755,198.349,444.208,196.709,444.208z"/>
</g>
<g id="Layer_10">
<path fill="#ADB7BC" d="M69.849,393.079c-5.787,0-10.485-4.685-10.5-10.475c-0.014-5.799,4.676-10.512,10.475-10.525l413.924-1
c0.009,0,0.018,0,0.026,0c5.787,0,10.485,4.685,10.499,10.475c0.014,5.799-4.676,10.512-10.475,10.525l-413.924,1
C69.867,393.079,69.857,393.079,69.849,393.079z"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 4.3 KiB

4
devtools/client/debugger/new/images/dojo.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

4
devtools/client/debugger/new/images/ember.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 40 KiB

6
devtools/client/debugger/new/images/home.svg
View File

@ -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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path d="M15.7 7.3l-7-7c-.4-.4-1-.4-1.4 0l-7 7c-.4.4-.4 1 0 1.4.4.4 1 .4 1.4 0l.3-.3V13c0 1.7 1.3 3 3 3h6c1.7 0 3-1.3 3-3V8.4l.3.3c.2.2.4.3.7.3.3 0 .5-.1.7-.3.4-.4.4-1 0-1.4zM8 11.5c0-.3.2-.5.5-.5s.5.2.5.5-.2.5-.5.5-.5-.2-.5-.5zm4 1.5c0 .6-.4 1-1 1h-1V9c0-.6-.4-1-1-1H7c-.6 0-1 .4-1 1v5H5c-.6 0-1-.4-1-1V6.4l4-4 4 4V13z"></path>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 611 B

25
devtools/client/debugger/new/images/immutable.svg
View File

@ -1,25 +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/. -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="200.000000pt" height="200.000000pt" viewBox="0 0 200.000000 200.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,200.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M247 1663 c-4 -3 -7 -235 -7 -515 l0 -508 175 0 175 0 0 515 0 515
-168 0 c-93 0 -172 -3 -175 -7z m183 -508 c0 -336 -2 -385 -15 -385 -13 0 -15
49 -15 385 0 336 2 385 15 385 13 0 15 -49 15 -385z"/>
<path d="M697 1664 c-4 -4 -7 -236 -7 -516 l0 -508 165 0 165 0 2 181 3 181
99 -146 c54 -80 102 -146 106 -146 3 0 51 66 106 148 l99 147 3 -182 2 -183
160 0 160 0 0 515 0 515 -132 0 -133 -1 -130 -194 c-71 -107 -132 -194 -135
-194 -3 -1 -64 86 -135 192 l-131 192 -130 3 c-71 1 -133 -1 -137 -4z m356
-374 c92 -138 172 -250 176 -250 4 0 84 112 177 250 112 166 175 250 187 250
16 0 17 -25 17 -385 0 -336 -2 -385 -15 -385 -13 0 -15 46 -15 350 0 193 -4
350 -8 350 -4 0 -82 -108 -172 -240 -90 -132 -167 -240 -171 -240 -4 0 -81
108 -171 240 -90 131 -166 239 -170 240 -5 0 -8 -157 -8 -350 0 -304 -2 -350
-15 -350 -13 0 -15 49 -15 385 0 360 1 385 18 385 11 -1 74 -86 185 -250z"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

7
devtools/client/debugger/new/images/jquery.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 5.7 KiB

13
devtools/client/debugger/new/images/loader.svg
View File

@ -1,13 +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 version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/>
<path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
C22.32,8.481,24.301,9.057,26.013,10.047z">
</path>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 973 B

7
devtools/client/debugger/new/images/lodash.svg
View File

@ -1,7 +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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2500 2500">
<path d="M70 188.5h220v1460h870v180H70v-1640zm1776 396c-225-3-450 140-520 357-100 250-54 564 142 755 190 158 476 170 690 58 147-78 240-233 260-396 26-170 13-356-70-510-98-164-290-270-480-263l-22-3zm20 174c165 0 313 126 340 288 50 183 20 407-130 536-140 114-365 98-480-43-140-150-140-380-68-560 50-130 183-223 323-220h18z" fill="#000000" />
<path d="M70 2061.5h2360v250H70v-250z" fill="#3492ff"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 684 B

7
devtools/client/debugger/new/images/magnifying-glass.svg
View File

@ -1,7 +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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path class="st0" d="M9 9.3l3.6 3.6"/>
<ellipse fill="transparent" cx="5.9" cy="6.2" rx="4.5" ry="4.5"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 412 B

64
devtools/client/debugger/new/images/marko.svg
View File

@ -1,64 +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="256px" height="140px" viewBox="0 0 256 140" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
<defs>
<linearGradient x1="49.9109718%" y1="99.9084071%" x2="49.9109718%" y2="-0.0902654867%" id="linearGradient-1">
<stop stop-color="#8AC23E" offset="0%"></stop>
<stop stop-color="#8AC23E" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="49.9835165%" y1="0.0637125664%" x2="49.9835165%" y2="100.062389%" id="linearGradient-2">
<stop stop-color="#698932" offset="0%"></stop>
<stop stop-color="#698932" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50.0595611%" y1="0.0637125664%" x2="50.0595611%" y2="100.062389%" id="linearGradient-3">
<stop stop-color="#FFED01" offset="0%"></stop>
<stop stop-color="#FFED01" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50.0170846%" y1="0.0637125664%" x2="50.0170846%" y2="100.092699%" id="linearGradient-4">
<stop stop-color="#E02A89" offset="0%"></stop>
<stop stop-color="#E02A89" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="49.9631661%" y1="-0.0915929204%" x2="49.9631661%" y2="99.9070796%" id="linearGradient-5">
<stop stop-color="#7F1E4F" offset="0%"></stop>
<stop stop-color="#7F1E4F" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="49.9652038%" y1="-0.0915929204%" x2="49.9652038%" y2="99.9070796%" id="linearGradient-6">
<stop stop-color="#E95506" offset="0%"></stop>
<stop stop-color="#E95506" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="49.9766458%" y1="99.9084071%" x2="49.9766458%" y2="-0.0265486726%" id="linearGradient-7">
<stop stop-color="#88D0F1" offset="0%"></stop>
<stop stop-color="#88D0F1" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50.0205329%" y1="0.0637125664%" x2="50.0205329%" y2="99.9986726%" id="linearGradient-8">
<stop stop-color="#00828B" offset="0%"></stop>
<stop stop-color="#00828B" stop-opacity="0" offset="83.25%"></stop>
</linearGradient>
<linearGradient x1="50.078022%" y1="99.9752212%" x2="50.078022%" y2="0.0705752212%" id="linearGradient-9">
<stop stop-color="#2073BA" offset="0%"></stop>
<stop stop-color="#2073BA" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50.0177116%" y1="0.0637125664%" x2="50.0177116%" y2="99.9986726%" id="linearGradient-10">
<stop stop-color="#8ED0E1" offset="0%"></stop>
<stop stop-color="#88D0F1" stop-opacity="0" offset="100%"></stop>
</linearGradient>
</defs>
<g>
<path d="M128.1,0 L164.2,0 C150.9,21.8 136.2,45.8 121.5,69.7 L85.4,69.7 C100.1,45.8 114.8,21.8 128.1,0 Z" fill="#8DC220"></path>
<path d="M42.7,0 L78.8,0 C71.7,11.6 64.5,23.3 57.4,34.9 C50.3,46.5 43.2,58.1 36.1,69.7 C43.2,81.3 50.3,93 57.4,104.6 C64.5,116.2 71.6,127.8 78.8,139.4 L42.7,139.4 C35.6,127.8 28.4,116.2 21.3,104.6 C14.2,93.1 7.1,81.4 0,69.8 C7.1,58.2 14.2,46.6 21.3,35 C28.4,23.3 35.6,11.7 42.7,0 Z" fill="#44BFEF"></path>
<path d="M42.7,0 L42.7,0 C57.4,24 72.1,48 85.4,69.7 L121.5,69.7 C108.2,48 93.5,24 78.8,0 L78.8,0 L42.7,0 Z" fill="#00AC71"></path>
<path d="M164.2,0 L128.1,0 C135.2,11.6 142.3,23.3 149.5,34.9 C156.6,46.5 163.7,58.1 170.9,69.7 C163.8,81.3 156.6,93 149.5,104.6 C142.4,116.2 135.3,127.8 128.1,139.4 L164.2,139.4 C171.3,127.8 178.4,116.2 185.6,104.6 C192.7,93 199.8,81.4 207,69.7 C199.8,58.1 192.7,46.5 185.6,34.9 C178.5,23.3 171.3,11.7 164.2,0 Z" fill="#F9BC00"></path>
<path d="M149.3,24.6 L113.2,24.6 C108.6,32.1 104,39.7 99.4,47.2 C94.8,54.7 90.2,62.3 85.5,69.8 L121.6,69.8 C126.2,62.3 130.9,54.7 135.5,47.2 C140,39.6 144.6,32.1 149.3,24.6 Z" fill="url(#linearGradient-1)"></path>
<path d="M100.5,45.2 L136.6,45.2 C141.2,37.7 145.8,30.1 150.4,22.6 C155,15.1 159.6,7.5 164.2,0 L128.1,0 C123.5,7.5 118.9,15.1 114.3,22.6 C109.7,30.2 105.1,37.7 100.5,45.2 Z" fill="url(#linearGradient-2)"></path>
<path d="M191.9,45.2 L155.8,45.2 C151.2,37.7 146.5,30.1 141.9,22.6 C137.3,15.1 132.7,7.5 128.1,0 L164.2,0 C168.8,7.5 173.4,15.1 178,22.6 C182.7,30.2 187.3,37.7 191.9,45.2 Z" fill="url(#linearGradient-3)"></path>
<path d="M213.2,0 L177.1,0 C184.2,11.7 191.3,23.3 198.4,34.9 C205.5,46.5 212.7,58.1 219.8,69.7 C212.7,81.3 205.5,93 198.4,104.6 C191.3,116.2 184.2,127.8 177,139.4 L213.1,139.4 C220.2,127.8 227.3,116.2 234.5,104.6 C241.6,93 248.7,81.4 255.9,69.7 C248.8,58.1 241.7,46.5 234.5,34.9 C227.5,23.3 220.3,11.7 213.2,0 Z" fill="#DF1B1C"></path>
<path d="M240.9,45.2 L204.8,45.2 C200.1,37.7 195.5,30.1 190.9,22.6 C186.3,15.1 181.7,7.5 177.1,0 L213.2,0 C217.8,7.5 222.4,15.1 227,22.6 C231.6,30.2 236.3,37.7 240.9,45.2 Z" fill="url(#linearGradient-4)"></path>
<path d="M192.2,115 L228.3,115 C232.9,107.5 237.5,100 242.1,92.4 C246.7,84.9 251.3,77.3 256,69.8 L219.8,69.8 C215.2,77.3 210.6,84.9 206,92.4 C201.4,99.9 196.8,107.4 192.2,115 Z" fill="url(#linearGradient-5)"></path>
<path d="M143.2,115 L179.3,115 C183.9,107.5 188.5,99.9 193.1,92.4 C197.7,84.9 202.3,77.3 207,69.8 L170.9,69.8 C166.3,77.3 161.7,84.9 157.1,92.4 C152.4,99.9 147.8,107.4 143.2,115 Z" fill="url(#linearGradient-6)"></path>
<path d="M63.8,24.6 L27.7,24.6 C23.1,32.1 18.5,39.7 13.9,47.2 C9.2,54.7 4.6,62.3 0,69.8 L36.1,69.8 C40.7,62.3 45.3,54.8 49.9,47.2 C54.5,39.7 59.1,32.1 63.8,24.6 Z" fill="url(#linearGradient-7)"></path>
<path d="M15,45.2 L51.1,45.2 C55.7,37.7 60.3,30.1 64.9,22.6 C69.6,15.1 74.2,7.5 78.8,0 L42.7,0 C38.1,7.5 33.5,15 28.9,22.6 C24.3,30.1 19.7,37.7 15,45.2 Z" fill="url(#linearGradient-8)"></path>
<path d="M15,94.3 L51.1,94.3 C55.7,101.8 60.3,109.4 64.9,116.9 C69.5,124.4 74.1,132 78.7,139.5 L42.6,139.5 C38,132 33.3,124.5 28.7,116.9 C24.2,109.4 19.6,101.9 15,94.3 Z" fill="url(#linearGradient-9)"></path>
<path d="M106.5,45.2 L70.4,45.2 C65.8,37.7 61.2,30.1 56.6,22.6 C51.9,15.1 47.3,7.5 42.7,0 L78.8,0 C83.4,7.5 88,15 92.6,22.6 C97.3,30.1 101.9,37.7 106.5,45.2 Z" fill="url(#linearGradient-10)"></path>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 6.5 KiB

44
devtools/client/debugger/new/images/mobx.svg
View File

@ -1,44 +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 version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1200 1200" style="enable-background:new 0 0 1200 1200;" xml:space="preserve">
<style type="text/css">
.st0{clip-path:url(#SVGID_2_);}
.st1{fill:url(#SVGID_3_);}
.st2{fill:url(#SVGID_4_);}
.st3{opacity:0.28;fill:#C24411;}
.st4{fill:#FFFFFF;}
</style>
<g>
<defs>
<path id="SVGID_1_" d="M1088.7,1165.5H111.3c-42.4,0-76.7-34.4-76.7-76.7V111.3c0-42.4,34.4-76.7,76.7-76.7h977.4
c42.4,0,76.7,34.4,76.7,76.7v977.4C1165.5,1131.1,1131.1,1165.5,1088.7,1165.5z"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
</clipPath>
<g class="st0">
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="426.6738" y1="482.4993" x2="1284.413" y2="1239.9835">
<stop offset="0" style="stop-color:#F77122"/>
<stop offset="1" style="stop-color:#D6560A"/>
</linearGradient>
<polygon class="st1" points="573.6,1896.7 -87.9,1286.6 1204.5,-115 1866,495 "/>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="1128.9907" y1="-135.8044" x2="-496.2911" y2="788.1552">
<stop offset="0" style="stop-color:#D6560A"/>
<stop offset="1" style="stop-color:#F77122"/>
</linearGradient>
<polygon class="st2" points="-66.9,1307.6 -644.1,775.5 648.4,-626.1 1225.5,-94 "/>
<rect x="-143.7" y="-143.6" transform="matrix(0.9658 -0.2591 0.2591 0.9658 -201.3159 92.1307)" class="st3" width="785" height="1906.5"/>
</g>
</g>
<g>
<path class="st4" d="M384.9,900.1H245.4v-45.3h85.6V345.2h-85.6v-45.3h139.5V900.1z"/>
<path class="st4" d="M745.7,463c-16.1,60.4-35,118.2-56.7,173.6c-21.7,55.4-42.7,105-62.9,148.8H574
c-20.3-43.8-41.2-93.4-62.9-148.8c-21.7-55.4-40.6-113.2-56.7-173.6h62c5,20.3,10.8,41.9,17.7,64.8s14,45.7,21.7,68.2
c7.6,22.5,15.4,44.3,23.2,65.4c7.8,21.1,15.3,39.9,22.3,56.4c7-16.5,14.5-35.3,22.3-56.4c7.8-21.1,15.6-42.9,23.2-65.4
c7.6-22.5,14.9-45.3,21.7-68.2s12.7-44.5,17.7-64.8H745.7z"/>
<path class="st4" d="M815.1,299.9h139.5v45.3h-85.6v509.6h85.6v45.3H815.1V299.9z"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 KiB

33
devtools/client/debugger/new/images/moz.build
View File

@ -6,62 +6,29 @@
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
DevToolsModules(
'aframe.svg',
'angular.svg',
'arrow-down.svg',
'arrow-up.svg',
'arrow.svg',
'babel.svg',
'backbone.svg',
'blackBox.svg',
'breadcrumbs-divider.svg',
'breakpoint.svg',
'case-match.svg',
'choo.svg',
'close.svg',
'coffeescript.svg',
'command-chevron.svg',
'disable-pausing.svg',
'dojo.svg',
'domain.svg',
'ember.svg',
'extension.svg',
'file.svg',
'folder.svg',
'help.svg',
'home.svg',
'immutable.svg',
'javascript.svg',
'jquery.svg',
'loader.svg',
'lodash.svg',
'magnifying-glass.svg',
'marko.svg',
'mobx.svg',
'next-circle.svg',
'next.svg',
'nextjs.svg',
'nuxtjs.svg',
'pause.svg',
'plus.svg',
'preact.svg',
'prettyPrint.svg',
'pug.svg',
'react.svg',
'redux.svg',
'regex-match.svg',
'resume.svg',
'rxjs.svg',
'sencha-extjs.svg',
'stepIn.svg',
'stepOut.svg',
'stepOver.svg',
'tab.svg',
'toggle-panes.svg',
'typescript.svg',
'underscore.svg',
'vuejs.svg',
'webpack.svg',
'whole-word-match.svg',
'worker.svg',
)

9
devtools/client/debugger/new/images/next-circle.svg
View File

@ -1,9 +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 viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#0274E8">
<path d="M8,0 C3.581722,-2.705415e-16 5.41083001e-16,3.581722 0,8 C-5.41083001e-16,12.418278 3.581722,16 8,16 C12.418278,16 16,12.418278 16,8 C16,5.87826808 15.1571453,3.84343678 13.6568542,2.34314575 C12.1565632,0.842854723 10.1217319,1.2991861e-16 8,0 Z M8,15 C4.13400675,15 1,11.8659932 1,8 C1,4.13400675 4.13400675,1 8,1 C11.8659932,1 15,4.13400675 15,8 C15,9.85651543 14.2625021,11.6369928 12.9497475,12.9497475 C11.6369928,14.2625021 9.85651543,15 8,15 Z" id="Shape"></path>
<path d="M11.5,4 C11.2238576,4 11,4.22385763 11,4.5 L11,7.5 C10.9257751,7.36047643 10.8195383,7.24053164 10.69,7.15 L5.57,3.63 C5.2714387,3.432438 4.89004177,3.40955419 4.57,3.57 C4.22912746,3.732229 4.00866545,4.0725914 4,4.45 L4,11.55 C4.00294215,11.9207587 4.21077995,12.2594573 4.54,12.43 C4.68034771,12.5091766 4.83885991,12.5505276 5,12.55 C5.20390805,12.5495172 5.4027955,12.4867107 5.57,12.37 L10.69,8.82 C10.8195383,8.72946836 10.9257751,8.60952357 11,8.47 L11,11.47 C11,11.7461424 11.2238576,11.97 11.5,11.97 C11.7761424,11.97 12,11.7461424 12,11.47 L12,4.47 C11.9841101,4.20563806 11.7648386,3.99952289 11.5,4 Z M5,11.55 L5,4.45 L10.12,8 L5,11.55 Z" id="Shape"></path>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

8
devtools/client/debugger/new/images/next.svg
View File

@ -1,8 +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 version="1.1" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16">
<path d="M12.4,2.1c-0.3,0-0.5,0.2-0.5,0.5v4.8c0,0-0.1-0.1-0.1-0.1l-7.4-5C3.8,1.8,3,2.2,3,3v10c0,0.8,0.8,1.3,1.4,0.8l7.4-5
c0.1,0,0.1-0.1,0.1-0.1v4.8c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5v-11C12.9,2.3,12.7,2.1,12.4,2.1z M3.9,13V3l7.4,5L3.9,13z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 630 B

17
devtools/client/debugger/new/images/nextjs.svg
View File

@ -1,17 +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 viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" style="background: #FFFFFF;">
<title>Zeit - Black on white logo</title>
<defs>
<linearGradient x1="114.720775%" y1="181.283245%" x2="39.5399306%" y2="100%" id="linearGradient-1">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#000000" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Black-on-white" fill="url(#linearGradient-1)">
<polygon id="Triangle-3-Copy" points="254 156 367 356 141 356"></polygon>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 901 B

4
devtools/client/debugger/new/images/nuxtjs.svg
View File

@ -1,4 +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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000"><style>.st0{display:none}.st1{display:inline}.st2{fill:#222}.st3{fill:#41b883}.st4{fill:#328170}.st5{fill:#35495e}</style><g id="express" class="st0"><g class="st1"><path class="st2" d="M24.5 870.5v-376H494v-22H24.5v-343h499.1v-22H2.5v785H528v-22H24.5z"/><path class="st2" d="M951.3 327.4L756.7 583.6 566.5 327.4h-28.6l205.6 272.7-225.4 292.4h26.4l212.2-276 213.3 276h27.5L771 600l206.7-272.6h-26.4z"/></g></g><g id="nuxt"><path class="st3" d="M317.9 852H3.7l408.1-704 408.1 704H507.7"/><path class="st4" d="M779.8 852h216.5l-354-608.5-351 608.5h216.5"/><path class="st5" d="M651.2 852h159.5L549.9 403.8 291.3 852h159.5"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 952 B

6
devtools/client/debugger/new/images/plus.svg
View File

@ -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" xmlns="http://www.w3.org/2000/svg">
<path d="M8.5 8.5V14a.5.5 0 1 1-1 0V8.5H2a.5.5 0 0 1 0-1h5.5V2a.5.5 0 0 1 1 0v5.5H14a.5.5 0 1 1 0 1H8.5z" fill-rule="evenodd"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 433 B

11
devtools/client/debugger/new/images/preact.svg
View File

@ -1,11 +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="256px" height="296px" viewBox="0 0 256 296" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
<g>
<polygon fill="#673AB8" points="128 0 256 73.8999491 256 221.699847 128 295.599796 0 221.699847 0 73.8999491"></polygon>
<path d="M34.8647584,220.478469 C51.8814262,242.25881 105.959701,225.662965 157.014868,185.774297 C208.070035,145.885628 237.255632,97.428608 220.238964,75.6482664 C203.222296,53.8679249 149.144022,70.4637701 98.0888543,110.352439 C47.0336869,150.241107 17.8480906,198.698127 34.8647584,220.478469 Z M42.1343351,214.798853 C36.4908625,207.575537 38.9565723,193.395881 49.7081913,175.544904 C61.0297348,156.747677 80.2490923,135.997367 103.76847,117.622015 C127.287848,99.2466634 152.071368,85.6181573 173.049166,79.1803727 C192.970945,73.066665 207.325915,74.1045667 212.969387,81.3278822 C218.61286,88.5511977 216.14715,102.730854 205.395531,120.581832 C194.073987,139.379058 174.85463,160.129368 151.335252,178.50472 C127.815874,196.880072 103.032354,210.508578 82.054556,216.946362 C62.1327769,223.06007 47.7778077,222.022168 42.1343351,214.798853 Z" fill="#FFFFFF"></path>
<path d="M220.238964,220.478469 C237.255632,198.698127 208.070035,150.241107 157.014868,110.352439 C105.959701,70.4637701 51.8814262,53.8679249 34.8647584,75.6482664 C17.8480906,97.428608 47.0336869,145.885628 98.0888543,185.774297 C149.144022,225.662965 203.222296,242.25881 220.238964,220.478469 Z M212.969387,214.798853 C207.325915,222.022168 192.970945,223.06007 173.049166,216.946362 C152.071368,210.508578 127.287848,196.880072 103.76847,178.50472 C80.2490923,160.129368 61.0297348,139.379058 49.7081913,120.581832 C38.9565723,102.730854 36.4908625,88.5511977 42.1343351,81.3278822 C47.7778077,74.1045667 62.1327769,73.066665 82.054556,79.1803727 C103.032354,85.6181573 127.815874,99.2466634 151.335252,117.622015 C174.85463,135.997367 194.073987,156.747677 205.395531,175.544904 C216.14715,193.395881 218.61286,207.575537 212.969387,214.798853 Z" fill="#FFFFFF"></path>
<path d="M127.551861,167.666971 C138.378632,167.666971 147.155465,158.890139 147.155465,148.063368 C147.155465,137.236596 138.378632,128.459764 127.551861,128.459764 C116.72509,128.459764 107.948257,137.236596 107.948257,148.063368 C107.948257,158.890139 116.72509,167.666971 127.551861,167.666971 L127.551861,167.666971 Z" fill="#FFFFFF"></path>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.6 KiB

118
devtools/client/debugger/new/images/pug.svg
View File

@ -1,118 +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 version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
<style type="text/css">
.st0{fill:#C1272D;}
.st1{fill:#EFCCA3;}
.st2{fill:#ED1C24;}
.st3{fill:#CCAC8D;}
.st4{fill:#FFFFFF;}
.st5{fill:#FF931E;}
.st6{fill:#FFB81E;}
.st7{fill:#56332B;}
.st8{fill:#442823;}
.st9{fill:#7F4A41;}
.st10{fill:#331712;}
.st11{fill:#FFCC66;}
.st12{fill:#CCCCCC;}
.st13{fill:#B3B3B3;}
.st14{fill:#989898;}
.st15{fill:#323232;}
.st16{fill:#1E1E1E;}
.st17{fill:#4C4C4C;}
.st18{fill:#E6E6E6;}
.st19{fill:#606060;}
</style>
<g>
<path class="st1" d="M107.4,50.9c-0.2-4.4,0.4-8.3-1.6-11.6c-4.8-8.2-16.8-13-40.8-13V27c0,0-0.5,0-0.5,0c0,0,0.5,0,0.5,0v-0.7
c-24,0-36.6,4.8-41.4,13.1c-1.9,3.4-1.7,7.2-2,11.6c-0.2,3.5-1.8,7.2-1.1,11.2c0.8,5.2,1.1,10.4,1.9,15.2c0.6,3.9,6,7.2,6.5,10.9
c1.4,10.2,12,14.9,36,14.9v0.8h-0.6h0.1H65v-0.8c24,0,34.2-4.7,35.5-14.9c0.5-3.8,5.5-7,6.1-10.9c0.8-4.8,1.1-10,1.9-15.2
C109.2,58.2,107.6,54.4,107.4,50.9z"/>
<path class="st3" d="M64.6,54.5c4.3,0.1,7.3,2.8,10.1,5.3c3.3,2.9,8.9,4.9,11.2,7.4c2.3,2.5,5.3,5,6.4,8.9
c1.1,3.9,1.4,8.9,1.4,10.2c0,1.3,0.7,1,2.7,0c4.7-2.3,9.9-8.5,9.9-8.5c-0.6,3.9-5.7,7.4-6.2,11.1C98.9,99.1,89,104,64.5,104h-0.1h0
H65"/>
<path class="st3" d="M80.4,46.7c0.9,3.1,4.1,13.6-2.1,10.1c0,0,2.6,1.5,4.2,7.2c1.7,5.7,5.8,6.4,5.8,6.4s6.7,1.3,11.7-3
c4.2-3.6,4.9-10,3.1-14.9c-1.8-4.8-5-6.3-9.7-7.3C88.7,44.1,79.3,43.2,80.4,46.7z"/>
<g>
<circle cx="92.3" cy="58.1" r="8.8"/>
<circle class="st4" cx="90" cy="54.2" r="2.3"/>
</g>
<path class="st1" d="M78.9,57.7c0,0,7.9,5.4,12.2,10.7c4.3,5.3,4.2,6.3,4.2,6.3l-3.1,1.4c0,0-4.4-8.3-9.8-11.4
c-5.5-3.1-6.1-5.7-6.1-5.7L78.9,57.7z"/>
<path class="st3" d="M64.9,54.5c-4.3,0.1-7.5,2.8-10.4,5.3c-3.3,2.9-9.1,4.9-11.4,7.4c-2.3,2.5-5.4,5-6.5,8.9
c-1.1,3.9-1.5,8.9-1.5,10.2c0,1.3,0.2,1.4-2.7,0c-4.7-2.2-9.9-8.5-9.9-8.5c0.6,3.9,5.7,7.4,6.2,11.1C30.1,99.1,40,104,64.5,104h0.1
h0H65"/>
<path class="st7" d="M88.1,71.4C83.3,65.5,75.6,60,64.9,60h-0.1h0c-10.7,0-18.4,5.5-23.2,11.4c-5,6.1-4.6,8.5-4.6,14.3
c0,21,7.4,15,12.3,17.6c5,2.5,10.2,1.7,15.5,1.7h0h0.1c5.4,0,10.5,0.7,15.5-1.8c4.9-2.5,12.3,3.7,12.3-17.3
C92.8,80.1,93.1,77.5,88.1,71.4z"/>
<path class="st8" d="M64.4,65.2c0,0-0.7,9.7-2.1,11.6l2.6-0.6L64.4,65.2z"/>
<path class="st8" d="M65.1,65.2c0,0,0.7,9.7,2.1,11.6l-2.6-0.6L65.1,65.2z"/>
<path class="st7" d="M56.7,62.9c-1-2.3,2.6-6,8.3-6.1c5.7,0,9.3,3.7,8.3,6.1c-1,2.4-4.6,3.1-8.3,3.2C61.4,66,57.7,65.3,56.7,62.9z"
/>
<path d="M65,65.2c0-0.4,3.4-0.5,5.2-1.7c0,0-3.7,1.2-4.5,0.7c-0.8-0.4-1-1.6-1-1.6s-0.3,1.2-0.9,1.6c-0.7,0.4-4.9-0.7-4.9-0.7
s5.6,1.4,5.6,1.7c0,0.3-0.1,1.3-0.1,2c0,2.5,0,8.7,0.4,9.2c0.6,0.9,0.4-6.7,0.4-9.2C65.1,66.4,65.1,65.6,65,65.2z"/>
<path class="st9" d="M65.2,78.6c1.7,0,4.7,1.2,7.4,3.1c-2.6-2.9-5.7-4.9-7.4-4.9c-1.8,0-5.6,2.2-8.3,5.4
C59.7,80,63.3,78.6,65.2,78.6z"/>
<path class="st8" d="M64.5,96.3c-3.8,0-7.5-1.2-10.9-2.1c-0.7-0.2-1.4,0.3-2.1,0.1c-6.3-2-11.4-5.4-14.5-9.7c0,0.3,0,0.7,0,1
c0,21,7.4,15.1,12.3,17.6c5,2.5,10.2,1.7,15.5,1.7h0h0.1c5.4,0,10.5,0.7,15.5-1.8c4.9-2.5,12.3,3.6,12.3-17.4c0-0.8,0-1.6,0.1-2.3
c-2.9,4.7-8.2,8.4-14.8,10.6c-0.6,0.2-2-0.3-2.6-0.2C71.8,95,68.6,96.3,64.5,96.3z"/>
<path class="st8" d="M55,85c0,0-2.5,7.5-0.8,10.8l-2.3-1C51.9,94.8,53.6,87.2,55,85z"/>
<path class="st8" d="M74.8,85c0,0,2.5,7.5,0.8,10.8l2.3-1C77.9,94.8,76.1,87.2,74.8,85z"/>
<path class="st3" d="M48.6,46.7c-0.9,3.1-4.1,13.6,2.1,10.1c0,0-2.6,1.5-4.2,7.2s-5.8,6.4-5.8,6.4s-6.7,1.3-11.7-3
c-4.2-3.6-4.9-10-3.1-14.9s5-6.3,9.7-7.3C40.3,44.1,49.6,43.2,48.6,46.7z"/>
<path d="M64.9,76.8c2.7,0,11.1,5.8,11.2,12.9c0-0.1,0-0.2,0-0.4c0-7.4-6.8-13.3-11.2-13.3c-4.4,0-11.2,6-11.2,13.3
c0,0.1,0,0.2,0,0.4C53.8,82.6,62.2,76.8,64.9,76.8z"/>
<g>
<ellipse transform="matrix(0.9683 -0.2497 0.2497 0.9683 -13.2339 18.6065)" class="st10" cx="66.7" cy="61.5" rx="0.8" ry="1.5"/>
<ellipse transform="matrix(0.9551 0.2963 -0.2963 0.9551 21.0115 -15.7209)" class="st10" cx="62.4" cy="61.5" rx="0.8" ry="1.5"/>
</g>
<g>
<circle cx="37.2" cy="58.1" r="8.8"/>
<circle class="st4" cx="39.5" cy="54.2" r="2.3"/>
</g>
<g>
<path class="st9" d="M67.5,58.2c0-0.1-2.3,1-2.9,1.1c-0.6-0.1-2.9-1.2-2.9-1.1c0,0,1.9,0,2.9,0C65.6,58.2,67.5,58.2,67.5,58.2z"/>
</g>
<path class="st1" d="M50,57.7c0,0-7.9,5.4-12.2,10.7c-4.3,5.3-4.2,6.3-4.2,6.3l3.1,1.4c0,0,4.4-8.3,9.8-11.4s6.1-5.7,6.1-5.7
L50,57.7z"/>
<path class="st3" d="M32.7,41.7c0,0-2.7,7.4-8.7,10.5C24,52.2,33.4,51.1,32.7,41.7z"/>
<path class="st3" d="M95.8,41.7c0,0,2.7,7.4,8.7,10.5C104.5,52.2,95.1,51.1,95.8,41.7z"/>
<path class="st3" d="M78.7,55.5c0,0-5.9-6.2-13.8-6.4l0,0c-0.1,0,0.2,0,0.1,0c-0.1,0,0.1,0,0.1,0v0c-8,0.2-13.8,6.4-13.8,6.4
c6.9-4.8,12.8-4.7,13.8-4.7v0c0,0,0,0,0,0c0,0,0,0,0,0v0C65,50.8,71.8,50.7,78.7,55.5z"/>
<path class="st3" d="M71.8,42.5c0,0-3-4.2-7-4.3l0,0c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0v0c-3,0.1-6.9,4.3-6.9,4.3
c3.4-3.3,6.9-3.2,6.9-3.2v0c0,0,0,0,0,0c0,0,0,0,0,0v0C65,39.3,68.3,39.2,71.8,42.5z"/>
<path class="st3" d="M37.2,73.2c0,0-4.7,2.3-8.1,0.9l0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0v0c-3-1.7-4.5-6.8-4.5-6.8
S27.5,76.3,37.2,73.2z"/>
<path class="st3" d="M92,73.2c0,0,4.7,2.3,8.1,0.9l0,0c0,0,0,0,0,0c0,0,0,0,0,0v0c4-1.7,4.6-6.8,4.6-6.8S101.7,76.3,92,73.2z"/>
<g>
<path class="st3" d="M42.6,41.2c2.6-0.5,6.9-0.6,10.3,0.5c4.3,1.5,0.8,7,1.7,7.3c0.9,0.3,2.1-3.8,10.1-3.4c8.1,0.4,9,4,10.1,3.4
s-1.1-10,11-7.8c0,0-12.7-3.4-12.1,5.8c0,0-7.3-5.6-17.5-0.6C56.3,46.4,58.9,37.8,42.6,41.2z"/>
</g>
<path class="st3" d="M86.9,41.2c0.2,0,0.3,0.1,0.4,0.1C87.4,41.3,87.2,41.2,86.9,41.2z"/>
<path class="st3" d="M86.9,41.2C86.9,41.2,86.9,41.2,86.9,41.2C86.9,41.2,86.9,41.2,86.9,41.2z"/>
<path class="st3" d="M39.1,28.9c0,0-10.8,13.6-12.4,18.8c-1.6,5.3-2.8,27-4.2,30.1l-5-21.4l9.2-22.3L39.1,28.9z"/>
<path class="st3" d="M89.9,28.9c0,0,10.8,13.6,12.4,18.8c1.6,5.3,2.8,27,4.2,30.1l5-21.4l-9.2-22.3L89.9,28.9z"/>
<path class="st7" d="M89.4,28.9c0,0,11.6,9.7,15,20.9c3.4,11.2,2,24.8,4.6,26.5c3.7,2.4,7.9-11.9,9.3-13.4c2.2-2.4,9.5-8.5,10-9.6
c0.5-1.1-14.8-17.8-21.5-21.1C98.7,28.4,88.7,28.1,89.4,28.9z"/>
<path class="st8" d="M99.3,34.9c0,0,13.7,17.5,13.5,39.3l5.5-11.2C118.2,63,113.4,48.7,99.3,34.9z"/>
<path class="st7" d="M39.1,28.9c0,0-11.6,9.7-15,20.9s-2,24.8-4.6,26.5c-3.7,2.4-7.9-11.9-9.3-13.4c-2.2-2.4-9.5-8.5-10-9.6
c-0.5-1.1,14.8-17.8,21.5-21.1C29.8,28.4,39.8,28.1,39.1,28.9z"/>
<path class="st8" d="M29.2,34.9c0,0-13.7,17.5-13.5,39.3L10.3,63C10.3,63,15.1,48.7,29.2,34.9z"/>
<path class="st3" d="M21.8,74.6c0,0,1,5.4,2.6,7.1s0.5-1.3,0.5-1.3s-1.7-0.9-1.4-7.8S21.8,74.6,21.8,74.6z"/>
<path class="st3" d="M107.1,74.6c0,0-1,5.4-2.6,7.1s-0.5-1.3-0.5-1.3s1.7-0.9,1.4-7.8S107.1,74.6,107.1,74.6z"/>
<g>
<circle class="st8" cx="54.5" cy="70.5" r="0.8"/>
<circle class="st8" cx="49.9" cy="75.3" r="0.8"/>
<circle class="st8" cx="48.4" cy="70.5" r="0.8"/>
</g>
<g>
<circle class="st8" cx="74" cy="70.5" r="0.8"/>
<circle class="st8" cx="78.6" cy="75.3" r="0.8"/>
<circle class="st8" cx="80.1" cy="70.5" r="0.8"/>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 7.2 KiB

10
devtools/client/debugger/new/images/redux.svg
View File

@ -1,10 +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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<g fill="#764ABC">
<path d="M65.6 65.4c2.9-.3 5.1-2.8 5-5.8-.1-3-2.6-5.4-5.6-5.4h-.2c-3.1.1-5.5 2.7-5.4 5.8.1 1.5.7 2.8 1.6 3.7-3.4 6.7-8.6 11.6-16.4 15.7-5.3 2.8-10.8 3.8-16.3 3.1-4.5-.6-8-2.6-10.2-5.9-3.2-4.9-3.5-10.2-.8-15.5 1.9-3.8 4.9-6.6 6.8-8-.4-1.3-1-3.5-1.3-5.1-14.5 10.5-13 24.7-8.6 31.4 3.3 5 10 8.1 17.4 8.1 2 0 4-.2 6-.7 12.8-2.5 22.5-10.1 28-21.4z"/>
<path d="M83.2 53c-7.6-8.9-18.8-13.8-31.6-13.8H50c-.9-1.8-2.8-3-4.9-3h-.2c-3.1.1-5.5 2.7-5.4 5.8.1 3 2.6 5.4 5.6 5.4h.2c2.2-.1 4.1-1.5 4.9-3.4H52c7.6 0 14.8 2.2 21.3 6.5 5 3.3 8.6 7.6 10.6 12.8 1.7 4.2 1.6 8.3-.2 11.8-2.8 5.3-7.5 8.2-13.7 8.2-4 0-7.8-1.2-9.8-2.1-1.1 1-3.1 2.6-4.5 3.6 4.3 2 8.7 3.1 12.9 3.1 9.6 0 16.7-5.3 19.4-10.6 2.9-5.8 2.7-15.8-4.8-24.3z"/>
<path d="M32.4 67.1c.1 3 2.6 5.4 5.6 5.4h.2c3.1-.1 5.5-2.7 5.4-5.8-.1-3-2.6-5.4-5.6-5.4h-.2c-.2 0-.5 0-.7.1-4.1-6.8-5.8-14.2-5.2-22.2.4-6 2.4-11.2 5.9-15.5 2.9-3.7 8.5-5.5 12.3-5.6 10.6-.2 15.1 13 15.4 18.3 1.3.3 3.5 1 5 1.5-1.2-16.2-11.2-24.6-20.8-24.6-9 0-17.3 6.5-20.6 16.1-4.6 12.8-1.6 25.1 4 34.8-.5.7-.8 1.8-.7 2.9z"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

9
devtools/client/debugger/new/images/regex-match.svg
View File

@ -1,9 +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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 16" stroke="none" fillrule="evenodd">
<rect x="3" y="10" width="3" height="3" rx="1"></rect>
<rect x="12" y="3" width="2" height="9" rx="1"></rect>
<rect transform="translate(13.000000, 7.500000) rotate(60.000000) translate(-13.000000, -7.500000) " x="12" y="3" width="2" height="9" rx="1"></rect>
<rect transform="translate(13.000000, 7.500000) rotate(-60.000000) translate(-13.000000, -7.500000) " x="12" y="3" width="2" height="9" rx="1"></rect>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 775 B

35
devtools/client/debugger/new/images/rxjs.svg
View File

@ -1,35 +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="256px" height="247px" viewBox="0 0 256 247" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
<defs>
<radialGradient cx="78.7636112%" cy="37.8476394%" fx="78.7636112%" fy="37.8476394%" r="89.8725577%" id="radialGradient-1">
<stop stop-color="#F80090" offset="0%"></stop>
<stop stop-color="#4D008E" offset="100%"></stop>
</radialGradient>
<radialGradient cx="68.7389016%" cy="4.39833672%" fx="68.7389016%" fy="4.39833672%" r="81.7284786%" id="radialGradient-2">
<stop stop-color="#57008E" offset="0%"></stop>
<stop stop-color="#5C008E" offset="29.1746283%"></stop>
<stop stop-color="#F80090" offset="100%"></stop>
</radialGradient>
<linearGradient x1="18.2386532%" y1="0%" x2="81.1591125%" y2="84.3374763%" id="linearGradient-3">
<stop stop-color="#F70090" offset="0%"></stop>
<stop stop-color="#E50090" offset="66.9712865%"></stop>
<stop stop-color="#D6008F" stop-opacity="0.2" offset="82.7147533%"></stop>
<stop stop-color="#C10090" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="64.9060589%" y1="71.5585538%" x2="44.2897699%" y2="50%" id="linearGradient-4">
<stop stop-color="#B2008F" stop-opacity="0.151340138" offset="0%"></stop>
<stop stop-color="#F70090" stop-opacity="0.4" offset="40.0350765%"></stop>
<stop stop-color="#F60090" stop-opacity="0.891668" offset="64.8995536%"></stop>
<stop stop-color="#FF0090" offset="100%"></stop>
</linearGradient>
</defs>
<g>
<path d="M16.6852208,157.125328 C3.56690702,87.3798324 38.2363025,20.1145078 117.808706,11.1662199 C106.835616,-0.558801732 91.8452087,-0.646905628 84.9481697,0.779380087 C72.770288,4.66044372 73.1525932,12.540855 59.3390152,22.7199675 C45.6064437,30.5634307 38.7094156,24.5568182 28.7057455,32.6879515 C18.7234849,40.7583874 25.6888528,59.2851732 21.5022823,62.8870857 C17.3464381,70.0905489 4.45500952,76.5077264 2.10834286,85.6062545 C0.168948918,97.2420641 7.37241212,105.553752 7.09535584,115.527778 C7.92652468,123.839467 -1.17920693,128.539449 0.129052814,135.275796 C4.0477368,146.281025 11.600845,152.904887 15.1615723,155.958047 C15.9781085,156.533531 16.8404881,157.95083 16.6852208,157.125328 L16.6852208,157.125328 Z" fill="#FF0090"></path>
<path d="M158.275491,60.578542 C155.368486,60.578542 153.011422,58.2214776 153.011422,55.3144727 C153.011422,52.4074679 155.368486,50.0504035 158.275491,50.0504035 C161.182496,50.0504035 163.53956,52.4074679 163.53956,55.3144727 C163.53956,58.2214776 161.182496,60.578542 158.275491,60.578542 L158.275491,60.578542 Z M19.7566405,164.732808 C7.1500258,104.116773 46.1602355,53.4676156 121.704062,78.4026805 C166.031404,104.334594 221.793282,102.646102 224.307422,85.8832 C230.514061,65.7878769 196.047681,24.3767065 144.515214,13.5715117 C42.2814476,-6.37654026 -12.8335943,104.116774 19.7566405,164.732808 L19.7566405,164.732808 Z" fill="url(#radialGradient-1)"></path>
<path d="M187.458604,171.493257 C202.639072,173.137863 217.048769,169.494573 230.402327,158.61014 C210.228197,181.112651 185.002777,192.426521 156.059262,195.505171 C169.878829,207.254019 183.20579,212.546348 195.955366,210.281136 C160.528734,220.05679 130.847947,209.296529 94.7424273,173.340673 C92.8517347,183.020022 103.074741,198.100667 113.611745,207.727264 C52.4742909,181.221845 47.1143627,98.6544556 121.66531,78.3442237 C44.3844415,41.214641 0.686373501,113.357693 22.1558444,172.485931 C43.1623368,218.026693 99.1402667,253.085223 160.492163,245.3753 C190.292928,241.7251 234.79401,221.178935 252.973664,172.485931 C240.160919,183.983766 217.257941,193.997836 207.037617,194.765984 C241.628648,177.478781 260.301586,148.103896 255.060336,107.955387 C247.895106,125.013742 238.441392,138.114625 226.616076,147.112305 C251.735653,107.955387 247.425219,87.716426 228.832526,65.4732398 C242.131228,102.044668 224.928249,142.633967 187.458604,171.493257 L187.458604,171.493257 Z" fill="url(#radialGradient-2)"></path>
<path d="M169.707072,213.625541 C167.082407,213.13513 175.656929,217.098842 159.079366,212.710316 C142.501804,208.32179 125.622502,204.092744 94.7424273,173.340673 C92.8517347,183.020022 103.074741,198.100667 113.611745,207.727264 C142.056275,227.564927 122.711866,218.286797 166.051946,233.269481 C169.52976,226.346862 169.707072,220.195346 169.707072,213.625541 L169.707072,213.625541 Z" fill="url(#linearGradient-3)"></path>
<path d="M114.601372,57.8510108 C114.601372,57.8510108 118.369452,52.2893628 119.836219,49.7810251 C121.633641,46.7072319 124.393939,41.104618 124.393939,41.104618 C124.393939,41.104618 95.389611,31.6417749 88.2716448,30.4871665 C66.1450215,36.2308801 66.0645022,45.5009559 78.435065,59.690116 C79.8114806,61.2693368 114.601372,57.8510108 114.601372,57.8510108 L114.601372,57.8510108 Z" fill="url(#linearGradient-4)"></path>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 5.1 KiB

48
devtools/client/debugger/new/images/sencha-extjs.svg
View File

@ -1,48 +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
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
id="svg2"
viewBox="0 0 34 34"
height="34"
width="34">
<defs
id="defs4">
<linearGradient
id="linearGradient4275">
<stop
id="stop4277"
offset="0"
style="stop-color:#006e00;stop-opacity:1" />
<stop
style="stop-color:#00cc00;stop-opacity:1;"
offset="0.55349338"
id="stop4283" />
<stop
id="stop4279"
offset="1"
style="stop-color:#eeff2a;stop-opacity:1" />
</linearGradient>
<linearGradient
gradientTransform="matrix(0.03267513,0,0,0.03267513,5.555801,1018.6805)"
gradientUnits="userSpaceOnUse"
y2="275.13159"
x2="162.84953"
y1="823.703"
x1="555.89331"
id="linearGradient4281"
xlink:href="#linearGradient4275" />
</defs>
<g
transform="translate(0,-1018.3622)"
id="layer1">
<path
id="path4136"
d="m 13.661978,1019.0545 c -9.6447445,1.1926 -10.316754,13.2244 -4.2596149,18.1959 6.0571409,4.9714 13.9697969,9.3171 10.7466029,14.4295 9.372821,-1.0092 10.165143,-10.5469 5.793842,-15.3419 -4.371301,-4.7949 -17.4582341,-10.442 -12.28083,-17.2835 z"
style="opacity:1;fill:url(#linearGradient4281);fill-opacity:1;stroke:#000080;stroke-width:0.29986507;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 KiB

7
devtools/client/debugger/new/images/toggle-panes.svg
View File

@ -1,7 +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" xmlns="http://www.w3.org/2000/svg" fill="#0b0b0b">
<path fill-opacity=".3" d="M12,3h2v10h-2V3z M5,9.9V6.1L8,8L5,9.9z"/>
<path d="M14,2H2C1.4,2,1,2.4,1,3v10c0,0.6,0.4,1,1,1h12c0.6,0,1-0.4,1-1V3C15,2.4,14.6,2,14,2z M2,13L2,13V3h0h9v10 H2L2,13z M14,13C14,13,14,13,14,13h-2V3h2c0,0,0,0,0,0V13z M8.5,7.2l-3-1.9C4.6,4.7,4,5,4,6.1v3.8c0,1.1,0.6,1.4,1.5,0.8l3-1.9 C9.5,8.3,9.5,7.8,8.5,7.2z M5,9.9V6.1L8,8L5,9.9z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 682 B

8
devtools/client/debugger/new/images/underscore.svg
View File

@ -1,8 +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/. -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
<rect fill="#002f42" width="16" x="0" y="28" height="4" />
<rect fill="#0072b1" width="16" x="16" y="28" height="4" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 582 B

6
devtools/client/debugger/new/images/webpack.svg
View File

@ -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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 774 875.7"><title>icon</title>
<path fill="#FFF" d="M387 0l387 218.9v437.9L387 875.7 0 656.8V218.9z"/><path fill="#8ed6fb" d="M704.9 641.7L399.8 814.3V679.9l190.1-104.6 115 66.4zm20.9-18.9V261.9l-111.6 64.5v232l111.6 64.4zM67.9 641.7L373 814.3V679.9L182.8 575.3 67.9 641.7zM47 622.8V261.9l111.6 64.5v232L47 622.8zm13.1-384.3L373 61.5v129.9L172.5 301.7l-1.6.9-110.8-64.1zm652.6 0l-312.9-177v129.9l200.5 110.2 1.6.9 110.8-64z"/><path fill="#1c78c0" d="M373 649.3L185.4 546.1V341.8L373 450.1v199.2zm26.8 0l187.6-103.1V341.8L399.8 450.1v199.2zm-13.4-207zM198.1 318.2l188.3-103.5 188.3 103.5-188.3 108.7-188.3-108.7z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 889 B

13
devtools/client/debugger/new/images/whole-word-match.svg
View File

@ -1,13 +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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" stroke="none" fillrule="evenodd">
<rect opacity="0.6" x="1" y="3" width="2" height="6"></rect>
<rect opacity="0.6" x="17" y="3" width="2" height="6"></rect>
<rect x="6" y="3" width="2" height="6"></rect>
<rect x="12" y="3" width="2" height="6"></rect>
<rect x="9" y="3" width="2" height="6"></rect>
<path d="M4.5,13 L15.5,13 L16,13 L16,12 L15.5,12 L4.5,12 L4,12 L4,13 L4.5,13 L4.5,13 Z"></path>
<path d="M4,10.5 L4,12.5 L4,13 L5,13 L5,12.5 L5,10.5 L5,10 L4,10 L4,10.5 L4,10.5 Z"></path>
<path d="M15,10.5 L15,12.5 L15,13 L16,13 L16,12.5 L16,10.5 L16,10 L15,10 L15,10.5 L15,10.5 Z"></path>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 927 B

26
devtools/client/debugger/new/src/actions/README.md
View File

@ -1,26 +0,0 @@
## Actions
### Best Practices
#### Scheduling Async Actions
There are several use-cases with async actions that involve scheduling:
* we do one action and cancel subsequent actions
* we do one action and subsequent calls wait on the initial call
* we start an action and show a loading state
If you want to wait on subsequent calls you need to store action promises.
[ex][req]
If you just want to cancel subsequent calls, you can keep track of a pending
state in the store. [ex][state]
The advantage of adding the pending state to the store is that we can use that
in the UI:
* disable/hide the pretty print button
* show a progress ui
[req]: https://github.com/devtools-html/debugger.html/blob/master/src/actions/sources/loadSourceText.js
[state]: https://github.com/devtools-html/debugger.html/blob/master/src/reducers/sources.js

2
devtools/client/debugger/new/src/actions/breakpoints/index.js
View File

@ -480,7 +480,7 @@ export function updateXHRBreakpoint(
...breakpoint,
path,
method,
text: L10N.getFormatStr("xhrBreakpoints.item.label", path)
text: `URL contains "${path}"`
};
return dispatch({

42
devtools/client/debugger/new/src/actions/breakpoints/tests/__snapshots__/breakpoints.spec.js.snap
View File

@ -37,32 +37,15 @@ Array [
Object {
"breakpoints": Array [
Object {
"astLocation": Object {
"index": 0,
"name": undefined,
"offset": Object {
"line": 2,
"sourceId": "a",
"sourceUrl": "http://localhost:8000/examples/a",
},
},
"condition": null,
"disabled": false,
"generatedLocation": Object {
"line": 2,
"sourceId": "a",
"sourceUrl": "http://localhost:8000/examples/a",
},
"hidden": false,
"id": "hi",
"loading": false,
"location": Object {
"log": false,
"selectedLocation": Object {
"line": 2,
"sourceId": "a",
"sourceUrl": "http://localhost:8000/examples/a",
},
"log": false,
"originalText": "return a",
"text": "return a",
},
],
@ -124,32 +107,15 @@ Array [
Object {
"breakpoints": Array [
Object {
"astLocation": Object {
"index": 0,
"name": undefined,
"offset": Object {
"line": 5,
"sourceId": "a",
"sourceUrl": "http://localhost:8000/examples/a",
},
},
"condition": null,
"disabled": true,
"generatedLocation": Object {
"line": 5,
"sourceId": "a",
"sourceUrl": "http://localhost:8000/examples/a",
},
"hidden": false,
"id": "hi",
"loading": false,
"location": Object {
"log": false,
"selectedLocation": Object {
"line": 5,
"sourceId": "a",
"sourceUrl": "http://localhost:8000/examples/a",
},
"log": false,
"originalText": "",
"text": "",
},
],

3
devtools/client/debugger/new/src/actions/debuggee.js
View File

@ -6,15 +6,12 @@
import type { Action, ThunkArgs } from "./types";
import { closeTabsForMissingThreads } from "./tabs";
import { features } from "../utils/prefs";
export function updateWorkers() {
return async function({ dispatch, getState, client }: ThunkArgs) {
const workers = await client.fetchWorkers();
dispatch(({ type: "SET_WORKERS", workers }: Action));
if (features.windowlessWorkers) {
dispatch(closeTabsForMissingThreads(workers));
}
};
}

172
devtools/client/debugger/new/src/actions/event-listeners.js
View File

@ -2,31 +2,167 @@
* 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/>. */
// @flow
/* global window gThreadClient setNamedTimeout EVENTS */
/* eslint no-shadow: 0 */
import { asyncStore } from "../utils/prefs";
/**
* Redux actions for the event listeners state
* @module actions/event-listeners
*/
import type { ThunkArgs } from "./types";
import type { EventListenerBreakpoints } from "../types";
import { reportException } from "../utils/DevToolsUtils";
import { isPaused, getSourceByURL } from "../selectors";
import { NAME as WAIT_UNTIL } from "./utils/middleware/wait-service";
export function addEventListeners(events: EventListenerBreakpoints) {
return async ({ dispatch, client }: ThunkArgs) => {
await dispatch({
type: "ADD_EVENT_LISTENERS",
events
// delay is in ms
const FETCH_EVENT_LISTENERS_DELAY = 200;
let fetchListenersTimerID;
/**
* @memberof utils/utils
* @static
*/
async function asPaused(state: any, client: any, func: any) {
if (!isPaused(state)) {
await client.interrupt();
let result;
try {
result = await func(client);
} catch (e) {
// Try to put the debugger back in a working state by resuming
// it
await client.resume();
throw e;
}
await client.resume();
return result;
}
return func(client);
}
/**
* @memberof actions/event-listeners
* @static
*/
export function fetchEventListeners() {
return ({ dispatch, getState, client }) => {
// Make sure we"re not sending a batch of closely repeated requests.
// This can easily happen whenever new sources are fetched.
if (fetchListenersTimerID) {
clearTimeout(fetchListenersTimerID);
}
fetchListenersTimerID = setTimeout(() => {
// In case there is still a request of listeners going on (it
// takes several RDP round trips right now), make sure we wait
// on a currently running request
if (getState().eventListeners.fetchingListeners) {
dispatch({
type: WAIT_UNTIL,
predicate: action =>
action.type === "FETCH_EVENT_LISTENERS" && action.status === "done",
run: dispatch => dispatch(fetchEventListeners())
});
const newList = await asyncStore.eventListenerBreakpoints;
client.setEventListenerBreakpoints(newList);
return;
}
dispatch({
type: "FETCH_EVENT_LISTENERS",
status: "begin"
});
asPaused(getState(), client, _getEventListeners).then(listeners => {
dispatch({
type: "FETCH_EVENT_LISTENERS",
status: "done",
listeners: formatListeners(getState(), listeners)
});
});
}, FETCH_EVENT_LISTENERS_DELAY);
};
}
export function removeEventListeners(events: EventListenerBreakpoints) {
return async ({ dispatch, client }: ThunkArgs) => {
await dispatch({
type: "REMOVE_EVENT_LISTENERS",
events
function formatListeners(state, listeners) {
return listeners.map(l => {
return {
selector: l.node.selector,
type: l.type,
sourceId: getSourceByURL(state, l.function.location.url).id,
line: l.function.location.line
};
});
}
async function _getEventListeners(threadClient) {
const response = await threadClient.eventListeners();
// Make sure all the listeners are sorted by the event type, since
// they"re not guaranteed to be clustered together.
response.listeners.sort((a, b) => (a.type > b.type ? 1 : -1));
// Add all the listeners in the debugger view event linsteners container.
const fetchedDefinitions = new Map();
const listeners = [];
for (const listener of response.listeners) {
let definitionSite;
if (fetchedDefinitions.has(listener.function.actor)) {
definitionSite = fetchedDefinitions.get(listener.function.actor);
} else if (listener.function.class == "Function") {
definitionSite = await _getDefinitionSite(
threadClient,
listener.function
);
if (!definitionSite) {
// We don"t know where this listener comes from so don"t show it in
// the UI as breaking on it doesn"t work (bug 942899).
continue;
}
fetchedDefinitions.set(listener.function.actor, definitionSite);
}
listener.function.url = definitionSite;
listeners.push(listener);
}
fetchedDefinitions.clear();
return listeners;
}
async function _getDefinitionSite(threadClient, func) {
const grip = threadClient.pauseGrip(func);
let response;
try {
response = await grip.getDefinitionSite();
} catch (e) {
// Don't make this error fatal, it would break the entire events pane.
reportException("_getDefinitionSite", e);
return null;
}
return response.source.url;
}
/**
* @memberof actions/event-listeners
* @static
* @param {string} eventNames
*/
export function updateEventBreakpoints(eventNames) {
return dispatch => {
setNamedTimeout("event-breakpoints-update", 0, () => {
gThreadClient.pauseOnDOMEvents(eventNames, () => {
// Notify that event breakpoints were added/removed on the server.
window.emit(EVENTS.EVENT_BREAKPOINTS_UPDATED);
dispatch({
type: "UPDATE_EVENT_BREAKPOINTS",
eventNames: eventNames
});
});
});
const newList = await asyncStore.eventListenerBreakpoints;
client.setEventListenerBreakpoints(newList);
};
}

2
devtools/client/debugger/new/src/actions/index.js
View File

@ -6,7 +6,6 @@
import * as breakpoints from "./breakpoints";
import * as expressions from "./expressions";
import * as eventListeners from "./event-listeners";
import * as pause from "./pause";
import * as navigation from "./navigation";
import * as ui from "./ui";
@ -25,7 +24,6 @@ export default {
...navigation,
...breakpoints,
...expressions,
...eventListeners,
...sources,
...tabs,
...pause,

1
devtools/client/debugger/new/src/actions/moz.build
View File

@ -14,7 +14,6 @@ DIRS += [
DebuggerModules(
'ast.js',
'debuggee.js',
'event-listeners.js',
'expressions.js',
'file-search.js',
'index.js',

4
devtools/client/debugger/new/src/actions/project-text-search.js
View File

@ -30,6 +30,10 @@ export function addOngoingSearch(ongoingSearch: SearchOperation): Action {
return { type: "ADD_ONGOING_SEARCH", ongoingSearch };
}
export function clearSearchQuery(): Action {
return { type: "CLEAR_QUERY" };
}
export function addSearchResult(
sourceId: string,
filepath: string,

3
devtools/client/debugger/new/src/actions/sources/newSources.js
View File

@ -44,8 +44,7 @@ function createOriginalSource(
isPrettyPrinted: false,
isWasm: false,
isBlackBoxed: false,
loadedState: "unloaded",
introductionUrl: null
loadedState: "unloaded"
};
}

3
devtools/client/debugger/new/src/actions/sources/prettyPrint.js
View File

@ -42,8 +42,7 @@ export function createPrettySource(sourceId: string) {
isPrettyPrinted: true,
isWasm: false,
contentType: "text/javascript",
loadedState: "loading",
introductionUrl: null
loadedState: "loading"
};
dispatch(({ type: "ADD_SOURCE", source: prettySource }: Action));

1
devtools/client/debugger/new/src/actions/sources/tests/__snapshots__/prettyPrint.spec.js.snap
View File

@ -5,7 +5,6 @@ Object {
"contentType": "text/javascript",
"error": undefined,
"id": "base.js/originalSource-36c718d4bde9a75edb388ff7733efe7f",
"introductionUrl": null,
"isBlackBoxed": false,
"isPrettyPrinted": true,
"isWasm": false,

13
devtools/client/debugger/new/src/actions/tests/project-text-search.spec.js
View File

@ -61,6 +61,19 @@ describe("project text search", () => {
expect(getTextSearchQuery(getState())).toEqual(mockQuery);
});
it("should remove the project text search query", () => {
const { dispatch, getState } = createStore();
const mockQuery = "foo";
dispatch(actions.addSearchQuery(mockQuery));
expect(getTextSearchQuery(getState())).toEqual(mockQuery);
dispatch(actions.updateSearchStatus("DONE"));
dispatch(actions.clearSearchQuery());
expect(getTextSearchQuery(getState())).toEqual("");
const status = getTextSearchStatus(getState());
expect(status).toEqual("INITIAL");
});
it("should search all the loaded sources based on the query", async () => {
const { dispatch, getState } = createStore(threadClient);
const mockQuery = "foo";

1
devtools/client/debugger/new/src/actions/types/index.js
View File

@ -111,6 +111,7 @@ export type ProjectTextSearchAction =
+type: "ADD_SEARCH_RESULT",
+result: ProjectTextSearchResult
|}
| {| +type: "CLEAR_QUERY" |}
| {| +type: "UPDATE_STATUS", +status: string |}
| {| +type: "CLEAR_SEARCH_RESULTS" |}
| {| +type: "ADD_ONGOING_SEARCH", +ongoingSearch: SearchOperation |}

53
devtools/client/debugger/new/src/client/README.md
View File

@ -1,53 +0,0 @@
# Debugger Client
The Debugger client is responsible for managing the communication between the
client application and JS server.
* When the server sends a notification to the client, the client receives an
"event" and notifies the application via redux actions.
* When the application, wants to send a command to the server, it invokes
"commands" in the client.
The Debugger supports a Firefox and a Chrome client, which lets it attach and
debug Firefox, Chrome, and Node contexts. The clients are defined in
`src/client` and have an `onConnect` function, and a `commands` and `events`
module.
Both clients implement client adapters for translating commands and events into
JSON packets. The chrome client debugger adapter is defined in
[chrome-remote-interface][chrome-remote-interface]. The Firefox client adapters
are defined in two places:
* The launchpad client adapter is maintained in the package
[devtools-connection][dt-connect].
* The panel client adapter is maintained in
[devtools-client.js][devtools-client.js].
## Firefox
### Remote Debugger Protocol
The [Remote Debugger Protocol][protocol] specifies the client / server API.
### Interrupt
When the client wants to add a breakpoint, it avoids race conditions by doing
temporary pauses called interrupts.
We want to do these interrupts transparently, so we've decided that the client
should not notify the application that the thread has been paused or resumed.
[protocol]: https://searchfox.org/mozilla-central/source/devtools/docs/backend/protocol.md
[dt-connect]: https://github.com/devtools-html/devtools-core/tree/master/packages/devtools-connection
[devtools-client.js]: https://searchfox.org/mozilla-central/source/devtools/shared/client/debugger-client.js
## Chrome
### Chrome Debugger Protocol
The chrome debugger protocol is available [here][devtools-protocol-viewer]. And
is maintained in the devtools-protocol [repo][devtools-protocol-gh].
[chrome-remote-interface]: https://github.com/cyrus-and/chrome-remote-interface
[devtools-protocol-viewer]: https://chromedevtools.github.io/devtools-protocol/
[devtools-protocol-gh]: https://github.com/ChromeDevTools/devtools-protocol

6
devtools/client/debugger/new/src/client/firefox/commands.js
View File

@ -7,7 +7,6 @@
import type {
BreakpointId,
BreakpointResult,
EventListenerBreakpoints,
Frame,
FrameId,
SourceLocation,
@ -387,10 +386,6 @@ function eventListeners(): Promise<*> {
return threadClient.eventListeners();
}
function setEventListenerBreakpoints(eventTypes: EventListenerBreakpoints) {
// TODO: Figure out what sendpoint we want to hit
}
function pauseGrip(thread: string, func: Function): ObjectClient {
return lookupThreadClient(thread).pauseGrip(func);
}
@ -488,7 +483,6 @@ const clientCommands = {
sendPacket,
setPausePoints,
setSkipPausing,
setEventListenerBreakpoints,
registerSource
};

66
devtools/client/debugger/new/src/client/firefox/tests/__snapshots__/commands.spec.js.snap
View File

@ -1,66 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`firefox commands getProperties empty response 1`] = `
Object {
"ownProperties": Object {},
"safeGetterValues": Object {},
}
`;
exports[`firefox commands getProperties getter values 1`] = `
Object {
"ownProperties": Object {
"foo": Object {
"value": "foo",
},
"obj": Object {
"enumerable": true,
"value": "getter",
"writable": false,
},
},
"safeGetterValues": Object {
"obj": Object {
"enumerable": true,
"getterValue": "getter",
"writable": false,
},
},
}
`;
exports[`firefox commands getProperties new getter values 1`] = `
Object {
"ownProperties": Object {
"foo": Object {
"value": "foo",
},
"obj": Object {
"enumerable": true,
"value": "getter",
"writable": false,
},
},
"safeGetterValues": Object {
"obj": Object {
"enumerable": true,
"getterValue": "getter",
"writable": false,
},
},
}
`;
exports[`firefox commands getProperties simple properties 1`] = `
Object {
"ownProperties": Object {
"foo": Object {
"value": "foo",
},
"obj": Object {
"value": "obj",
},
},
"safeGetterValues": Object {},
}
`;

3
devtools/client/debugger/new/src/client/firefox/types.js
View File

@ -371,8 +371,7 @@ export type ThreadClient = {
_parent: TabClient,
actor: ActorId,
request: (payload: Object) => Promise<*>,
url: string,
setEventListenerBreakpoints: (string[]) => void
url: string
};
/**

3
devtools/client/debugger/new/src/client/index.js
View File

@ -41,11 +41,10 @@ async function loadInitialState() {
const pendingBreakpoints = await asyncStore.pendingBreakpoints;
const tabs = await asyncStore.tabs;
const xhrBreakpoints = await asyncStore.xhrBreakpoints;
const eventListenerBreakpoints = await asyncStore.eventListenerBreakpoints;
const breakpoints = initialBreakpointsState(xhrBreakpoints);
return { pendingBreakpoints, tabs, breakpoints, eventListenerBreakpoints };
return { pendingBreakpoints, tabs, breakpoints };
}
function getClient(connection: any) {

29
devtools/client/debugger/new/src/components/Editor/ColumnBreakpoint.js
View File

@ -6,7 +6,6 @@
import React, { PureComponent } from "react";
import ReactDOM from "react-dom";
import classnames from "classnames";
import actions from "../../actions";
import { getDocument } from "../../utils/editor";
import Svg from "../shared/Svg";
@ -21,23 +20,23 @@ type Props = {
editor: Object,
source: Object,
enabled: boolean,
toggleBreakpoint: typeof actions.toggleBreakpoint,
toggleBreakpoint: (number, number) => void,
columnBreakpoint: ColumnBreakpointType
};
const breakpointImg = document.createElement("div");
ReactDOM.render(<Svg name={"column-marker"} />, breakpointImg);
function makeBookmark({ breakpoint }, { onClick }) {
function makeBookmark(isActive, condition, { onClick }) {
const bp = breakpointImg.cloneNode(true);
const isActive = breakpoint && !breakpoint.disabled;
const condition = breakpoint && breakpoint.condition;
bp.className = classnames("column-breakpoint", {
"has-condition": condition,
active: isActive,
disabled: !isActive
});
const className = isActive ? "active" : "disabled";
bp.className = classnames(
"column-breakpoint",
{
"has-condition": condition
},
className
);
if (condition) {
bp.setAttribute("title", condition);
}
@ -60,9 +59,13 @@ export default class ColumnBreakpoint extends PureComponent<Props> {
}
const { line, column } = columnBreakpoint.location;
const widget = makeBookmark(columnBreakpoint, {
const widget = makeBookmark(
columnBreakpoint.enabled,
columnBreakpoint.condition,
{
onClick: this.toggleBreakpoint
});
}
);
this.bookmark = doc.setBookmark({ line: line - 1, ch: column }, { widget });
};

6
devtools/client/debugger/new/src/components/Editor/Editor.css
View File

@ -25,10 +25,6 @@
min-width: 0 !important;
}
.CodeMirror.cm-s-mozilla, .CodeMirror-scroll, .CodeMirror-sizer {
overflow-anchor: none;
}
.theme-dark {
--theme-conditional-breakpoint-color: #9fa4a9;
}
@ -75,7 +71,7 @@ html[dir="rtl"] .editor-mount {
}
.theme-dark .cm-s-mozilla .empty-line .CodeMirror-linenumber {
color: var(--grey-50);
color: var(--grey-60);
}
:not(.empty-line):not(.new-breakpoint)

2
devtools/client/debugger/new/src/components/Editor/Footer.css
View File

@ -86,7 +86,7 @@
.source-footer .mapped-source,
.source-footer .cursor-position {
color: var(--theme-body-color);
padding-right: 2.5px;
padding-left: 2.5px;
}
.source-footer .mapped-source {

5
devtools/client/debugger/new/src/components/Editor/Footer.js
View File

@ -6,6 +6,7 @@
import React, { PureComponent } from "react";
import { connect } from "../../utils/connect";
import classnames from "classnames";
import Svg from "../shared/Svg";
import actions from "../../actions";
import {
getSelectedSource,
@ -75,7 +76,7 @@ class SourceFooter extends PureComponent<Props, State> {
if (isLoading(selectedSource) && selectedSource.isPrettyPrinted) {
return (
<div className="loader" key="pretty-loader">
<AccessibleImage className="loader" />
<Svg name="loader" />
</div>
);
}
@ -238,8 +239,8 @@ class SourceFooter extends PureComponent<Props, State> {
<div className="source-footer">
{this.renderCommands()}
{this.renderSourceSummary()}
{this.renderCursorPosition()}
{this.renderToggleButton()}
{this.renderCursorPosition()}
</div>
);
}

15
devtools/client/debugger/new/src/components/Editor/Preview/Popup.js
View File

@ -26,7 +26,7 @@ import { getAllPopupObjectProperties } from "../../../selectors";
import Popover from "../../shared/Popover";
import PreviewFunction from "../../shared/PreviewFunction";
import AccessibleImage from "../../shared/AccessibleImage";
import Svg from "../../shared/Svg";
import { createObjectClient } from "../../../client/firefox";
import "./Popup.css";
@ -198,12 +198,23 @@ export class Popup extends Component<Props, State> {
return (
<div className="header-container">
<AccessibleImage className="logo react" />
<Svg name="react" className="logo" />
<h3>{reactHeader}</h3>
</div>
);
}
renderImmutable(immutable: Object) {
const immutableHeader = immutable.type || "Immutable";
return (
<div className="header-container">
<Svg name="immutable" className="logo" />
<h3>{immutableHeader}</h3>
</div>
);
}
renderObjectPreview() {
const root = this.getRoot();

14
devtools/client/debugger/new/src/components/Editor/SearchBar.css
View File

@ -92,11 +92,11 @@
padding: 0;
width: 16px;
}
.search-bottom-bar .search-modifiers .img {
width: 16px;
.search-bottom-bar .search-modifiers button svg {
fill: var(--theme-comment);
height: 16px;
vertical-align: bottom;
background-color: var(--theme-comment);
width: 16px;
}
.search-bottom-bar .search-modifiers button:hover {
@ -107,11 +107,11 @@
background: var(--theme-selection-background);
}
.search-bottom-bar .search-modifiers button.active .img {
background-color: var(--theme-selection-background);
.search-bottom-bar .search-modifiers button.active svg {
fill: var(--theme-selection-background);
}
.theme-dark .search-bottom-bar .search-modifiers button.active .img {
.theme-dark .search-bottom-bar .search-modifiers button.active svg {
fill: white;
}

4
devtools/client/debugger/new/src/components/Editor/SearchBar.js
View File

@ -8,7 +8,7 @@ import PropTypes from "prop-types";
import React, { Component } from "react";
import { connect } from "../../utils/connect";
import { CloseButton } from "../shared/Button";
import AccessibleImage from "../shared/AccessibleImage";
import Svg from "../shared/Svg";
import actions from "../../actions";
import {
getActiveSearch,
@ -270,7 +270,7 @@ class SearchBar extends Component<Props, State> {
}}
title={tooltip}
>
<AccessibleImage className={svgName} />
<Svg name={svgName} />
</button>
);
}

27
devtools/client/debugger/new/src/components/Editor/Tabs.css
View File

@ -38,9 +38,12 @@
}
.source-tab {
border-left: 1px solid transparent;
border-right: 1px solid transparent;
display: inline-flex;
align-items: center;
position: relative;
transition: all 0.15s ease;
min-width: 40px;
max-width: 100%;
overflow: hidden;
@ -48,7 +51,6 @@
cursor: default;
height: 30px;
font-size: 12px;
background-color: transparent;
}
.source-tab::before {
@ -81,6 +83,9 @@
.source-tab.active {
color: var(--theme-toolbar-selected-color);
border-bottom-color: transparent;
border-left: 1px solid var(--theme-splitter-color);
border-right: 1px solid var(--theme-splitter-color);
background-color: var(--theme-body-background);
}
.source-tab.active::before {
@ -130,6 +135,21 @@
fill: var(--theme-body-color);
}
img.moreTabs {
mask: url(/images/command-chevron.svg) no-repeat;
mask-size: 100%;
width: 12px;
height: 12px;
display: block;
background: var(--theme-body-color);
margin-left: 6px;
}
html[dir="rtl"] .img.moreTabs {
transform: rotate(180deg);
margin-right: 6px;
}
.source-tab .filename {
white-space: nowrap;
text-overflow: ellipsis;
@ -153,11 +173,6 @@
visibility: visible;
}
.source-tab.active .close {
visibility: visible;
background-color: var(--theme-toolbar-selected-color);
}
.source-tab:hover .close-btn {
visibility: visible;
}

24
devtools/client/debugger/new/src/components/Editor/tests/__snapshots__/Footer.spec.js.snap
View File

@ -4,18 +4,18 @@ exports[`SourceFooter Component default case should render 1`] = `
<div
className="source-footer"
>
<span
className="cursor-position"
title="(Line 2, column 2)"
>
(2, 2)
</span>
<PaneToggleButton
collapsed={true}
horizontal={false}
key="toggle"
position="end"
/>
<span
className="cursor-position"
title="(Line 2, column 2)"
>
(2, 2)
</span>
</div>
`;
@ -23,17 +23,17 @@ exports[`SourceFooter Component move cursor should render new cursor position 1`
<div
className="source-footer"
>
<span
className="cursor-position"
title="(Line 6, column 11)"
>
(6, 11)
</span>
<PaneToggleButton
collapsed={true}
horizontal={false}
key="toggle"
position="end"
/>
<span
className="cursor-position"
title="(Line 6, column 11)"
>
(6, 11)
</span>
</div>
`;

8
devtools/client/debugger/new/src/components/Editor/tests/__snapshots__/SearchBar.spec.js.snap
View File

@ -56,7 +56,6 @@ exports[`SearchBar should render 1`] = `
svgName="whole-word-match"
tooltip="Whole word"
/>
<React.Fragment>
<span
className="pipe-divider"
/>
@ -64,7 +63,6 @@ exports[`SearchBar should render 1`] = `
buttonClass="big"
handleClick={[Function]}
/>
</React.Fragment>
</div>
</div>
</div>
@ -129,7 +127,6 @@ exports[`showErrorEmoji false if no query + no results 1`] = `
svgName="whole-word-match"
tooltip="Whole word"
/>
<React.Fragment>
<span
className="pipe-divider"
/>
@ -137,7 +134,6 @@ exports[`showErrorEmoji false if no query + no results 1`] = `
buttonClass="big"
handleClick={[Function]}
/>
</React.Fragment>
</div>
</div>
</div>
@ -200,7 +196,6 @@ exports[`showErrorEmoji false if query + results 1`] = `
svgName="whole-word-match"
tooltip="Whole word"
/>
<React.Fragment>
<span
className="pipe-divider"
/>
@ -208,7 +203,6 @@ exports[`showErrorEmoji false if query + results 1`] = `
buttonClass="big"
handleClick={[Function]}
/>
</React.Fragment>
</div>
</div>
</div>
@ -271,7 +265,6 @@ exports[`showErrorEmoji true if query + no results 1`] = `
svgName="whole-word-match"
tooltip="Whole word"
/>
<React.Fragment>
<span
className="pipe-divider"
/>
@ -279,7 +272,6 @@ exports[`showErrorEmoji true if query + no results 1`] = `
buttonClass="big"
handleClick={[Function]}
/>
</React.Fragment>
</div>
</div>
</div>

3
devtools/client/debugger/new/src/components/PrimaryPanes/OutlineFilter.css
View File

@ -1,5 +1,6 @@
.outline-filter {
padding: 4px 10px 0 10px;
margin: 5px 0 0 0;
padding: 0px 10px;
}
.outline-filter-input {

37
devtools/client/debugger/new/src/components/PrimaryPanes/Sources.css
View File

@ -23,6 +23,9 @@
white-space: nowrap;
color: inherit;
display: block;
position: absolute;
top: 0;
left: 0;
border-bottom: 1px solid var(--theme-splitter-color);
}
@ -36,7 +39,7 @@
height: 13px;
}
.theme-dark .sources-clear-root {
.theme-dark .sources-clear-root svg {
fill: var(--theme-body-color);
}
@ -44,11 +47,11 @@
opacity: 0.5;
}
.sources-clear-root .breadcrumb {
.sources-clear-root .breadcrumb svg {
width: 5px;
margin: 0 2px 0 6px;
vertical-align: bottom;
background: var(--theme-body-color-alt);
top: 2px;
position: absolute;
margin-right: 5px;
}
.sources-clear-root-label {
@ -59,6 +62,7 @@
display: flex;
flex: 1;
flex-direction: column;
height: 100%;
}
.sources-list {
@ -71,8 +75,8 @@
display: flex;
}
.sources-list .managed-tree .tree {
padding: 4px 0;
.sources-list .managed-tree .tree-node:first-child {
margin-top: 4px;
}
.sources-list .managed-tree .tree .node {
@ -80,11 +84,11 @@
width: 100%;
}
.sources-list .img {
margin-inline-end: 5px;
.sources-list .tree .img.arrow {
margin-right: 5px;
}
.sources-list .tree .focused .img:not(.vue):not(.angular):not(.webpack):not(.dojo):not(.ember):not(.aframe):not(.marko):not(.mobx):not(.nextjs):not(.nuxtjs):not(.preact):not(.pug):not(.rxjs):not(.sencha-extjs),
.sources-list .tree .focused .img:not(.vue):not(.angular),
.sources-list .managed-tree .tree .node.focused .img.blackBox {
background: #ffffff;
}
@ -99,6 +103,10 @@
color: inherit;
}
.sources-list .tree .img.arrow.expanded {
transform: rotate(0deg);
}
.theme-dark .source-list .tree .node.focused {
background-color: var(--theme-tab-toolbar-background);
}
@ -112,10 +120,6 @@
display: inline-block;
}
.sources-list .tree .arrow {
vertical-align: 1px;
}
.sources-list .tree .node .no-arrow {
width: 10px;
display: inline-block;
@ -208,10 +212,6 @@
height: 100%;
}
.source-outline-panel.has-root .thread-header {
margin-top: 4px;
}
.sources-list .managed-tree .tree .node .img.blackBox {
mask: url(/images/blackBox.svg) no-repeat;
mask-size: 100%;
@ -240,6 +240,7 @@
display: block;
}
.sources-list-custom-root .sources-list,
.sources-list-custom-root .no-sources-message {
position: absolute;
top: 26px;

45
devtools/client/debugger/new/src/components/PrimaryPanes/SourcesTree.js
View File

@ -32,6 +32,7 @@ import actions from "../../actions";
import AccessibleImage from "../shared/AccessibleImage";
import SourcesTreeItem from "./SourcesTreeItem";
import ManagedTree from "../shared/ManagedTree";
import Svg from "../shared/Svg";
// Utils
import {
@ -68,6 +69,7 @@ type Props = {
expanded: Set<string>,
selectSource: typeof actions.selectSource,
setExpandedState: typeof actions.setExpandedState,
clearProjectDirectoryRoot: typeof actions.clearProjectDirectoryRoot,
focusItem: typeof actions.focusItem,
focused: TreeNode,
workerCount: number
@ -216,6 +218,30 @@ class SourcesTree extends Component<Props, State> {
);
}
renderProjectRootHeader() {
const { projectRoot } = this.props;
if (!projectRoot) {
return null;
}
const rootLabel = projectRoot.split("/").pop();
return (
<div key="root" className="sources-clear-root-container">
<button
className="sources-clear-root"
onClick={() => this.props.clearProjectDirectoryRoot()}
title={L10N.getStr("removeDirectoryRoot.label")}
>
<Svg name="home" />
<Svg name="breadcrumb" />
<span className="sources-clear-root-label">{rootLabel}</span>
</button>
</div>
);
}
getRoots = () => {
const { projectRoot } = this.props;
const { sourceTree } = this.state;
@ -225,7 +251,7 @@ class SourcesTree extends Component<Props, State> {
// The "sourceTree.contents[0]" check ensures that there are contents
// A custom root with no existing sources will be ignored
if (projectRoot && sourceContents) {
if (projectRoot) {
if (sourceContents && sourceContents.name !== rootLabel) {
return sourceContents.contents[0].contents;
}
@ -329,14 +355,28 @@ class SourcesTree extends Component<Props, State> {
}
render() {
const { worker } = this.props;
const { projectRoot, worker } = this.props;
if (!features.windowlessWorkers && worker) {
return null;
}
if (this.isEmpty()) {
if (projectRoot) {
return this.renderPane(
this.renderProjectRootHeader(),
this.renderEmptyElement(L10N.getStr("sources.noSourcesAvailableRoot"))
);
}
return this.renderPane(
this.renderEmptyElement(L10N.getStr("sources.noSourcesAvailable"))
);
}
return this.renderPane(
this.renderThreadHeader(),
this.renderProjectRootHeader(),
<div key="tree" className="sources-list" onKeyDown={this.onKeyDown}>
{this.renderTree()}
</div>
@ -385,6 +425,7 @@ export default connect(
{
selectSource: actions.selectSource,
setExpandedState: actions.setExpandedState,
clearProjectDirectoryRoot: actions.clearProjectDirectoryRoot,
focusItem: actions.focusItem
}
)(SourcesTree);

46
devtools/client/debugger/new/src/components/PrimaryPanes/SourcesTreeItem.js
View File

@ -11,6 +11,7 @@ import { showMenu } from "devtools-contextmenu";
import SourceIcon from "../shared/SourceIcon";
import AccessibleImage from "../shared/AccessibleImage";
import Svg from "../shared/Svg";
import {
getGeneratedSourceByURL,
@ -39,32 +40,23 @@ type Props = {
expanded: boolean,
hasMatchingGeneratedSource: boolean,
hasSiblingOfSameName: boolean,
setExpanded: (TreeNode, boolean, boolean) => void,
focusItem: TreeNode => void,
selectItem: TreeNode => void,
setExpanded: (TreeNode, boolean, boolean) => void,
clearProjectDirectoryRoot: typeof actions.clearProjectDirectoryRoot,
setProjectDirectoryRoot: typeof actions.setProjectDirectoryRoot
};
type State = {};
type MenuOption = {
id: string,
label: string,
disabled: boolean,
click: () => any
};
type ContextMenu = Array<MenuOption>;
class SourceTreeItem extends Component<Props, State> {
getIcon(item: TreeNode, depth: number) {
const { debuggeeUrl, projectRoot, source } = this.props;
if (item.path === "webpack://") {
return <AccessibleImage className="webpack" />;
return <Svg name="webpack" />;
} else if (item.path === "ng://") {
return <AccessibleImage className="angular" />;
return <Svg name="angular" />;
} else if (item.path.startsWith("moz-extension://") && depth === 0) {
return <AccessibleImage className="extension" />;
}
@ -91,11 +83,13 @@ class SourceTreeItem extends Component<Props, State> {
}
onClick = (e: MouseEvent) => {
const { item, focusItem, selectItem } = this.props;
const { expanded, item, focusItem, setExpanded, selectItem } = this.props;
focusItem(item);
if (!isDirectory(item)) {
if (isDirectory(item)) {
setExpanded(item, !!expanded, e.altKey);
} else {
selectItem(item);
}
};
@ -129,10 +123,7 @@ class SourceTreeItem extends Component<Props, State> {
}
}
if (isDirectory(item)) {
this.addCollapseExpandAllOptions(menuOptions, item);
if (features.root) {
if (isDirectory(item) && features.root) {
const { path } = item;
const { projectRoot } = this.props;
@ -153,29 +144,10 @@ class SourceTreeItem extends Component<Props, State> {
});
}
}
}
showMenu(event, menuOptions);
};
addCollapseExpandAllOptions = (menuOptions: ContextMenu, item: TreeNode) => {
const { setExpanded } = this.props;
menuOptions.push({
id: "node-menu-collapse-all",
label: L10N.getStr("collapseAll.label"),
disabled: false,
click: () => setExpanded(item, false, true)
});
menuOptions.push({
id: "node-menu-expand-all",
label: L10N.getStr("expandAll.label"),
disabled: false,
click: () => setExpanded(item, true, true)
});
};
renderItemArrow() {
const { item, expanded } = this.props;
return isDirectory(item) ? (

34
devtools/client/debugger/new/src/components/PrimaryPanes/index.js
View File

@ -22,7 +22,6 @@ import { formatKeyShortcut } from "../../utils/text";
import Outline from "./Outline";
import SourcesTree from "./SourcesTree";
import AccessibleImage from "../shared/AccessibleImage";
import type { SourcesMapByThread } from "../../reducers/types";
import type { SelectedPrimaryPaneTabType } from "../../selectors";
@ -43,7 +42,6 @@ type Props = {
setPrimaryPaneTab: typeof actions.setPrimaryPaneTab,
setActiveSearch: typeof actions.setActiveSearch,
closeActiveSearch: typeof actions.closeActiveSearch,
clearProjectDirectoryRoot: typeof actions.clearProjectDirectoryRoot,
threads: Thread[]
};
@ -100,30 +98,6 @@ class PrimaryPanes extends Component<Props, State> {
];
}
renderProjectRootHeader() {
const { projectRoot } = this.props;
if (!projectRoot) {
return null;
}
const rootLabel = projectRoot.split("/").pop();
return (
<div key="root" className="sources-clear-root-container">
<button
className="sources-clear-root"
onClick={() => this.props.clearProjectDirectoryRoot()}
title={L10N.getStr("removeDirectoryRoot.label")}
>
<AccessibleImage className="home" />
<AccessibleImage className="breadcrumb" />
<span className="sources-clear-root-label">{rootLabel}</span>
</button>
</div>
);
}
renderThreadSources() {
return this.props.threads.map(({ actor }) => (
<SourcesTree thread={actor} key={actor} />
@ -149,10 +123,7 @@ class PrimaryPanes extends Component<Props, State> {
})}
hasFocusableContent
>
<div>
{this.renderProjectRootHeader()}
{this.renderThreadSources()}
</div>
<div>{this.renderThreadSources()}</div>
<Outline
alphabetizeOutline={this.state.alphabetizeOutline}
onAlphabetizeClick={this.onAlphabetizeClick}
@ -176,8 +147,7 @@ const connector = connect(
{
setPrimaryPaneTab: actions.setPrimaryPaneTab,
setActiveSearch: actions.setActiveSearch,
closeActiveSearch: actions.closeActiveSearch,
clearProjectDirectoryRoot: actions.clearProjectDirectoryRoot
closeActiveSearch: actions.closeActiveSearch
}
);

72
devtools/client/debugger/new/src/components/PrimaryPanes/tests/PrimaryPanes.spec.js
View File

@ -1,72 +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/>. */
import React from "react";
import { shallow } from "enzyme";
import { showMenu } from "devtools-contextmenu";
import { copyToTheClipboard } from "../../../utils/clipboard";
import PrimaryPanes from "..";
jest.mock("devtools-contextmenu", () => ({ showMenu: jest.fn() }));
jest.mock("../../../utils/clipboard", () => ({
copyToTheClipboard: jest.fn()
}));
describe("PrimaryPanes", () => {
afterEach(() => {
copyToTheClipboard.mockClear();
showMenu.mockClear();
});
describe("with custom root", () => {
it("renders custom root source list", async () => {
const { component } = render({
projectRoot: "mdn.com"
});
expect(component).toMatchSnapshot();
});
it("calls clearProjectDirectoryRoot on click", async () => {
const { component, props } = render({
projectRoot: "mdn"
});
component.find(".sources-clear-root").simulate("click");
expect(props.clearProjectDirectoryRoot).toHaveBeenCalled();
});
it("renders empty custom root source list", async () => {
const { component } = render({
projectRoot: "custom",
sources: {}
});
expect(component).toMatchSnapshot();
});
});
});
function generateDefaults(overrides) {
return {
horizontal: false,
projectRoot: "",
sourceSearchOn: false,
setPrimaryPaneTab: jest.fn(),
setActiveSearch: jest.fn(),
closeActiveSearch: jest.fn(),
clearProjectDirectoryRoot: jest.fn(),
threads: [],
...overrides
};
}
function render(overrides = {}) {
const props = generateDefaults(overrides);
const component = shallow(<PrimaryPanes.WrappedComponent {...props} />);
const defaultState = component.state();
const instance = component.instance();
instance.shouldComponentUpdate = () => true;
return { component, props, defaultState, instance };
}

25
devtools/client/debugger/new/src/components/PrimaryPanes/tests/SourcesTree.spec.js
View File

@ -198,6 +198,31 @@ describe("SourcesTree", () => {
});
});
describe("with custom root", () => {
it("renders custom root source list", async () => {
const { component } = render({
projectRoot: "mdn.com"
});
expect(component).toMatchSnapshot();
});
it("calls clearProjectDirectoryRoot on click", async () => {
const { component, props } = render({
projectRoot: "mdn"
});
component.find(".sources-clear-root").simulate("click");
expect(props.clearProjectDirectoryRoot).toHaveBeenCalled();
});
it("renders empty custom root source list", async () => {
const { component } = render({
projectRoot: "custom",
sources: {}
});
expect(component).toMatchSnapshot();
});
});
describe("selectItem", () => {
it("should select item with no children", async () => {
const { instance, props } = render();

41
devtools/client/debugger/new/src/components/PrimaryPanes/tests/SourcesTreeItem.spec.js
View File

@ -34,18 +34,6 @@ describe("SourceTreeItem", () => {
describe("onContextMenu of the tree", () => {
it("shows context menu on directory to set as root", async () => {
const menuOptions = [
{
click: expect.any(Function),
disabled: false,
id: "node-menu-collapse-all",
label: "Collapse all"
},
{
click: expect.any(Function),
disabled: false,
id: "node-menu-expand-all",
label: "Expand all"
},
{
accesskey: "r",
click: expect.any(Function),
@ -67,7 +55,7 @@ describe("SourceTreeItem", () => {
expect(mockEvent.preventDefault).toHaveBeenCalled();
expect(mockEvent.stopPropagation).toHaveBeenCalled();
showMenu.mock.calls[0][1][2].click();
showMenu.mock.calls[0][1][0].click();
expect(props.setProjectDirectoryRoot).toHaveBeenCalled();
expect(props.clearProjectDirectoryRoot).not.toHaveBeenCalled();
expect(copyToTheClipboard).not.toHaveBeenCalled();
@ -107,18 +95,6 @@ describe("SourceTreeItem", () => {
it("shows context menu on root to remove directory root", async () => {
const menuOptions = [
{
click: expect.any(Function),
disabled: false,
id: "node-menu-collapse-all",
label: "Collapse all"
},
{
click: expect.any(Function),
disabled: false,
id: "node-menu-expand-all",
label: "Expand all"
},
{
click: expect.any(Function),
disabled: false,
@ -145,7 +121,7 @@ describe("SourceTreeItem", () => {
expect(mockEvent.preventDefault).toHaveBeenCalled();
expect(mockEvent.stopPropagation).toHaveBeenCalled();
showMenu.mock.calls[0][1][2].click();
showMenu.mock.calls[0][1][0].click();
expect(props.setProjectDirectoryRoot).not.toHaveBeenCalled();
expect(props.clearProjectDirectoryRoot).toHaveBeenCalled();
expect(copyToTheClipboard).not.toHaveBeenCalled();
@ -260,11 +236,13 @@ describe("SourceTreeItem", () => {
it("should focus on and select item on click", async () => {
const event = { event: "click" };
const setExpanded = jest.fn();
const selectItem = jest.fn();
const { component, instance, props } = render({
depth: 1,
focused: true,
expanded: false,
setExpanded,
selectItem
});
@ -272,21 +250,26 @@ describe("SourceTreeItem", () => {
component.simulate("click", event);
await component.simulate("keydown", { keyCode: 13 });
expect(props.selectItem).toHaveBeenCalledWith(item);
expect(setExpanded).not.toHaveBeenCalled();
});
it("should focus on directory on click", async () => {
it("should focus on and expand directory on click", async () => {
const setExpanded = jest.fn();
const selectItem = jest.fn();
const { component, props } = render({
const { component, instance, props } = render({
item: createMockDirectory(),
source: null,
depth: 1,
focused: true,
expanded: false,
setExpanded,
selectItem
});
const { item } = instance.props;
component.simulate("click", { event: "click" });
expect(setExpanded).toHaveBeenCalledWith(item, false, undefined);
expect(props.selectItem).not.toHaveBeenCalled();
});
});
@ -312,9 +295,9 @@ function generateDefaults(overrides) {
projectRoot: "",
clearProjectDirectoryRoot: jest.fn(),
setProjectDirectoryRoot: jest.fn(),
setExpanded: jest.fn(),
selectItem: jest.fn(),
focusItem: jest.fn(),
setExpanded: jest.fn(),
...overrides
};
}

129
devtools/client/debugger/new/src/components/PrimaryPanes/tests/__snapshots__/PrimaryPanes.spec.js.snap
View File

@ -1,129 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`PrimaryPanes with custom root renders custom root source list 1`] = `
<Tabs
activeIndex={1}
className="sources-panel"
onActivateTab={[Function]}
>
<TabList
activeIndex={0}
className="source-outline-tabs"
onActivateTab={[Function]}
vertical={false}
>
<Tab
active={false}
className="tab sources-tab"
key="sources-tab"
>
Sources
</Tab>
<Tab
active={false}
className="tab outline-tab"
key="outline-tab"
>
Outline
</Tab>
</TabList>
<TabPanels
activeIndex={0}
className="source-outline-panel has-root"
hasFocusableContent={true}
>
<div>
<div
className="sources-clear-root-container"
key="root"
>
<button
className="sources-clear-root"
onClick={[Function]}
title="Remove directory root"
>
<AccessibleImage
className="home"
/>
<AccessibleImage
className="breadcrumb"
/>
<span
className="sources-clear-root-label"
>
mdn.com
</span>
</button>
</div>
</div>
<Connect(Outline)
alphabetizeOutline={false}
onAlphabetizeClick={[Function]}
/>
</TabPanels>
</Tabs>
`;
exports[`PrimaryPanes with custom root renders empty custom root source list 1`] = `
<Tabs
activeIndex={1}
className="sources-panel"
onActivateTab={[Function]}
>
<TabList
activeIndex={0}
className="source-outline-tabs"
onActivateTab={[Function]}
vertical={false}
>
<Tab
active={false}
className="tab sources-tab"
key="sources-tab"
>
Sources
</Tab>
<Tab
active={false}
className="tab outline-tab"
key="outline-tab"
>
Outline
</Tab>
</TabList>
<TabPanels
activeIndex={0}
className="source-outline-panel has-root"
hasFocusableContent={true}
>
<div>
<div
className="sources-clear-root-container"
key="root"
>
<button
className="sources-clear-root"
onClick={[Function]}
title="Remove directory root"
>
<AccessibleImage
className="home"
/>
<AccessibleImage
className="breadcrumb"
/>
<span
className="sources-clear-root-label"
>
custom
</span>
</button>
</div>
</div>
<Connect(Outline)
alphabetizeOutline={false}
onAlphabetizeClick={[Function]}
/>
</TabPanels>
</Tabs>
`;

304
devtools/client/debugger/new/src/components/PrimaryPanes/tests/__snapshots__/SourcesTree.spec.js.snap
View File

@ -6,10 +6,32 @@ exports[`SourcesTree After changing expanded nodes Shows the tree with four.js,
key="pane"
>
<div
className="no-sources-message"
key="empty"
className="sources-list"
key="tree"
onKeyDown={[Function]}
>
This page has no sources
<ManagedTree
autoExpandAll={false}
autoExpandDepth={0}
expanded={
Array [
"four.js",
"five.js",
"six.js",
]
}
getChildren={[Function]}
getParent={[Function]}
getPath={[Function]}
getRoots={[Function]}
itemHeight={21}
key="full"
onCollapse={[Function]}
onExpand={[Function]}
onFocus={[Function]}
preventBlur={true}
renderItem={[Function]}
/>
</div>
</div>
`;
@ -20,10 +42,25 @@ exports[`SourcesTree Should show the tree with nothing expanded 1`] = `
key="pane"
>
<div
className="no-sources-message"
key="empty"
className="sources-list"
key="tree"
onKeyDown={[Function]}
>
This page has no sources
<ManagedTree
autoExpandAll={false}
autoExpandDepth={1}
getChildren={[Function]}
getParent={[Function]}
getPath={[Function]}
getRoots={[Function]}
itemHeight={21}
key="full"
onCollapse={[Function]}
onExpand={[Function]}
onFocus={[Function]}
preventBlur={true}
renderItem={[Function]}
/>
</div>
</div>
`;
@ -34,10 +71,32 @@ exports[`SourcesTree When loading initial source Shows the tree with one.js, two
key="pane"
>
<div
className="no-sources-message"
key="empty"
className="sources-list"
key="tree"
onKeyDown={[Function]}
>
This page has no sources
<ManagedTree
autoExpandAll={false}
autoExpandDepth={0}
expanded={
Array [
"one.js",
"two.js",
"three.js",
]
}
getChildren={[Function]}
getParent={[Function]}
getPath={[Function]}
getRoots={[Function]}
itemHeight={21}
key="full"
onCollapse={[Function]}
onExpand={[Function]}
onFocus={[Function]}
preventBlur={true}
renderItem={[Function]}
/>
</div>
</div>
`;
@ -48,10 +107,231 @@ exports[`SourcesTree on receiving new props updates highlighted items updates hi
key="pane"
>
<div
className="no-sources-message"
key="empty"
className="sources-list"
key="tree"
onKeyDown={[Function]}
>
This page has no sources
<ManagedTree
autoExpandAll={false}
autoExpandDepth={1}
getChildren={[Function]}
getParent={[Function]}
getPath={[Function]}
getRoots={[Function]}
highlightItems={
Array [
Object {
"contents": Object {
"contentType": "",
"error": undefined,
"id": "server1.conn13.child1/41",
"isBlackBoxed": false,
"isPrettyPrinted": false,
"isWasm": false,
"loadedState": "unloaded",
"sourceMapURL": null,
"text": undefined,
"thread": "",
"url": "http://mdn.com/three.js",
},
"name": "three.js",
"path": "mdn.com/three.js",
"type": "source",
},
Object {
"contents": Array [
Object {
"contents": Object {
"contentType": "",
"error": undefined,
"id": "server1.conn13.child1/42",
"isBlackBoxed": false,
"isPrettyPrinted": false,
"isWasm": false,
"loadedState": "unloaded",
"sourceMapURL": "data:application/json?charset=utf?dsffewrsf",
"text": undefined,
"thread": "",
"url": "http://mdn.com/four.js",
},
"name": "four.js",
"path": "mdn.com/four.js",
"type": "source",
},
Object {
"contents": Object {
"contentType": "",
"error": undefined,
"id": "server1.conn13.child1/42/originalSource-sha",
"isBlackBoxed": false,
"isPrettyPrinted": false,
"isWasm": false,
"loadedState": "unloaded",
"sourceMapURL": null,
"text": undefined,
"thread": "",
"url": "http://mdn.com/four.js",
},
"name": "four.js",
"path": "mdn.com/four.js",
"type": "source",
},
Object {
"contents": Object {
"contentType": "",
"error": undefined,
"id": "server1.conn13.child1/39",
"isBlackBoxed": false,
"isPrettyPrinted": false,
"isWasm": false,
"loadedState": "unloaded",
"sourceMapURL": null,
"text": undefined,
"thread": "",
"url": "http://mdn.com/one.js",
},
"name": "one.js",
"path": "mdn.com/one.js",
"type": "source",
},
Object {
"contents": Object {
"contentType": "",
"error": undefined,
"id": "server1.conn13.child1/41",
"isBlackBoxed": false,
"isPrettyPrinted": false,
"isWasm": false,
"loadedState": "unloaded",
"sourceMapURL": null,
"text": undefined,
"thread": "",
"url": "http://mdn.com/three.js",
},
"name": "three.js",
"path": "mdn.com/three.js",
"type": "source",
},
Object {
"contents": Object {
"contentType": "",
"error": undefined,
"id": "server1.conn13.child1/40",
"isBlackBoxed": false,
"isPrettyPrinted": false,
"isWasm": false,
"loadedState": "unloaded",
"sourceMapURL": null,
"text": undefined,
"thread": "",
"url": "http://mdn.com/two.js",
},
"name": "two.js",
"path": "mdn.com/two.js",
"type": "source",
},
],
"name": "mdn.com",
"path": "mdn.com",
"type": "directory",
},
]
}
itemHeight={21}
key="full"
onCollapse={[Function]}
onExpand={[Function]}
onFocus={[Function]}
preventBlur={true}
renderItem={[Function]}
/>
</div>
</div>
`;
exports[`SourcesTree with custom root renders custom root source list 1`] = `
<div
className="sources-pane sources-list-custom-root"
key="pane"
>
<div
className="sources-clear-root-container"
key="root"
>
<button
className="sources-clear-root"
onClick={[Function]}
title="Remove directory root"
>
<Svg
name="home"
/>
<Svg
name="breadcrumb"
/>
<span
className="sources-clear-root-label"
>
mdn.com
</span>
</button>
</div>
<div
className="sources-list"
key="tree"
onKeyDown={[Function]}
>
<ManagedTree
autoExpandAll={false}
autoExpandDepth={1}
getChildren={[Function]}
getParent={[Function]}
getPath={[Function]}
getRoots={[Function]}
itemHeight={21}
key="full"
onCollapse={[Function]}
onExpand={[Function]}
onFocus={[Function]}
preventBlur={true}
renderItem={[Function]}
/>
</div>
</div>
`;
exports[`SourcesTree with custom root renders empty custom root source list 1`] = `
<div
className="sources-pane sources-list-custom-root"
key="pane"
>
<div
className="sources-clear-root-container"
key="root"
>
<button
className="sources-clear-root"
onClick={[Function]}
title="Remove directory root"
>
<Svg
name="home"
/>
<Svg
name="breadcrumb"
/>
<span
className="sources-clear-root-label"
>
custom
</span>
</button>
</div>
<div
className="no-sources-message"
key="empty"
>
This directory root has no sources
</div>
</div>
`;

52
devtools/client/debugger/new/src/components/PrimaryPanes/tests/__snapshots__/SourcesTreeItem.spec.js.snap
View File

@ -44,7 +44,6 @@ Object {
</div>,
"defaultState": null,
"instance": SourceTreeItem {
"addCollapseExpandAllOptions": [Function],
"context": Object {},
"onClick": [Function],
"onContextMenu": [Function],
@ -89,6 +88,7 @@ Object {
},
},
"refs": Object {},
"setState": [Function],
"state": null,
"updater": Updater {
"_callbacks": Array [],
@ -182,6 +182,7 @@ Object {
"_updater": [Circular],
},
},
Symbol(enzyme.__setState__): [Function],
},
"props": Object {
"clearProjectDirectoryRoot": [MockFunction],
@ -250,7 +251,6 @@ Object {
</div>,
"defaultState": null,
"instance": SourceTreeItem {
"addCollapseExpandAllOptions": [Function],
"context": Object {},
"onClick": [Function],
"onContextMenu": [Function],
@ -295,6 +295,7 @@ Object {
},
},
"refs": Object {},
"setState": [Function],
"state": null,
"updater": Updater {
"_callbacks": Array [],
@ -370,6 +371,7 @@ Object {
"_updater": [Circular],
},
},
Symbol(enzyme.__setState__): [Function],
},
"props": Object {
"clearProjectDirectoryRoot": [MockFunction],
@ -438,7 +440,6 @@ Object {
</div>,
"defaultState": null,
"instance": SourceTreeItem {
"addCollapseExpandAllOptions": [Function],
"context": Object {},
"onClick": [Function],
"onContextMenu": [Function],
@ -472,6 +473,7 @@ Object {
},
},
"refs": Object {},
"setState": [Function],
"state": null,
"updater": Updater {
"_callbacks": Array [],
@ -536,6 +538,7 @@ Object {
"_updater": [Circular],
},
},
Symbol(enzyme.__setState__): [Function],
},
"props": Object {
"clearProjectDirectoryRoot": [MockFunction],
@ -593,7 +596,6 @@ Object {
</div>,
"defaultState": null,
"instance": SourceTreeItem {
"addCollapseExpandAllOptions": [Function],
"context": Object {},
"onClick": [Function],
"onContextMenu": [Function],
@ -628,6 +630,7 @@ Object {
},
},
"refs": Object {},
"setState": [Function],
"state": null,
"updater": Updater {
"_callbacks": Array [],
@ -693,6 +696,7 @@ Object {
"_updater": [Circular],
},
},
Symbol(enzyme.__setState__): [Function],
},
"props": Object {
"clearProjectDirectoryRoot": [MockFunction],
@ -751,7 +755,6 @@ Object {
</div>,
"defaultState": null,
"instance": SourceTreeItem {
"addCollapseExpandAllOptions": [Function],
"context": Object {},
"onClick": [Function],
"onContextMenu": [Function],
@ -775,6 +778,7 @@ Object {
"source": null,
},
"refs": Object {},
"setState": [Function],
"state": null,
"updater": Updater {
"_callbacks": Array [],
@ -827,6 +831,7 @@ Object {
"_updater": [Circular],
},
},
Symbol(enzyme.__setState__): [Function],
},
"props": Object {
"clearProjectDirectoryRoot": [MockFunction],
@ -861,8 +866,8 @@ Object {
<AccessibleImage
className="arrow"
/>
<AccessibleImage
className="angular"
<Svg
name="angular"
/>
<span
className="label"
@ -874,7 +879,6 @@ Object {
</div>,
"defaultState": null,
"instance": SourceTreeItem {
"addCollapseExpandAllOptions": [Function],
"context": Object {},
"onClick": [Function],
"onContextMenu": [Function],
@ -907,6 +911,7 @@ Object {
},
},
"refs": Object {},
"setState": [Function],
"state": null,
"updater": Updater {
"_callbacks": Array [],
@ -955,8 +960,8 @@ Object {
<AccessibleImage
className="arrow"
/>
<AccessibleImage
className="angular"
<Svg
name="angular"
/>
<span
className="label"
@ -970,6 +975,7 @@ Object {
"_updater": [Circular],
},
},
Symbol(enzyme.__setState__): [Function],
},
"props": Object {
"clearProjectDirectoryRoot": [MockFunction],
@ -1026,7 +1032,6 @@ Object {
</div>,
"defaultState": null,
"instance": SourceTreeItem {
"addCollapseExpandAllOptions": [Function],
"context": Object {},
"onClick": [Function],
"onContextMenu": [Function],
@ -1048,6 +1053,7 @@ Object {
"source": null,
},
"refs": Object {},
"setState": [Function],
"state": null,
"updater": Updater {
"_callbacks": Array [],
@ -1098,6 +1104,7 @@ Object {
"_updater": [Circular],
},
},
Symbol(enzyme.__setState__): [Function],
},
"props": Object {
"clearProjectDirectoryRoot": [MockFunction],
@ -1143,7 +1150,6 @@ Object {
</div>,
"defaultState": null,
"instance": SourceTreeItem {
"addCollapseExpandAllOptions": [Function],
"context": Object {},
"onClick": [Function],
"onContextMenu": [Function],
@ -1167,6 +1173,7 @@ Object {
"source": null,
},
"refs": Object {},
"setState": [Function],
"state": null,
"updater": Updater {
"_callbacks": Array [],
@ -1219,6 +1226,7 @@ Object {
"_updater": [Circular],
},
},
Symbol(enzyme.__setState__): [Function],
},
"props": Object {
"clearProjectDirectoryRoot": [MockFunction],
@ -1266,7 +1274,6 @@ Object {
</div>,
"defaultState": null,
"instance": SourceTreeItem {
"addCollapseExpandAllOptions": [Function],
"context": Object {},
"onClick": [Function],
"onContextMenu": [Function],
@ -1300,6 +1307,7 @@ Object {
},
},
"refs": Object {},
"setState": [Function],
"state": null,
"updater": Updater {
"_callbacks": Array [],
@ -1364,6 +1372,7 @@ Object {
"_updater": [Circular],
},
},
Symbol(enzyme.__setState__): [Function],
},
"props": Object {
"clearProjectDirectoryRoot": [MockFunction],
@ -1408,8 +1417,8 @@ Object {
<AccessibleImage
className="arrow"
/>
<AccessibleImage
className="webpack"
<Svg
name="webpack"
/>
<span
className="label"
@ -1421,7 +1430,6 @@ Object {
</div>,
"defaultState": null,
"instance": SourceTreeItem {
"addCollapseExpandAllOptions": [Function],
"context": Object {},
"onClick": [Function],
"onContextMenu": [Function],
@ -1454,6 +1462,7 @@ Object {
},
},
"refs": Object {},
"setState": [Function],
"state": null,
"updater": Updater {
"_callbacks": Array [],
@ -1502,8 +1511,8 @@ Object {
<AccessibleImage
className="arrow"
/>
<AccessibleImage
className="webpack"
<Svg
name="webpack"
/>
<span
className="label"
@ -1517,6 +1526,7 @@ Object {
"_updater": [Circular],
},
},
Symbol(enzyme.__setState__): [Function],
},
"props": Object {
"clearProjectDirectoryRoot": [MockFunction],
@ -1586,7 +1596,6 @@ Object {
</div>,
"defaultState": null,
"instance": SourceTreeItem {
"addCollapseExpandAllOptions": [Function],
"context": Object {},
"onClick": [Function],
"onContextMenu": [Function],
@ -1630,6 +1639,7 @@ Object {
},
},
"refs": Object {},
"setState": [Function],
"state": null,
"updater": Updater {
"_callbacks": Array [],
@ -1717,6 +1727,7 @@ Object {
"_updater": [Circular],
},
},
Symbol(enzyme.__setState__): [Function],
},
"props": Object {
"clearProjectDirectoryRoot": [MockFunction],
@ -1797,7 +1808,6 @@ Object {
</div>,
"defaultState": null,
"instance": SourceTreeItem {
"addCollapseExpandAllOptions": [Function],
"context": Object {},
"onClick": [Function],
"onContextMenu": [Function],
@ -1842,6 +1852,7 @@ Object {
},
},
"refs": Object {},
"setState": [Function],
"state": null,
"updater": Updater {
"_callbacks": Array [],
@ -1930,6 +1941,7 @@ Object {
"_updater": [Circular],
},
},
Symbol(enzyme.__setState__): [Function],
},
"props": Object {
"clearProjectDirectoryRoot": [MockFunction],

3
devtools/client/debugger/new/src/components/ProjectSearch.js
View File

@ -23,6 +23,7 @@ import {
getTextSearchQuery
} from "../selectors";
import Svg from "./shared/Svg";
import ManagedTree from "./shared/ManagedTree";
import SearchInput from "./shared/SearchInput";
import AccessibleImage from "./shared/AccessibleImage";
@ -219,7 +220,7 @@ export class ProjectSearch extends Component<Props, State> {
className={classnames("file-result", { focused })}
key={file.sourceId}
>
<AccessibleImage className={classnames("arrow", { expanded })} />
<Svg name="arrow" className={classnames({ expanded })} />
<AccessibleImage className="file" />
<span className="file-path">{getRelativePath(file.filepath)}</span>
<span className="matches-summary">{matches}</span>

44
devtools/client/debugger/new/src/components/SecondaryPanes/Breakpoints/Breakpoint.js
View File

@ -8,19 +8,19 @@ import React, { PureComponent } from "react";
import { connect } from "../../../utils/connect";
import { createSelector } from "reselect";
import classnames from "classnames";
import actions from "../../../actions";
import showContextMenu from "./BreakpointsContextMenu";
import { CloseButton } from "../../shared/Button";
import {
getLocationWithoutColumn,
getSelectedText
} from "../../../utils/breakpoint";
import { getLocationWithoutColumn } from "../../../utils/breakpoint";
import { getSelectedLocation } from "../../../utils/source-maps";
import { features } from "../../../utils/prefs";
import { getEditor } from "../../../utils/editor";
import type { FormattedBreakpoint } from "../../../selectors/breakpointSources";
import type {
Breakpoint as BreakpointType,
Frame,
@ -39,9 +39,8 @@ import {
} from "../../../selectors";
type Props = {
breakpoint: BreakpointType,
breakpoint: FormattedBreakpoint,
breakpoints: BreakpointType[],
selectedSource: Source,
source: Source,
frame: FormattedFrame,
enableBreakpoint: typeof actions.enableBreakpoint,
@ -62,52 +61,49 @@ class Breakpoint extends PureComponent<Props> {
showContextMenu({ ...this.props, contextMenuEvent: e });
};
get selectedLocation() {
const { breakpoint, selectedSource } = this.props;
return getSelectedLocation(breakpoint, selectedSource);
}
onDoubleClick = () => {
const { breakpoint, openConditionalPanel } = this.props;
if (breakpoint.condition) {
openConditionalPanel(this.selectedLocation);
openConditionalPanel(breakpoint.selectedLocation);
}
};
selectBreakpoint = () => {
const { selectSpecificLocation } = this.props;
selectSpecificLocation(this.selectedLocation);
const { breakpoint, selectSpecificLocation } = this.props;
selectSpecificLocation(breakpoint.selectedLocation);
};
removeBreakpoint = event => {
const { removeBreakpoint } = this.props;
const { breakpoint, removeBreakpoint } = this.props;
event.stopPropagation();
removeBreakpoint(this.selectedLocation);
removeBreakpoint(breakpoint.selectedLocation);
};
handleBreakpointCheckbox = () => {
const { breakpoint, enableBreakpoint, disableBreakpoint } = this.props;
if (breakpoint.disabled) {
enableBreakpoint(this.selectedLocation);
enableBreakpoint(breakpoint.selectedLocation);
} else {
disableBreakpoint(this.selectedLocation);
disableBreakpoint(breakpoint.selectedLocation);
}
};
isCurrentlyPausedAtBreakpoint() {
const { frame } = this.props;
const { frame, breakpoint } = this.props;
if (!frame) {
return false;
}
const bpId = getLocationWithoutColumn(this.selectedLocation);
const bpId = getLocationWithoutColumn(breakpoint.selectedLocation);
const frameId = getLocationWithoutColumn(frame.selectedLocation);
return bpId == frameId;
}
getBreakpointLocation() {
const { source } = this.props;
const { column, line } = this.selectedLocation;
const { breakpoint, source } = this.props;
const { column, line } = breakpoint.selectedLocation;
const isWasm = source && source.isWasm;
const columnVal = features.columnBreakpoints && column ? `:${column}` : "";
@ -119,8 +115,8 @@ class Breakpoint extends PureComponent<Props> {
}
getBreakpointText() {
const { breakpoint, selectedSource } = this.props;
return breakpoint.condition || getSelectedText(breakpoint, selectedSource);
const { breakpoint } = this.props;
return breakpoint.condition || breakpoint.text;
}
highlightText() {

25
devtools/client/debugger/new/src/components/SecondaryPanes/Breakpoints/BreakpointsContextMenu.js
View File

@ -6,14 +6,13 @@
import { buildMenu, showMenu } from "devtools-contextmenu";
import { getSelectedLocation } from "../../../utils/source-maps";
import actions from "../../../actions";
import type { Breakpoint, Source } from "../../../types";
import type { Breakpoint } from "../../../types";
import type { FormattedBreakpoint } from "../../../selectors/breakpointSources";
type Props = {
breakpoint: Breakpoint,
breakpoint: FormattedBreakpoint,
breakpoints: Breakpoint[],
selectedSource: Source,
removeBreakpoint: typeof actions.removeBreakpoint,
removeBreakpoints: typeof actions.removeBreakpoints,
removeAllBreakpoints: typeof actions.removeAllBreakpoints,
@ -30,7 +29,6 @@ export default function showContextMenu(props: Props) {
const {
breakpoint,
breakpoints,
selectedSource,
removeBreakpoint,
removeBreakpoints,
removeAllBreakpoints,
@ -97,7 +95,6 @@ export default function showContextMenu(props: Props) {
"breakpointMenuItem.addCondition2.accesskey"
);
const selectedLocation = getSelectedLocation(breakpoint, selectedSource);
const otherBreakpoints = breakpoints.filter(b => b.id !== breakpoint.id);
const enabledBreakpoints = breakpoints.filter(b => !b.disabled);
const disabledBreakpoints = breakpoints.filter(b => b.disabled);
@ -113,7 +110,7 @@ export default function showContextMenu(props: Props) {
label: deleteSelfLabel,
accesskey: deleteSelfKey,
disabled: false,
click: () => removeBreakpoint(selectedLocation)
click: () => removeBreakpoint(breakpoint.selectedLocation)
};
const deleteAllItem = {
@ -137,7 +134,7 @@ export default function showContextMenu(props: Props) {
label: enableSelfLabel,
accesskey: enableSelfKey,
disabled: false,
click: () => toggleDisabledBreakpoint(selectedLocation.line)
click: () => toggleDisabledBreakpoint(breakpoint.selectedLocation.line)
};
const enableAllItem = {
@ -161,7 +158,7 @@ export default function showContextMenu(props: Props) {
label: disableSelfLabel,
accesskey: disableSelfKey,
disabled: false,
click: () => toggleDisabledBreakpoint(selectedLocation.line)
click: () => toggleDisabledBreakpoint(breakpoint.selectedLocation.line)
};
const disableAllItem = {
@ -184,7 +181,7 @@ export default function showContextMenu(props: Props) {
label: removeConditionLabel,
accesskey: removeConditionKey,
disabled: false,
click: () => setBreakpointCondition(selectedLocation)
click: () => setBreakpointCondition(breakpoint.selectedLocation)
};
const addConditionItem = {
@ -192,8 +189,8 @@ export default function showContextMenu(props: Props) {
label: addConditionLabel,
accesskey: addConditionKey,
click: () => {
selectSpecificLocation(selectedLocation);
openConditionalPanel(selectedLocation);
selectSpecificLocation(breakpoint.selectedLocation);
openConditionalPanel(breakpoint.selectedLocation);
}
};
@ -202,8 +199,8 @@ export default function showContextMenu(props: Props) {
label: editConditionLabel,
accesskey: editConditionKey,
click: () => {
selectSpecificLocation(selectedLocation);
openConditionalPanel(selectedLocation);
selectSpecificLocation(breakpoint.selectedLocation);
openConditionalPanel(breakpoint.selectedLocation);
}
};

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

@ -15,11 +15,9 @@ import BreakpointHeading from "./BreakpointHeading";
import actions from "../../../actions";
import { getDisplayPath } from "../../../utils/source";
import { getSelectedLocation } from "../../../utils/source-maps";
import {
makeLocationId,
sortSelectedBreakpoints
sortFormattedBreakpoints
} from "../../../utils/breakpoint";
import { getSelectedSource, getBreakpointSources } from "../../../selectors";
@ -76,7 +74,7 @@ class Breakpoints extends Component<Props> {
}
renderBreakpoints() {
const { breakpointSources, selectedSource } = this.props;
const { breakpointSources } = this.props;
const sources = [
...breakpointSources.map(({ source, breakpoints }) => source)
];
@ -84,10 +82,7 @@ class Breakpoints extends Component<Props> {
return [
...breakpointSources.map(({ source, breakpoints, i }) => {
const path = getDisplayPath(source, sources);
const sortedBreakpoints = sortSelectedBreakpoints(
breakpoints,
selectedSource
);
const sortedBreakpoints = sortFormattedBreakpoints(breakpoints);
return [
<BreakpointHeading
@ -100,10 +95,7 @@ class Breakpoints extends Component<Props> {
<Breakpoint
breakpoint={breakpoint}
source={source}
selectedSource={selectedSource}
key={makeLocationId(
getSelectedLocation(breakpoint, selectedSource)
)}
key={makeLocationId(breakpoint.selectedLocation)}
/>
))
];

9
devtools/client/debugger/new/src/components/SecondaryPanes/Breakpoints/tests/Breakpoint.spec.js
View File

@ -6,7 +6,7 @@ import React from "react";
import { shallow } from "enzyme";
import Breakpoint from "../Breakpoint";
import { makeSource, makeOriginalSource } from "../../../../utils/test-head";
import { makeSource } from "../../../../utils/test-head";
describe("Breakpoint", () => {
it("simple", () => {
@ -31,8 +31,7 @@ describe("Breakpoint", () => {
it("paused at an original location", () => {
const { component } = render({
frame: { selectedLocation: location },
breakpoint: { location },
selectedSource: makeOriginalSource("foo")
breakpoint: { selectedLocation: location }
});
expect(component).toMatchSnapshot();
@ -48,6 +47,7 @@ describe("Breakpoint", () => {
const generatedLocation = { sourceId: "foo", line: 53, column: 73 };
const location = { sourceId: "foo/original", line: 5, column: 7 };
const selectedLocation = generatedLocation;
function render(overrides = {}) {
const props = generateDefaults(overrides);
@ -60,8 +60,7 @@ function render(overrides = {}) {
function makeBreakpoint(overrides = {}) {
return {
location,
generatedLocation,
selectedLocation,
disabled: false,
...overrides
};

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

@ -1,41 +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/>. */
.event-listeners-content {
padding: 4px 20px;
}
.event-listeners-content ul {
padding: 0;
list-style-type: none;
}
.event-listener-group {
user-select: none;
}
.event-listeners-content .arrow {
margin-inline-end: 0;
position: relative;
top: 1px;
}
html[dir="ltr"] .event-listeners-content .arrow.expanded {
transform: rotate(0deg);
}
html[dir="rtl"] .event-listeners-content .arrow.expanded {
transform: rotate(90deg);
}
.event-listener-event {
display: flex;
align-items: center;
margin-inline-start: 30px;
}
.event-listener-event input {
margin-inline-end: 4px;
margin-inline-start: 0px;
}

181
devtools/client/debugger/new/src/components/SecondaryPanes/EventListeners.js
View File

@ -1,181 +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/>. */
// @flow
import React, { Component } from "react";
import classnames from "classnames";
import { connect } from "../../utils/connect";
import actions from "../../actions";
import { getActiveEventListeners } from "../../selectors";
import AccessibleImage from "../shared/AccessibleImage";
import type { EventListenerBreakpoints } from "../../types";
import "./EventListeners.css";
const CATEGORIES = {
Mouse: ["click", "mouseover", "dblclick"],
Keyboard: ["keyup", "keydown"]
};
type Props = {
addEventListeners: typeof actions.addEventListeners,
removeEventListeners: typeof actions.removeEventListeners,
activeEventListeners: EventListenerBreakpoints
};
type State = {
expandedCategories: string[]
};
function getKey(category: string, eventType: string) {
return `${category}:${eventType}`;
}
class EventListeners extends Component<Props, State> {
constructor(props) {
super(props);
this.state = {
expandedCategories: []
};
}
onCategoryToggle(category, event) {
event.preventDefault();
const { expandedCategories } = this.state;
if (expandedCategories.includes(category)) {
this.setState({
expandedCategories: expandedCategories.filter(
eventCategory => eventCategory !== category
)
});
} else {
this.setState({
expandedCategories: [...expandedCategories, category]
});
}
}
onCategoryClick(category, isChecked) {
const { addEventListeners, removeEventListeners } = this.props;
const events = CATEGORIES[category].map(eventType =>
getKey(category, eventType)
);
if (isChecked) {
addEventListeners(events);
} else {
removeEventListeners(events);
}
}
onEventTypeClick(eventType, isChecked) {
const { addEventListeners, removeEventListeners } = this.props;
if (isChecked) {
addEventListeners([eventType]);
} else {
removeEventListeners([eventType]);
}
}
renderCategoryHeading(category) {
const { expandedCategories } = this.state;
const { activeEventListeners } = this.props;
const eventTypes = CATEGORIES[category];
const expanded = expandedCategories.includes(category);
const checked = eventTypes.every(eventType =>
activeEventListeners.includes(getKey(category, eventType))
);
const indeterminate =
!checked &&
eventTypes.some(eventType =>
activeEventListeners.includes(getKey(category, eventType))
);
return (
<label>
<AccessibleImage
className={classnames("arrow", { expanded })}
onClick={e => this.onCategoryToggle(category, e)}
/>
<input
type="checkbox"
value={category}
onChange={e => this.onCategoryClick(category, e.target.checked)}
checked={checked}
ref={el => el && (el.indeterminate = indeterminate)}
/>
<span className="event-listener-category">{category}</span>
</label>
);
}
renderCategoryListing(category) {
const { activeEventListeners } = this.props;
const { expandedCategories } = this.state;
const expanded = expandedCategories.includes(category);
if (!expanded) {
return null;
}
return (
<ul>
{CATEGORIES[category].map(eventType => {
const key = getKey(category, eventType);
return (
<li className="event-listener-event" key={key}>
<label>
<input
type="checkbox"
value={key}
onChange={e => this.onEventTypeClick(key, e.target.checked)}
checked={activeEventListeners.includes(key)}
/>
{eventType}
</label>
</li>
);
})}
</ul>
);
}
render() {
return (
<div className="event-listeners-content">
<ul className="event-listeners-list">
{Object.keys(CATEGORIES).map(category => {
return (
<li className="event-listener-group" key={category}>
{this.renderCategoryHeading(category)}
{this.renderCategoryListing(category)}
</li>
);
})}
</ul>
</div>
);
}
}
const mapStateToProps = state => ({
activeEventListeners: getActiveEventListeners(state)
});
export default connect(
mapStateToProps,
{
addEventListeners: actions.addEventListeners,
removeEventListeners: actions.removeEventListeners
}
)(EventListeners);

6
devtools/client/debugger/new/src/components/SecondaryPanes/Frames/Frame.js
View File

@ -7,8 +7,8 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
import Svg from "../../shared/Svg";
import AccessibleImage from "../../shared/AccessibleImage";
import { formatDisplayName } from "../../../utils/pause/frames";
import { getFilename, getFileURL } from "../../../utils/source";
import FrameMenu from "./FrameMenu";
@ -38,9 +38,7 @@ function FrameLocation({ frame, displayFullUrl = false }: FrameLocationProps) {
return (
<span className="location">
{frame.library}
<AccessibleImage
className={`annotation-logo ${frame.library.toLowerCase()}`}
/>
<Svg name={frame.library.toLowerCase()} className="annotation-logo" />
</span>
);
}

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

@ -4,12 +4,12 @@
.frames ul {
list-style: none;
margin-top: 4px;
margin: 0;
padding: 0;
}
.frames ul li {
padding: 2px 10px 2px 20px;
padding: 7px 10px 7px 21px;
overflow: hidden;
display: flex;
justify-content: space-between;
@ -103,9 +103,9 @@
}
.annotation-logo {
mask-size: 100%;
display: inline-block;
width: 12px;
margin-inline-start: 4px;
}
:root.theme-dark .annotation-logo:not(.angular) svg path {

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

@ -35,8 +35,3 @@
.frames ul .frames-group.expanded .badge {
color: var(--theme-highlight-blue);
}
.group-description-name {
padding-left: 5px;
}

27
devtools/client/debugger/new/src/components/SecondaryPanes/Frames/Group.js
View File

@ -6,11 +6,12 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
import { getLibraryFromUrl } from "../../../utils/pause/frames";
import Svg from "../../shared/Svg";
import {
getLibraryFromUrl,
formatDisplayName
} from "../../../utils/pause/frames";
import FrameMenu from "./FrameMenu";
import AccessibleImage from "../../shared/AccessibleImage";
import "./Group.css";
@ -19,19 +20,17 @@ import FrameComponent from "./Frame";
import type { LocalFrame } from "./types";
import Badge from "../../shared/Badge";
type FrameLocationProps = { frame: LocalFrame, expanded: boolean };
function FrameLocation({ frame, expanded }: FrameLocationProps) {
type FrameLocationProps = { frame: LocalFrame };
function FrameLocation({ frame }: FrameLocationProps) {
const library = frame.library || getLibraryFromUrl(frame);
if (!library) {
return null;
}
const arrowClassName = classNames("arrow", { expanded });
return (
<span className="group-description">
<AccessibleImage className={arrowClassName} />
<AccessibleImage className={`annotation-logo ${library.toLowerCase()}`} />
<span className="group-description-name">{library}</span>
<span className="location">
{library}
<Svg name={library.toLowerCase()} className="annotation-logo" />
</span>
);
}
@ -131,7 +130,8 @@ export default class Group extends Component<Props, State> {
const { l10n } = this.context;
const frame = this.props.group[0];
const expanded = this.state.expanded;
const displayName = formatDisplayName(frame, undefined, l10n);
const l10NEntry = this.state.expanded
? "callStack.group.collapseTooltip"
: "callStack.group.expandTooltip";
@ -145,8 +145,9 @@ export default class Group extends Component<Props, State> {
tabIndex={0}
title={title}
>
<FrameLocation frame={frame} expanded={expanded} />
<span className="title">{displayName}</span>
<Badge>{this.props.group.length}</Badge>
<FrameLocation frame={frame} />
</li>
);
}

48
devtools/client/debugger/new/src/components/SecondaryPanes/Frames/tests/__snapshots__/Group.spec.js.snap
View File

@ -11,8 +11,15 @@ exports[`Group displays a group 1`] = `
tabIndex={0}
title="Show Back frames"
>
<span
className="title"
>
foo
</span>
<Badge>
1
</Badge>
<FrameLocation
expanded={false}
frame={
Object {
"displayName": "foo",
@ -20,9 +27,6 @@ exports[`Group displays a group 1`] = `
}
}
/>
<Badge>
1
</Badge>
</li>
</div>
`;
@ -39,8 +43,15 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = `
tabIndex={0}
title="Collapse Back frames"
>
<span
className="title"
>
renderFoo
</span>
<Badge>
3
</Badge>
<FrameLocation
expanded={true}
frame={
Object {
"displayName": "renderFoo",
@ -55,9 +66,6 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = `
}
}
/>
<Badge>
3
</Badge>
</li>
<div
className="frames-list"
@ -156,8 +164,15 @@ exports[`Group renders group with anonymous functions 1`] = `
tabIndex={0}
title="Show Back frames"
>
<span
className="title"
>
&lt;anonymous&gt;
</span>
<Badge>
3
</Badge>
<FrameLocation
expanded={false}
frame={
Object {
"displayName": "",
@ -172,9 +187,6 @@ exports[`Group renders group with anonymous functions 1`] = `
}
}
/>
<Badge>
3
</Badge>
</li>
</div>
`;
@ -191,8 +203,15 @@ exports[`Group renders group with anonymous functions 2`] = `
tabIndex={0}
title="Collapse Back frames"
>
<span
className="title"
>
&lt;anonymous&gt;
</span>
<Badge>
3
</Badge>
<FrameLocation
expanded={true}
frame={
Object {
"displayName": "",
@ -207,9 +226,6 @@ exports[`Group renders group with anonymous functions 2`] = `
}
}
/>
<Badge>
3
</Badge>
</li>
<div
className="frames-list"

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

@ -53,6 +53,10 @@
display: flex;
}
.secondary-panes .accordion .plus {
margin-top: -2px;
}
.secondary-panes .accordion .plus svg {
width: 12px;
margin-top: 3px;

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

@ -21,7 +21,7 @@ import {
getWorkers
} from "../../selectors";
import AccessibleImage from "../shared/AccessibleImage";
import Svg from "../shared/Svg";
import { prefs, features } from "../../utils/prefs";
import Breakpoints from "./Breakpoints";
@ -33,7 +33,6 @@ import Accordion from "../shared/Accordion";
import CommandBar from "./CommandBar";
import UtilsBar from "./UtilsBar";
import XHRBreakpoints from "./XHRBreakpoints";
import EventListeners from "./EventListeners";
import Scopes from "./Scopes";
@ -58,7 +57,7 @@ function debugBtn(onClick, type, className, tooltip) {
key={type}
title={tooltip}
>
<AccessibleImage className={type} title={tooltip} aria-label={tooltip} />
<Svg name={type} title={tooltip} aria-label={tooltip} />
</button>
);
}
@ -300,19 +299,6 @@ class SecondaryPanes extends Component<Props, State> {
};
}
getEventListenersItem() {
return {
header: L10N.getStr("eventListenersHeader"),
className: "event-listeners-pane",
buttons: [],
component: <EventListeners />,
opened: prefs.eventListenersVisible,
onToggle: opened => {
prefs.eventListenersVisible = opened;
}
};
}
getStartItems() {
const { workers } = this.props;
@ -339,10 +325,6 @@ class SecondaryPanes extends Component<Props, State> {
items.push(this.getXHRItem());
}
if (features.eventListenersBreakpoints) {
items.push(this.getEventListenersItem());
}
return items.filter(item => item);
}

1
devtools/client/debugger/new/src/components/SecondaryPanes/moz.build
View File

@ -10,7 +10,6 @@ DIRS += [
DebuggerModules(
'CommandBar.js',
'EventListeners.js',
'Expressions.js',
'index.js',
'Scopes.js',

6
devtools/client/debugger/new/src/components/shared/AccessibleImage.css
View File

@ -4,10 +4,4 @@
height: 12px;
/* makes span appear like an image */
display: inline-block;
background: var(--theme-body-color);
mask-size: 100%;
}
.img.arrow.arrow.expanded {
transform: rotate(0deg);
}

4
devtools/client/debugger/new/src/components/shared/Accordion.js
View File

@ -4,7 +4,7 @@
// @flow
import React, { cloneElement, Component } from "react";
import AccessibleImage from "./AccessibleImage";
import Svg from "./Svg";
import "./Accordion.css";
@ -69,7 +69,7 @@ class Accordion extends Component<Props, State> {
onKeyDown={e => this.onHandleHeaderKeyDown(e, i)}
onClick={() => this.handleHeaderClick(i)}
>
<AccessibleImage className={`arrow ${opened ? "expanded" : ""}`} />
<Svg name="arrow" className={opened ? "expanded" : ""} />
{item.header}
{item.buttons ? (
<div className="header-buttons" tabIndex="-1">

4
devtools/client/debugger/new/src/components/shared/Button/PaneToggleButton.js
View File

@ -5,7 +5,7 @@
// @flow
import React, { PureComponent } from "react";
import classnames from "classnames";
import AccessibleImage from "../AccessibleImage";
import Svg from "../Svg";
import { CommandBarButton } from "./";
import "./styles/PaneToggleButton.css";
@ -36,7 +36,7 @@ class PaneToggleButton extends PureComponent<Props> {
onClick={() => handleClick(position, collapsed)}
title={title}
>
<AccessibleImage className="toggle-panes" />
<Svg name="togglePanes" />
</CommandBarButton>
);
}

5
devtools/client/debugger/new/src/components/shared/Button/styles/CloseButton.css
View File

@ -20,14 +20,11 @@
background-color: var(--theme-comment);
width: 8px;
height: 8px;
transition: all 0.15s ease-in-out;
padding: 0;
margin-top: 0;
}
.close-btn .close:hover {
background-color: var(--theme-comment);
}
.close-btn:hover .img.close {
background-color: white;
}

1
devtools/client/debugger/new/src/components/shared/Button/styles/CommandBarButton.css
View File

@ -11,7 +11,6 @@
position: relative;
padding: 0px 5px;
fill: currentColor;
min-width: 30px;
}
.command-bar-button:disabled {

5
devtools/client/debugger/new/src/components/shared/Button/styles/PaneToggleButton.css
View File

@ -6,7 +6,10 @@
transform: translate(0, 0px);
transition: transform 0.25s ease-in-out;
padding: 5px;
height: inherit;
}
.toggle-button .togglePanes {
vertical-align: -2px;
}
.toggle-button svg {

Some files were not shown because too many files have changed in this diff Show More