Bug 1155078 - Only display domain name in the context part of the panel. r=mikedeboer

browser/components/loop/content/js/panel.js

@@ -700,9 +700,17 @@ loop.panel = (function(_, mozL10n) {
     },
 
     render: function() {
+      var hostname;
+
+      try {
+        hostname = new URL(this.state.url).hostname;
+      } catch (ex) {
+        // Empty catch - if there's an error, then we won't show the context.
+      }
+
       var contextClasses = React.addons.classSet({
         context: true,
-        hide: !this.state.url ||
+        hide: !hostname ||
           !this.props.mozLoop.getLoopPref("contextInConverations.enabled")
       });
 
@@ -716,7 +724,7 @@ loop.panel = (function(_, mozL10n) {
             ), 
             React.createElement("img", {className: "context-preview", src: this.state.previewImage}), 
             React.createElement("span", {className: "context-description"}, this.state.description), 
-            React.createElement("span", {className: "context-url"}, this.state.url)
+            React.createElement("span", {className: "context-url"}, hostname)
           ), 
           React.createElement("button", {className: "btn btn-info new-room-button", 
                   onClick: this.handleCreateButtonClick, 

browser/components/loop/content/js/panel.jsx

@@ -700,9 +700,17 @@ loop.panel = (function(_, mozL10n) {
     },
 
     render: function() {
+      var hostname;
+
+      try {
+        hostname = new URL(this.state.url).hostname;
+      } catch (ex) {
+        // Empty catch - if there's an error, then we won't show the context.
+      }
+
       var contextClasses = React.addons.classSet({
         context: true,
-        hide: !this.state.url ||
+        hide: !hostname ||
           !this.props.mozLoop.getLoopPref("contextInConverations.enabled")
       });
 
@@ -716,7 +724,7 @@ loop.panel = (function(_, mozL10n) {
             </label>
             <img className="context-preview" src={this.state.previewImage}/>
             <span className="context-description">{this.state.description}</span>
-            <span className="context-url">{this.state.url}</span>
+            <span className="context-url">{hostname}</span>
           </div>
           <button className="btn btn-info new-room-button"
                   onClick={this.handleCreateButtonClick}

browser/components/loop/test/desktop-local/panel_test.js

@@ -833,6 +833,24 @@ describe("loop.panel", function() {
       var contextInfo = view.getDOMNode().querySelector(".context");
       expect(contextInfo.classList.contains("hide")).to.equal(true);
     });
+
+    it("should show only the hostname of the url", function() {
+      fakeMozLoop.getSelectedTabMetadata = function (callback) {
+        callback({
+          url: "https://www.example.com:1234",
+          description: "fake description",
+          previews: [""]
+        });
+      };
+
+      var view = createTestComponent();
+
+      // Simulate being visible
+      view.onDocumentVisible();
+
+      var contextHostname = view.getDOMNode().querySelector(".context-url");
+      expect(contextHostname.textContent).eql("www.example.com");
+    });
   });
 
   describe('loop.panel.ToSView', function() {