Bug 1350226 - Support for loading Editor in Launchpad r?honza
MozReview-Commit-ID: AHkG0KBQUTA
new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/configs/local.json
@@ -0,0 +1,34 @@
+{
+ "title": "Netmonitor",
+ "environment": "development",
+ "baseWorkerURL": "http://localhost:8000/public/build/",
+ "host": "",
+ "theme": "dark",
+ "dir": "ltr",
+ "logging": {
+ "client": false,
+ "firefoxProxy": false,
+ "actions": false
+ },
+ "features": {},
+ "chrome": {
+ "debug": true,
+ "host": "localhost",
+ "port": 9222
+ },
+ "node": {
+ "debug": true,
+ "host": "localhost",
+ "port": 9229
+ },
+ "firefox": {
+ "webSocketConnection": false,
+ "proxyHost": "localhost:9000",
+ "webSocketHost": "localhost:6080",
+ "mcPath": "./firefox"
+ },
+ "development": {
+ "serverPort": 8000,
+ "examplesPort": 7999
+ }
+}
\ No newline at end of file
deleted file mode 100644
--- a/devtools/client/netmonitor/src/components/editor.js
+++ /dev/null
@@ -1,103 +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/. */
-
-"use strict";
-
-const {
- createClass,
- DOM,
- PropTypes,
-} = require("devtools/client/shared/vendor/react");
-const SourceEditor = require("devtools/client/sourceeditor/editor");
-
-const { div } = DOM;
-const SYNTAX_HIGHLIGHT_MAX_SIZE = 102400;
-
-/**
- * CodeMirror editor as a React component
- */
-const Editor = createClass({
- displayName: "Editor",
-
- propTypes: {
- // Source editor syntax hightligh mode, which is a mime type defined in CodeMirror
- mode: PropTypes.string,
- // Source editor is displayed if set to true
- open: PropTypes.bool,
- // Source editor content
- text: PropTypes.string,
- },
-
- getDefaultProps() {
- return {
- mode: null,
- open: true,
- text: "",
- };
- },
-
- componentDidMount() {
- const { mode, text } = this.props;
-
- this.editor = new SourceEditor({
- lineNumbers: true,
- mode: text.length < SYNTAX_HIGHLIGHT_MAX_SIZE ? mode : null,
- readOnly: true,
- value: text,
- });
-
- this.deferEditor = this.editor.appendTo(this.refs.editorElement);
- },
-
- componentDidUpdate(prevProps) {
- const { mode, open, text } = this.props;
-
- if (!open) {
- return;
- }
-
- if (prevProps.mode !== mode && text.length < SYNTAX_HIGHLIGHT_MAX_SIZE) {
- this.deferEditor.then(() => {
- this.editor.setMode(mode);
- });
- }
-
- if (prevProps.text !== text) {
- this.deferEditor.then(() => {
- // FIXME: Workaround for browser_net_accessibility test to
- // make sure editor node exists while setting editor text.
- // deferEditor workaround should be removed in bug 1308442
- if (this.refs.editorElement) {
- this.editor.setText(text);
- }
- });
- }
- },
-
- componentWillUnmount() {
- this.deferEditor.then(() => {
- this.editor.destroy();
- this.editor = null;
- });
- this.deferEditor = null;
- },
-
- render() {
- const { open } = this.props;
-
- return (
- div({ className: "editor-container devtools-monospace" },
- div({
- ref: "editorElement",
- className: "editor-mount devtools-monospace",
- // Using visibility instead of display property to avoid breaking
- // CodeMirror indentation
- style: { visibility: open ? "visible" : "hidden" },
- }),
- )
- );
- }
-});
-
-module.exports = Editor;
--- a/devtools/client/netmonitor/src/components/moz.build
+++ b/devtools/client/netmonitor/src/components/moz.build
@@ -1,30 +1,30 @@
# 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/.
DevToolsModules(
'app.js',
'cookies-panel.js',
'custom-request-panel.js',
- 'editor.js',
'headers-panel.js',
'mdn-link.js',
'monitor-panel.js',
'network-details-panel.js',
'params-panel.js',
'preview-panel.js',
'properties-view.js',
'request-list-content.js',
'request-list-empty-notice.js',
'request-list-header.js',
'request-list-item.js',
'request-list.js',
'response-panel.js',
'security-panel.js',
+ 'source-editor.js',
'stack-trace-panel.js',
'statistics-panel.js',
'status-bar.js',
'tabbox-panel.js',
'timings-panel.js',
'toolbar.js',
)
--- a/devtools/client/netmonitor/src/components/properties-view.js
+++ b/devtools/client/netmonitor/src/components/properties-view.js
@@ -17,17 +17,17 @@ const { REPS, MODE } = require("devtools
const Rep = createFactory(REPS.Rep);
const { FILTER_SEARCH_DELAY } = require("../constants");
// Components
const SearchBox = createFactory(require("devtools/client/shared/components/search-box"));
const TreeView = createFactory(require("devtools/client/shared/components/tree/tree-view"));
const TreeRow = createFactory(require("devtools/client/shared/components/tree/tree-row"));
-const Editor = createFactory(require("./editor"));
+const SourceEditor = createFactory(require("devtools/client/netmonitor/src/components/source-editor"));
const { div, tr, td } = DOM;
const AUTO_EXPAND_MAX_LEVEL = 7;
const AUTO_EXPAND_MAX_NODES = 50;
const EDITOR_CONFIG_ID = "EDITOR_CONFIG";
/*
* Properties View component
@@ -85,17 +85,17 @@ const PropertiesView = createClass({
renderRowWithEditor(props) {
const { level, name, value, path } = props.member;
// Display source editor when specifying to EDITOR_CONFIG_ID along with config
if (level === 1 && name === EDITOR_CONFIG_ID) {
return (
tr({ className: "editor-row-container" },
td({ colSpan: 2 },
- Editor(value)
+ SourceEditor(value)
)
)
);
}
// Skip for editor config
if (level >= 1 && path.includes(EDITOR_CONFIG_ID)) {
return null;
new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/source-editor.js
@@ -0,0 +1,103 @@
+/* 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/. */
+
+"use strict";
+
+const {
+ createClass,
+ DOM,
+ PropTypes,
+} = require("devtools/client/shared/vendor/react");
+const Editor = require("devtools/client/sourceeditor/editor");
+
+const { div } = DOM;
+const SYNTAX_HIGHLIGHT_MAX_SIZE = 102400;
+
+/**
+ * CodeMirror editor as a React component
+ */
+const SourceEditor = createClass({
+ displayName: "SourceEditor",
+
+ propTypes: {
+ // Source editor syntax hightligh mode, which is a mime type defined in CodeMirror
+ mode: PropTypes.string,
+ // Source editor is displayed if set to true
+ open: PropTypes.bool,
+ // Source editor content
+ text: PropTypes.string,
+ },
+
+ getDefaultProps() {
+ return {
+ mode: null,
+ open: true,
+ text: "",
+ };
+ },
+
+ componentDidMount() {
+ const { mode, text } = this.props;
+
+ this.editor = new Editor({
+ lineNumbers: true,
+ mode: text.length < SYNTAX_HIGHLIGHT_MAX_SIZE ? mode : null,
+ readOnly: true,
+ value: text,
+ });
+
+ this.deferEditor = this.editor.appendTo(this.refs.editorElement);
+ },
+
+ componentDidUpdate(prevProps) {
+ const { mode, open, text } = this.props;
+
+ if (!open) {
+ return;
+ }
+
+ if (prevProps.mode !== mode && text.length < SYNTAX_HIGHLIGHT_MAX_SIZE) {
+ this.deferEditor.then(() => {
+ this.editor.setMode(mode);
+ });
+ }
+
+ if (prevProps.text !== text) {
+ this.deferEditor.then(() => {
+ // FIXME: Workaround for browser_net_accessibility test to
+ // make sure editor node exists while setting editor text.
+ // deferEditor workaround should be removed in bug 1308442
+ if (this.refs.editorElement) {
+ this.editor.setText(text);
+ }
+ });
+ }
+ },
+
+ componentWillUnmount() {
+ this.deferEditor.then(() => {
+ this.editor.destroy();
+ this.editor = null;
+ });
+ this.deferEditor = null;
+ },
+
+ render() {
+ const { open } = this.props;
+
+ return (
+ div({ className: "editor-container devtools-monospace" },
+ div({
+ ref: "editorElement",
+ className: "editor-mount devtools-monospace",
+ // Using visibility instead of display property to avoid breaking
+ // CodeMirror indentation
+ style: { visibility: open ? "visible" : "hidden" },
+ }),
+ )
+ );
+ }
+});
+
+module.exports = SourceEditor;
--- a/devtools/client/netmonitor/webpack.config.js
+++ b/devtools/client/netmonitor/webpack.config.js
@@ -69,24 +69,24 @@ let webpackConfig = {
"devtools/client/shared/vendor/react-dom": "react-dom",
"devtools/client/shared/vendor/react-redux": "react-redux",
"devtools/client/shared/vendor/redux": "redux",
"devtools/client/shared/vendor/reselect": "reselect",
"devtools/client/shared/vendor/jszip": "jszip",
"devtools/client/shared/widgets/tooltip/HTMLTooltip": "devtools-modules",
"devtools/client/shared/widgets/tooltip/ImageTooltipHelper": "devtools-modules/client/shared/widgets/tooltip/ImageTooltipHelper",
"devtools/client/shared/widgets/Chart": "devtools-modules",
- "devtools/client/sourceeditor/editor": "devtools-modules",
"devtools/shared/fronts/timeline": "devtools-modules",
"devtools/shared/l10n": "devtools-modules/shared/l10n",
"devtools/shared/locales": path.join(__dirname, "../../shared/locales/en-US"),
"devtools/shared/platform/clipboard": "devtools-modules",
"devtools/shared/plural-form": "devtools-modules",
"toolkit/locales": path.join(__dirname, "../../../toolkit/locales/en-US"),
"Services": "devtools-modules/client/shared/shim/Services",
+ "devtools/client/netmonitor/src/components/source-editor": "devtools-modules/client/shared/components/source-editor/source-editor",
},
},
};
const mappings = [
[
/chrome:\/\/devtools\/skin/,
(result) => {