diff --git a/b2g/installer/package-manifest.in b/b2g/installer/package-manifest.in index 977bc8215087..38ce27182aa4 100644 --- a/b2g/installer/package-manifest.in +++ b/b2g/installer/package-manifest.in @@ -603,6 +603,7 @@ @RESPATH@/chrome/devtools.manifest #ifdef MOZ_GRAPHENE @RESPATH@/@PREF_DIR@/devtools.js +@RESPATH@/@PREF_DIR@/debugger.js #endif ; shell icons diff --git a/browser/base/content/test/referrer/browser.ini b/browser/base/content/test/referrer/browser.ini index ce3d56cc4e36..964a53d4cc24 100644 --- a/browser/base/content/test/referrer/browser.ini +++ b/browser/base/content/test/referrer/browser.ini @@ -19,7 +19,7 @@ skip-if = os == 'linux' # Bug 1145199 skip-if = os == 'linux' # Bug 1145199 [browser_referrer_simple_click.js] [browser_referrer_open_link_in_container_tab.js] -skip-if = os == 'linux' # Bug 1144816 +skip-if = os == 'linux' || e10s # Bug 1144816, Bug 1315042 [browser_referrer_open_link_in_container_tab2.js] skip-if = os == 'linux' # Bug 1144816 [browser_referrer_open_link_in_container_tab3.js] diff --git a/browser/installer/package-manifest.in b/browser/installer/package-manifest.in index 93f5f2ea0c54..6f6bacdb4e97 100644 --- a/browser/installer/package-manifest.in +++ b/browser/installer/package-manifest.in @@ -617,6 +617,7 @@ @RESPATH@/browser/chrome/devtools@JAREXT@ @RESPATH@/browser/chrome/devtools.manifest @RESPATH@/browser/@PREF_DIR@/devtools.js +@RESPATH@/browser/@PREF_DIR@/debugger.js ; shell icons #ifdef XP_UNIX diff --git a/devtools/client/debugger/new/debugger.css b/devtools/client/debugger/new/debugger.css index 6a08291a3134..acd7342652a7 100644 --- a/devtools/client/debugger/new/debugger.css +++ b/devtools/client/debugger/new/debugger.css @@ -206,40 +206,6 @@ body { font-size: 14px; color: var(--theme-comment); } -/* vim:set ts=2 sw=2 sts=2 et: */ - -/* 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/. */ - -:root.theme-light, -:root .theme-light { - --theme-search-overlays-semitransparent: rgba(221, 225, 228, 0.66); - --theme-faded-tab-color: #7e7e7e; -} - -:root.theme-dark, -:root .theme-dark { - --theme-faded-tab-color: #6e7d8c; -} - -* { - box-sizing: border-box; -} - -html, -body { - height: 100%; - margin: 0; - padding: 0; - width: 100%; -} - -#mount { - display: flex; - height: 100%; -} - .debugger { display: flex; flex: 1; @@ -894,6 +860,7 @@ html .arrow.expanded svg { .tree .node { padding: 2px 5px; position: relative; + cursor: pointer; } .tree .node.focused { @@ -960,48 +927,653 @@ html[dir="rtl"] .tree .node > div { display: flex; overflow: hidden; } +/* BASICS */ -.tree { +.CodeMirror { + /* Set height, width, borders, and global font properties here */ + font-family: monospace; + height: 300px; + color: black; +} + +/* PADDING */ + +.CodeMirror-lines { + padding: 4px 0; /* Vertical padding around content */ +} +.CodeMirror pre { + padding: 0 4px; /* Horizontal padding of content */ +} + +.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { + background-color: white; /* The little square between H and V scrollbars */ +} + +/* GUTTER */ + +.CodeMirror-gutters { + border-right: 1px solid #ddd; + background-color: #f7f7f7; + white-space: nowrap; +} +.CodeMirror-linenumbers {} +.CodeMirror-linenumber { + padding: 0 3px 0 5px; + min-width: 20px; + text-align: right; + color: #999; + white-space: nowrap; +} + +.CodeMirror-guttermarker { color: black; } +.CodeMirror-guttermarker-subtle { color: #999; } + +/* CURSOR */ + +.CodeMirror-cursor { + border-left: 1px solid black; + border-right: none; + width: 0; +} +/* Shown when moving in bi-directional text */ +.CodeMirror div.CodeMirror-secondarycursor { + border-left: 1px solid silver; +} +.cm-fat-cursor .CodeMirror-cursor { + width: auto; + border: 0 !important; + background: #7e7; +} +.cm-fat-cursor div.CodeMirror-cursors { + z-index: 1; +} + +.cm-animate-fat-cursor { + width: auto; + border: 0; + -webkit-animation: blink 1.06s steps(1) infinite; + -moz-animation: blink 1.06s steps(1) infinite; + animation: blink 1.06s steps(1) infinite; + background-color: #7e7; +} +@-moz-keyframes blink { + 0% {} + 50% { background-color: transparent; } + 100% {} +} +@-webkit-keyframes blink { + 0% {} + 50% { background-color: transparent; } + 100% {} +} +@keyframes blink { + 0% {} + 50% { background-color: transparent; } + 100% {} +} + +/* Can style cursor different in overwrite (non-insert) mode */ +.CodeMirror-overwrite .CodeMirror-cursor {} + +.cm-tab { display: inline-block; text-decoration: inherit; } + +.CodeMirror-rulers { + position: absolute; + left: 0; right: 0; top: -50px; bottom: -20px; + overflow: hidden; +} +.CodeMirror-ruler { + border-left: 1px solid #ccc; + top: 0; bottom: 0; + position: absolute; +} + +/* DEFAULT THEME */ + +.cm-s-default .cm-header {color: blue;} +.cm-s-default .cm-quote {color: #090;} +.cm-negative {color: #d44;} +.cm-positive {color: #292;} +.cm-header, .cm-strong {font-weight: bold;} +.cm-em {font-style: italic;} +.cm-link {text-decoration: underline;} +.cm-strikethrough {text-decoration: line-through;} + +.cm-s-default .cm-keyword {color: #708;} +.cm-s-default .cm-atom {color: #219;} +.cm-s-default .cm-number {color: #164;} +.cm-s-default .cm-def {color: #00f;} +.cm-s-default .cm-variable, +.cm-s-default .cm-punctuation, +.cm-s-default .cm-property, +.cm-s-default .cm-operator {} +.cm-s-default .cm-variable-2 {color: #05a;} +.cm-s-default .cm-variable-3 {color: #085;} +.cm-s-default .cm-comment {color: #a50;} +.cm-s-default .cm-string {color: #a11;} +.cm-s-default .cm-string-2 {color: #f50;} +.cm-s-default .cm-meta {color: #555;} +.cm-s-default .cm-qualifier {color: #555;} +.cm-s-default .cm-builtin {color: #30a;} +.cm-s-default .cm-bracket {color: #997;} +.cm-s-default .cm-tag {color: #170;} +.cm-s-default .cm-attribute {color: #00c;} +.cm-s-default .cm-hr {color: #999;} +.cm-s-default .cm-link {color: #00c;} + +.cm-s-default .cm-error {color: #f00;} +.cm-invalidchar {color: #f00;} + +.CodeMirror-composing { border-bottom: 2px solid; } + +/* Default styles for common addons */ + +div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;} +div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;} +.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); } +.CodeMirror-activeline-background {background: #e8f2ff;} + +/* STOP */ + +/* The rest of this file contains styles related to the mechanics of + the editor. You probably shouldn't touch them. */ + +.CodeMirror { + position: relative; + overflow: hidden; + background: white; +} + +.CodeMirror-scroll { + overflow: scroll !important; /* Things will break if this is overridden */ + /* 30px is the magic margin used to hide the element's real scrollbars */ + /* See overflow: hidden in .CodeMirror */ + margin-bottom: -30px; margin-right: -30px; + padding-bottom: 30px; + height: 100%; + outline: none; /* Prevent dragging from highlighting the element */ + position: relative; +} +.CodeMirror-sizer { + position: relative; + border-right: 30px solid transparent; +} + +/* The fake, visible scrollbars. Used to force redraw during scrolling + before actual scrolling happens, thus preventing shaking and + flickering artifacts. */ +.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { + position: absolute; + z-index: 6; + display: none; +} +.CodeMirror-vscrollbar { + right: 0; top: 0; + overflow-x: hidden; + overflow-y: scroll; +} +.CodeMirror-hscrollbar { + bottom: 0; left: 0; + overflow-y: hidden; + overflow-x: scroll; +} +.CodeMirror-scrollbar-filler { + right: 0; bottom: 0; +} +.CodeMirror-gutter-filler { + left: 0; bottom: 0; +} + +.CodeMirror-gutters { + position: absolute; left: 0; top: 0; + min-height: 100%; + z-index: 3; +} +.CodeMirror-gutter { + white-space: normal; + height: 100%; + display: inline-block; + vertical-align: top; + margin-bottom: -30px; +} +.CodeMirror-gutter-wrapper { + position: absolute; + z-index: 4; + background: none !important; + border: none !important; +} +.CodeMirror-gutter-background { + position: absolute; + top: 0; bottom: 0; + z-index: 4; +} +.CodeMirror-gutter-elt { + position: absolute; + cursor: default; + z-index: 4; +} +.CodeMirror-gutter-wrapper { -webkit-user-select: none; -moz-user-select: none; - -ms-user-select: none; - -o-user-select: none; user-select: none; +} - flex: 1; - white-space: nowrap; +.CodeMirror-lines { + cursor: text; + min-height: 1px; /* prevents collapsing before first draw */ +} +.CodeMirror pre { + /* Reset some styles that the rest of the page might have set */ + -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; + border-width: 0; + background: transparent; + font-family: inherit; + font-size: inherit; + margin: 0; + white-space: pre; + word-wrap: normal; + line-height: inherit; + color: inherit; + z-index: 2; + position: relative; + overflow: visible; + -webkit-tap-highlight-color: transparent; + -webkit-font-variant-ligatures: contextual; + font-variant-ligatures: contextual; +} +.CodeMirror-wrap pre { + word-wrap: break-word; + white-space: pre-wrap; + word-break: normal; +} + +.CodeMirror-linebackground { + position: absolute; + left: 0; right: 0; top: 0; bottom: 0; + z-index: 0; +} + +.CodeMirror-linewidget { + position: relative; + z-index: 2; overflow: auto; } -.tree button { - display: block; +.CodeMirror-widget {} + +.CodeMirror-code { + outline: none; } -.tree .node { - padding: 2px 5px; +/* Force content-box sizing for the elements where we expect it */ +.CodeMirror-scroll, +.CodeMirror-sizer, +.CodeMirror-gutter, +.CodeMirror-gutters, +.CodeMirror-linenumber { + -moz-box-sizing: content-box; + box-sizing: content-box; +} + +.CodeMirror-measure { + position: absolute; + width: 100%; + height: 0; + overflow: hidden; + visibility: hidden; +} + +.CodeMirror-cursor { + position: absolute; + pointer-events: none; +} +.CodeMirror-measure pre { position: static; } + +div.CodeMirror-cursors { + visibility: hidden; position: relative; + z-index: 3; +} +div.CodeMirror-dragcursors { + visibility: visible; +} + +.CodeMirror-focused div.CodeMirror-cursors { + visibility: visible; +} + +.CodeMirror-selected { background: #d9d9d9; } +.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; } +.CodeMirror-crosshair { cursor: crosshair; } +.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; } +.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; } + +.cm-searching { + background: #ffa; + background: rgba(255, 255, 0, .4); +} + +/* Used to force a border model for a node */ +.cm-force-border { padding-right: .1px; } + +@media print { + /* Hide the cursor when printing */ + .CodeMirror div.CodeMirror-cursors { + visibility: hidden; + } +} + +/* See issue #2901 */ +.cm-tab-wrap-hack:after { content: ''; } + +/* Help users use markselection to safely style text background */ +span.CodeMirror-selectedtext { background: none; } +/* 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/. */ + +:root { + /* --breakpoint-background: url("chrome://devtools/skin/images/breakpoint.svg#light"); */ + /* --breakpoint-hover-background: url("chrome://devtools/skin/images/breakpoint.svg#light-hover"); */ + --breakpoint-active-color: rgba(44,187,15,.2); + --breakpoint-active-color-hover: rgba(44,187,15,.5); + /* --breakpoint-conditional-background: url("chrome://devtools/skin/images/breakpoint.svg#light-conditional"); */ +} + +.theme-dark:root { + /* --breakpoint-background: url("chrome://devtools/skin/images/breakpoint.svg#dark"); */ + /* --breakpoint-hover-background: url("chrome://devtools/skin/images/breakpoint.svg#dark-hover"); */ + --breakpoint-active-color: rgba(0,255,175,.4); + --breakpoint-active-color-hover: rgba(0,255,175,.7); + /* --breakpoint-conditional-background: url("chrome://devtools/skin/images/breakpoint.svg#dark-conditional"); */ +} + +.CodeMirror .errors { + width: 16px; +} + +.CodeMirror .error { + display: inline-block; + margin-left: 5px; + width: 12px; + height: 12px; + background-repeat: no-repeat; + background-position: center; + background-size: contain; + /* background-image: url("chrome://devtools/skin/images/editor-error.png"); */ + opacity: 0.75; +} + +.CodeMirror .hit-counts { + width: 6px; +} + +.CodeMirror .hit-count { + display: inline-block; + height: 12px; + border: solid rgba(0,0,0,0.2); + border-width: 1px 1px 1px 0; + border-radius: 0 3px 3px 0; + padding: 0 3px; + font-size: 10px; + pointer-events: none; +} + +.CodeMirror-linenumber:before { + content: " "; + display: block; + width: calc(100% - 3px); + position: absolute; + top: 1px; + left: 0; + height: 12px; + z-index: -1; + background-size: calc(100% - 2px) 12px; + background-repeat: no-repeat; + background-position: right center; + padding-inline-end: 9px; +} + +.breakpoint .CodeMirror-linenumber { + color: var(--theme-body-background); +} + +.breakpoint .CodeMirror-linenumber:before { + background-image: var(--breakpoint-background) !important; +} + +.conditional .CodeMirror-linenumber:before { + background-image: var(--breakpoint-conditional-background) !important; +} + +.debug-line .CodeMirror-linenumber { + background-color: var(--breakpoint-active-color); +} + +.theme-dark .debug-line .CodeMirror-linenumber { + color: #c0c0c0; +} + +.debug-line .CodeMirror-line { + background-color: var(--breakpoint-active-color) !important; +} + +/* Don't display the highlight color since the debug line + is already highlighted */ +.debug-line .CodeMirror-activeline-background { + display: none; +} + +.CodeMirror { + cursor: text; + height: 100%; +} + +.CodeMirror-gutters { + cursor: default; +} + +/* This is to avoid the fake horizontal scrollbar div of codemirror to go 0 +height when floating scrollbars are active. Make sure that this value is equal +to the maximum of `min-height` specific to the `scrollbar[orient="horizontal"]` +selector in floating-scrollbar-light.css across all platforms. */ +.CodeMirror-hscrollbar { + min-height: 10px; +} + +/* This is to avoid the fake vertical scrollbar div of codemirror to go 0 +width when floating scrollbars are active. Make sure that this value is equal +to the maximum of `min-width` specific to the `scrollbar[orient="vertical"]` +selector in floating-scrollbar-light.css across all platforms. */ +.CodeMirror-vscrollbar { + min-width: 10px; +} + +.cm-trailingspace { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUXCToH00Y1UgAAACFJREFUCNdjPMDBUc/AwNDAAAFMTAwMDA0OP34wQgX/AQBYgwYEx4f9lQAAAABJRU5ErkJggg=="); + opacity: 0.75; + background-position: left bottom; + background-repeat: repeat-x; +} + +.cm-highlight { + position: relative; +} + +.cm-highlight:before { + position: absolute; + border-top-style: solid; + border-bottom-style: solid; + border-top-color: var(--theme-comment-alt); + border-bottom-color: var(--theme-comment-alt); + border-top-width: 1px; + border-bottom-width: 1px; + top: -1px; + bottom: 0; + left: 0; + right: 0; + content: ""; + margin-bottom: -1px; +} + +.cm-highlight-full:before { + border: 1px solid var(--theme-comment-alt); +} + +.cm-highlight-start:before { + border-left-width: 1px; + border-left-style: solid; + border-left-color: var(--theme-comment-alt); + margin: 0 0 -1px -1px; + border-top-left-radius: 2px; + border-bottom-left-radius: 2px; +} + +.cm-highlight-end:before { + border-right-width: 1px; + border-right-style: solid; + border-right-color: var(--theme-comment-alt); + margin: 0 -1px -1px 0; + border-top-right-radius: 2px; + border-bottom-right-radius: 2px; +} + +/* CodeMirror dialogs styling */ + +.CodeMirror-dialog { + padding: 4px 3px; +} + +.CodeMirror-dialog, +.CodeMirror-dialog input { + font: message-box; +} + +/* Fold addon */ + +.CodeMirror-foldmarker { + color: blue; + text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px; + font-family: sans-serif; + line-height: .3; cursor: pointer; } -.tree-node:hover { - background: var(--theme-tab-toolbar-background); +.CodeMirror-foldgutter { + width: 16px; /* Same as breakpoints gutter above */ } -.tree .node.focused { - color: white; - background-color: var(--theme-selection-background); +.CodeMirror-foldgutter-open, +.CodeMirror-foldgutter-folded { + color: #555; + cursor: pointer; } -.tree .node > div { - margin-left: 10px; +.CodeMirror-foldgutter-open:after { + font-size: 120%; + content: "\25BE"; } -.tree .node.focused svg { - fill: white; +.CodeMirror-foldgutter-folded:after { + font-size: 120%; + content: "\25B8"; } -.sources-list .tree-node button { - position: fixed; +.CodeMirror-hints { + position: absolute; + z-index: 10; + overflow: hidden; + list-style: none; + margin: 0; + padding: 2px; + border-radius: 3px; + font-size: 90%; + max-height: 20em; + overflow-y: auto; +} + +.CodeMirror-hint { + margin: 0; + padding: 0 4px; + border-radius: 2px; + max-width: 19em; + overflow: hidden; + white-space: pre; + cursor: pointer; +} + +.CodeMirror-Tern-completion { + padding-inline-start: 22px; + position: relative; + line-height: 18px; +} + +.CodeMirror-Tern-completion:before { + position: absolute; + left: 2px; + bottom: 2px; + border-radius: 50%; + font-size: 12px; + font-weight: bold; + height: 15px; + width: 15px; + line-height: 16px; + text-align: center; + color: #ffffff; + box-sizing: border-box; +} + +.CodeMirror-Tern-completion-unknown:before { + content: "?"; +} + +.CodeMirror-Tern-completion-object:before { + content: "O"; +} + +.CodeMirror-Tern-completion-fn:before { + content: "F"; +} + +.CodeMirror-Tern-completion-array:before { + content: "A"; +} + +.CodeMirror-Tern-completion-number:before { + content: "N"; +} + +.CodeMirror-Tern-completion-string:before { + content: "S"; +} + +.CodeMirror-Tern-completion-bool:before { + content: "B"; +} + +.CodeMirror-Tern-completion-guess { + color: #999; +} + +.CodeMirror-Tern-tooltip { + border-radius: 3px; + padding: 2px 5px; + white-space: pre-wrap; + max-width: 40em; + position: absolute; + z-index: 10; +} + +.CodeMirror-Tern-hint-doc { + max-width: 25em; +} + +.CodeMirror-Tern-farg-current { + text-decoration: underline; +} + +.CodeMirror-Tern-fhint-guess { + opacity: .7; } .toggle-button-start, .toggle-button-end { @@ -1010,6 +1582,7 @@ html[dir="rtl"] .tree .node > div { height: 16px; transition: transform 0.25s ease-in-out; margin: 0 4px; + cursor: pointer; } .toggle-button-start svg, @@ -1017,26 +1590,23 @@ html[dir="rtl"] .tree .node > div { fill: var(--theme-comment); } -.toggle-button-end svg { +html:not([dir="rtl"]) .toggle-button-end svg, +html[dir="rtl"] .toggle-button-start svg { transform: rotate(180deg); } -.toggle-button-start.vertical svg { - transform: rotate(-90deg); -} - .toggle-button-end.vertical svg { - transform: rotate(90deg); + transform: rotate(-90deg); } .toggle-button-start { top: 7px; - left: 0; + offset-inline-start: 0; } .toggle-button-end { top: 7px; - right: 0; + offset-inline-end: 0; } .toggle-button-start.collapsed, @@ -1325,7 +1895,6 @@ html[dir="rtl"] .editor-mount { white-space: normal; opacity: 0.9; font-size: 12px; - text-align: center; font-weight: bold; } @@ -1411,7 +1980,10 @@ html .breakpoints-list .breakpoint.paused { } .breakpoint-snippet { + overflow: hidden; + text-overflow: ellipsis; padding-inline-start: 18px; + padding-inline-end: 18px; } .breakpoint .close-btn { @@ -1502,7 +2074,7 @@ html .breakpoints-list .breakpoint.paused { color: var(--theme-highlight-red); } -.object-node.not-enumerable { +.object-node.default-property { opacity: 0.6; } @@ -1805,6 +2377,61 @@ html .breakpoints-list .breakpoint.paused { position: absolute; top: auto; } +.dropdown { + background: var(--theme-body-background); + border: 1px solid var(--theme-splitter-color); + box-shadow: 0 4px 4px 0 var(--theme-search-overlays-semitransparent); + max-height: 300px; + position: absolute; + offset-inline-end: 8px; + top: 35px; + width: 150px; + z-index: 1000; +} + +.dropdown-button { + position: absolute; + offset-inline-end: 18px; + top: 4px; + font-size: 18px; + color: var(--theme-comment); + cursor: pointer; + background: none; + border: none; + padding: 0 5px; + font-weight: 100; +} + +.dropdown li { + transition: all 0.25s ease; + padding: 2px 10px 10px 5px; + overflow: hidden; + height: 30px; + text-overflow: ellipsis; +} + +.dropdown li:hover { + background-color: var(--theme-search-overlays-semitransparent); + cursor: pointer; +} + +.dropdown ul { + list-style: none; + line-height: 2em; + font-size: 1em; + margin: 0; + padding: 0; +} + +.dropdown-mask { + position: fixed; + width: 100%; + height: 100%; + background: transparent; + z-index: 999; + left: 0; + top: 0; +} .source-header { border-bottom: 1px solid var(--theme-splitter-color); height: 30px; @@ -1831,7 +2458,7 @@ html .breakpoints-list .breakpoint.paused { height: 14px; display: inline-block; position: relative; - top: 5px; + top: 4px; margin: 4px; margin-inline-start: 8px; line-height: 0; @@ -1926,91 +2553,4 @@ html .breakpoints-list .breakpoint.paused { display: block; } -.toggle-button-start, -.toggle-button-end { - position: absolute; - width: 16px; - height: 16px; - margin: 0 4px; - cursor: pointer; -} - -.toggle-button-start svg, -.toggle-button-end svg { - fill: var(--theme-comment); -} - -.toggle-button-end svg { - transform: rotate(180deg); -} - -.toggle-button-start { - top: 8px; - left: 0; -} - -.toggle-button-end { - top: 8px; - right: 0; -} - -.toggle-button-start.collapsed, -.toggle-button-end.collapsed { - transform: rotate(180deg); - flex: 1; -} -.dropdown { - background: var(--theme-body-background); - border: 1px solid var(--theme-splitter-color); - box-shadow: 0 4px 4px 0 var(--theme-search-overlays-semitransparent); - max-height: 300px; - position: absolute; - right: 8px; - top: 35px; - width: 150px; - z-index: 1000; -} - -.dropdown-button { - position: absolute; - right: 18px; - top: 4px; - font-size: 18px; - color: var(--theme-body-color); - cursor: pointer; - background: none; - border: none; -} - -.dropdown li { - transition: all 0.25s ease; - padding: 2px 10px 10px 5px; - overflow: hidden; - height: 30px; - text-overflow: ellipsis; -} - -.dropdown li:hover { - background-color: var(--theme-search-overlays-semitransparent); - cursor: pointer; -} - -.dropdown ul { - list-style: none; - line-height: 2em; - font-size: 1em; - margin: 0; - padding: 0; -} - -.dropdown-mask { - position: fixed; - width: 100%; - height: 100%; - background: transparent; - z-index: 999; - left: 0; - top: 0; -} - /*# sourceMappingURL=debugger.css.map*/ \ No newline at end of file diff --git a/devtools/client/debugger/new/debugger.js b/devtools/client/debugger/new/debugger.js index 156394ca28db..ffc58e598aaa 100644 --- a/devtools/client/debugger/new/debugger.js +++ b/devtools/client/debugger/new/debugger.js @@ -77,61 +77,62 @@ var Debugger = /***/ function(module, exports, __webpack_require__) { var React = __webpack_require__(2); - + var _require = __webpack_require__(3), bindActionCreators = _require.bindActionCreators, combineReducers = _require.combineReducers; - + var ReactDOM = __webpack_require__(22); - + var _require2 = __webpack_require__(23), getClient = _require2.getClient, firefox = _require2.firefox; - - var _require3 = __webpack_require__(178), + + var _require3 = __webpack_require__(129), renderRoot = _require3.renderRoot, bootstrap = _require3.bootstrap, - L10N = _require3.L10N; - - var _require4 = __webpack_require__(65), + L10N = _require3.L10N, + unmountRoot = _require3.unmountRoot; + + var _require4 = __webpack_require__(197), getValue = _require4.getValue, isFirefoxPanel = _require4.isFirefoxPanel; - - var configureStore = __webpack_require__(227); - - var _require5 = __webpack_require__(237), + + var configureStore = __webpack_require__(244); + + var _require5 = __webpack_require__(254), onConnect = _require5.onConnect, onFirefoxConnect = _require5.onFirefoxConnect; - - var reducers = __webpack_require__(238); - var selectors = __webpack_require__(253); - - var App = __webpack_require__(254); - + + var reducers = __webpack_require__(288); + var selectors = __webpack_require__(303); + + var App = __webpack_require__(304); + var createStore = configureStore({ log: getValue("logging.actions"), makeThunkArgs: (args, state) => { return Object.assign({}, args, { client: getClient(state) }); } }); - + var store = createStore(combineReducers(reducers)); - var actions = bindActionCreators(__webpack_require__(255), store.dispatch); - + var actions = bindActionCreators(__webpack_require__(314), store.dispatch); + if (!isFirefoxPanel()) { window.L10N = L10N; - window.L10N.setBundle(__webpack_require__(500)); + window.L10N.setBundle(__webpack_require__(636)); } - + window.appStore = store; - + // Expose the bound actions so external things can do things like // selecting a source. window.actions = { selectSource: actions.selectSource, selectSourceURL: actions.selectSourceURL }; - + // Globals needed for mocha integration tests window.getGlobalsForTesting = () => { return { @@ -141,29 +142,18 @@ var Debugger = actions }; }; - - function unmountRoot() { - var mount = document.querySelector("#mount div"); - ReactDOM.unmountComponentAtNode(mount); - } - + if (isFirefoxPanel()) { (function () { - var sourceMap = __webpack_require__(257); - var prettyPrint = __webpack_require__(268); - + var sourceMap = __webpack_require__(316); + var prettyPrint = __webpack_require__(383); + module.exports = { bootstrap: (_ref) => { var threadClient = _ref.threadClient, tabTarget = _ref.tabTarget, toolbox = _ref.toolbox; - - // jlast: remove when docker updates - if (!window.L10N) { - window.L10N = L10N; - window.L10N.setBundle(__webpack_require__(500)); - } - + firefox.setThreadClient(threadClient); firefox.setTabTarget(tabTarget); renderRoot(React, ReactDOM, App, store); @@ -171,7 +161,7 @@ var Debugger = return onFirefoxConnect(actions, firefox); }, destroy: () => { - unmountRoot(); + unmountRoot(ReactDOM); sourceMap.destroyWorker(); prettyPrint.destroyWorker(); }, @@ -196,46 +186,46 @@ var Debugger = /***/ function(module, exports, __webpack_require__) { 'use strict'; - + exports.__esModule = true; exports.compose = exports.applyMiddleware = exports.bindActionCreators = exports.combineReducers = exports.createStore = undefined; - + var _createStore = __webpack_require__(4); - + var _createStore2 = _interopRequireDefault(_createStore); - + var _combineReducers = __webpack_require__(17); - + var _combineReducers2 = _interopRequireDefault(_combineReducers); - + var _bindActionCreators = __webpack_require__(19); - + var _bindActionCreators2 = _interopRequireDefault(_bindActionCreators); - + var _applyMiddleware = __webpack_require__(20); - + var _applyMiddleware2 = _interopRequireDefault(_applyMiddleware); - + var _compose = __webpack_require__(21); - + var _compose2 = _interopRequireDefault(_compose); - + var _warning = __webpack_require__(18); - + var _warning2 = _interopRequireDefault(_warning); - + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } - + /* * This is a dummy function to check if the function name has been altered by minification. * If the function has been minified and NODE_ENV !== 'production', warn the user. */ function isCrushed() {} - + if (false) { (0, _warning2["default"])('You are currently using minified code outside of NODE_ENV === \'production\'. ' + 'This means that you are running a slower development build of Redux. ' + 'You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify ' + 'or DefinePlugin for webpack (http://stackoverflow.com/questions/30030031) ' + 'to ensure you have the correct code for your production build.'); } - + exports.createStore = _createStore2["default"]; exports.combineReducers = _combineReducers2["default"]; exports.bindActionCreators = _bindActionCreators2["default"]; @@ -247,21 +237,21 @@ var Debugger = /***/ function(module, exports, __webpack_require__) { 'use strict'; - + exports.__esModule = true; exports.ActionTypes = undefined; exports["default"] = createStore; - + var _isPlainObject = __webpack_require__(5); - + var _isPlainObject2 = _interopRequireDefault(_isPlainObject); - + var _symbolObservable = __webpack_require__(15); - + var _symbolObservable2 = _interopRequireDefault(_symbolObservable); - + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } - + /** * These are private action types reserved by Redux. * For any unknown actions, you must return the current state. @@ -271,7 +261,7 @@ var Debugger = var ActionTypes = exports.ActionTypes = { INIT: '@@redux/INIT' }; - + /** * Creates a Redux store that holds the state tree. * The only way to change the data in the store is to call `dispatch()` on it. @@ -299,36 +289,36 @@ var Debugger = */ function createStore(reducer, initialState, enhancer) { var _ref2; - + if (typeof initialState === 'function' && typeof enhancer === 'undefined') { enhancer = initialState; initialState = undefined; } - + if (typeof enhancer !== 'undefined') { if (typeof enhancer !== 'function') { throw new Error('Expected the enhancer to be a function.'); } - + return enhancer(createStore)(reducer, initialState); } - + if (typeof reducer !== 'function') { throw new Error('Expected the reducer to be a function.'); } - + var currentReducer = reducer; var currentState = initialState; var currentListeners = []; var nextListeners = currentListeners; var isDispatching = false; - + function ensureCanMutateNextListeners() { if (nextListeners === currentListeners) { nextListeners = currentListeners.slice(); } } - + /** * Reads the state tree managed by the store. * @@ -337,7 +327,7 @@ var Debugger = function getState() { return currentState; } - + /** * Adds a change listener. It will be called any time an action is dispatched, * and some part of the state tree may potentially have changed. You may then @@ -365,25 +355,25 @@ var Debugger = if (typeof listener !== 'function') { throw new Error('Expected listener to be a function.'); } - + var isSubscribed = true; - + ensureCanMutateNextListeners(); nextListeners.push(listener); - + return function unsubscribe() { if (!isSubscribed) { return; } - + isSubscribed = false; - + ensureCanMutateNextListeners(); var index = nextListeners.indexOf(listener); nextListeners.splice(index, 1); }; } - + /** * Dispatches an action. It is the only way to trigger a state change. * @@ -413,30 +403,30 @@ var Debugger = if (!(0, _isPlainObject2["default"])(action)) { throw new Error('Actions must be plain objects. ' + 'Use custom middleware for async actions.'); } - + if (typeof action.type === 'undefined') { throw new Error('Actions may not have an undefined "type" property. ' + 'Have you misspelled a constant?'); } - + if (isDispatching) { throw new Error('Reducers may not dispatch actions.'); } - + try { isDispatching = true; currentState = currentReducer(currentState, action); } finally { isDispatching = false; } - + var listeners = currentListeners = nextListeners; for (var i = 0; i < listeners.length; i++) { listeners[i](); } - + return action; } - + /** * Replaces the reducer currently used by the store to calculate the state. * @@ -451,11 +441,11 @@ var Debugger = if (typeof nextReducer !== 'function') { throw new Error('Expected the nextReducer to be a function.'); } - + currentReducer = nextReducer; dispatch({ type: ActionTypes.INIT }); } - + /** * Interoperability point for observable/reactive libraries. * @returns {observable} A minimal observable of state changes. @@ -464,7 +454,7 @@ var Debugger = */ function observable() { var _ref; - + var outerSubscribe = subscribe; return _ref = { /** @@ -475,18 +465,18 @@ var Debugger = * be used to unsubscribe the observable from the store, and prevent further * emission of values from the observable. */ - + subscribe: function subscribe(observer) { if (typeof observer !== 'object') { throw new TypeError('Expected the observer to be an object.'); } - + function observeState() { if (observer.next) { observer.next(getState()); } } - + observeState(); var unsubscribe = outerSubscribe(observeState); return { unsubscribe: unsubscribe }; @@ -495,12 +485,12 @@ var Debugger = return this; }, _ref; } - + // When a store is created, an "INIT" action is dispatched so that every // reducer returns their initial state. This effectively populates // the initial state tree. dispatch({ type: ActionTypes.INIT }); - + return _ref2 = { dispatch: dispatch, subscribe: subscribe, @@ -516,23 +506,23 @@ var Debugger = var baseGetTag = __webpack_require__(6), getPrototype = __webpack_require__(12), isObjectLike = __webpack_require__(14); - + /** `Object#toString` result references. */ var objectTag = '[object Object]'; - + /** Used for built-in method references. */ var funcProto = Function.prototype, objectProto = Object.prototype; - + /** Used to resolve the decompiled source of functions. */ var funcToString = funcProto.toString; - + /** Used to check objects for own properties. */ var hasOwnProperty = objectProto.hasOwnProperty; - + /** Used to infer the `Object` constructor. */ var objectCtorString = funcToString.call(Object); - + /** * Checks if `value` is a plain object, that is, an object created by the * `Object` constructor or one with a `[[Prototype]]` of `null`. @@ -573,7 +563,7 @@ var Debugger = return typeof Ctor == 'function' && Ctor instanceof Ctor && funcToString.call(Ctor) == objectCtorString; } - + module.exports = isPlainObject; @@ -584,14 +574,14 @@ var Debugger = var Symbol = __webpack_require__(7), getRawTag = __webpack_require__(10), objectToString = __webpack_require__(11); - + /** `Object#toString` result references. */ var nullTag = '[object Null]', undefinedTag = '[object Undefined]'; - + /** Built-in value references. */ var symToStringTag = Symbol ? Symbol.toStringTag : undefined; - + /** * The base implementation of `getTag` without fallbacks for buggy environments. * @@ -607,7 +597,7 @@ var Debugger = ? getRawTag(value) : objectToString(value); } - + module.exports = baseGetTag; @@ -616,10 +606,10 @@ var Debugger = /***/ function(module, exports, __webpack_require__) { var root = __webpack_require__(8); - + /** Built-in value references. */ var Symbol = root.Symbol; - + module.exports = Symbol; @@ -628,13 +618,13 @@ var Debugger = /***/ function(module, exports, __webpack_require__) { var freeGlobal = __webpack_require__(9); - + /** Detect free variable `self`. */ var freeSelf = typeof self == 'object' && self && self.Object === Object && self; - + /** Used as a reference to the global object. */ var root = freeGlobal || freeSelf || Function('return this')(); - + module.exports = root; @@ -644,9 +634,9 @@ var Debugger = /* WEBPACK VAR INJECTION */(function(global) {/** Detect free variable `global` from Node.js. */ var freeGlobal = typeof global == 'object' && global && global.Object === Object && global; - + module.exports = freeGlobal; - + /* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }()))) /***/ }, @@ -654,23 +644,23 @@ var Debugger = /***/ function(module, exports, __webpack_require__) { var Symbol = __webpack_require__(7); - + /** Used for built-in method references. */ var objectProto = Object.prototype; - + /** Used to check objects for own properties. */ var hasOwnProperty = objectProto.hasOwnProperty; - + /** * Used to resolve the * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring) * of values. */ var nativeObjectToString = objectProto.toString; - + /** Built-in value references. */ var symToStringTag = Symbol ? Symbol.toStringTag : undefined; - + /** * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values. * @@ -681,12 +671,12 @@ var Debugger = function getRawTag(value) { var isOwn = hasOwnProperty.call(value, symToStringTag), tag = value[symToStringTag]; - + try { value[symToStringTag] = undefined; var unmasked = true; } catch (e) {} - + var result = nativeObjectToString.call(value); if (unmasked) { if (isOwn) { @@ -697,7 +687,7 @@ var Debugger = } return result; } - + module.exports = getRawTag; @@ -707,14 +697,14 @@ var Debugger = /** Used for built-in method references. */ var objectProto = Object.prototype; - + /** * Used to resolve the * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring) * of values. */ var nativeObjectToString = objectProto.toString; - + /** * Converts `value` to a string using `Object.prototype.toString`. * @@ -725,7 +715,7 @@ var Debugger = function objectToString(value) { return nativeObjectToString.call(value); } - + module.exports = objectToString; @@ -734,10 +724,10 @@ var Debugger = /***/ function(module, exports, __webpack_require__) { var overArg = __webpack_require__(13); - + /** Built-in value references. */ var getPrototype = overArg(Object.getPrototypeOf, Object); - + module.exports = getPrototype; @@ -758,7 +748,7 @@ var Debugger = return func(transform(arg)); }; } - + module.exports = overArg; @@ -793,7 +783,7 @@ var Debugger = function isObjectLike(value) { return value != null && typeof value == 'object'; } - + module.exports = isObjectLike; @@ -803,9 +793,9 @@ var Debugger = /* WEBPACK VAR INJECTION */(function(global) {/* global window */ 'use strict'; - + module.exports = __webpack_require__(16)(global || window || this); - + /* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }()))) /***/ }, @@ -813,11 +803,11 @@ var Debugger = /***/ function(module, exports) { 'use strict'; - + module.exports = function symbolObservablePonyfill(root) { var result; var Symbol = root.Symbol; - + if (typeof Symbol === 'function') { if (Symbol.observable) { result = Symbol.observable; @@ -828,7 +818,7 @@ var Debugger = } else { result = '@@observable'; } - + return result; }; @@ -838,66 +828,66 @@ var Debugger = /***/ function(module, exports, __webpack_require__) { 'use strict'; - + exports.__esModule = true; exports["default"] = combineReducers; - + var _createStore = __webpack_require__(4); - + var _isPlainObject = __webpack_require__(5); - + var _isPlainObject2 = _interopRequireDefault(_isPlainObject); - + var _warning = __webpack_require__(18); - + var _warning2 = _interopRequireDefault(_warning); - + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } - + function getUndefinedStateErrorMessage(key, action) { var actionType = action && action.type; var actionName = actionType && '"' + actionType.toString() + '"' || 'an action'; - + return 'Given action ' + actionName + ', reducer "' + key + '" returned undefined. ' + 'To ignore an action, you must explicitly return the previous state.'; } - + function getUnexpectedStateShapeWarningMessage(inputState, reducers, action) { var reducerKeys = Object.keys(reducers); var argumentName = action && action.type === _createStore.ActionTypes.INIT ? 'initialState argument passed to createStore' : 'previous state received by the reducer'; - + if (reducerKeys.length === 0) { return 'Store does not have a valid reducer. Make sure the argument passed ' + 'to combineReducers is an object whose values are reducers.'; } - + if (!(0, _isPlainObject2["default"])(inputState)) { return 'The ' + argumentName + ' has unexpected type of "' + {}.toString.call(inputState).match(/\s([a-z|A-Z]+)/)[1] + '". Expected argument to be an object with the following ' + ('keys: "' + reducerKeys.join('", "') + '"'); } - + var unexpectedKeys = Object.keys(inputState).filter(function (key) { return !reducers.hasOwnProperty(key); }); - + if (unexpectedKeys.length > 0) { return 'Unexpected ' + (unexpectedKeys.length > 1 ? 'keys' : 'key') + ' ' + ('"' + unexpectedKeys.join('", "') + '" found in ' + argumentName + '. ') + 'Expected to find one of the known reducer keys instead: ' + ('"' + reducerKeys.join('", "') + '". Unexpected keys will be ignored.'); } } - + function assertReducerSanity(reducers) { Object.keys(reducers).forEach(function (key) { var reducer = reducers[key]; var initialState = reducer(undefined, { type: _createStore.ActionTypes.INIT }); - + if (typeof initialState === 'undefined') { throw new Error('Reducer "' + key + '" returned undefined during initialization. ' + 'If the state passed to the reducer is undefined, you must ' + 'explicitly return the initial state. The initial state may ' + 'not be undefined.'); } - + var type = '@@redux/PROBE_UNKNOWN_ACTION_' + Math.random().toString(36).substring(7).split('').join('.'); if (typeof reducer(undefined, { type: type }) === 'undefined') { throw new Error('Reducer "' + key + '" returned undefined when probed with a random type. ' + ('Don\'t try to handle ' + _createStore.ActionTypes.INIT + ' or other actions in "redux/*" ') + 'namespace. They are considered private. Instead, you must return the ' + 'current state for any unknown actions, unless it is undefined, ' + 'in which case you must return the initial state, regardless of the ' + 'action type. The initial state may not be undefined.'); } }); } - + /** * Turns an object whose values are different reducer functions, into a single * reducer function. It will call every child reducer, and gather their results @@ -924,29 +914,29 @@ var Debugger = } } var finalReducerKeys = Object.keys(finalReducers); - + var sanityError; try { assertReducerSanity(finalReducers); } catch (e) { sanityError = e; } - + return function combination() { var state = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0]; var action = arguments[1]; - + if (sanityError) { throw sanityError; } - + if (false) { var warningMessage = getUnexpectedStateShapeWarningMessage(state, finalReducers, action); if (warningMessage) { (0, _warning2["default"])(warningMessage); } } - + var hasChanged = false; var nextState = {}; for (var i = 0; i < finalReducerKeys.length; i++) { @@ -970,7 +960,7 @@ var Debugger = /***/ function(module, exports) { 'use strict'; - + exports.__esModule = true; exports["default"] = warning; /** @@ -1000,7 +990,7 @@ var Debugger = /***/ function(module, exports) { 'use strict'; - + exports.__esModule = true; exports["default"] = bindActionCreators; function bindActionCreator(actionCreator, dispatch) { @@ -1008,7 +998,7 @@ var Debugger = return dispatch(actionCreator.apply(undefined, arguments)); }; } - + /** * Turns an object whose values are action creators, into an object with the * same keys, but with every function wrapped into a `dispatch` call so they @@ -1034,11 +1024,11 @@ var Debugger = if (typeof actionCreators === 'function') { return bindActionCreator(actionCreators, dispatch); } - + if (typeof actionCreators !== 'object' || actionCreators === null) { throw new Error('bindActionCreators expected an object or a function, instead received ' + (actionCreators === null ? 'null' : typeof actionCreators) + '. ' + 'Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?'); } - + var keys = Object.keys(actionCreators); var boundActionCreators = {}; for (var i = 0; i < keys.length; i++) { @@ -1056,19 +1046,19 @@ var Debugger = /***/ function(module, exports, __webpack_require__) { 'use strict'; - + exports.__esModule = true; - + var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; - + exports["default"] = applyMiddleware; - + var _compose = __webpack_require__(21); - + var _compose2 = _interopRequireDefault(_compose); - + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } - + /** * Creates a store enhancer that applies middleware to the dispatch method * of the Redux store. This is handy for a variety of tasks, such as expressing @@ -1089,13 +1079,13 @@ var Debugger = for (var _len = arguments.length, middlewares = Array(_len), _key = 0; _key < _len; _key++) { middlewares[_key] = arguments[_key]; } - + return function (createStore) { return function (reducer, initialState, enhancer) { var store = createStore(reducer, initialState, enhancer); var _dispatch = store.dispatch; var chain = []; - + var middlewareAPI = { getState: store.getState, dispatch: function dispatch(action) { @@ -1106,7 +1096,7 @@ var Debugger = return middleware(middlewareAPI); }); _dispatch = _compose2["default"].apply(undefined, chain)(store.dispatch); - + return _extends({}, store, { dispatch: _dispatch }); @@ -1119,7 +1109,7 @@ var Debugger = /***/ function(module, exports) { "use strict"; - + exports.__esModule = true; exports["default"] = compose; /** @@ -1132,12 +1122,12 @@ var Debugger = * from right to left. For example, compose(f, g, h) is identical to doing * (...args) => f(g(h(...args))). */ - + function compose() { for (var _len = arguments.length, funcs = Array(_len), _key = 0; _key < _len; _key++) { funcs[_key] = arguments[_key]; } - + if (funcs.length === 0) { return function (arg) { return arg; @@ -1154,7 +1144,7 @@ var Debugger = } }; }(); - + if (typeof _ret === "object") return _ret.v; } } @@ -1179,11 +1169,11 @@ var Debugger = // CommonJS if (true) { module.exports = f(__webpack_require__(2)); - + // RequireJS } else if (typeof define === "function" && define.amd) { define(['react'], f); - + //