Bug 1074681 - When Loop "rooms" are enabled, hide the old call url generation UI. r=mikedeboer
authorMark Banner <standard8@mozilla.com>
Mon, 17 Nov 2014 14:18:46 +0000
changeset 216012 183a6ada079e81e523a9e0bf82cd39259015334f
parent 216011 d075a37f1c2aa711ff90d178810f805d7679ac1d
child 216013 395c82ee15f43aae8682e8a1d768817ee29f9f76
push id9996
push usermbanner@mozilla.com
push dateMon, 17 Nov 2014 14:21:03 +0000
treeherderfx-team@183a6ada079e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmikedeboer
bugs1074681
milestone36.0a1
Bug 1074681 - When Loop "rooms" are enabled, hide the old call url generation UI. r=mikedeboer
browser/components/loop/content/js/panel.js
browser/components/loop/content/js/panel.jsx
browser/components/loop/content/shared/css/panel.css
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
@@ -26,23 +26,29 @@ loop.panel = (function(_, mozL10n) {
     propTypes: {
       buttonsHidden: React.PropTypes.bool,
       // The selectedTab prop is used by the UI showcase.
       selectedTab: React.PropTypes.string
     },
 
     getDefaultProps: function() {
       return {
-        buttonsHidden: false,
-        selectedTab: "call"
+        buttonsHidden: false
       };
     },
 
     getInitialState: function() {
-      return {selectedTab: this.props.selectedTab};
+      // XXX Work around props.selectedTab being undefined initially.
+      // When we don't need to rely on the pref, this can move back to
+      // getDefaultProps (bug 1100258).
+      return {
+        selectedTab: this.props.selectedTab ||
+          (navigator.mozLoop.getLoopBoolPref("rooms.enabled") ?
+            "rooms" : "call")
+      };
     },
 
     handleSelectTab: function(event) {
       var tabName = event.target.dataset.tabName;
       this.setState({selectedTab: tabName});
     },
 
     render: function() {
@@ -673,41 +679,56 @@ loop.panel = (function(_, mozL10n) {
           detailsButtonLabel: serviceError.error.friendlyDetailsButtonLabel,
           detailsButtonCallback: serviceError.error.friendlyDetailsButtonCallback,
         });
       } else {
         this.props.notifications.remove(this.props.notifications.get("service-error"));
       }
     },
 
+    _roomsEnabled: function() {
+      return navigator.mozLoop.getLoopBoolPref("rooms.enabled");
+    },
+
     _onStatusChanged: function() {
       var profile = navigator.mozLoop.userProfile;
       var currUid = this.state.userProfile ? this.state.userProfile.uid : null;
       var newUid = profile ? profile.uid : null;
       if (currUid != newUid) {
         // On profile change (login, logout), switch back to the default tab.
-        this.selectTab("call");
+        this.selectTab(this._roomsEnabled() ? "rooms" : "call");
         this.setState({userProfile: profile});
       }
       this.updateServiceErrors();
     },
 
     /**
      * The rooms feature is hidden by default for now. Once it gets mainstream,
-     * this method can be safely removed.
+     * this method can be simplified.
      */
-    _renderRoomsTab: function() {
-      if (!navigator.mozLoop.getLoopBoolPref("rooms.enabled")) {
-        return null;
+    _renderRoomsOrCallTab: function() {
+      if (!this._roomsEnabled()) {
+        return (
+          Tab({name: "call"}, 
+            React.DOM.div({className: "content-area"}, 
+              CallUrlResult({client: this.props.client, 
+                             notifications: this.props.notifications, 
+                             callUrl: this.props.callUrl}), 
+              ToSView(null)
+            )
+          )
+        );
       }
+
       return (
         Tab({name: "rooms"}, 
           RoomList({dispatcher: this.props.dispatcher, 
                     store: this.props.roomStore, 
-                    userDisplayName: this._getUserDisplayName()})
+                    userDisplayName: this._getUserDisplayName()}), 
+          ToSView(null)
         )
       );
     },
 
     startForm: function(name, contact) {
       this.refs[name].initForm(contact);
       this.selectTab(name);
     },
@@ -730,31 +751,24 @@ loop.panel = (function(_, mozL10n) {
 
     _getUserDisplayName: function() {
       return this.state.userProfile && this.state.userProfile.email ||
              __("display_name_guest");
     },
 
     render: function() {
       var NotificationListView = sharedViews.NotificationListView;
+
       return (
         React.DOM.div(null, 
           NotificationListView({notifications: this.props.notifications, 
                                 clearOnDocumentHidden: true}), 
           TabView({ref: "tabView", selectedTab: this.props.selectedTab, 
             buttonsHidden: !this.state.userProfile && !this.props.showTabButtons}, 
-            Tab({name: "call"}, 
-              React.DOM.div({className: "content-area"}, 
-                CallUrlResult({client: this.props.client, 
-                               notifications: this.props.notifications, 
-                               callUrl: this.props.callUrl}), 
-                ToSView(null)
-              )
-            ), 
-            this._renderRoomsTab(), 
+            this._renderRoomsOrCallTab(), 
             Tab({name: "contacts"}, 
               ContactsList({selectTab: this.selectTab, 
                             startForm: this.startForm})
             ), 
             Tab({name: "contacts_add", hidden: true}, 
               ContactDetailsForm({ref: "contacts_add", mode: "add", 
                                   selectTab: this.selectTab})
             ), 
--- a/browser/components/loop/content/js/panel.jsx
+++ b/browser/components/loop/content/js/panel.jsx
@@ -26,23 +26,29 @@ loop.panel = (function(_, mozL10n) {
     propTypes: {
       buttonsHidden: React.PropTypes.bool,
       // The selectedTab prop is used by the UI showcase.
       selectedTab: React.PropTypes.string
     },
 
     getDefaultProps: function() {
       return {
-        buttonsHidden: false,
-        selectedTab: "call"
+        buttonsHidden: false
       };
     },
 
     getInitialState: function() {
-      return {selectedTab: this.props.selectedTab};
+      // XXX Work around props.selectedTab being undefined initially.
+      // When we don't need to rely on the pref, this can move back to
+      // getDefaultProps (bug 1100258).
+      return {
+        selectedTab: this.props.selectedTab ||
+          (navigator.mozLoop.getLoopBoolPref("rooms.enabled") ?
+            "rooms" : "call")
+      };
     },
 
     handleSelectTab: function(event) {
       var tabName = event.target.dataset.tabName;
       this.setState({selectedTab: tabName});
     },
 
     render: function() {
@@ -673,41 +679,56 @@ loop.panel = (function(_, mozL10n) {
           detailsButtonLabel: serviceError.error.friendlyDetailsButtonLabel,
           detailsButtonCallback: serviceError.error.friendlyDetailsButtonCallback,
         });
       } else {
         this.props.notifications.remove(this.props.notifications.get("service-error"));
       }
     },
 
+    _roomsEnabled: function() {
+      return navigator.mozLoop.getLoopBoolPref("rooms.enabled");
+    },
+
     _onStatusChanged: function() {
       var profile = navigator.mozLoop.userProfile;
       var currUid = this.state.userProfile ? this.state.userProfile.uid : null;
       var newUid = profile ? profile.uid : null;
       if (currUid != newUid) {
         // On profile change (login, logout), switch back to the default tab.
-        this.selectTab("call");
+        this.selectTab(this._roomsEnabled() ? "rooms" : "call");
         this.setState({userProfile: profile});
       }
       this.updateServiceErrors();
     },
 
     /**
      * The rooms feature is hidden by default for now. Once it gets mainstream,
-     * this method can be safely removed.
+     * this method can be simplified.
      */
-    _renderRoomsTab: function() {
-      if (!navigator.mozLoop.getLoopBoolPref("rooms.enabled")) {
-        return null;
+    _renderRoomsOrCallTab: function() {
+      if (!this._roomsEnabled()) {
+        return (
+          <Tab name="call">
+            <div className="content-area">
+              <CallUrlResult client={this.props.client}
+                             notifications={this.props.notifications}
+                             callUrl={this.props.callUrl} />
+              <ToSView />
+            </div>
+          </Tab>
+        );
       }
+
       return (
         <Tab name="rooms">
           <RoomList dispatcher={this.props.dispatcher}
                     store={this.props.roomStore}
                     userDisplayName={this._getUserDisplayName()}/>
+          <ToSView />
         </Tab>
       );
     },
 
     startForm: function(name, contact) {
       this.refs[name].initForm(contact);
       this.selectTab(name);
     },
@@ -730,31 +751,24 @@ loop.panel = (function(_, mozL10n) {
 
     _getUserDisplayName: function() {
       return this.state.userProfile && this.state.userProfile.email ||
              __("display_name_guest");
     },
 
     render: function() {
       var NotificationListView = sharedViews.NotificationListView;
+
       return (
         <div>
           <NotificationListView notifications={this.props.notifications}
                                 clearOnDocumentHidden={true} />
           <TabView ref="tabView" selectedTab={this.props.selectedTab}
             buttonsHidden={!this.state.userProfile && !this.props.showTabButtons}>
-            <Tab name="call">
-              <div className="content-area">
-                <CallUrlResult client={this.props.client}
-                               notifications={this.props.notifications}
-                               callUrl={this.props.callUrl} />
-                <ToSView />
-              </div>
-            </Tab>
-            {this._renderRoomsTab()}
+            {this._renderRoomsOrCallTab()}
             <Tab name="contacts">
               <ContactsList selectTab={this.selectTab}
                             startForm={this.startForm} />
             </Tab>
             <Tab name="contacts_add" hidden={true}>
               <ContactDetailsForm ref="contacts_add" mode="add"
                                   selectTab={this.selectTab} />
             </Tab>
--- a/browser/components/loop/content/shared/css/panel.css
+++ b/browser/components/loop/content/shared/css/panel.css
@@ -135,17 +135,16 @@ body {
 
 .content-area input:not(.pristine):invalid {
   border-color: #d74345;
   box-shadow: 0 0 4px #c43c3e;
 }
 
 /* Rooms */
 .rooms {
-  background: #f5f5f5;
   min-height: 100px;
 }
 
 .rooms > h1 {
   font-weight: bold;
   color: #999;
   padding: .5rem 1rem;
   border-bottom: 1px solid #ddd;
--- a/browser/components/loop/test/desktop-local/panel_test.js
+++ b/browser/components/loop/test/desktop-local/panel_test.js
@@ -179,17 +179,17 @@ describe("loop.panel", function() {
           navigator.mozLoop.getLoopBoolPref = function(pref) {
             if (pref === "rooms.enabled") {
               return true;
             }
           };
 
           view = createTestPanelView();
 
-          [callTab, roomsTab, contactsTab] =
+          [roomsTab, contactsTab] =
             TestUtils.scryRenderedDOMComponentsWithClass(view, "tab");
         });
 
         it("should select contacts tab when clicking tab button", function() {
           TestUtils.Simulate.click(
             view.getDOMNode().querySelector("li[data-tab-name=\"contacts\"]"));
 
           expect(contactsTab.getDOMNode().classList.contains("selected"))
@@ -198,24 +198,16 @@ describe("loop.panel", function() {
 
         it("should select rooms tab when clicking tab button", function() {
           TestUtils.Simulate.click(
             view.getDOMNode().querySelector("li[data-tab-name=\"rooms\"]"));
 
           expect(roomsTab.getDOMNode().classList.contains("selected"))
             .to.be.true;
         });
-
-        it("should select call tab when clicking tab button", function() {
-          TestUtils.Simulate.click(
-            view.getDOMNode().querySelector("li[data-tab-name=\"call\"]"));
-
-          expect(callTab.getDOMNode().classList.contains("selected"))
-            .to.be.true;
-        });
       });
 
       describe("loop.rooms.enabled off", function() {
         beforeEach(function() {
           navigator.mozLoop.getLoopBoolPref = function(pref) {
             if (pref === "rooms.enabled") {
               return false;
             }