Bug 1070045: shim contacts React classes when ES6 is not available in the browser used. r=Niko
authorMike de Boer <mdeboer@mozilla.com>
Tue, 23 Sep 2014 12:21:35 +0200
changeset 218091 5b1cf6f6d72ea1a52d2cf24f2413aa0050f980a6
parent 218090 fa8599460f1d08dd28106df6ca385aa4a5bd5389
child 218092 1d2300d17d3b15fa8659756d5ee76bd1b335c07f
push idunknown
push userunknown
push dateunknown
reviewersNiko
bugs1070045
milestone34.0a2
Bug 1070045: shim contacts React classes when ES6 is not available in the browser used. r=Niko
browser/components/loop/content/js/conversation.js
browser/components/loop/content/js/conversation.jsx
browser/components/loop/ui/fake-mozLoop.js
browser/components/loop/ui/index.html
browser/components/loop/ui/ui-showcase.js
browser/components/loop/ui/ui-showcase.jsx
--- a/browser/components/loop/content/js/conversation.js
+++ b/browser/components/loop/content/js/conversation.js
@@ -463,17 +463,17 @@ loop.conversation = (function(OT, mozL10
     router = new ConversationRouter({
       client: client,
       conversation: new loop.shared.models.ConversationModel(
         {},         // Model attributes
         {sdk: OT}), // Model dependencies
       notifications: new loop.shared.models.NotificationCollection()
     });
 
-    window.addEventListener("unload", (event) => {
+    window.addEventListener("unload", function(event) {
       // Handle direct close of dialog box via [x] control.
       navigator.mozLoop.releaseCallData(router._conversation.get("callId"));
     });
 
     Backbone.history.start();
   }
 
   return {
--- a/browser/components/loop/content/js/conversation.jsx
+++ b/browser/components/loop/content/js/conversation.jsx
@@ -463,17 +463,17 @@ loop.conversation = (function(OT, mozL10
     router = new ConversationRouter({
       client: client,
       conversation: new loop.shared.models.ConversationModel(
         {},         // Model attributes
         {sdk: OT}), // Model dependencies
       notifications: new loop.shared.models.NotificationCollection()
     });
 
-    window.addEventListener("unload", (event) => {
+    window.addEventListener("unload", function(event) {
       // Handle direct close of dialog box via [x] control.
       navigator.mozLoop.releaseCallData(router._conversation.get("callId"));
     });
 
     Backbone.history.start();
   }
 
   return {
--- a/browser/components/loop/ui/fake-mozLoop.js
+++ b/browser/components/loop/ui/fake-mozLoop.js
@@ -4,10 +4,17 @@
 
 /**
  * Faking the mozLoop object which doesn't exist in regular web pages.
  * @type {Object}
  */
 navigator.mozLoop = {
   ensureRegistered: function() {},
   getLoopCharPref: function() {},
-  getLoopBoolPref: function() {}
+  getLoopBoolPref: function() {},
+  releaseCallData: function() {},
+  contacts: {
+    getAll: function(callback) {
+      callback(null, []);
+    },
+    on: function() {}
+  }
 };
--- a/browser/components/loop/ui/index.html
+++ b/browser/components/loop/ui/index.html
@@ -5,16 +5,17 @@
 <html>
   <head>
     <meta charset="utf-8">
     <title>Loop UI Components Showcase</title>
     <link rel="stylesheet" type="text/css" href="../content/shared/css/reset.css">
     <link rel="stylesheet" type="text/css" href="../content/shared/css/common.css">
     <link rel="stylesheet" type="text/css" href="../content/shared/css/conversation.css">
     <link rel="stylesheet" type="text/css" href="../content/shared/css/panel.css">
+    <link rel="stylesheet" type="text/css" href="../content/shared/css/contacts.css">
     <link rel="stylesheet" type="text/css" href="../standalone/content/css/webapp.css">
     <link rel="stylesheet" type="text/css" href="ui-showcase.css">
  </head>
   <body>
     <div id="main"></div>
     <script src="fake-mozLoop.js"></script>
     <script src="fake-l10n.js"></script>
     <script>
@@ -34,13 +35,26 @@
     <script src="../content/shared/js/utils.js"></script>
     <script src="../content/shared/js/models.js"></script>
     <script src="../content/shared/js/router.js"></script>
     <script src="../content/shared/js/mixins.js"></script>
     <script src="../content/shared/js/views.js"></script>
     <script src="../content/js/client.js"></script>
     <script src="../content/js/desktopRouter.js"></script>
     <script src="../standalone/content/js/webapp.js"></script>
+    <script type="text/javascript;version=1.8" src="../content/js/contacts.js"></script>
+    <script>
+      if (!loop.contacts) {
+        // For browsers that don't support ES6 without special flags (all but Fx
+        // at the moment), we shim the contacts namespace with its most barebone
+        // implementation.
+        loop.contacts = {
+          ContactsList: React.createClass({render: function() {
+            return React.DOM.div();
+          }})
+        };
+      }
+    </script>
     <script src="../content/js/panel.js"></script>
     <script src="../content/js/conversation.js"></script>
     <script src="ui-showcase.js"></script>
   </body>
 </html>
--- a/browser/components/loop/ui/ui-showcase.js
+++ b/browser/components/loop/ui/ui-showcase.js
@@ -147,34 +147,34 @@
                          userProfile: {email: "test@example.com"}})
             )
           ), 
 
           Section({name: "IncomingCallView"}, 
             Example({summary: "Default / incoming video call", dashed: "true", style: {width: "280px"}}, 
               React.DOM.div({className: "fx-embedded"}, 
                 IncomingCallView({model: mockConversationModel, 
-                                  video: {enabled: true}})
+                                  video: true})
               )
             ), 
 
             Example({summary: "Default / incoming audio only call", dashed: "true", style: {width: "280px"}}, 
               React.DOM.div({className: "fx-embedded"}, 
                 IncomingCallView({model: mockConversationModel, 
-                                  video: {enabled: false}})
+                                  video: false})
               )
             )
           ), 
 
           Section({name: "IncomingCallView-ActiveState"}, 
             Example({summary: "Default", dashed: "true", style: {width: "280px"}}, 
               React.DOM.div({className: "fx-embedded"}, 
                 IncomingCallView({model: mockConversationModel, 
                                    showDeclineMenu: true, 
-                                   video: {enabled: true}})
+                                   video: true})
               )
             )
           ), 
 
           Section({name: "ConversationToolbar"}, 
             React.DOM.h2(null, "Desktop Conversation Window"), 
             React.DOM.div({className: "fx-embedded override-position"}, 
               Example({summary: "Default (260x265)", dashed: "true"}, 
--- a/browser/components/loop/ui/ui-showcase.jsx
+++ b/browser/components/loop/ui/ui-showcase.jsx
@@ -147,34 +147,34 @@
                          userProfile={{email: "test@example.com"}} />
             </Example>
           </Section>
 
           <Section name="IncomingCallView">
             <Example summary="Default / incoming video call" dashed="true" style={{width: "280px"}}>
               <div className="fx-embedded">
                 <IncomingCallView model={mockConversationModel}
-                                  video={{enabled: true}} />
+                                  video={true} />
               </div>
             </Example>
 
             <Example summary="Default / incoming audio only call" dashed="true" style={{width: "280px"}}>
               <div className="fx-embedded">
                 <IncomingCallView model={mockConversationModel}
-                                  video={{enabled: false}} />
+                                  video={false} />
               </div>
             </Example>
           </Section>
 
           <Section name="IncomingCallView-ActiveState">
             <Example summary="Default" dashed="true" style={{width: "280px"}}>
               <div className="fx-embedded" >
                 <IncomingCallView  model={mockConversationModel}
                                    showDeclineMenu={true}
-                                   video={{enabled: true}} />
+                                   video={true} />
               </div>
             </Example>
           </Section>
 
           <Section name="ConversationToolbar">
             <h2>Desktop Conversation Window</h2>
             <div className="fx-embedded override-position">
               <Example summary="Default (260x265)" dashed="true">