зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1325401 - Start using Reps bundle behind a flag. r=bgrins
--HG-- extra : rebase_source : 5cfba79065f557b1589b308b6a04e2073bc67dd3
This commit is contained in:
Jason Laster
Родитель
55614c06db
Коммит
37fa596233
|
|
@ -16,6 +16,9 @@ let whitelist = [
|
|||
// The debugger uses cross-browser CSS.
|
||||
{sourceName: /devtools\/client\/debugger\/new\/styles.css/i,
|
||||
isFromDevTools: true},
|
||||
// reps uses cross-browser CSS.
|
||||
{sourceName: /devtools\/client\/shared\/components\/reps.css/i,
|
||||
isFromDevTools: true},
|
||||
// PDFjs is futureproofing its pseudoselectors, and those rules are dropped.
|
||||
{sourceName: /web\/viewer\.css$/i,
|
||||
errorMessage: /Unknown pseudo-class.*(fullscreen|selection)/i,
|
||||
|
|
|
|||
|
|
@ -324,6 +324,9 @@ pref("devtools.webconsole.new-frontend-enabled", true);
|
|||
pref("devtools.webconsole.new-frontend-enabled", false);
|
||||
#endif
|
||||
|
||||
// Enable loading reps from a bundle
|
||||
pref("devtools.webconsole.use-reps-bundle", false);
|
||||
|
||||
// Enable the experimental support for source maps in console (work in progress)
|
||||
pref("devtools.sourcemap.locations.enabled", false);
|
||||
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@ DevToolsModules(
|
|||
'h-split-box.js',
|
||||
'notification-box.css',
|
||||
'notification-box.js',
|
||||
'reps.css',
|
||||
'reps.js',
|
||||
'search-box.js',
|
||||
'sidebar-toggle.css',
|
||||
'sidebar-toggle.js',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,533 @@
|
|||
/* 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/. */
|
||||
|
||||
.theme-dark,
|
||||
.theme-light {
|
||||
--number-color: var(--theme-highlight-green);
|
||||
--string-color: var(--theme-highlight-orange);
|
||||
--null-color: var(--theme-comment);
|
||||
--object-color: var(--theme-body-color);
|
||||
--caption-color: var(--theme-highlight-blue);
|
||||
--location-color: var(--theme-content-color1);
|
||||
--source-link-color: var(--theme-highlight-blue);
|
||||
--node-color: var(--theme-highlight-bluegrey);
|
||||
--reference-color: var(--theme-highlight-purple);
|
||||
}
|
||||
|
||||
.theme-firebug {
|
||||
--number-color: #000088;
|
||||
--string-color: #FF0000;
|
||||
--null-color: #787878;
|
||||
--object-color: DarkGreen;
|
||||
--caption-color: #444444;
|
||||
--location-color: #555555;
|
||||
--source-link-color: blue;
|
||||
--node-color: rgb(0, 0, 136);
|
||||
--reference-color: rgb(102, 102, 255);
|
||||
}
|
||||
|
||||
/******************************************************************************/
|
||||
|
||||
.objectLink:hover {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.objectBox-object {
|
||||
font-weight: bold;
|
||||
color: var(--object-color);
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.objectBox-string,
|
||||
.objectBox-text,
|
||||
.objectLink-textNode,
|
||||
.objectBox-table {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.objectBox-number,
|
||||
.objectLink-styleRule,
|
||||
.objectLink-element,
|
||||
.objectLink-textNode,
|
||||
.objectBox-array > .length {
|
||||
color: var(--number-color);
|
||||
}
|
||||
|
||||
.objectBox-string {
|
||||
color: var(--string-color);
|
||||
}
|
||||
|
||||
.objectLink-function,
|
||||
.objectBox-stackTrace,
|
||||
.objectLink-profile {
|
||||
color: var(--object-color);
|
||||
}
|
||||
|
||||
.objectLink-Location {
|
||||
font-style: italic;
|
||||
color: var(--location-color);
|
||||
}
|
||||
|
||||
.objectBox-null,
|
||||
.objectBox-undefined,
|
||||
.objectBox-hint,
|
||||
.logRowHint {
|
||||
font-style: italic;
|
||||
color: var(--null-color);
|
||||
}
|
||||
|
||||
.objectLink-sourceLink {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
top: 2px;
|
||||
padding-left: 8px;
|
||||
font-weight: bold;
|
||||
color: var(--source-link-color);
|
||||
}
|
||||
|
||||
/******************************************************************************/
|
||||
|
||||
.objectLink-event,
|
||||
.objectLink-eventLog,
|
||||
.objectLink-regexp,
|
||||
.objectLink-object,
|
||||
.objectLink-Date {
|
||||
font-weight: bold;
|
||||
color: var(--object-color);
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/******************************************************************************/
|
||||
|
||||
.objectLink-object .nodeName,
|
||||
.objectLink-NamedNodeMap .nodeName,
|
||||
.objectLink-NamedNodeMap .objectEqual,
|
||||
.objectLink-NamedNodeMap .arrayLeftBracket,
|
||||
.objectLink-NamedNodeMap .arrayRightBracket,
|
||||
.objectLink-Attr .attrEqual,
|
||||
.objectLink-Attr .attrTitle {
|
||||
color: var(--node-color);
|
||||
}
|
||||
|
||||
.objectLink-object .nodeName {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/******************************************************************************/
|
||||
|
||||
.objectLeftBrace,
|
||||
.objectRightBrace,
|
||||
.arrayLeftBracket,
|
||||
.arrayRightBracket {
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.objectLeftBrace,
|
||||
.arrayLeftBracket {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.objectRightBrace,
|
||||
.arrayRightBracket {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
/******************************************************************************/
|
||||
/* Cycle reference*/
|
||||
|
||||
.objectLink-Reference {
|
||||
font-weight: bold;
|
||||
color: var(--reference-color);
|
||||
}
|
||||
|
||||
.objectBox-array > .objectTitle {
|
||||
font-weight: bold;
|
||||
color: var(--object-color);
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-weight: bold;
|
||||
color: var(--caption-color);
|
||||
}
|
||||
|
||||
/******************************************************************************/
|
||||
/* Themes */
|
||||
|
||||
.theme-dark .objectBox-null,
|
||||
.theme-dark .objectBox-undefined,
|
||||
.theme-light .objectBox-null,
|
||||
.theme-light .objectBox-undefined {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.theme-dark .objectBox-object,
|
||||
.theme-light .objectBox-object {
|
||||
font-weight: normal;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.theme-dark .caption,
|
||||
.theme-light .caption {
|
||||
font-weight: normal;
|
||||
}
|
||||
:root.theme-light,
|
||||
:root .theme-light {
|
||||
--theme-search-overlays-semitransparent: rgba(221, 225, 228, 0.66);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#mount {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 8px;
|
||||
background: rgba(113, 113, 113, 0.5);
|
||||
}
|
||||
|
||||
:root.theme-dark .CodeMirror-scrollbar-filler {
|
||||
background: transparent;
|
||||
}
|
||||
.landing-page {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
/* Customs properties */
|
||||
--title-font-size: 24px;
|
||||
--ui-element-font-size: 16px;
|
||||
--primary-line-height: 30px;
|
||||
--secondary-line-height: 25px;
|
||||
--base-spacing: 20px;
|
||||
--base-transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.landing-page .sidebar {
|
||||
display: flex;
|
||||
background-color: var(--theme-tab-toolbar-background);
|
||||
width: 200px;
|
||||
flex-direction: column;
|
||||
border-right: 1px solid var(--theme-splitter-color);
|
||||
}
|
||||
|
||||
.landing-page .sidebar h1 {
|
||||
color: var(--theme-body-color);
|
||||
font-size: var(--title-font-size);
|
||||
margin: 0;
|
||||
line-height: var(--primary-line-height);
|
||||
font-weight: normal;
|
||||
padding: calc(2 * var(--base-spacing)) var(--base-spacing);
|
||||
}
|
||||
|
||||
.landing-page .sidebar ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
line-height: var(--primary-line-height);
|
||||
font-size: var(--ui-element-font-size);
|
||||
}
|
||||
|
||||
.landing-page .sidebar li {
|
||||
padding: calc(var(--base-spacing) / 4) var(--base-spacing);
|
||||
}
|
||||
|
||||
.landing-page .sidebar li a {
|
||||
color: var(--theme-body-color);
|
||||
}
|
||||
|
||||
.landing-page .sidebar li.selected {
|
||||
background: var(--theme-highlight-bluegrey);
|
||||
color: var(--theme-selection-color);
|
||||
transition: var(--base-transition);
|
||||
}
|
||||
|
||||
.landing-page .sidebar li.selected a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.landing-page .sidebar li:hover,
|
||||
.landing-page .sidebar li:focus {
|
||||
background: var(--theme-selection-background);
|
||||
color: var(--theme-selection-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.landing-page .sidebar li:hover a,
|
||||
.landing-page .sidebar li:focus a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.landing-page .panel {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.landing-page .panel header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin: calc(2 * var(--base-spacing)) 0 0;
|
||||
padding-bottom: var(--base-spacing);
|
||||
}
|
||||
|
||||
.landing-page .panel header input {
|
||||
flex: 1;
|
||||
color: var(--theme-body-color);
|
||||
font-size: var(--ui-element-font-size);
|
||||
border: 1px solid var(--theme-splitter-color);
|
||||
padding: calc(var(--base-spacing) / 2);
|
||||
margin: 0 var(--base-spacing);
|
||||
transition: var(--base-transition);
|
||||
}
|
||||
|
||||
.landing-page .panel header input:focus {
|
||||
border: 1px solid var(--theme-selection-background);
|
||||
}
|
||||
|
||||
.landing-page .panel .center-message {
|
||||
font-size: var(--ui-element-font-size);
|
||||
line-height: var(--secondary-line-height);
|
||||
padding: calc(var(--base-spacing) / 2);
|
||||
}
|
||||
|
||||
.landing-page .center a {
|
||||
color: var(--theme-highlight-bluegrey);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.landing-page .tab-group {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.landing-page .tab-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.landing-page .tab {
|
||||
border-bottom: 1px solid var(--theme-splitter-color);
|
||||
padding: calc(var(--base-spacing) / 2) var(--base-spacing);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.landing-page .tab-title {
|
||||
line-height: var(--secondary-line-height);
|
||||
font-size: var(--ui-element-font-size);
|
||||
color: var(--theme-highlight-bluegrey);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.landing-page .tab-url {
|
||||
color: var(--theme-comment);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.landing-page .tab:focus,
|
||||
.landing-page .tab.active {
|
||||
background: var(--theme-selection-background);
|
||||
color: var(--theme-selection-color);
|
||||
cursor: pointer;
|
||||
transition: var(--base-transition);
|
||||
}
|
||||
|
||||
.landing-page .tab:focus .tab-title,
|
||||
.landing-page .tab.active .tab-title {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.landing-page .tab:focus .tab-url,
|
||||
.landing-page .tab.active .tab-url {
|
||||
color: var(--theme-highlight-gray);
|
||||
}
|
||||
|
||||
.landing-page .panel .footer-note {
|
||||
padding: var(--base-spacing) 0;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: var(--theme-comment);
|
||||
}
|
||||
.quick-links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
background: rgba(255,255,255,0.25);
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.quick-links button {
|
||||
font-size: 1.2rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
margin: 0.5rem 0.25rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.console-header {
|
||||
background: var(--theme-highlight-pink);
|
||||
color: white;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.console-header form {
|
||||
display: flex;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.console-header h1 {
|
||||
font-size: 14px;
|
||||
font-weight: 100;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.console-header input {
|
||||
background-color: var(--theme-highlight-pink);
|
||||
flex: 1;
|
||||
border: 1px solid white;
|
||||
color: white;
|
||||
font-size: 1.25rem;
|
||||
padding: 0.25rem;
|
||||
line-height: 2rem;
|
||||
padding-left: 1rem;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.console-header ::-webkit-input-placeholder {
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
line-height: 2rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.console-header .clear-button {
|
||||
background: rgba(255,255,255,0.25);
|
||||
border: 1px solid rgba(255,255,255,0.25);
|
||||
color: white;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
main {
|
||||
--default-border: 1px solid var(--theme-splitter-color);
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.expressions {
|
||||
padding: 2em 1em;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.rep-row {
|
||||
border: var(--default-border);
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.rep-input {
|
||||
font-family: monospace;
|
||||
background-color: var(--theme-toolbar-background-alt);
|
||||
color: var(--theme-body-color);
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.rep-input:before {
|
||||
content: "\279C ";
|
||||
}
|
||||
|
||||
.reps {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.rep-element + .rep-element {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.rep-element::before {
|
||||
content: attr(data-mode) ":";
|
||||
background-color: var(--theme-toolbar-background);;
|
||||
font-family: monospace;
|
||||
display: inline-block;
|
||||
font-size: 0.75rem;
|
||||
padding: 0.1rem 0.25rem;
|
||||
margin-right: 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.packet header {
|
||||
display: flex;
|
||||
background-color: var(--theme-toolbar-background-alt);
|
||||
border-top: var(--default-border);
|
||||
color: var(--theme-body-color);
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.packet header::before {
|
||||
display: inline-block;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.packet header.packet-expanded::before {
|
||||
content: "\2212";
|
||||
}
|
||||
|
||||
.packet header.packet-collapsed::before {
|
||||
content: "+";
|
||||
}
|
||||
|
||||
.copy-packet-button {
|
||||
margin-left: auto;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.packet .packet-rep {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=bundle.css.map*/
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -12,17 +12,35 @@ if (typeof define === "undefined") {
|
|||
require("amd-loader");
|
||||
}
|
||||
|
||||
const Services = require("Services");
|
||||
|
||||
// React
|
||||
const {
|
||||
createFactory,
|
||||
PropTypes
|
||||
} = require("devtools/client/shared/vendor/react");
|
||||
const { createFactories } = require("devtools/client/shared/components/reps/rep-utils");
|
||||
const { Rep } = createFactories(require("devtools/client/shared/components/reps/rep"));
|
||||
const StringRep = createFactories(require("devtools/client/shared/components/reps/string").StringRep).rep;
|
||||
const VariablesViewLink = createFactory(require("devtools/client/webconsole/new-console-output/components/variables-view-link"));
|
||||
const { Grip } = require("devtools/client/shared/components/reps/grip");
|
||||
const { MODE } = require("devtools/client/shared/components/reps/constants");
|
||||
const VariablesViewLink = createFactory(require("devtools/client/webconsole/new-console-output/components/variables-view-link"));
|
||||
|
||||
|
||||
let Rep;
|
||||
let StringRep;
|
||||
let Grip;
|
||||
let MODE;
|
||||
|
||||
// Start using the bundle
|
||||
if (!Services.prefs.getBoolPref("devtools.webconsole.use-reps-bundle")) {
|
||||
Rep = createFactories(require("devtools/client/shared/components/reps/rep")).Rep;
|
||||
StringRep = createFactories(require("devtools/client/shared/components/reps/string").StringRep).rep;
|
||||
Grip = require("devtools/client/shared/components/reps/grip").Grip;
|
||||
MODE = require("devtools/client/shared/components/reps/constants").MODE;
|
||||
} else {
|
||||
const bundle = require("devtools/client/shared/components/reps");
|
||||
Rep = createFactory(bundle.Rep);
|
||||
StringRep = createFactory(bundle.StringRep);
|
||||
Grip = createFactory(bundle.Grip);
|
||||
MODE = bundle.MODE;
|
||||
}
|
||||
|
||||
GripMessageBody.displayName = "GripMessageBody";
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче