Bug 1350226 - Support for loading Editor in Launchpad r?honza draft
authorRicky Chien <ricky060709@gmail.com>
Sat, 08 Apr 2017 18:33:07 +0800
changeset 558886 060b032a2aa199798947e5035d239a693f5db1aa
parent 558885 f4a263070d97416d96fe67dc6c47a3a443b1aa62
child 623291 da14731b489fdb4b695ef94d9508b8a5eab8cd78
push id52978
push userbmo:rchien@mozilla.com
push dateSat, 08 Apr 2017 10:33:58 +0000
reviewershonza
bugs1350226
milestone55.0a1
Bug 1350226 - Support for loading Editor in Launchpad r?honza MozReview-Commit-ID: AHkG0KBQUTA
devtools/client/netmonitor/configs/local.json
devtools/client/netmonitor/src/components/editor.js
devtools/client/netmonitor/src/components/moz.build
devtools/client/netmonitor/src/components/properties-view.js
devtools/client/netmonitor/src/components/source-editor.js
devtools/client/netmonitor/webpack.config.js
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) => {