Bug 1070045: shim contacts React classes when ES6 is not available in the browser used. r=Niko

browser/components/loop/content/js/conversation.js

@@ -468,7 +468,7 @@ loop.conversation = (function(OT, mozL10n) {
       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"));
     });

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

@@ -468,7 +468,7 @@ loop.conversation = (function(OT, mozL10n) {
       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"));
     });

browser/components/loop/ui/fake-mozLoop.js

@@ -9,5 +9,12 @@
 navigator.mozLoop = {
   ensureRegistered: function() {},
   getLoopCharPref: function() {},
-  getLoopBoolPref: function() {}
+  getLoopBoolPref: function() {},
+  releaseCallData: function() {},
+  contacts: {
+    getAll: function(callback) {
+      callback(null, []);
+    },
+    on: function() {}
+  }
 };

browser/components/loop/ui/index.html

@@ -10,6 +10,7 @@
     <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>
@@ -39,6 +40,19 @@
     <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>

browser/components/loop/ui/ui-showcase.js

@@ -152,14 +152,14 @@
             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})
               )
             )
           ), 
@@ -169,7 +169,7 @@
               React.DOM.div({className: "fx-embedded"}, 
                 IncomingCallView({model: mockConversationModel, 
                                    showDeclineMenu: true, 
-                                   video: {enabled: true}})
+                                   video: true})
               )
             )
           ), 

browser/components/loop/ui/ui-showcase.jsx

@@ -152,14 +152,14 @@
             <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>
@@ -169,7 +169,7 @@
               <div className="fx-embedded" >
                 <IncomingCallView  model={mockConversationModel}
                                    showDeclineMenu={true}
-                                   video={{enabled: true}} />
+                                   video={true} />
               </div>
             </Example>
           </Section>