Bug 1198421 - 'Welcome to ...' needs a bottom border on the Loop standalone UI. r=mikedeboer,ui-review=sevaan

browser/components/loop/content/shared/css/conversation.css

@@ -897,6 +897,10 @@ body[platform="win"] .share-service-dropdown.overflow > .dropdown-menu-item {
   background-color: #dbf7ff;
 }
 
+.showing-room-name > .text-chat-entries > .text-chat-scroller > .context-url-view-wrapper {
+  padding-top: 0;
+}
+
 .room-context {
   background: rgba(0,0,0,.8);
   border-top: 2px solid #444;
@@ -1638,7 +1642,6 @@ html[dir="rtl"] .text-chat-entry.received .text-chat-arrow {
   /* 18px for indent of .text-chat-arrow, 1px for border of .text-chat-entry > p,
    0.5rem for padding of .text-chat-entry > p */
   padding: calc(18px - 1px - 0.5rem);
-  padding-bottom: 0px;
 }
 
 .text-chat-entry.special > p {

browser/components/loop/content/shared/js/textChatView.js

@@ -378,9 +378,13 @@ loop.shared.views.chat = (function(mozL10n) {
 
     render: function() {
       var messageList;
+      var showingRoomName = false;
 
       if (this.props.showRoomName) {
         messageList = this.state.messageList;
+        showingRoomName = this.state.messageList.some(function(item) {
+          return item.contentType === CHAT_CONTENT_TYPES.ROOM_NAME;
+        });
       } else {
         messageList = this.state.messageList.filter(function(item) {
           return item.type !== CHAT_MESSAGE_TYPES.SPECIAL ||
@@ -394,6 +398,7 @@ loop.shared.views.chat = (function(mozL10n) {
       });
 
       var textChatViewClasses = React.addons.classSet({
+        "showing-room-name": showingRoomName,
         "text-chat-view": true,
         "text-chat-disabled": !this.state.textChatEnabled,
         "text-chat-entries-empty": !messageList.length

browser/components/loop/content/shared/js/textChatView.jsx

@@ -378,9 +378,13 @@ loop.shared.views.chat = (function(mozL10n) {
 
     render: function() {
       var messageList;
+      var showingRoomName = false;
 
       if (this.props.showRoomName) {
         messageList = this.state.messageList;
+        showingRoomName = this.state.messageList.some(function(item) {
+          return item.contentType === CHAT_CONTENT_TYPES.ROOM_NAME;
+        });
       } else {
         messageList = this.state.messageList.filter(function(item) {
           return item.type !== CHAT_MESSAGE_TYPES.SPECIAL ||
@@ -394,6 +398,7 @@ loop.shared.views.chat = (function(mozL10n) {
       });
 
       var textChatViewClasses = React.addons.classSet({
+        "showing-room-name": showingRoomName,
         "text-chat-view": true,
         "text-chat-disabled": !this.state.textChatEnabled,
         "text-chat-entries-empty": !messageList.length

browser/components/loop/test/shared/textChatView_test.js

@@ -453,6 +453,40 @@ describe("loop.shared.views.TextChatView", function () {
       expect(view.getDOMNode().classList.contains("text-chat-entries-empty")).eql(false);
     });
 
+    it("should add a showing room name class when the view shows room names and it has a room name", function() {
+      view = mountTestComponent({
+        showRoomName: true
+      });
+
+      store.updateRoomInfo(new sharedActions.UpdateRoomInfo({
+        roomName: "Study",
+        roomUrl: "Fake"
+      }));
+
+      expect(view.getDOMNode().classList.contains("showing-room-name")).eql(true);
+    });
+
+    it("shouldn't add a showing room name class when the view doesn't show room names", function() {
+      view = mountTestComponent({
+        showRoomName: false
+      });
+
+      store.updateRoomInfo(new sharedActions.UpdateRoomInfo({
+        roomName: "Study",
+        roomUrl: "Fake"
+      }));
+
+      expect(view.getDOMNode().classList.contains("showing-room-name")).eql(false);
+    });
+
+    it("shouldn't add a showing room name class when the view doesn't have a name", function() {
+      view = mountTestComponent({
+        showRoomName: true
+      });
+
+      expect(view.getDOMNode().classList.contains("showing-room-name")).eql(false);
+    });
+
     it("should show timestamps from msgs sent more than 1 min apart", function() {
       view = mountTestComponent();