Bug 1045498 - New Hello UX for non supported browsers. r=nperriault a=lsblakk
--- 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.