Bug 1097746 - Add a link to Hello's SUMO page for standalone. r=Standard8 a=lsblakk
authorRomain Gauthier <romain.gauthier@monkeypatch.me>
Mon, 24 Nov 2014 09:57:45 +0000
changeset 234056 c1c67ca8a76ff80a1f194ebc99fca1fb1a4c53d3
parent 234055 07c6f8288d2f093a31018188e8512c03d557766c
child 234057 20b667fbd257cf2e90b105d748710c7cde4ccaee
push id4187
push userbhearsum@mozilla.com
push dateFri, 28 Nov 2014 15:29:12 +0000
treeherdermozilla-beta@f23cc6a30c11 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersStandard8, lsblakk
bugs1097746
milestone35.0a2
Bug 1097746 - Add a link to Hello's SUMO page for standalone. r=Standard8 a=lsblakk
browser/components/loop/content/shared/css/conversation.css
browser/components/loop/standalone/Makefile
browser/components/loop/standalone/content/css/webapp.css
browser/components/loop/standalone/content/js/standaloneRoomViews.js
browser/components/loop/standalone/content/js/standaloneRoomViews.jsx
browser/components/loop/standalone/content/js/webapp.js
browser/components/loop/standalone/content/js/webapp.jsx
browser/components/loop/standalone/content/l10n/en-US/loop.properties
browser/components/loop/standalone/server.js
--- a/browser/components/loop/content/shared/css/conversation.css
+++ b/browser/components/loop/content/shared/css/conversation.css
@@ -701,27 +701,42 @@ html, .fx-embedded, #main,
   height: calc(100% - 50px - 60px);
   background: #000;
 }
 
 .room-conversation-wrapper header {
   background: #000;
   height: 50px;
   text-align: left;
+  width: 75%;
 }
 
 .room-conversation-wrapper header h1 {
   font-size: 1.5em;
   color: #fff;
   line-height: 50px;
   text-indent: 50px;
   background-image: url("../img/firefox-logo.png");
   background-size: 30px;
   background-position: 10px;
   background-repeat: no-repeat;
+  display: inline-block;
+}
+
+.room-conversation-wrapper header a {
+  float: right;
+}
+
+.room-conversation-wrapper header .icon-help {
+  display: inline-block;
+  background-size: contain;
+  margin-top: 20px;
+  width: 20px;
+  height: 20px;
+  background: transparent url("../img/svg/glyph-help-16x16.svg") no-repeat;
 }
 
 .room-conversation-wrapper footer {
   background: #000;
   height: 60px;
   margin-top: -12px;
 }
 
--- a/browser/components/loop/standalone/Makefile
+++ b/browser/components/loop/standalone/Makefile
@@ -79,8 +79,10 @@ config:
 	@echo "loop.config.feedbackProductName = '`echo $(LOOP_FEEDBACK_PRODUCT_NAME)`';" >> content/config.js
 	@echo "loop.config.brandWebsiteUrl = '`echo $(LOOP_BRAND_WEBSITE_URL)`';" >> content/config.js
 	@echo "loop.config.privacyWebsiteUrl = '`echo $(LOOP_PRIVACY_WEBSITE_URL)`';" >> content/config.js
 	@echo "loop.config.legalWebsiteUrl = '`echo $(LOOP_LEGAL_WEBSITE_URL)`';" >> content/config.js
 	@echo "loop.config.learnMoreUrl = '`echo $(LOOP_PRODUCT_HOMEPAGE_URL)`';" >> content/config.js
 	@echo "loop.config.fxosApp = loop.config.fxosApp || {};" >> content/config.js
 	@echo "loop.config.fxosApp.name = 'Loop';" >> content/config.js
 	@echo "loop.config.fxosApp.manifestUrl = 'http://fake-market.herokuapp.com/apps/packagedApp/manifest.webapp';" >> content/config.js
+	@echo "loop.config.roomsSupportUrl = 'https://support.mozilla.org/kb/group-conversations-firefox-hello-webrtc';" >> content/config.js
+	@echo "loop.config.guestSupportUrl = 'https://support.mozilla.org/kb/respond-firefox-hello-invitation-guest-mode';" >> content/config.js
--- a/browser/components/loop/standalone/content/css/webapp.css
+++ b/browser/components/loop/standalone/content/css/webapp.css
@@ -79,25 +79,29 @@ body,
   .terms-service a:hover {
     text-decoration: underline;
   }
 
   .terms-service a {
     color: #777;
   }
 
+.footer-external-links {
+  padding: .2rem .7rem;
+}
+
 .footer-external-links a {
-  padding: .2rem .7rem;
   margin: 0 .5rem;
   text-decoration: none;
+  color: #adadad;
 }
 
-  .footer-external-links a:hover {
-    color: #111;
-  }
+.footer-external-links a:hover {
+  color: #777;
+}
 
 .footer-logo {
   width: 100px;
   margin: 0 auto;
   height: 30px;
   background-size: contain;
   background-image: url("../shared/img/mozilla-logo.png");
   background-repeat: no-repeat;
--- a/browser/components/loop/standalone/content/js/standaloneRoomViews.js
+++ b/browser/components/loop/standalone/content/js/standaloneRoomViews.js
@@ -102,17 +102,20 @@ loop.standaloneRoomViews = (function(moz
       );
     }
   });
 
   var StandaloneRoomHeader = React.createClass({displayName: 'StandaloneRoomHeader',
     render: function() {
       return (
         React.DOM.header(null, 
-          React.DOM.h1(null, mozL10n.get("clientShortname2"))
+          React.DOM.h1(null, mozL10n.get("clientShortname2")), 
+          React.DOM.a({target: "_blank", href: loop.config.roomsSupportUrl}, 
+            React.DOM.i({className: "icon icon-help"})
+          )
         )
       );
     }
   });
 
   var StandaloneRoomFooter = React.createClass({displayName: 'StandaloneRoomFooter',
     _getContent: function() {
       return mozL10n.get("legal_text_and_links", {
--- a/browser/components/loop/standalone/content/js/standaloneRoomViews.jsx
+++ b/browser/components/loop/standalone/content/js/standaloneRoomViews.jsx
@@ -103,16 +103,19 @@ loop.standaloneRoomViews = (function(moz
     }
   });
 
   var StandaloneRoomHeader = React.createClass({
     render: function() {
       return (
         <header>
           <h1>{mozL10n.get("clientShortname2")}</h1>
+          <a target="_blank" href={loop.config.roomsSupportUrl}>
+            <i className="icon icon-help"></i>
+          </a>
         </header>
       );
     }
   });
 
   var StandaloneRoomFooter = React.createClass({
     _getContent: function() {
       return mozL10n.get("legal_text_and_links", {
--- a/browser/components/loop/standalone/content/js/webapp.js
+++ b/browser/components/loop/standalone/content/js/webapp.js
@@ -254,17 +254,22 @@ loop.webapp = (function($, _, OT, mozL10
   });
 
   var ConversationFooter = React.createClass({displayName: 'ConversationFooter',
     render: function() {
       return (
         React.DOM.div({className: "standalone-footer container-box"}, 
           React.DOM.div({title: mozL10n.get("vendor_alttext",
                                   {vendorShortname: mozL10n.get("vendorShortname")}), 
-               className: "footer-logo"})
+               className: "footer-logo"}), 
+          React.DOM.div({className: "footer-external-links"}, 
+            React.DOM.a({target: "_blank", href: loop.config.guestSupportUrl}, 
+              mozL10n.get("support_link")
+            )
+          )
         )
       );
     }
   });
 
   var PendingConversationView = React.createClass({displayName: 'PendingConversationView',
     mixins: [sharedMixins.AudioMixin],
 
--- a/browser/components/loop/standalone/content/js/webapp.jsx
+++ b/browser/components/loop/standalone/content/js/webapp.jsx
@@ -255,16 +255,21 @@ loop.webapp = (function($, _, OT, mozL10
 
   var ConversationFooter = React.createClass({
     render: function() {
       return (
         <div className="standalone-footer container-box">
           <div title={mozL10n.get("vendor_alttext",
                                   {vendorShortname: mozL10n.get("vendorShortname")})}
                className="footer-logo"></div>
+          <div className="footer-external-links">
+            <a target="_blank" href={loop.config.guestSupportUrl}>
+              {mozL10n.get("support_link")}
+            </a>
+          </div>
         </div>
       );
     }
   });
 
   var PendingConversationView = React.createClass({
     mixins: [sharedMixins.AudioMixin],
 
--- a/browser/components/loop/standalone/content/l10n/en-US/loop.properties
+++ b/browser/components/loop/standalone/content/l10n/en-US/loop.properties
@@ -111,8 +111,10 @@ rooms_panel_title=Choose a conversation 
 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_display_name_guest=Guest
 rooms_unavailable_notification_message=Sorry, you cannot join this conversation. The link may be expired or invalid.
 rooms_media_denied_message=We could not get access to your microphone or camera. Please reload the page to try again.
+
+support_link=Get Help
--- a/browser/components/loop/standalone/server.js
+++ b/browser/components/loop/standalone/server.js
@@ -25,17 +25,19 @@ function getConfigFile(req, res) {
     //     uploaded to the marketplace bug 1053424
     "loop.config.marketplaceUrl = 'http://fake-market.herokuapp.com/iframe-install.html'",
     "loop.config.brandWebsiteUrl = 'https://www.mozilla.org/firefox/';",
     "loop.config.privacyWebsiteUrl = 'https://www.mozilla.org/privacy';",
     "loop.config.learnMoreUrl = 'https://www.mozilla.org/hello/';",
     "loop.config.legalWebsiteUrl = '/legal/terms';",
     "loop.config.fxosApp = loop.config.fxosApp || {};",
     "loop.config.fxosApp.name = 'Loop';",
-    "loop.config.fxosApp.manifestUrl = 'http://fake-market.herokuapp.com/apps/packagedApp/manifest.webapp';"
+    "loop.config.fxosApp.manifestUrl = 'http://fake-market.herokuapp.com/apps/packagedApp/manifest.webapp';",
+    "loop.config.roomsSupportUrl = 'https://support.mozilla.org/kb/group-conversations-firefox-hello-webrtc';",
+    "loop.config.guestSupportUrl = 'https://support.mozilla.org/kb/respond-firefox-hello-invitation-guest-mode';"
   ].join("\n"));
 }
 
 app.get('/content/config.js', getConfigFile);
 app.get('/content/c/config.js', getConfigFile);
 
 // Various mappings to let us end up with:
 // /test - for the test files