Merge branch 'rpl-refactoring/select-connections'

chrome/content/connections-window.xul

@@ -0,0 +1,50 @@
+<?xml version="1.0"?>
+
+<?xml-stylesheet href="chrome://global/skin/global.css"?>
+<?xml-stylesheet href="chrome://global/skin/findBar.css" type="text/css"?>
+<?xml-stylesheet href="chrome://browser/skin/devtools/widgets.css" type="text/css"?>
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+  xmlns:html="http://www.w3.org/1999/xhtml"
+  id="rdpinspectorconnections"
+  windowtype="RDPInspectorConnectionList"
+  title="RDP Inspector - Connections"
+  width="300" height="480"
+  screenX="10" screenY="10"
+  persist="screenX screenY width height sizemode">
+
+  <!-- Firefox Files -->
+  <script xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" type="application/javascript;version=1.8"
+          src="chrome://browser/content/devtools/theme-switching.js"/>
+  <script type="application/x-javascript" src="chrome://global/content/globalOverlay.js"/>
+  <script type="application/x-javascript" src="chrome://global/content/findBar.js"/>
+
+  <!-- String Bundles -->
+  <stringbundle id="bundle_findBar" src="chrome://global/locale/findbar.properties"/>
+
+    <!-- Commands -->
+    <commandset id="mainCommandSet">
+      <command id="cmd_find" oncommand="gFindBar.onFindCommand();"/>
+      <command id="cmd_findAgain" oncommand="gFindBar.onFindAgainCmd();"/>
+      <command id="cmd_findPrevious" oncommand="gFindBar.onFindPreviousCmd();"/>
+    </commandset>
+
+    <keyset id="mainKeyset">
+      <key id="key_find" key="f" command="cmd_find" modifiers="accel"/>
+    </keyset>
+
+  <!-- Application Content -->
+  <vbox flex="1">
+
+    <!-- React UI Container -->
+    <browser id="contentFrame" type="content-primary" flex="1"
+      disablehistory="true" />
+
+    <!-- Search bar -->
+    <findbar id="FindToolbar" browserid="contentFrame"/>
+
+    <script type="application/x-javascript">
+    window.gFindBar = document.getElementById("FindToolbar");
+    </script>
+  </vbox>
+</window>

chrome/locale/en-US/connections.properties

@@ -0,0 +1,4 @@
+# LOCALIZATION NOTE (rdpConnections.tab.LocalTabs, rdpConnections.tab.WebIDE)
+# A label for "Connect To..." window tabs.
+rdpConnections.tab.LocalTabs=Local Tabs
+rdpConnections.tab.WebIDE=WebIDE

chrome/locale/en-US/toolbox.properties

@@ -48,8 +48,14 @@ rdpInspector.menu.packetCache.tip=Store packets in a cache before the console is
 rdpInspector.menu.showInlineDetails.label=Show Packet Details Inline
 rdpInspector.menu.showInlineDetails.tip=Show a detailed tree view of the Packet content.
 
-# LOCALIZATION NOTE (rdpInspector.menu.webideConnectionsMonitor.label,rdpInspector.menu.webideConnectionsMonitor.tip):
+# LOCALIZATION NOTE (rdpInspector.menu.autoOpenOnWebIDEConnection.label,rdpInspector.menu.autoOpenOnWebIDEConnection.tip):
 # RDP Inspector menu label. The menu is available in RDP Inspector start
 # button located in Firefox toolbar, inside the Options sub-menu.
-rdpInspector.menu.webideConnectionsMonitor.label=Monitor WebIDE connections
-rdpInspector.menu.webideConnectionsMonitor.tip=Monitor WebIDE connections and auto-open an RDP inspector window.
+rdpInspector.menu.autoOpenOnWebIDEConnection.label=Open automatically on new WebIDE connections
+rdpInspector.menu.autoOpenOnWebIDEConnection.tip=Open an RDP inspector window automatically on every new WebIDE connections.
+
+# LOCALIZATION NOTE (rdpInspector.menu.connectionList.label, rdpInspector.menu.connectionList.tip):
+# RDP Inspector menu label. The menu is available in RDP Inspector start
+# button located in Firefox toolbar.
+rdpInspector.menu.connectionList.label=Connect to...
+rdpInspector.menu.connectionList.tip=Open a dialog which lists all the RDP Connections available to the RDPInspector

data/connection-list/components/connection-list.js

@@ -0,0 +1,58 @@
+/* See license.txt for terms of usage */
+
+define(function(require, exports/*, module*/) {
+
+"use strict";
+
+// ReactJS
+const React = require("react");
+
+// React Bootstrap factories
+const {
+  ListGroup, ListGroupItem,
+  TabbedArea, TabPane
+} = require("shared/react-bootstrap-factories");
+
+const ConnectionsGroup = React.createClass({
+  displayName: "ConnectionsGroup",
+
+  render() {
+    let connections = this.props.connections.map((conn) => {
+      return ListGroupItem({
+        onClick: (evt) => {
+          this.props.onConnectionClick(conn, evt);
+        }
+      }, conn.name);
+    });
+
+    return ListGroup({ fill: true }, connections);
+  }
+});
+
+exports.ConnectionList = React.createClass({
+  displayName: "ConnectionList",
+
+  render() {
+    const connections = this.props.connections || {};
+
+    // turn the first level (connections group) into a ConnectionsGroups components
+    const connectionsGroups = Object.keys(connections).map((groupName, i) => {
+      return TabPane({
+        key: groupName,
+        tab: connections[groupName].label,
+        eventKey: i + 1,
+        style: { overflow: "auto"}
+      }, React.createElement(ConnectionsGroup, {
+        onConnectionClick: this.props.onConnectionClick,
+        connections: connections[groupName].connections
+      }));
+    });
+
+    return TabbedArea({
+      className: "mainTabbedArea",
+      defaultActiveKey: 1, animation: false
+    }, connectionsGroups);
+  }
+});
+
+});

data/connection-list/components/main-panel.js

@@ -0,0 +1,24 @@
+/* See license.txt for terms of usage */
+
+define(function(require, exports/*, module*/) {
+
+"use strict";
+
+// ReactJS
+const React = require("react");
+
+// Connections List components
+const { ConnectionList } = require("./connection-list");
+
+exports.MainPanel = React.createClass({
+  displayName: "MainPanel",
+
+  render() {
+    return React.createElement(ConnectionList, {
+      connections: this.props.connections,
+      onConnectionClick: this.props.onConnectionClick
+    });
+  }
+});
+
+});

data/connection-list/config.js

@@ -0,0 +1,21 @@
+/* See license.txt for terms of usage */
+
+/* globals requirejs */
+
+// RequireJS configuration
+require.config({
+  baseUrl: ".",
+  scriptType: "application/javascript;version=1.8",
+  paths: {
+    "shared": "../shared",
+    "jquery": "../lib/jquery/jquery",
+    "react": "../lib/react/react",
+    "bootstrap": "../lib/bootstrap/js/bootstrap",
+    "immutable": "../lib/immutable/immutable",
+    "react-bootstrap": "../lib/react-bootstrap/react-bootstrap",
+    "reps": "../../node_modules/firebug.sdk/lib/reps"
+  }
+});
+
+// Load the main panel module
+requirejs(["index"]);

data/connection-list/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Bootstrap default CSS -->
+    <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
+
+    <!-- Custom styles -->
+
+    <link href="../inspector/css/base.css" rel="stylesheet">
+    <link href="../inspector/css/toolbox.css" rel="stylesheet">
+    <link href="../inspector/css/toolbar.css" rel="stylesheet">
+    <link href="../inspector/css/search-box.css" rel="stylesheet">
+
+    <link href="chrome://rdpinspector-firebug.sdk/skin/domTree.css" rel="stylesheet">
+
+    <!-- Load RequireJS config file as the entry point module -->
+    <script data-main="config" src="../lib/requirejs/require.js"></script>
+  </head>
+  <body class="theme-firebug">
+    <div id="content"></div>
+  </body>
+</html>

data/connection-list/index.js

@@ -0,0 +1,36 @@
+/* See license.txt for terms of usage */
+
+define(function(require/*, exports, module*/) {
+
+"use strict";
+
+const { RDPConnectionList } = require("shared/rdp-inspector-window");
+var { Resizer } = require("shared/resizer");
+
+const { MainPanel } = require("./components/main-panel");
+
+// ReactJS
+var React = require("react");
+
+function render() {
+  let connections = RDPConnectionList.getConnectionsInfo();
+
+  return React.render(
+    React.createElement(MainPanel, {
+      connections,
+      onConnectionClick: (conn) => {
+        RDPConnectionList.openRDPInspectorWindow(conn);
+      }
+    }),
+    document.querySelector("#content")
+  );
+}
+
+let theApp = render();
+RDPConnectionList.onConnectionsUpdated.addListener(render);
+
+/* eslint-disable no-new */
+new Resizer(window, theApp);
+/* eslint-enable */
+
+});

data/inspector/components/actors-panel.js

@@ -14,7 +14,7 @@ const { Reps } = require("reps/repository");
 // RDP Inspector
 const { ActorsToolbar } = require("./actors-toolbar");
 
-const { Locale } = require("../rdp-inspector-window");
+const { Locale } = require("shared/rdp-inspector-window");
 
 // Shortcuts
 const { TR, TD, TABLE, TBODY, THEAD, TH, DIV, H4 } = Reps.DOM;

data/inspector/components/actors-toolbar.js

@@ -16,7 +16,7 @@ const { Reps } = require("reps/reps");
 const { SELECT, OPTION } = Reps.DOM;
 
 // RDP Window injected APIs
-const { Locale } = require("../rdp-inspector-window");
+const { Locale } = require("shared/rdp-inspector-window");
 
 /**
  * @template This object is responsible for rendering the toolbar

data/inspector/components/main-tabbed-area.js

@@ -19,7 +19,7 @@ const TabPane = React.createFactory(ReactBootstrap.TabPane);
 const Alert = React.createFactory(ReactBootstrap.Alert);
 
 // RDP Window injected APIs
-const { Locale } = require("../rdp-inspector-window");
+const { Locale } = require("shared/rdp-inspector-window");
 
 /**
  * @template This template is responsible for rendering the main

data/inspector/components/packet.js

@@ -18,7 +18,7 @@ const { TreeView } = require("reps/tree-view");
 const { DIV, SPAN, UL, LI, A } = Reps.DOM;
 
 // RDP Window injected APIs
-const { Locale, Str } = require("../rdp-inspector-window");
+const { Locale, Str } = require("shared/rdp-inspector-window");
 
 /**
  * @template This template is responsible for rendering a packet.

data/inspector/components/packets-limit.js

@@ -14,7 +14,7 @@ const { Reps } = require("reps/reps");
 const { DIV, SPAN } = Reps.DOM;
 
 // RDP Window injected APIs
-const { Locale } = require("../rdp-inspector-window");
+const { Locale } = require("shared/rdp-inspector-window");
 
 /**
  * @template This template is responsible for rendering a message

data/inspector/components/packets-summary.js

@@ -14,7 +14,7 @@ const { Reps } = require("reps/reps");
 const { TextWithTooltip } = require("./text-with-tooltip");
 
 // RDP Window injected APIs
-const { Locale, Str } = require("../rdp-inspector-window");
+const { Locale, Str } = require("shared/rdp-inspector-window");
 
 
 // Constants

data/inspector/components/packets-toolbar.js

@@ -20,7 +20,7 @@ const { Reps } = require("reps/reps");
 const { SPAN, INPUT } = Reps.DOM;
 
 // RDP Window injected APIs
-const { Locale } = require("../rdp-inspector-window");
+const { Locale } = require("shared/rdp-inspector-window");
 
 /**
  * @template This object represents a template for a toolbar displayed

data/inspector/components/stack-frame-rep.js

@@ -18,7 +18,7 @@ const { StackFrame } = require("../packets-store");
 const { SPAN } = Reps.DOM;
 
 // RDP Window injected APIs
-const { postChromeMessage } = require("../rdp-inspector-window");
+const { postChromeMessage } = require("shared/rdp-inspector-window");
 
 /**
  * This component is responsible for rendering a stack frame.

data/inspector/config.js

@@ -5,7 +5,9 @@
 // RequireJS configuration
 require.config({
   baseUrl: ".",
+  scriptType: "application/javascript;version=1.8",
   paths: {
+    "shared": "../shared",
     "jquery": "../lib/jquery/jquery",
     "react": "../lib/react/react",
     "bootstrap": "../lib/bootstrap/js/bootstrap",

data/inspector/main.js

@@ -11,14 +11,14 @@ var React = require("react");
 var { MainTabbedArea } = require("components/main-tabbed-area");
 var { PacketsStore } = require("packets-store");
 var { ActorsStore } = require("actors-store");
-var { Resizer } = require("resizer");
+var { Resizer } = require("shared/resizer");
 var { Search } = require("search");
 
 // Reps
 require("./components/stack-frame-rep");
 
 // RDP Window injected APIs
-var { Locale, postChromeMessage } = require("./rdp-inspector-window");
+var { Locale, postChromeMessage } = require("shared/rdp-inspector-window");
 
 var packetsStore;
 var theApp;

data/inspector/packets-store.js

@@ -5,7 +5,7 @@ define(function(require, exports/*, module*/) {
 "use strict";
 
 // RDP Window injected APIs
-const { Options } = require("./rdp-inspector-window");
+const { Options } = require("shared/rdp-inspector-window");
 
 // Constants
 const refreshTimeout = 200;

data/inspector/rdp-inspector-window.js → data/shared/rdp-inspector-window.js

@@ -35,14 +35,38 @@ if (["http:", "https:", "file:"].indexOf(window.location.protocol) >= 0) {
     exports.postChromeMessage = window.postChromeMessage = function() {
       console.log("POST CHROME MESSAGE", arguments);
     };
+
+    exports.RDPConnectionList = {
+      getConnectionsInfo: () => {},
+      onConnectionsUpdated: {
+        addListener: function() {},
+        removeListener: function() {}
+      },
+      openRDPInspectorWindow: () => {}
+    };
+
+    // inject domTree css with a relative url (chrom urls can't be
+    // loaded in a page not loaded from a resource or chrome urls)
+
+    const domTreeStylesheet = document.createElement("link");
+    domTreeStylesheet.setAttribute("href", "../../node_modules/firebug.sdk/skin/classic/shared/domTree.css");
+    domTreeStylesheet.setAttribute("rel", "stylesheet");
+
+    document.querySelector("head").appendChild(domTreeStylesheet);
 } else {
   /* globals Str, Locale, Options, Trace, postChromeMessage */
   exports.Str = Str;
   exports.Locale = Locale;
   exports.Options = Options;
   exports.Trace = Trace;
 
-  exports.postChromeMessage = postChromeMessage;
+  if ("postChromeMessage" in window) {
+    exports.postChromeMessage = window.postChromeMessage;
+  }
+
+  if ("RDPConnectionList" in window) {
+    exports.RDPConnectionList = window.RDPConnectionList;
+  }
 }
 
 });