Bug 1045498 - New Hello UX for non supported browsers. r=nperriault a=lsblakk
authorRomain Gauthier <romain.gauthier@monkeypatch.me>
Tue, 09 Dec 2014 14:19:21 +0100
changeset 242441 383f4f363da32c53a190cb16303869eb06cdc42d
parent 242440 8408727d213edfb81df2be9dd945a6533a43e3f5
child 242442 0a1bd530fb0a8006aece14b856182d18b92427b5
push id4311
push userraliiev@mozilla.com
push dateMon, 12 Jan 2015 19:37:41 +0000
treeherdermozilla-beta@150c9fed433b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnperriault, lsblakk
bugs1045498
milestone36.0a2
Bug 1045498 - New Hello UX for non supported browsers. r=nperriault a=lsblakk
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
--- a/browser/components/loop/standalone/content/js/webapp.js
+++ b/browser/components/loop/standalone/content/js/webapp.js
@@ -34,28 +34,24 @@ loop.webapp = (function($, _, OT, mozL10
     }
   });
 
   /**
    * Unsupported Browsers view.
    */
   var UnsupportedBrowserView = React.createClass({displayName: 'UnsupportedBrowserView',
     render: function() {
-      var useLatestFF = mozL10n.get("use_latest_firefox", {
-        "firefoxBrandNameLink": React.renderComponentToStaticMarkup(
-          React.DOM.a({target: "_blank", href: loop.config.brandWebsiteUrl}, 
-            mozL10n.get("brandShortname")
-          )
-        )
-      });
       return (
-        React.DOM.div(null, 
-          React.DOM.h2(null, mozL10n.get("incompatible_browser")), 
-          React.DOM.p(null, mozL10n.get("powered_by_webrtc", {clientShortname: mozL10n.get("clientShortname2")})), 
-          React.DOM.p({dangerouslySetInnerHTML: {__html: useLatestFF}})
+        React.DOM.div({className: "expired-url-info"}, 
+          React.DOM.div({className: "info-panel"}, 
+            React.DOM.div({className: "firefox-logo"}), 
+            React.DOM.h1(null, mozL10n.get("incompatible_browser_heading")), 
+            React.DOM.h4(null, mozL10n.get("incompatible_browser_message"))
+          ), 
+          PromoteFirefoxView({helper: this.props.helper})
         )
       );
     }
   });
 
   /**
    * Unsupported Device view.
    */
@@ -988,17 +984,17 @@ loop.webapp = (function($, _, OT, mozL10
     },
 
     render: function() {
       switch (this.state.windowType) {
         case "unsupportedDevice": {
           return UnsupportedDeviceView(null);
         }
         case "unsupportedBrowser": {
-          return UnsupportedBrowserView(null);
+          return UnsupportedBrowserView({helper: this.props.helper});
         }
         case "outgoing": {
           return (
             OutgoingConversationView({
                client: this.props.client, 
                conversation: this.props.conversation, 
                helper: this.props.helper, 
                notifications: this.props.notifications, 
--- a/browser/components/loop/standalone/content/js/webapp.jsx
+++ b/browser/components/loop/standalone/content/js/webapp.jsx
@@ -34,28 +34,24 @@ loop.webapp = (function($, _, OT, mozL10
     }
   });
 
   /**
    * Unsupported Browsers view.
    */
   var UnsupportedBrowserView = React.createClass({
     render: function() {
-      var useLatestFF = mozL10n.get("use_latest_firefox", {
-        "firefoxBrandNameLink": React.renderComponentToStaticMarkup(
-          <a target="_blank" href={loop.config.brandWebsiteUrl}>
-            {mozL10n.get("brandShortname")}
-          </a>
-        )
-      });
       return (
-        <div>
-          <h2>{mozL10n.get("incompatible_browser")}</h2>
-          <p>{mozL10n.get("powered_by_webrtc", {clientShortname: mozL10n.get("clientShortname2")})}</p>
-          <p dangerouslySetInnerHTML={{__html: useLatestFF}}></p>
+        <div className="expired-url-info">
+          <div className="info-panel">
+            <div className="firefox-logo" />
+            <h1>{mozL10n.get("incompatible_browser_heading")}</h1>
+            <h4>{mozL10n.get("incompatible_browser_message")}</h4>
+          </div>
+          <PromoteFirefoxView helper={this.props.helper} />
         </div>
       );
     }
   });
 
   /**
    * Unsupported Device view.
    */
@@ -988,17 +984,17 @@ loop.webapp = (function($, _, OT, mozL10
     },
 
     render: function() {
       switch (this.state.windowType) {
         case "unsupportedDevice": {
           return <UnsupportedDeviceView />;
         }
         case "unsupportedBrowser": {
-          return <UnsupportedBrowserView />;
+          return <UnsupportedBrowserView helper={this.props.helper}/>;
         }
         case "outgoing": {
           return (
             <OutgoingConversationView
                client={this.props.client}
                conversation={this.props.conversation}
                helper={this.props.helper}
                notifications={this.props.notifications}
--- a/browser/components/loop/standalone/content/l10n/en-US/loop.properties
+++ b/browser/components/loop/standalone/content/l10n/en-US/loop.properties
@@ -15,17 +15,18 @@ hangup_button_title=Hang up
 hangup_button_caption2=Exit
 mute_local_audio_button_title=Mute your audio
 unmute_local_audio_button_title=Unmute your audio
 mute_local_video_button_title=Mute your video
 unmute_local_video_button_title=Unmute your video
 outgoing_call_title=Start conversation?
 call_with_contact_title=Conversation with {{incomingCallIdentity}}
 welcome=Welcome to the {{clientShortname}} web client.
-incompatible_browser=Incompatible Browser
+incompatible_browser_heading=Oops!
+incompatible_browser_message=Firefox Hello only works in browsers that support WebRTC
 powered_by_webrtc=The audio and video components of {{clientShortname}} are powered by WebRTC.
 use_latest_firefox=Please try this link in a WebRTC-enabled browser, such as {{firefoxBrandNameLink}}.
 incompatible_device=Incompatible device
 sorry_device_unsupported=Sorry, {{clientShortname}} does not currently support your device.
 use_firefox_windows_mac_linux=Please open this page using the latest {{brandShortname}} on Windows, Android, Mac or Linux.
 connection_error_see_console_notification=Call failed; see console for details.
 call_url_unavailable_notification_heading=Oops!
 call_url_unavailable_notification_message2=Sorry, this URL is not available. It may be expired or entered incorrectly.