Bug 1068580 Remove the backbone router from the Loop panel. r=nperriault
authorMark Banner <standard8@mozilla.com>
Wed, 17 Sep 2014 19:23:30 +0100
changeset 225368 d4400ded3075e4908f846a85a060456ba914f64d
parent 225367 c8808a96401f09577adad4c0460c1ad91ad24a25
child 225369 1c47b01eea8532dc2ec624a23b5d1bb209917509
push id3979
push userraliiev@mozilla.com
push dateMon, 13 Oct 2014 16:35:44 +0000
treeherdermozilla-beta@30f2cc610691 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnperriault
bugs1068580
milestone34.0a2
Bug 1068580 Remove the backbone router from the Loop panel. r=nperriault
browser/components/loop/content/js/panel.js
browser/components/loop/content/js/panel.jsx
browser/components/loop/content/panel.html
browser/components/loop/test/desktop-local/panel_test.js
--- a/browser/components/loop/content/js/panel.js
+++ b/browser/components/loop/content/js/panel.js
@@ -448,17 +448,17 @@ loop.panel = (function(_, mozL10n) {
   });
 
   /**
    * FxA user identity (guest/authenticated) component.
    */
   var UserIdentity = React.createClass({displayName: 'UserIdentity',
     render: function() {
       return (
-        React.DOM.p({className: "user-identity"},
+        React.DOM.p({className: "user-identity"}, 
           this.props.displayName
         )
       );
     }
   });
 
   /**
    * Panel view.
@@ -505,87 +505,59 @@ loop.panel = (function(_, mozL10n) {
                              callUrl: this.props.callUrl}), 
               ToSView(null)
             ), 
             Tab({name: "contacts"}, 
               React.DOM.span(null, "contacts")
             )
           ), 
           React.DOM.div({className: "footer"}, 
-            React.DOM.div({className: "user-details"},
-              UserIdentity({displayName: displayName}),
+            React.DOM.div({className: "user-details"}, 
+              UserIdentity({displayName: displayName}), 
               AvailabilityDropdown(null)
-            ),
+            ), 
             AuthLink(null), 
             SettingsDropdown(null)
           )
         )
       );
     }
   });
 
-  var PanelRouter = loop.desktopRouter.DesktopRouter.extend({
-    /**
-     * DOM document object.
-     * @type {HTMLDocument}
-     */
-    document: undefined,
-
-    routes: {
-      "": "home"
-    },
-
-    initialize: function(options) {
-      options = options || {};
-      if (!options.document) {
-        throw new Error("missing required document");
-      }
-    },
-
-    /**
-     * Default entry point.
-     */
-    home: function() {
-      this._notifications.reset();
-      var client = new loop.Client({
-        baseServerUrl: navigator.mozLoop.serverUrl
-      });
-      this.loadReactComponent(
-          PanelView({client: client, notifications: this._notifications}));
-    }
-  });
-
   /**
    * Panel initialisation.
    */
   function init() {
     // Do the initial L10n setup, we do this before anything
     // else to ensure the L10n environment is setup correctly.
     mozL10n.initialize(navigator.mozLoop);
 
-    router = new PanelRouter({
-      document: document,
-      notifications: new sharedModels.NotificationCollection()
+    var client = new loop.Client({
+      baseServerUrl: navigator.mozLoop.serverUrl
     });
-    Backbone.history.start();
+    var notifications = new sharedModels.NotificationCollection()
+
+    React.renderComponent(PanelView({
+      client: client, 
+      notifications: notifications}
+    ), document.querySelector("#main"));
 
     document.body.classList.add(loop.shared.utils.getTargetPlatform());
     document.body.setAttribute("dir", mozL10n.getDirection());
 
     // Notify the window that we've finished initalization and initial layout
     var evtObject = document.createEvent('Event');
     evtObject.initEvent('loopPanelInitialized', true, false);
     window.dispatchEvent(evtObject);
   }
 
   return {
     init: init,
     UserIdentity: UserIdentity,
     AvailabilityDropdown: AvailabilityDropdown,
     CallUrlResult: CallUrlResult,
     PanelView: PanelView,
-    PanelRouter: PanelRouter,
     SettingsDropdown: SettingsDropdown,
     ToSView: ToSView
   };
 })(_, document.mozL10n);
 
 document.addEventListener('DOMContentLoaded', loop.panel.init);
--- a/browser/components/loop/content/js/panel.jsx
+++ b/browser/components/loop/content/js/panel.jsx
@@ -517,75 +517,47 @@ loop.panel = (function(_, mozL10n) {
             <AuthLink />
             <SettingsDropdown />
           </div>
         </div>
       );
     }
   });
 
-  var PanelRouter = loop.desktopRouter.DesktopRouter.extend({
-    /**
-     * DOM document object.
-     * @type {HTMLDocument}
-     */
-    document: undefined,
-
-    routes: {
-      "": "home"
-    },
-
-    initialize: function(options) {
-      options = options || {};
-      if (!options.document) {
-        throw new Error("missing required document");
-      }
-    },
-
-    /**
-     * Default entry point.
-     */
-    home: function() {
-      this._notifications.reset();
-      var client = new loop.Client({
-        baseServerUrl: navigator.mozLoop.serverUrl
-      });
-      this.loadReactComponent(
-          <PanelView client={client} notifications={this._notifications}/>);
-    }
-  });
-
   /**
    * Panel initialisation.
    */
   function init() {
     // Do the initial L10n setup, we do this before anything
     // else to ensure the L10n environment is setup correctly.
     mozL10n.initialize(navigator.mozLoop);
 
-    router = new PanelRouter({
-      document: document,
-      notifications: new sharedModels.NotificationCollection()
+    var client = new loop.Client({
+      baseServerUrl: navigator.mozLoop.serverUrl
     });
-    Backbone.history.start();
+    var notifications = new sharedModels.NotificationCollection()
+
+    React.renderComponent(<PanelView
+      client={client}
+      notifications={notifications}
+    />, document.querySelector("#main"));
 
     document.body.classList.add(loop.shared.utils.getTargetPlatform());
     document.body.setAttribute("dir", mozL10n.getDirection());
 
     // Notify the window that we've finished initalization and initial layout
     var evtObject = document.createEvent('Event');
     evtObject.initEvent('loopPanelInitialized', true, false);
     window.dispatchEvent(evtObject);
   }
 
   return {
     init: init,
     UserIdentity: UserIdentity,
     AvailabilityDropdown: AvailabilityDropdown,
     CallUrlResult: CallUrlResult,
     PanelView: PanelView,
-    PanelRouter: PanelRouter,
     SettingsDropdown: SettingsDropdown,
     ToSView: ToSView
   };
 })(_, document.mozL10n);
 
 document.addEventListener('DOMContentLoaded', loop.panel.init);
--- a/browser/components/loop/content/panel.html
+++ b/browser/components/loop/content/panel.html
@@ -17,16 +17,14 @@
     <script type="text/javascript" src="loop/shared/libs/react-0.11.1.js"></script>
     <script type="text/javascript" src="loop/libs/l10n.js"></script>
     <script type="text/javascript" src="loop/shared/libs/jquery-2.1.0.js"></script>
     <script type="text/javascript" src="loop/shared/libs/lodash-2.4.1.js"></script>
     <script type="text/javascript" src="loop/shared/libs/backbone-1.1.2.js"></script>
 
     <script type="text/javascript" src="loop/shared/js/utils.js"></script>
     <script type="text/javascript" src="loop/shared/js/models.js"></script>
-    <script type="text/javascript" src="loop/shared/js/router.js"></script>
     <script type="text/javascript" src="loop/shared/js/mixins.js"></script>
     <script type="text/javascript" src="loop/shared/js/views.js"></script>
     <script type="text/javascript" src="loop/js/client.js"></script>
-    <script type="text/javascript" src="loop/js/desktopRouter.js"></script>
     <script type="text/javascript" src="loop/js/panel.js"></script>
  </body>
 </html>
--- a/browser/components/loop/test/desktop-local/panel_test.js
+++ b/browser/components/loop/test/desktop-local/panel_test.js
@@ -50,65 +50,52 @@ describe("loop.panel", function() {
     document.mozL10n.initialize(navigator.mozLoop);
   });
 
   afterEach(function() {
     delete navigator.mozLoop;
     sandbox.restore();
   });
 
-  describe("loop.panel.PanelRouter", function() {
-    describe("#constructor", function() {
-      it("should require a notifications collection", function() {
-        expect(function() {
-          new loop.panel.PanelRouter();
-        }).to.Throw(Error, /missing required notifications/);
-      });
+  describe("#init", function() {
+    beforeEach(function() {
+      sandbox.stub(React, "renderComponent");
+      sandbox.stub(document.mozL10n, "initialize");
+      sandbox.stub(document.mozL10n, "get").returns("Fake title");
+    });
 
-      it("should require a document", function() {
-        expect(function() {
-          new loop.panel.PanelRouter({notifications: notifications});
-        }).to.Throw(Error, /missing required document/);
-      });
+    it("should initalize L10n", function() {
+      loop.panel.init();
+
+      sinon.assert.calledOnce(document.mozL10n.initialize);
+      sinon.assert.calledWithExactly(document.mozL10n.initialize,
+        navigator.mozLoop);
     });
 
-    describe("constructed", function() {
-      var router;
+    it("should render the panel view", function() {
+      loop.panel.init();
 
-      beforeEach(function() {
-        router = createTestRouter({
-          hidden: true,
-          addEventListener: sandbox.spy()
-        });
-
-        sandbox.stub(router, "loadReactComponent");
-      });
-
-      describe("#home", function() {
-        beforeEach(function() {
-          sandbox.stub(notifications, "reset");
-        });
+      sinon.assert.calledOnce(React.renderComponent);
+      sinon.assert.calledWith(React.renderComponent,
+        sinon.match(function(value) {
+          return TestUtils.isDescriptorOfType(value,
+            loop.panel.PanelView);
+      }));
+    });
 
-        it("should clear all pending notifications", function() {
-          router.home();
-
-          sinon.assert.calledOnce(notifications.reset);
-        });
-
-        it("should load the home view", function() {
-          router.home();
+    it("should dispatch an loopPanelInitialized", function(done) {
+      function listener() {
+        done();
+      }
 
-          sinon.assert.calledOnce(router.loadReactComponent);
-          sinon.assert.calledWithExactly(router.loadReactComponent,
-            sinon.match(function(value) {
-              return React.addons.TestUtils.isDescriptorOfType(
-                value, loop.panel.PanelView);
-            }));
-        });
-      });
+      window.addEventListener("loopPanelInitialized", listener);
+
+      loop.panel.init();
+
+      window.removeEventListener("loopPanelInitialized", listener);
     });
   });
 
   describe("loop.panel.AvailabilityDropdown", function() {
     var view;
 
     beforeEach(function() {
       view = TestUtils.renderIntoDocument(loop.panel.AvailabilityDropdown());