Bug 1213851 - Display only active room when user enters room [r=Mardak]
authorDavid Critchley <david@priologic.com>
Wed, 28 Oct 2015 09:35:56 -0700
changeset 269954 80a9d5e49dc61ab479f988fbb6dfa3864a4ee0ab
parent 269953 22394f125cb5020732ca71617dfdfbecbaedfb03
child 269955 778030b1b88b7857d296eff8d63850c701c35139
push id29595
push userkwierso@gmail.com
push dateWed, 28 Oct 2015 23:41:46 +0000
treeherdermozilla-central@769f29c92bb2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMardak
bugs1213851
milestone44.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1213851 - Display only active room when user enters room [r=Mardak]
browser/components/loop/content/css/panel.css
browser/components/loop/content/js/panel.js
browser/components/loop/content/js/panel.jsx
browser/components/loop/test/desktop-local/panel_test.js
browser/locales/en-US/chrome/browser/loop/loop.properties
--- a/browser/components/loop/content/css/panel.css
+++ b/browser/components/loop/content/css/panel.css
@@ -249,25 +249,23 @@ body {
 .room-list > .room-entry > h2 {
   display: inline-block;
   font-size: 1.3rem;
   line-height: 2.4rem;
   color: #000;
   /* See .room-entry-context-item for the margin/size reductions.
     * An extra 40px to make space for the call button and chevron. */
   width: calc(100% - 1rem - 56px);
-
 }
 
-.room-list > .room-entry.room-active > h2 {
+.room-list > .room-entry.room-active:not(.room-opened) > h2 {
   font-weight: bold;
-  color: #000;
 }
 
-.room-list > .room-entry:hover {
+.room-list > .room-entry:not(.room-opened):hover {
   background: #dbf7ff;
 }
 
 .room-list > .room-entry > p {
   margin: 0;
   padding: .2rem 0;
 }
 
@@ -412,17 +410,17 @@ html[dir="rtl"] .room-entry-context-acti
 /* Keep ".room-list > .room-entry > h2" in sync with these. */
 .room-entry-context-item {
   display: inline-block;
   vertical-align: middle;
   -moz-margin-start: 1rem;
   height: 16px;
 }
 
-.room-entry:hover .room-entry-context-item {
+.room-entry:not(.room-opened):hover .room-entry-context-item {
   display: none;
 }
 
 .room-entry-context-item > a > img {
   height: 16px;
   width: 16px;
 }
 
--- a/browser/components/loop/content/js/panel.js
+++ b/browser/components/loop/content/js/panel.js
@@ -357,20 +357,24 @@ loop.panel = (function(_, mozL10n) {
           )
         )
       );
     }
   });
 
   /**
    * Room list entry.
+   *
+   * Active Room means there are participants in the room.
+   * Opened Room means the user is in the room.
    */
   var RoomEntry = React.createClass({displayName: "RoomEntry",
     propTypes: {
       dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired,
+      isOpenedRoom: React.PropTypes.bool.isRequired,
       mozLoop: React.PropTypes.object.isRequired,
       room: React.PropTypes.instanceOf(loop.store.Room).isRequired
     },
 
     mixins: [
       loop.shared.mixins.WindowCloseMixin,
       sharedMixins.DropdownMenuMixin()
     ],
@@ -413,43 +417,46 @@ loop.panel = (function(_, mozL10n) {
       if (this.state.showMenu) {
         this.toggleDropdownMenu();
       }
     },
 
     render: function() {
       var roomClasses = React.addons.classSet({
         "room-entry": true,
-        "room-active": this._isActive()
+        "room-active": this._isActive(),
+        "room-opened": this.props.isOpenedRoom
       });
 
       var roomTitle = this.props.room.decryptedContext.roomName ||
         this.props.room.decryptedContext.urls[0].description ||
         this.props.room.decryptedContext.urls[0].location;
 
       return (
         React.createElement("div", {className: roomClasses, 
-          onClick: this.handleClickEntry, 
-          onMouseLeave: this._handleMouseOut, 
+          onClick: this.props.isOpenedRoom ? null : this.handleClickEntry, 
+          onMouseLeave: this.props.isOpenedRoom ? null : this._handleMouseOut, 
           ref: "roomEntry"}, 
           React.createElement("h2", null, 
             roomTitle
           ), 
           React.createElement(RoomEntryContextItem, {
             mozLoop: this.props.mozLoop, 
             roomUrls: this.props.room.decryptedContext.urls}), 
-          React.createElement(RoomEntryContextButtons, {
-            dispatcher: this.props.dispatcher, 
-            eventPosY: this.state.eventPosY, 
-            handleClickEntry: this.handleClickEntry, 
-            handleContextChevronClick: this.handleContextChevronClick, 
-            ref: "contextActions", 
-            room: this.props.room, 
-            showMenu: this.state.showMenu, 
-            toggleDropdownMenu: this.toggleDropdownMenu})
+          this.props.isOpenedRoom ? null :
+            React.createElement(RoomEntryContextButtons, {
+              dispatcher: this.props.dispatcher, 
+              eventPosY: this.state.eventPosY, 
+              handleClickEntry: this.handleClickEntry, 
+              handleContextChevronClick: this.handleContextChevronClick, 
+              ref: "contextActions", 
+              room: this.props.room, 
+              showMenu: this.state.showMenu, 
+              toggleDropdownMenu: this.toggleDropdownMenu})
+          
         )
       );
     }
   });
 
   /**
    * Buttons corresponding to each conversation entry.
    * This component renders the video icon call button and chevron button for
@@ -714,22 +721,30 @@ loop.panel = (function(_, mozL10n) {
 
       if (!this.state.rooms.length) {
         return this._renderNoRoomsView();
       }
 
       return (
         React.createElement("div", {className: "rooms"}, 
           this._renderNewRoomButton(), 
-          React.createElement("h1", null, mozL10n.get("rooms_list_recent_conversations")), 
+          React.createElement("h1", null, mozL10n.get(this.state.openedRoom === null ?
+                "rooms_list_recently_browsed" :
+                "rooms_list_currently_browsing")), 
           React.createElement("div", {className: "room-list"}, 
             this.state.rooms.map(function(room, i) {
+              if (this.state.openedRoom !== null &&
+                room.roomToken !== this.state.openedRoom) {
+                return null;
+              }
+
               return (
                 React.createElement(RoomEntry, {
                   dispatcher: this.props.dispatcher, 
+                  isOpenedRoom: room.roomToken === this.state.openedRoom, 
                   key: room.roomToken, 
                   mozLoop: this.props.mozLoop, 
                   room: room})
               );
             }, this)
           )
         )
       );
@@ -922,18 +937,18 @@ loop.panel = (function(_, mozL10n) {
       }
 
       return (
         React.createElement("div", {className: "panel-content"}, 
           React.createElement(NotificationListView, {
             clearOnDocumentHidden: true, 
             notifications: this.props.notifications}), 
             React.createElement(RoomList, {dispatcher: this.props.dispatcher, 
-                      mozLoop: this.props.mozLoop, 
-                      store: this.props.roomStore}), 
+              mozLoop: this.props.mozLoop, 
+              store: this.props.roomStore}), 
           React.createElement("div", {className: "footer"}, 
             React.createElement("div", {className: "user-details"}, 
               React.createElement(AccountLink, {fxAEnabled: this.props.mozLoop.fxAEnabled, 
                            userProfile: this.state.userProfile})
             ), 
             React.createElement("div", {className: "signin-details"}, 
               React.createElement(SettingsDropdown, {mozLoop: this.props.mozLoop})
             )
--- a/browser/components/loop/content/js/panel.jsx
+++ b/browser/components/loop/content/js/panel.jsx
@@ -357,20 +357,24 @@ loop.panel = (function(_, mozL10n) {
           </a>
         </div>
       );
     }
   });
 
   /**
    * Room list entry.
+   *
+   * Active Room means there are participants in the room.
+   * Opened Room means the user is in the room.
    */
   var RoomEntry = React.createClass({
     propTypes: {
       dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired,
+      isOpenedRoom: React.PropTypes.bool.isRequired,
       mozLoop: React.PropTypes.object.isRequired,
       room: React.PropTypes.instanceOf(loop.store.Room).isRequired
     },
 
     mixins: [
       loop.shared.mixins.WindowCloseMixin,
       sharedMixins.DropdownMenuMixin()
     ],
@@ -413,43 +417,46 @@ loop.panel = (function(_, mozL10n) {
       if (this.state.showMenu) {
         this.toggleDropdownMenu();
       }
     },
 
     render: function() {
       var roomClasses = React.addons.classSet({
         "room-entry": true,
-        "room-active": this._isActive()
+        "room-active": this._isActive(),
+        "room-opened": this.props.isOpenedRoom
       });
 
       var roomTitle = this.props.room.decryptedContext.roomName ||
         this.props.room.decryptedContext.urls[0].description ||
         this.props.room.decryptedContext.urls[0].location;
 
       return (
         <div className={roomClasses}
-          onClick={this.handleClickEntry}
-          onMouseLeave={this._handleMouseOut}
+          onClick={this.props.isOpenedRoom ? null : this.handleClickEntry}
+          onMouseLeave={this.props.isOpenedRoom ? null : this._handleMouseOut}
           ref="roomEntry">
           <h2>
             {roomTitle}
           </h2>
           <RoomEntryContextItem
             mozLoop={this.props.mozLoop}
             roomUrls={this.props.room.decryptedContext.urls} />
-          <RoomEntryContextButtons
-            dispatcher={this.props.dispatcher}
-            eventPosY={this.state.eventPosY}
-            handleClickEntry={this.handleClickEntry}
-            handleContextChevronClick={this.handleContextChevronClick}
-            ref="contextActions"
-            room={this.props.room}
-            showMenu={this.state.showMenu}
-            toggleDropdownMenu={this.toggleDropdownMenu} />
+          {this.props.isOpenedRoom ? null :
+            <RoomEntryContextButtons
+              dispatcher={this.props.dispatcher}
+              eventPosY={this.state.eventPosY}
+              handleClickEntry={this.handleClickEntry}
+              handleContextChevronClick={this.handleContextChevronClick}
+              ref="contextActions"
+              room={this.props.room}
+              showMenu={this.state.showMenu}
+              toggleDropdownMenu={this.toggleDropdownMenu} />
+          }
         </div>
       );
     }
   });
 
   /**
    * Buttons corresponding to each conversation entry.
    * This component renders the video icon call button and chevron button for
@@ -714,22 +721,30 @@ loop.panel = (function(_, mozL10n) {
 
       if (!this.state.rooms.length) {
         return this._renderNoRoomsView();
       }
 
       return (
         <div className="rooms">
           {this._renderNewRoomButton()}
-          <h1>{mozL10n.get("rooms_list_recent_conversations")}</h1>
+          <h1>{mozL10n.get(this.state.openedRoom === null ?
+                "rooms_list_recently_browsed" :
+                "rooms_list_currently_browsing")}</h1>
           <div className="room-list">{
             this.state.rooms.map(function(room, i) {
+              if (this.state.openedRoom !== null &&
+                room.roomToken !== this.state.openedRoom) {
+                return null;
+              }
+
               return (
                 <RoomEntry
                   dispatcher={this.props.dispatcher}
+                  isOpenedRoom={room.roomToken === this.state.openedRoom}
                   key={room.roomToken}
                   mozLoop={this.props.mozLoop}
                   room={room} />
               );
             }, this)
           }</div>
         </div>
       );
@@ -922,18 +937,18 @@ loop.panel = (function(_, mozL10n) {
       }
 
       return (
         <div className="panel-content">
           <NotificationListView
             clearOnDocumentHidden={true}
             notifications={this.props.notifications} />
             <RoomList dispatcher={this.props.dispatcher}
-                      mozLoop={this.props.mozLoop}
-                      store={this.props.roomStore} />
+              mozLoop={this.props.mozLoop}
+              store={this.props.roomStore} />
           <div className="footer">
             <div className="user-details">
               <AccountLink fxAEnabled={this.props.mozLoop.fxAEnabled}
                            userProfile={this.state.userProfile}/>
             </div>
             <div className="signin-details">
               <SettingsDropdown mozLoop={this.props.mozLoop}/>
             </div>
--- a/browser/components/loop/test/desktop-local/panel_test.js
+++ b/browser/components/loop/test/desktop-local/panel_test.js
@@ -8,16 +8,17 @@ describe("loop.panel", function() {
   var expect = chai.expect;
   var TestUtils = React.addons.TestUtils;
   var sharedActions = loop.shared.actions;
   var sharedUtils = loop.shared.utils;
 
   var sandbox, notifications;
   var fakeXHR, fakeWindow, fakeMozLoop, fakeEvent;
   var requests = [];
+  var roomData, roomData2, roomList, roomName;
   var mozL10nGetSpy;
 
   beforeEach(function() {
     sandbox = sinon.sandbox.create();
     fakeXHR = sandbox.useFakeXMLHttpRequest();
     requests = [];
     // https://github.com/cjohansen/Sinon.JS/issues/393
     fakeXHR.xhr.onCreate = function(xhr) {
@@ -68,16 +69,55 @@ describe("loop.panel", function() {
       logInToFxA: sandbox.stub(),
       logOutFromFxA: sandbox.stub(),
       notifyUITour: sandbox.stub(),
       openURL: sandbox.stub(),
       getSelectedTabMetadata: sandbox.stub(),
       userProfile: null
     };
 
+    roomName = "First Room Name";
+    roomData = {
+      roomToken: "QzBbvGmIZWU",
+      roomUrl: "http://sample/QzBbvGmIZWU",
+      decryptedContext: {
+        roomName: roomName
+      },
+      maxSize: 2,
+        participants: [{
+        displayName: "Alexis",
+          account: "alexis@example.com",
+          roomConnectionId: "2a1787a6-4a73-43b5-ae3e-906ec1e763cb"
+      }, {
+        displayName: "Adam",
+        roomConnectionId: "781f012b-f1ea-4ce1-9105-7cfc36fb4ec7"
+    }],
+      ctime: 1405517418
+    };
+
+    roomData2 = {
+      roomToken: "QzBbvlmIZWU",
+      roomUrl: "http://sample/QzBbvlmIZWU",
+      decryptedContext: {
+        roomName: "Second Room Name"
+      },
+      maxSize: 2,
+        participants: [{
+        displayName: "Bill",
+          account: "bill@example.com",
+          roomConnectionId: "2a1737a6-4a73-43b5-ae3e-906ec1e763cb"
+      }, {
+          displayName: "Bob",
+            roomConnectionId: "781f212b-f1ea-4ce1-9105-7cfc36fb4ec7"
+        }],
+      ctime: 1405517417
+    };
+
+    roomList = [new loop.store.Room(roomData), new loop.store.Room(roomData2)];
+
     document.mozL10n.initialize(navigator.mozLoop);
     sandbox.stub(document.mozL10n, "get").returns("Fake title");
   });
 
   afterEach(function() {
     delete navigator.mozLoop;
     loop.shared.mixins.setRootObject(window);
     sandbox.restore();
@@ -533,35 +573,20 @@ describe("loop.panel", function() {
         } catch (ex) {
           // Do nothing
         }
       });
     });
   });
 
   describe("loop.panel.RoomEntry", function() {
-    var dispatcher, roomData;
+    var dispatcher;
 
     beforeEach(function() {
       dispatcher = new loop.Dispatcher();
-      roomData = {
-        roomToken: "QzBbvGmIZWU",
-        roomUrl: "http://sample/QzBbvGmIZWU",
-        decryptedContext: {
-          roomName: "Second Room Name"
-        },
-        maxSize: 2,
-        participants: [
-          { displayName: "Alexis", account: "alexis@example.com",
-            roomConnectionId: "2a1787a6-4a73-43b5-ae3e-906ec1e763cb" },
-          { displayName: "Adam",
-            roomConnectionId: "781f012b-f1ea-4ce1-9105-7cfc36fb4ec7" }
-        ],
-        ctime: 1405517418
-      };
     });
 
     function mountRoomEntry(props) {
       props = _.extend({
         dispatcher: dispatcher,
         mozLoop: fakeMozLoop
       }, props);
       return TestUtils.renderIntoDocument(
@@ -571,17 +596,20 @@ describe("loop.panel", function() {
     describe("handleContextChevronClick", function() {
       var view;
 
       beforeEach(function() {
         // Stub to prevent warnings due to stores not being set up to handle
         // the actions we are triggering.
         sandbox.stub(dispatcher, "dispatch");
 
-        view = mountRoomEntry({ room: new loop.store.Room(roomData) });
+        view = mountRoomEntry({
+          isOpenedRoom: false,
+          room: new loop.store.Room(roomData)
+        });
       });
 
       // XXX Current version of React cannot use TestUtils.Simulate, please
       // enable when we upgrade.
       it.skip("should close the menu when you move out the cursor", function() {
         expect(view.refs.contextActions.state.showMenu).to.eql(false);
       });
 
@@ -613,16 +641,17 @@ describe("loop.panel", function() {
 
       beforeEach(function() {
         // Stub to prevent warnings where no stores are set up to handle the
         // actions we are testing.
         sandbox.stub(dispatcher, "dispatch");
 
         roomEntry = mountRoomEntry({
           deleteRoom: sandbox.stub(),
+          isOpenedRoom: false,
           room: new loop.store.Room(roomData)
         });
       });
 
       it("should render context actions button", function() {
         expect(roomEntry.refs.contextActions).to.not.eql(null);
       });
 
@@ -643,24 +672,37 @@ describe("loop.panel", function() {
             new sharedActions.OpenRoom({ roomToken: roomData.roomToken }));
         });
 
         it("should call window.close", function() {
           roomEntry.handleClickEntry(fakeEvent);
 
           sinon.assert.calledOnce(fakeWindow.close);
         });
+
+        it("should not dispatch an OpenRoom action when button is clicked if room is already opened", function() {
+          roomEntry = mountRoomEntry({
+            deleteRoom: sandbox.stub(),
+            isOpenedRoom: true,
+            room: new loop.store.Room(roomData)
+          });
+
+          TestUtils.Simulate.click(roomEntry.refs.roomEntry.getDOMNode());
+
+          sinon.assert.notCalled(dispatcher.dispatch);
+        });
       });
     });
 
     describe("Context Indicator", function() {
       var roomEntry;
 
       function mountEntryForContext() {
         return mountRoomEntry({
+          isOpenedRoom: false,
           room: new loop.store.Room(roomData)
         });
       }
 
       it("should not display a context indicator if the room doesn't have any", function() {
         roomEntry = mountEntryForContext();
 
         expect(roomEntry.getDOMNode().querySelector(".room-entry-context-item")).eql(null);
@@ -711,27 +753,29 @@ describe("loop.panel", function() {
     describe("Room Entry click", function() {
       var roomEntry, roomEntryNode;
 
       beforeEach(function() {
         sandbox.stub(dispatcher, "dispatch");
 
         roomEntry = mountRoomEntry({
           dispatcher: dispatcher,
+          isOpenedRoom: false,
           room: new loop.store.Room(roomData)
         });
         roomEntryNode = roomEntry.getDOMNode();
       });
 
     });
 
     describe("Room name updated", function() {
       it("should update room name", function() {
         var roomEntry = mountRoomEntry({
           dispatcher: dispatcher,
+          isOpenedRoom: false,
           room: new loop.store.Room(roomData)
         });
         var updatedRoom = new loop.store.Room(_.extend({}, roomData, {
           decryptedContext: {
             roomName: "New room name"
           },
           ctime: new Date().getTime()
         }));
@@ -803,50 +847,33 @@ describe("loop.panel", function() {
         roomEntry.setProps({ room: updatedRoom });
 
         expect(roomEntry.getDOMNode().textContent).eql("https://fakeurl.com");
       });
     });
   });
 
   describe("loop.panel.RoomList", function() {
-    var roomStore, dispatcher, fakeEmail, dispatch, roomData;
+    var roomStore, dispatcher, fakeEmail, dispatch;
 
     beforeEach(function() {
       fakeEmail = "fakeEmail@example.com";
       dispatcher = new loop.Dispatcher();
       roomStore = new loop.store.RoomStore(dispatcher, {
         mozLoop: navigator.mozLoop
       });
       roomStore.setStoreState({
+        openedRoom: null,
         pendingCreation: false,
         pendingInitialRetrieval: false,
         rooms: [],
         error: undefined
       });
 
       dispatch = sandbox.stub(dispatcher, "dispatch");
-
-      roomData = {
-        roomToken: "QzBbvGmIZWU",
-        roomUrl: "http://sample/QzBbvGmIZWU",
-        decryptedContext: {
-          roomName: "Second Room Name"
-        },
-        maxSize: 2,
-        participants: [{
-          displayName: "Alexis",
-          account: "alexis@example.com",
-          roomConnectionId: "2a1787a6-4a73-43b5-ae3e-906ec1e763cb"
-        }, {
-          displayName: "Adam",
-          roomConnectionId: "781f012b-f1ea-4ce1-9105-7cfc36fb4ec7"
-        }],
-        ctime: 1405517418
-      };
     });
 
     function createTestComponent() {
       return TestUtils.renderIntoDocument(
         React.createElement(loop.panel.RoomList, {
           store: roomStore,
           dispatcher: dispatcher,
           userDisplayName: fakeEmail,
@@ -891,16 +918,37 @@ describe("loop.panel", function() {
     });
 
     it("should display a loading animation when rooms are pending", function() {
       var view = createTestComponent();
       roomStore.setStoreState({ pendingInitialRetrieval: true });
 
       expect(view.getDOMNode().querySelectorAll(".room-list-loading").length).to.eql(1);
     });
+
+    it("should show multiple rooms in list with no opened room", function() {
+      roomStore.setStoreState({ rooms: roomList });
+
+      var view = createTestComponent();
+
+      var node = view.getDOMNode();
+      expect(node.querySelectorAll(".room-opened").length).to.eql(0);
+      expect(node.querySelectorAll(".room-entry").length).to.eql(2);
+    });
+
+    it("should only show the opened room you're in when you're in a room", function() {
+      roomStore.setStoreState({ rooms: roomList, openedRoom: roomList[0].roomToken });
+
+      var view = createTestComponent();
+
+      var node = view.getDOMNode();
+      expect(node.querySelectorAll(".room-opened").length).to.eql(1);
+      expect(node.querySelectorAll(".room-entry").length).to.eql(1);
+      expect(node.querySelectorAll(".room-opened h2")[0].textContent).to.equal(roomName);
+    });
   });
 
   describe("loop.panel.NewRoomView", function() {
     var roomStore, dispatcher, fakeEmail, dispatch;
 
     beforeEach(function() {
       fakeEmail = "fakeEmail@example.com";
       dispatcher = new loop.Dispatcher();
@@ -1069,51 +1117,33 @@ describe("loop.panel", function() {
        function() {
          TestUtils.Simulate.click(view.refs.deleteButton.getDOMNode());
 
          sinon.assert.calledOnce(view.props.handleDeleteButtonClick);
        });
   });
 
   describe("RoomEntryContextButtons", function() {
-    var view, dispatcher, roomData;
+    var view, dispatcher;
 
     function createTestComponent(extraProps) {
       var props = _.extend({
         dispatcher: dispatcher,
         eventPosY: 0,
         handleClickEntry: sandbox.stub(),
         showMenu: false,
         room: roomData,
         toggleDropdownMenu: sandbox.stub(),
         handleContextChevronClick: sandbox.stub()
       }, extraProps);
       return TestUtils.renderIntoDocument(
         React.createElement(loop.panel.RoomEntryContextButtons, props));
     }
 
     beforeEach(function() {
-      roomData = {
-        roomToken: "QzBbvGmIZWU",
-        roomUrl: "http://sample/QzBbvGmIZWU",
-        decryptedContext: {
-          roomName: "Second Room Name"
-        },
-        maxSize: 2,
-        participants: [{
-          displayName: "Alexis",
-          account: "alexis@example.com",
-          roomConnectionId: "2a1787a6-4a73-43b5-ae3e-906ec1e763cb"
-        }, {
-          displayName: "Adam",
-          roomConnectionId: "781f012b-f1ea-4ce1-9105-7cfc36fb4ec7"
-        }],
-        ctime: 1405517418
-      };
-
       dispatcher = new loop.Dispatcher();
       sandbox.stub(dispatcher, "dispatch");
 
       view = createTestComponent();
     });
 
     it("should render ConversationDropdown if state.showMenu=true", function() {
       view = createTestComponent({ showMenu: true });
--- a/browser/locales/en-US/chrome/browser/loop/loop.properties
+++ b/browser/locales/en-US/chrome/browser/loop/loop.properties
@@ -178,19 +178,22 @@ feedback_request_button=Leave Feedback
 
 help_label=Help
 tour_label=Tour
 
 ## LOCALIZATION NOTE(rooms_default_room_name_template): {{conversationLabel}}
 ## will be replaced by a number. For example "Conversation 1" or "Conversation 12".
 rooms_default_room_name_template=Conversation {{conversationLabel}}
 rooms_leave_button_label=Leave
-## LOCALIZATION NOTE (rooms_list_recent_conversations): String is in all caps
+## LOCALIZATION NOTE (rooms_list_recently_browsed): String is in all caps
 ## for emphasis reasons, it is a heading. Proceed as appropriate for locale.
-rooms_list_recent_conversations=RECENT CONVERSATIONS
+rooms_list_recently_browsed=RECENTLY BROWSED
+## LOCALIZATION NOTE (rooms_list_currently_browsing): String is in all caps
+## for emphasis reasons, it is a heading. Proceed as appropriate for locale.
+rooms_list_currently_browsing=CURRENTLY BROWSING
 rooms_change_failed_label=Conversation cannot be updated
 rooms_panel_title=Choose a conversation or start a new one
 rooms_room_full_label=There are already two people in this conversation.
 rooms_room_full_call_to_action_nonFx_label=Download {{brandShortname}} to start your own
 rooms_room_full_call_to_action_label=Learn more about {{clientShortname}} ยป
 rooms_room_joined_label=Someone has joined the conversation!
 rooms_room_join_label=Join the conversation
 rooms_signout_alert=Open conversations will be closed