mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1425521 - Wrap JsTerm in a React component in new frontend; r=bgrins. 

MozReview-Commit-ID: GGq6ZB760d9

--HG--
rename : devtools/client/webconsole/jsterm.js => devtools/client/webconsole/components/JSTerm.js
extra : rebase_source : 2a2134bc04ca9efbb83654c93ab4b81232acf2bd
This commit is contained in:
Nicolas Chevobbe 2018-03-30 17:48:50 +02:00
Родитель 59ab21c500
Коммит ff0492d318
8 изменённых файлов: 1463 добавлений и 90 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

44
devtools/client/themes/webconsole.css
Просмотреть файл

@ -353,8 +353,6 @@ a {
/* JSTerm Styles */
html #jsterm-wrapper,
html .jsterm-stack-node,
html .jsterm-input-node-html,
html #webconsole-notificationbox {
flex: 0;
@ -391,10 +389,6 @@ html #webconsole-notificationbox {
/* styles for the new HTML frontend */
html .jsterm-stack-node {
position: relative;
}
textarea.jsterm-input-node,
textarea.jsterm-complete-node {
width: 100%;
@ -432,6 +426,12 @@ textarea.jsterm-input-node:focus {
border-radius: 0 0 4px 4px;
}
/* Unset the bottom right radius on the jsterm inputs when the sidebar is visible */
:root[platform="mac"] .sidebar ~ .jsterm-input-container textarea.jsterm-input-node,
:root[platform="mac"] .sidebar ~ .jsterm-input-container textarea.jsterm-complete-node {
border-bottom-right-radius: 0;
}
/* styles for the old frontend, which can be removed in Bug 1381834 */
@ -1097,14 +1097,42 @@ body #output-container {
overflow: hidden;
}
/*
* Here's what the layout of the console looks like:
*
* +------------------------------+--------------+
* | FILTER BAR | |
* +------------------------------+ |
* | | |
* | CONSOLE OUTPUT | SIDEBAR |
* | | |
* +------------------------------+ |
* | NOTIFICATION BOX | |
* +------------------------------+ |
* | JSTERM CONTAINER | |
* +------------------------------+--------------+
*/
.webconsole-output-wrapper {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto 1fr;
grid-template-columns: minmax(200px, 1fr) auto;
grid-template-rows: auto 1fr auto auto;
height: 100%;
width: 100vw;
}
.webconsole-output-wrapper #webconsole-notificationbox {
grid-column: 1 / 2;
grid-row: 3 / 4;
}
.webconsole-output-wrapper .jsterm-input-container {
grid-column: 1 / 2;
grid-row: -1 / -2;
position: relative;
z-index: 1;
}
/* Object Inspector */
.webconsole-output-wrapper .object-inspector.tree {
display: inline-block;

1373
devtools/client/webconsole/components/JSTerm.js Normal file
Просмотреть файл

Разница между файлами не показана из-за своего большого размера Загрузить разницу

1
devtools/client/webconsole/components/moz.build
Просмотреть файл

@ -15,6 +15,7 @@ DevToolsModules(
'FilterButton.js',
'FilterCheckbox.js',
'GripMessageBody.js',
'JSTerm.js',
'Message.js',
'MessageContainer.js',
'MessageIcon.js',

79
devtools/client/webconsole/new-console-output-wrapper.js
Просмотреть файл

@ -18,14 +18,15 @@ const EventEmitter = require("devtools/shared/event-emitter");
const ConsoleOutput = createFactory(require("devtools/client/webconsole/components/ConsoleOutput"));
const FilterBar = createFactory(require("devtools/client/webconsole/components/FilterBar"));
const SideBar = createFactory(require("devtools/client/webconsole/components/SideBar"));
const JSTerm = createFactory(require("devtools/client/webconsole/components/JSTerm"));
let store = null;
function NewConsoleOutputWrapper(parentNode, jsterm, toolbox, owner, document) {
function NewConsoleOutputWrapper(parentNode, hud, toolbox, owner, document) {
EventEmitter.decorate(this);
this.parentNode = parentNode;
this.jsterm = jsterm;
this.hud = hud;
this.toolbox = toolbox;
this.owner = owner;
this.document = document;
@ -37,13 +38,13 @@ function NewConsoleOutputWrapper(parentNode, jsterm, toolbox, owner, document) {
this.queuedRequestUpdates = [];
this.throttledDispatchPromise = null;
store = configureStore(this.jsterm.hud);
store = configureStore(this.hud);
}
NewConsoleOutputWrapper.prototype = {
init: function() {
return new Promise((resolve) => {
const attachRefToHud = (id, node) => {
this.jsterm.hud[id] = node;
this.hud[id] = node;
};
// Focus the input line whenever the output area is clicked.
this.parentNode.addEventListener("click", (event) => {
@ -75,15 +76,17 @@ NewConsoleOutputWrapper.prototype = {
return;
}
this.jsterm.focus();
if (this.hud && this.hud.jsterm) {
this.hud.jsterm.focus();
}
});
let { hud } = this.jsterm;
let { hud } = this;
const serviceContainer = {
attachRefToHud,
emitNewMessage: (node, messageId, timeStamp) => {
this.jsterm.hud.emit("new-messages", new Set([{
hud.emit("new-messages", new Set([{
node,
messageId,
timeStamp,
@ -140,9 +143,15 @@ NewConsoleOutputWrapper.prototype = {
store.dispatch(actions.showObjectInSidebar(rootActorId, messageId));
} : null;
let menu = createContextMenu(this.jsterm, this.parentNode,
{ actor, clipboardText, variableText, message,
serviceContainer, openSidebar, rootActorId });
let menu = createContextMenu(this.hud, this.parentNode, {
actor,
clipboardText,
variableText,
message,
serviceContainer,
openSidebar,
rootActorId
});
// Emit the "menu-open" event for testing.
menu.once("open", () => this.emit("menu-open"));
@ -155,7 +164,7 @@ NewConsoleOutputWrapper.prototype = {
Object.assign(serviceContainer, {
onViewSourceInDebugger: frame => {
this.toolbox.viewSourceInDebugger(frame.url, frame.line).then(() =>
this.jsterm.hud.emit("source-in-debugger-opened")
this.hud.emit("source-in-debugger-opened")
);
},
onViewSourceInScratchpad: frame => this.toolbox.viewSourceInScratchpad(
@ -199,34 +208,29 @@ NewConsoleOutputWrapper.prototype = {
});
}
let consoleOutput = ConsoleOutput({
serviceContainer,
onFirstMeaningfulPaint: resolve
});
let filterBar = FilterBar({
hidePersistLogsCheckbox: this.jsterm.hud.isBrowserConsole,
serviceContainer: {
attachRefToHud
}
});
let sideBar = SideBar({
serviceContainer,
});
let provider = createElement(
Provider,
{ store },
dom.div(
{className: "webconsole-output-wrapper"},
filterBar,
consoleOutput,
sideBar
FilterBar({
hidePersistLogsCheckbox: this.hud.isBrowserConsole,
serviceContainer: {
attachRefToHud
}
}),
ConsoleOutput({
serviceContainer,
onFirstMeaningfulPaint: resolve
}),
SideBar({
serviceContainer,
}),
JSTerm({
hud: this.hud,
}),
));
this.body = ReactDOM.render(provider, this.parentNode);
this.jsterm.focus();
});
},
@ -243,16 +247,15 @@ NewConsoleOutputWrapper.prototype = {
: packet.timestamp;
promise = new Promise(resolve => {
let jsterm = this.jsterm;
jsterm.hud.on("new-messages", function onThisMessage(messages) {
this.hud.on("new-messages", function onThisMessage(messages) {
for (let m of messages) {
if (m.timeStamp === timeStampToMatch) {
resolve(m.node);
jsterm.hud.off("new-messages", onThisMessage);
this.hud.off("new-messages", onThisMessage);
return;
}
}
});
}.bind(this));
});
} else {
promise = Promise.resolve();
@ -388,7 +391,7 @@ NewConsoleOutputWrapper.prototype = {
if (this.queuedMessageUpdates.length > 0) {
this.queuedMessageUpdates.forEach(({ message, res }) => {
store.dispatch(actions.networkMessageUpdate(message, null, res));
this.jsterm.hud.emit("network-message-updated", res);
this.hud.emit("network-message-updated", res);
});
this.queuedMessageUpdates = [];
}
@ -405,7 +408,7 @@ NewConsoleOutputWrapper.prototype = {
// (netmonitor/src/connector/firefox-data-provider).
// This event might be utilized in tests to find the right
// time when to finish.
this.jsterm.hud.emit("network-request-payload-ready");
this.hud.emit("network-request-payload-ready");
}
done();
}, 50);

25
devtools/client/webconsole/new-webconsole.js
Просмотреть файл

@ -12,7 +12,6 @@ const promise = require("promise");
const defer = require("devtools/shared/defer");
const Services = require("Services");
const { gDevTools } = require("devtools/client/framework/devtools");
const { JSTerm } = require("devtools/client/webconsole/jsterm");
const { WebConsoleConnectionProxy } = require("devtools/client/webconsole/webconsole-connection-proxy");
const KeyShortcuts = require("devtools/client/shared/key-shortcuts");
const { l10n } = require("devtools/client/webconsole/utils/messages");
@ -82,13 +81,7 @@ NewWebConsoleFrame.prototype = {
*/
async init() {
this._initUI();
let connectionInited = this._initConnection();
// Don't reject if the history fails to load for some reason.
// This would be fine, the panel will just start with empty history.
let onJsTermHistoryLoaded = this.jsterm.historyLoaded
.catch(() => {});
await Promise.all([connectionInited, onJsTermHistoryLoaded]);
await this._initConnection();
await this.newConsoleOutput.init();
let id = WebConsoleUtils.supportsString(this.hudId);
@ -104,8 +97,6 @@ NewWebConsoleFrame.prototype = {
Services.prefs.removeObserver(PREF_MESSAGE_TIMESTAMP, this._onToolboxPrefChanged);
this.React = this.ReactDOM = this.FrameView = null;
if (this.jsterm) {
this.jsterm.off("sidebar-opened", this.resize);
this.jsterm.off("sidebar-closed", this.resize);
this.jsterm.destroy();
this.jsterm = null;
}
@ -207,23 +198,13 @@ NewWebConsoleFrame.prototype = {
this.rootElement = this.document.documentElement;
this.outputNode = this.document.getElementById("output-container");
this.completeNode = this.document.querySelector(".jsterm-complete-node");
this.inputNode = this.document.querySelector(".jsterm-input-node");
this.jsterm = new JSTerm(this);
this.jsterm.init();
let toolbox = gDevTools.getToolbox(this.owner.target);
// @TODO Remove this once JSTerm is handled with React/Redux.
this.window.jsterm = this.jsterm;
// @TODO Once the toolbox has been converted to React, see if passing
// in JSTerm is still necessary.
// Handle both launchpad and toolbox loading
let Wrapper = this.owner.NewConsoleOutputWrapper || this.window.NewConsoleOutput;
this.newConsoleOutput = new Wrapper(
this.outputNode, this.jsterm, toolbox, this.owner, this.document);
this.newConsoleOutput =
new Wrapper(this.outputNode, this, toolbox, this.owner, this.document);
// Toggle the timestamp on preference change
Services.prefs.addObserver(PREF_MESSAGE_TIMESTAMP, this._onToolboxPrefChanged);
this._onToolboxPrefChanged();

5
devtools/client/webconsole/test/mochitest/browser_jsterm_hide_when_devtools_chrome_enabled_false.js
Просмотреть файл

@ -104,7 +104,6 @@ async function testObjectInspectorPropertiesAreSet(objInspector) {
}
function testJSTermIsNotVisible(hud) {
let inputContainer = hud.ui.window.document
.querySelector(".jsterm-input-container");
is(inputContainer.style.display, "none", "input is not visible");
let inputContainer = hud.ui.window.document.querySelector(".jsterm-input-container");
is(inputContainer, null, "input is not in dom");
}

14
devtools/client/webconsole/utils/context-menu.js
Просмотреть файл

@ -20,8 +20,8 @@ const { l10n } = require("devtools/client/webconsole/utils/messages");
/**
* Create a Menu instance for the webconsole.
*
* @param {Object} jsterm
* The JSTerm instance used by the webconsole.
* @param {Object} hud
* The webConsoleFrame.
* @param {Element} parentNode
* The container of the new console frontend output wrapper.
* @param {Object} options
@ -36,7 +36,7 @@ const { l10n } = require("devtools/client/webconsole/utils/messages");
* inspector sidebar
* - {String} rootActorId (optional) actor id for the root object being clicked on
*/
function createContextMenu(jsterm, parentNode, {
function createContextMenu(hud, parentNode, {
actor,
clipboardText,
variableText,
@ -114,9 +114,9 @@ function createContextMenu(jsterm, parentNode, {
selectedObjectActor: actor,
};
jsterm.requestEvaluation(evalString, options).then((res) => {
jsterm.focus();
jsterm.setInputValue(res.result);
hud.jsterm.requestEvaluation(evalString, options).then((res) => {
hud.jsterm.focus();
hud.jsterm.setInputValue(res.result);
});
},
}));
@ -149,7 +149,7 @@ function createContextMenu(jsterm, parentNode, {
click: () => {
if (actor) {
// The Debugger.Object of the OA will be bound to |_self| during evaluation,
jsterm.copyObject(`_self`, { selectedObjectActor: actor }).then((res) => {
hud.jsterm.copyObject(`_self`, { selectedObjectActor: actor }).then((res) => {
clipboardHelper.copyString(res.helperResult.value);
});
} else {

12
devtools/client/webconsole/webconsole.html
Просмотреть файл

@ -21,18 +21,6 @@
<body class="theme-sidebar" role="application">
<div id="app-wrapper" class="theme-body">
<div id="output-container" role="document" aria-live="polite"></div>
<div id="jsterm-wrapper">
<div id="webconsole-notificationbox"></div>
<div class="jsterm-input-container" style="direction:ltr">
<div class="jsterm-stack-node">
<textarea class="jsterm-complete-node devtools-monospace"
tabindex="-1"></textarea>
<textarea class="jsterm-input-node devtools-monospace"
rows="1" tabindex="0"
aria-autocomplete="list"></textarea>
</div>
</div>
</div>
</div>
</body>
</html>