Bug 1040662: Upgrade Loop's use of React to version 0.11.1. r=Standard8

--HG--
rename : browser/components/loop/content/shared/libs/react-0.10.0.js => browser/components/loop/content/shared/libs/react-0.11.1.js

browser/components/loop/content/conversation.html

@@ -26,7 +26,7 @@
       window.OTProperties.cssURL = window.OTProperties.assetURL + 'css/ot.css';
     </script>
     <script type="text/javascript" src="loop/libs/sdk.js"></script>
-    <script type="text/javascript" src="loop/shared/libs/react-0.10.0.js"></script>
+    <script type="text/javascript" src="loop/shared/libs/react-0.11.1.js"></script>
     <script type="text/javascript" src="loop/shared/libs/jquery-2.1.0.js"></script>
     <script type="text/javascript" src="loop/shared/libs/lodash-2.4.1.js"></script>
     <script type="text/javascript" src="loop/shared/libs/backbone-1.1.2.js"></script>

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

@@ -86,27 +86,27 @@ loop.conversation = (function(OT, mozL10n) {
         "visually-hidden": !this.state.showDeclineMenu
       });
       return (
-        React.DOM.div( {className:conversationPanelClass}, 
-          React.DOM.h2(null, __("incoming_call")),
-          React.DOM.div( {className:"button-group incoming-call-action-group"}, 
-            React.DOM.div( {className:"button-chevron-menu-group"}, 
-              React.DOM.div( {className:"button-group-chevron"}, 
-                React.DOM.div( {className:"button-group"}, 
-                  React.DOM.button( {className:btnClassDecline, onClick:this._handleDecline}, 
+        React.DOM.div({className: conversationPanelClass}, 
+          React.DOM.h2(null, __("incoming_call")), 
+          React.DOM.div({className: "button-group incoming-call-action-group"}, 
+            React.DOM.div({className: "button-chevron-menu-group"}, 
+              React.DOM.div({className: "button-group-chevron"}, 
+                React.DOM.div({className: "button-group"}, 
+                  React.DOM.button({className: btnClassDecline, onClick: this._handleDecline}, 
                     __("incoming_call_decline_button")
-                  ),
-                  React.DOM.div( {className:"btn-chevron",
-                    onClick:this._toggleDeclineMenu}
+                  ), 
+                  React.DOM.div({className: "btn-chevron", 
+                    onClick: this._toggleDeclineMenu}
                   )
-                ),
-                React.DOM.ul( {className:declineDropdownMenuClasses}, 
-                  React.DOM.li( {className:"btn-block", onClick:this._handleDeclineBlock}, 
+                ), 
+                React.DOM.ul({className: declineDropdownMenuClasses}, 
+                  React.DOM.li({className: "btn-block", onClick: this._handleDeclineBlock}, 
                     __("incoming_call_decline_and_block_button")
                   )
                 )
               )
-            ),
-            React.DOM.button( {className:btnClassAccept, onClick:this._handleAccept}, 
+            ), 
+            React.DOM.button({className: btnClassAccept, onClick: this._handleAccept}, 
               __("incoming_call_answer_button")
             )
           )

browser/components/loop/content/js/panel.js

@@ -77,22 +77,22 @@ loop.panel = (function(_, mozL10n) {
                               __("display_name_available_status");
 
       return (
-        React.DOM.div( {className:"footer component-spacer"}, 
-          React.DOM.div( {className:"do-not-disturb"}, 
-            React.DOM.p( {className:"dnd-status", onClick:this.showDropdownMenu}, 
-              React.DOM.span(null, availabilityText),
-              React.DOM.i( {className:availabilityStatus})
-            ),
-            React.DOM.ul( {className:availabilityDropdown,
-                onMouseLeave:this.hideDropdownMenu}, 
-              React.DOM.li( {onClick:this.changeAvailability("available"),
-                  className:"dnd-menu-item dnd-make-available"}, 
-                React.DOM.i( {className:"status status-available"}),
+        React.DOM.div({className: "footer component-spacer"}, 
+          React.DOM.div({className: "do-not-disturb"}, 
+            React.DOM.p({className: "dnd-status", onClick: this.showDropdownMenu}, 
+              React.DOM.span(null, availabilityText), 
+              React.DOM.i({className: availabilityStatus})
+            ), 
+            React.DOM.ul({className: availabilityDropdown, 
+                onMouseLeave: this.hideDropdownMenu}, 
+              React.DOM.li({onClick: this.changeAvailability("available"), 
+                  className: "dnd-menu-item dnd-make-available"}, 
+                React.DOM.i({className: "status status-available"}), 
                 React.DOM.span(null, __("display_name_available_status"))
-              ),
-              React.DOM.li( {onClick:this.changeAvailability("do-not-disturb"),
-                  className:"dnd-menu-item dnd-make-unavailable"}, 
-                React.DOM.i( {className:"status status-dnd"}),
+              ), 
+              React.DOM.li({onClick: this.changeAvailability("do-not-disturb"), 
+                  className: "dnd-menu-item dnd-make-unavailable"}, 
+                React.DOM.i({className: "status status-dnd"}), 
                 React.DOM.span(null, __("display_name_dnd_status"))
               )
             )
@@ -113,21 +113,21 @@ loop.panel = (function(_, mozL10n) {
         var privacy_notice_url = navigator.mozLoop.getLoopCharPref('legal.privacy_url');
         var tosHTML = __("legal_text_and_links2", {
           "terms_of_use": React.renderComponentToStaticMarkup(
-            React.DOM.a( {href:terms_of_use_url, target:"_blank"}, 
+            React.DOM.a({href: terms_of_use_url, target: "_blank"}, 
               __("legal_text_tos")
             )
           ),
           "privacy_notice": React.renderComponentToStaticMarkup(
-            React.DOM.a( {href:privacy_notice_url, target:"_blank"}, 
+            React.DOM.a({href: privacy_notice_url, target: "_blank"}, 
               __("legal_text_privacy")
             )
           ),
         });
         navigator.mozLoop.setLoopCharPref('seenToS', 'seen');
-        return React.DOM.p( {className:"terms-service",
-                  dangerouslySetInnerHTML:{__html: tosHTML}});
+        return React.DOM.p({className: "terms-service", 
+                  dangerouslySetInnerHTML: {__html: tosHTML}});
       } else {
-        return React.DOM.div(null );
+        return React.DOM.div(null);
       }
     }
   });
@@ -139,11 +139,11 @@ loop.panel = (function(_, mozL10n) {
 
     render: function() {
       return (
-        React.DOM.div( {className:"component-spacer share generate-url"}, 
-          React.DOM.div( {className:"description"}, 
-            React.DOM.p( {className:"description-content"}, this.props.summary)
-          ),
-          React.DOM.div( {className:"action"}, 
+        React.DOM.div({className: "component-spacer share generate-url"}, 
+          React.DOM.div({className: "description"}, 
+            React.DOM.p({className: "description-content"}, this.props.summary)
+          ), 
+          React.DOM.div({className: "action"}, 
             this.props.children
           )
         )
@@ -210,10 +210,10 @@ loop.panel = (function(_, mozL10n) {
       // from the react lib.
       var cx = React.addons.classSet;
       return (
-        PanelLayout( {summary:__("share_link_header_text")}, 
-          React.DOM.div( {className:"invite"}, 
-            React.DOM.input( {type:"url", value:this.state.callUrl, readOnly:"true",
-                   className:cx({'pending': this.state.pending})} )
+        PanelLayout({summary: __("share_link_header_text")}, 
+          React.DOM.div({className: "invite"}, 
+            React.DOM.input({type: "url", value: this.state.callUrl, readOnly: "true", 
+                   className: cx({'pending': this.state.pending})})
           )
         )
       );
@@ -232,10 +232,10 @@ loop.panel = (function(_, mozL10n) {
     render: function() {
       return (
         React.DOM.div(null, 
-          CallUrlResult( {client:this.props.client,
-                       notifier:this.props.notifier} ),
-          ToSView(null ),
-          AvailabilityDropdown(null )
+          CallUrlResult({client: this.props.client, 
+                       notifier: this.props.notifier}), 
+          ToSView(null), 
+          AvailabilityDropdown(null)
         )
       );
     }
@@ -302,8 +302,8 @@ loop.panel = (function(_, mozL10n) {
       var client = new loop.Client({
         baseServerUrl: navigator.mozLoop.serverUrl
       });
-      this.loadReactComponent(PanelView( {client:client,
-                                         notifier:this._notifier} ));
+      this.loadReactComponent(PanelView({client: client, 
+                                         notifier: this._notifier}));
     }
   });
 

browser/components/loop/content/panel.html

@@ -15,7 +15,7 @@
 
     <div id="main"></div>
 
-    <script type="text/javascript" src="loop/shared/libs/react-0.10.0.js"></script>
+    <script type="text/javascript" src="loop/shared/libs/react-0.11.1.js"></script>
     <script type="text/javascript" src="loop/libs/l10n.js"></script>
     <script type="text/javascript" src="loop/shared/libs/jquery-2.1.0.js"></script>
     <script type="text/javascript" src="loop/shared/libs/lodash-2.4.1.js"></script>

browser/components/loop/content/shared/js/views.js

@@ -140,9 +140,9 @@ loop.shared.views = (function(_, OT, l10n) {
     render: function() {
       return (
         /* jshint ignore:start */
-        React.DOM.button( {className:this._getClasses(),
-                title:this._getTitle(),
-                onClick:this.handleClick})
+        React.DOM.button({className: this._getClasses(), 
+                title: this._getTitle(), 
+                onClick: this.handleClick})
         /* jshint ignore:end */
       );
     }
@@ -181,16 +181,16 @@ loop.shared.views = (function(_, OT, l10n) {
     render: function() {
       /* jshint ignore:start */
       return (
-        React.DOM.ul( {className:"conversation-toolbar"}, 
-          React.DOM.li(null, React.DOM.button( {className:"btn btn-hangup",
-                      onClick:this.handleClickHangup,
-                      title:__("hangup_button_title")})),
-          React.DOM.li(null, MediaControlButton( {action:this.handleToggleVideo,
-                                  enabled:this.props.video.enabled,
-                                  scope:"local", type:"video"} )),
-          React.DOM.li(null, MediaControlButton( {action:this.handleToggleAudio,
-                                  enabled:this.props.audio.enabled,
-                                  scope:"local", type:"audio"} ))
+        React.DOM.ul({className: "conversation-toolbar"}, 
+          React.DOM.li(null, React.DOM.button({className: "btn btn-hangup", 
+                      onClick: this.handleClickHangup, 
+                      title: __("hangup_button_title")})), 
+          React.DOM.li(null, MediaControlButton({action: this.handleToggleVideo, 
+                                  enabled: this.props.video.enabled, 
+                                  scope: "local", type: "video"})), 
+          React.DOM.li(null, MediaControlButton({action: this.handleToggleAudio, 
+                                  enabled: this.props.audio.enabled, 
+                                  scope: "local", type: "audio"}))
         )
       );
       /* jshint ignore:end */
@@ -336,16 +336,16 @@ loop.shared.views = (function(_, OT, l10n) {
     render: function() {
       /* jshint ignore:start */
       return (
-        React.DOM.div( {className:"conversation"}, 
-          ConversationToolbar( {video:this.state.video,
-                               audio:this.state.audio,
-                               publishStream:this.publishStream,
-                               hangup:this.hangup} ),
-          React.DOM.div( {className:"media nested"}, 
-            React.DOM.div( {className:"video_wrapper remote_wrapper"}, 
-              React.DOM.div( {className:"video_inner remote"})
-            ),
-            React.DOM.div( {className:"local"})
+        React.DOM.div({className: "conversation"}, 
+          ConversationToolbar({video: this.state.video, 
+                               audio: this.state.audio, 
+                               publishStream: this.publishStream, 
+                               hangup: this.hangup}), 
+          React.DOM.div({className: "media nested"}, 
+            React.DOM.div({className: "video_wrapper remote_wrapper"}, 
+              React.DOM.div({className: "video_inner remote"})
+            ), 
+            React.DOM.div({className: "local"})
           )
         )
       );
@@ -367,18 +367,18 @@ loop.shared.views = (function(_, OT, l10n) {
     },
 
     render: function() {
-      var backButton = React.DOM.div(null );
+      var backButton = React.DOM.div(null);
       if (this.props.reset) {
         backButton = (
-          React.DOM.button( {className:"back", type:"button", onClick:this.props.reset}, 
-            "« ",__("feedback_back_button")
+          React.DOM.button({className: "back", type: "button", onClick: this.props.reset}, 
+            "« ", __("feedback_back_button")
           )
         );
       }
       return (
-        React.DOM.div( {className:"feedback"}, 
-          backButton,
-          React.DOM.h3(null, this.props.title),
+        React.DOM.div({className: "feedback"}, 
+          backButton, 
+          React.DOM.h3(null, this.props.title), 
           this.props.children
         )
       );
@@ -417,10 +417,10 @@ loop.shared.views = (function(_, OT, l10n) {
       var categories = this._getCategories();
       return Object.keys(categories).map(function(category, key) {
         return (
-          React.DOM.label( {key:key}, 
-            React.DOM.input( {type:"radio", ref:"category", name:"category",
-                   value:category,
-                   onChange:this.handleCategoryChange} ),
+          React.DOM.label({key: key}, 
+            React.DOM.input({type: "radio", ref: "category", name: "category", 
+                   value: category, 
+                   onChange: this.handleCategoryChange}), 
             categories[category]
           )
         );
@@ -462,16 +462,16 @@ loop.shared.views = (function(_, OT, l10n) {
 
     render: function() {
       return (
-        FeedbackLayout( {title:__("feedback_what_makes_you_sad"),
-                        reset:this.props.reset}, 
-          React.DOM.form( {onSubmit:this.handleFormSubmit}, 
-            this._getCategoryFields(),
-            React.DOM.p(null, React.DOM.input( {type:"text", ref:"description", name:"description",
-                      disabled:this.state.category !== "other",
-                      onChange:this.handleCustomTextChange,
-                      value:this.state.description} )),
-            React.DOM.button( {type:"submit", className:"btn btn-success",
-                    disabled:!this._isFormReady()}, 
+        FeedbackLayout({title: __("feedback_what_makes_you_sad"), 
+                        reset: this.props.reset}, 
+          React.DOM.form({onSubmit: this.handleFormSubmit}, 
+            this._getCategoryFields(), 
+            React.DOM.p(null, React.DOM.input({type: "text", ref: "description", name: "description", 
+                      disabled: this.state.category !== "other", 
+                      onChange: this.handleCustomTextChange, 
+                      value: this.state.description})), 
+            React.DOM.button({type: "submit", className: "btn btn-success", 
+                    disabled: !this._isFormReady()}, 
               __("feedback_submit_button")
             )
           )
@@ -506,8 +506,8 @@ loop.shared.views = (function(_, OT, l10n) {
         window.close();
       }
       return (
-        FeedbackLayout( {title:__("feedback_thank_you_heading")}, 
-          React.DOM.p( {className:"info thank-you"}, __("feedback_window_will_close_in", {
+        FeedbackLayout({title: __("feedback_thank_you_heading")}, 
+          React.DOM.p({className: "info thank-you"}, __("feedback_window_will_close_in", {
             countdown: this.state.countdown
           }))
         )
@@ -565,20 +565,20 @@ loop.shared.views = (function(_, OT, l10n) {
     render: function() {
       switch(this.state.step) {
         case "finished":
-          return FeedbackReceived(null );
+          return FeedbackReceived(null);
         case "form":
-          return FeedbackForm( {feedbackApiClient:this.props.feedbackApiClient,
-                               sendFeedback:this.sendFeedback,
-                               reset:this.reset,
-                               pending:this.state.pending} );
+          return FeedbackForm({feedbackApiClient: this.props.feedbackApiClient, 
+                               sendFeedback: this.sendFeedback, 
+                               reset: this.reset, 
+                               pending: this.state.pending});
         default:
           return (
-            FeedbackLayout( {title:__("feedback_call_experience_heading")}, 
-              React.DOM.div( {className:"faces"}, 
-                React.DOM.button( {className:"face face-happy",
-                        onClick:this.handleHappyClick}),
-                React.DOM.button( {className:"face face-sad",
-                        onClick:this.handleSadClick})
+            FeedbackLayout({title: __("feedback_call_experience_heading")}, 
+              React.DOM.div({className: "faces"}, 
+                React.DOM.button({className: "face face-happy", 
+                        onClick: this.handleHappyClick}), 
+                React.DOM.button({className: "face face-sad", 
+                        onClick: this.handleSadClick})
               )
             )
           );

browser/components/loop/jar.mn

@@ -48,7 +48,7 @@ browser.jar:
   content/browser/loop/shared/js/utils.js             (content/shared/js/utils.js)
 
   # Shared libs
-  content/browser/loop/shared/libs/react-0.10.0.js    (content/shared/libs/react-0.10.0.js)
+  content/browser/loop/shared/libs/react-0.11.1.js    (content/shared/libs/react-0.11.1.js)
   content/browser/loop/shared/libs/lodash-2.4.1.js    (content/shared/libs/lodash-2.4.1.js)
   content/browser/loop/shared/libs/jquery-2.1.0.js    (content/shared/libs/jquery-2.1.0.js)
   content/browser/loop/shared/libs/backbone-1.1.2.js  (content/shared/libs/backbone-1.1.2.js)

browser/components/loop/standalone/content/index.html

@@ -26,7 +26,7 @@
     </script>
     <script type="text/javascript" src="shared/libs/sdk.js"></script>
     <script type="text/javascript" src="libs/webl10n-20130617.js"></script>
-    <script type="text/javascript" src="shared/libs/react-0.10.0.js"></script>
+    <script type="text/javascript" src="shared/libs/react-0.11.1.js"></script>
     <script type="text/javascript" src="shared/libs/jquery-2.1.0.js"></script>
     <script type="text/javascript" src="shared/libs/lodash-2.4.1.js"></script>
     <script type="text/javascript" src="shared/libs/backbone-1.1.2.js"></script>

browser/components/loop/standalone/content/js/webapp.js

@@ -42,14 +42,14 @@ loop.webapp = (function($, _, OT, webL10n) {
 
     render: function() {
       if (this.props.helper.isFirefox(navigator.userAgent)) {
-        return React.DOM.div(null );
+        return React.DOM.div(null);
       }
       return (
-        React.DOM.div( {className:"promote-firefox"}, 
-          React.DOM.h3(null, __("promote_firefox_hello_heading")),
+        React.DOM.div({className: "promote-firefox"}, 
+          React.DOM.h3(null, __("promote_firefox_hello_heading")), 
           React.DOM.p(null, 
-            React.DOM.a( {className:"btn btn-large btn-success",
-               href:"https://www.mozilla.org/firefox/"}, 
+            React.DOM.a({className: "btn btn-large btn-success", 
+               href: "https://www.mozilla.org/firefox/"}, 
               __("get_firefox_button")
             )
           )
@@ -69,13 +69,13 @@ loop.webapp = (function($, _, OT, webL10n) {
     render: function() {
       /* jshint ignore:start */
       return (
-        React.DOM.div( {className:"expired-url-info"}, 
-          React.DOM.div( {className:"info-panel"}, 
-            React.DOM.div( {className:"firefox-logo"} ),
-            React.DOM.h1(null, __("call_url_unavailable_notification_heading")),
+        React.DOM.div({className: "expired-url-info"}, 
+          React.DOM.div({className: "info-panel"}, 
+            React.DOM.div({className: "firefox-logo"}), 
+            React.DOM.h1(null, __("call_url_unavailable_notification_heading")), 
             React.DOM.h4(null, __("call_url_unavailable_notification_message"))
-          ),
-          PromoteFirefoxView( {helper:this.props.helper} )
+          ), 
+          PromoteFirefoxView({helper: this.props.helper})
         )
       );
       /* jshint ignore:end */
@@ -100,15 +100,15 @@ loop.webapp = (function($, _, OT, webL10n) {
 
       return (
         /* jshint ignore:start */
-        React.DOM.header( {className:"container-box"}, 
-          React.DOM.h1( {className:"light-weight-font"}, 
+        React.DOM.header({className: "container-box"}, 
+          React.DOM.h1({className: "light-weight-font"}, 
             React.DOM.strong(null, __("brandShortname")), " ", __("clientShortname")
-          ),
-          React.DOM.div( {className:"loop-logo", title:"Firefox WebRTC! logo"}),
-          React.DOM.h3( {className:"call-url"}, 
+          ), 
+          React.DOM.div({className: "loop-logo", title: "Firefox WebRTC! logo"}), 
+          React.DOM.h3({className: "call-url"}, 
             conversationUrl
-          ),
-          React.DOM.h4( {className:urlCreationDateClasses} , 
+          ), 
+          React.DOM.h4({className: urlCreationDateClasses}, 
             callUrlCreationDateString
           )
         )
@@ -120,8 +120,8 @@ loop.webapp = (function($, _, OT, webL10n) {
   var ConversationFooter = React.createClass({displayName: 'ConversationFooter',
     render: function() {
       return (
-        React.DOM.div( {className:"footer container-box"}, 
-          React.DOM.div( {title:"Mozilla Logo", className:"footer-logo"})
+        React.DOM.div({className: "footer container-box"}, 
+          React.DOM.div({title: "Mozilla Logo", className: "footer-logo"})
         )
       );
     }
@@ -217,34 +217,34 @@ loop.webapp = (function($, _, OT, webL10n) {
 
       return (
         /* jshint ignore:start */
-        React.DOM.div( {className:"container"}, 
-          React.DOM.div( {className:"container-box"}, 
+        React.DOM.div({className: "container"}, 
+          React.DOM.div({className: "container-box"}, 
 
-            ConversationHeader(
-              {urlCreationDateString:this.state.urlCreationDateString} ),
+            ConversationHeader({
+              urlCreationDateString: this.state.urlCreationDateString}), 
 
-            React.DOM.p( {className:"large-font light-weight-font"}, 
+            React.DOM.p({className: "large-font light-weight-font"}, 
               __("initiate_call_button_label")
-            ),
+            ), 
 
-            React.DOM.div( {id:"messages"}),
+            React.DOM.div({id: "messages"}), 
 
-            React.DOM.div( {className:"button-group"}, 
-              React.DOM.div( {className:"flex-padding-1"}),
-              React.DOM.button( {ref:"submitButton", onClick:this._initiate,
-                className:callButtonClasses,
-                disabled:this.state.disableCallButton}, 
-                __("initiate_call_button"),
-                React.DOM.i( {className:"icon icon-video"})
-              ),
-              React.DOM.div( {className:"flex-padding-1"})
-            ),
+            React.DOM.div({className: "button-group"}, 
+              React.DOM.div({className: "flex-padding-1"}), 
+              React.DOM.button({ref: "submitButton", onClick: this._initiate, 
+                className: callButtonClasses, 
+                disabled: this.state.disableCallButton}, 
+                __("initiate_call_button"), 
+                React.DOM.i({className: "icon icon-video"})
+              ), 
+              React.DOM.div({className: "flex-padding-1"})
+            ), 
 
-            React.DOM.p( {className:"terms-service",
-               dangerouslySetInnerHTML:{__html: tosHTML}})
-          ),
+            React.DOM.p({className: "terms-service", 
+               dangerouslySetInnerHTML: {__html: tosHTML}})
+          ), 
 
-          ConversationFooter(null )
+          ConversationFooter(null)
         )
         /* jshint ignore:end */
       );

browser/components/loop/test/desktop-local/conversation_test.js

@@ -159,7 +159,7 @@ describe("loop.conversation", function() {
             sinon.assert.calledOnce(router.loadReactComponent);
             sinon.assert.calledWith(router.loadReactComponent,
               sinon.match(function(value) {
-                return TestUtils.isComponentOfType(value,
+                return TestUtils.isDescriptorOfType(value,
                   loop.conversation.IncomingCallView);
               }));
         });
@@ -207,7 +207,7 @@ describe("loop.conversation", function() {
           sinon.assert.calledOnce(router.loadReactComponent);
           sinon.assert.calledWith(router.loadReactComponent,
             sinon.match(function(value) {
-              return TestUtils.isComponentOfType(value,
+              return TestUtils.isDescriptorOfType(value,
                 loop.shared.views.ConversationView);
             }));
         });
@@ -273,7 +273,7 @@ describe("loop.conversation", function() {
           sinon.assert.calledOnce(router.loadReactComponent);
           sinon.assert.calledWith(router.loadReactComponent,
             sinon.match(function(value) {
-              return TestUtils.isComponentOfType(value,
+              return TestUtils.isDescriptorOfType(value,
                 loop.shared.views.FeedbackView);
             }));
         });

browser/components/loop/test/desktop-local/index.html

@@ -16,7 +16,7 @@
   <div id="fixtures"></div>
   <!-- libs -->
   <script src="../../content/libs/l10n.js"></script>
-  <script src="../../content/shared/libs/react-0.10.0.js"></script>
+  <script src="../../content/shared/libs/react-0.11.1.js"></script>
   <script src="../../content/shared/libs/jquery-2.1.0.js"></script>
   <script src="../../content/shared/libs/lodash-2.4.1.js"></script>
   <script src="../../content/shared/libs/backbone-1.1.2.js"></script>

browser/components/loop/test/desktop-local/panel_test.js

@@ -110,7 +110,7 @@ describe("loop.panel", function() {
           sinon.assert.calledOnce(router.loadReactComponent);
           sinon.assert.calledWithExactly(router.loadReactComponent,
             sinon.match(function(value) {
-              return React.addons.TestUtils.isComponentOfType(
+              return React.addons.TestUtils.isDescriptorOfType(
                 value, loop.panel.PanelView);
             }));
         });

browser/components/loop/test/shared/index.html

@@ -16,7 +16,7 @@
   <div id="fixtures"></div>
 
   <!-- libs -->
-  <script src="../../content/shared/libs/react-0.10.0.js"></script>
+  <script src="../../content/shared/libs/react-0.11.1.js"></script>
   <script src="../../content/shared/libs/jquery-2.1.0.js"></script>
   <script src="../../content/shared/libs/lodash-2.4.1.js"></script>
   <script src="../../content/shared/libs/backbone-1.1.2.js"></script>

browser/components/loop/test/standalone/index.html

@@ -16,7 +16,7 @@
   <div id="messages"></div>
   <div id="fixtures"></div>
   <!-- libs -->
-  <script src="../../content/shared/libs/react-0.10.0.js"></script>
+  <script src="../../content/shared/libs/react-0.11.1.js"></script>
   <script src="../../content/shared/libs/jquery-2.1.0.js"></script>
   <script src="../../content/shared/libs/lodash-2.4.1.js"></script>
   <script src="../../content/shared/libs/backbone-1.1.2.js"></script>

browser/components/loop/test/standalone/webapp_test.js

@@ -149,7 +149,7 @@ describe("loop.webapp", function() {
           sinon.assert.calledOnce(router.loadReactComponent);
           sinon.assert.calledWith(router.loadReactComponent,
             sinon.match(function(value) {
-              return React.addons.TestUtils.isComponentOfType(
+              return React.addons.TestUtils.isDescriptorOfType(
                 value, loop.webapp.CallUrlExpiredView);
             }));
         });
@@ -168,7 +168,7 @@ describe("loop.webapp", function() {
           sinon.assert.calledOnce(router.loadReactComponent);
           sinon.assert.calledWithExactly(router.loadReactComponent,
             sinon.match(function(value) {
-              return React.addons.TestUtils.isComponentOfType(
+              return React.addons.TestUtils.isDescriptorOfType(
                 value, loop.webapp.ConversationFormView);
             }));
         });
@@ -193,7 +193,7 @@ describe("loop.webapp", function() {
           sinon.assert.calledOnce(router.loadReactComponent);
           sinon.assert.calledWith(router.loadReactComponent,
             sinon.match(function(value) {
-              return React.addons.TestUtils.isComponentOfType(
+              return React.addons.TestUtils.isDescriptorOfType(
                 value, loop.shared.views.ConversationView);
             }));
         });

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

@@ -44,10 +44,10 @@
     render: function() {
       var cx = React.addons.classSet;
       return (
-        React.DOM.div( {className:"example"}, 
-          React.DOM.h3(null, this.props.summary),
-          React.DOM.div( {className:cx({comp: true, dashed: this.props.dashed}),
-               style:this.props.style || {}}, 
+        React.DOM.div({className: "example"}, 
+          React.DOM.h3(null, this.props.summary), 
+          React.DOM.div({className: cx({comp: true, dashed: this.props.dashed}), 
+               style: this.props.style || {}}, 
             this.props.children
           )
         )
@@ -58,8 +58,8 @@
   var Section = React.createClass({displayName: 'Section',
     render: function() {
       return (
-        React.DOM.section( {id:this.props.name}, 
-          React.DOM.h1(null, this.props.name),
+        React.DOM.section({id: this.props.name}, 
+          React.DOM.h1(null, this.props.name), 
           this.props.children
         )
       );
@@ -69,19 +69,19 @@
   var ShowCase = React.createClass({displayName: 'ShowCase',
     render: function() {
       return (
-        React.DOM.div( {className:"showcase"}, 
+        React.DOM.div({className: "showcase"}, 
           React.DOM.header(null, 
-            React.DOM.h1(null, "Loop UI Components Showcase"),
-            React.DOM.nav( {className:"menu"}, 
+            React.DOM.h1(null, "Loop UI Components Showcase"), 
+            React.DOM.nav({className: "menu"}, 
               React.Children.map(this.props.children, function(section) {
                 return (
-                  React.DOM.a( {className:"btn btn-info", href:"#" + section.props.name}, 
+                  React.DOM.a({className: "btn btn-info", href: "#" + section.props.name}, 
                     section.props.name
                   )
                 );
               })
             )
-          ),
+          ), 
           this.props.children
         )
       );
@@ -92,58 +92,58 @@
     render: function() {
       return (
         ShowCase(null, 
-          Section( {name:"PanelView"}, 
-            Example( {summary:"332px wide", dashed:"true", style:{width: "332px"}}, 
-              PanelView(null )
+          Section({name: "PanelView"}, 
+            Example({summary: "332px wide", dashed: "true", style: {width: "332px"}}, 
+              PanelView(null)
             )
-          ),
+          ), 
 
-          Section( {name:"IncomingCallView"}, 
-            Example( {summary:"Default", dashed:"true", style:{width: "280px"}}, 
-              IncomingCallView(null )
+          Section({name: "IncomingCallView"}, 
+            Example({summary: "Default", dashed: "true", style: {width: "280px"}}, 
+              IncomingCallView(null)
             )
-          ),
+          ), 
 
-          Section( {name:"ConversationToolbar"}, 
-            Example( {summary:"Default"}, 
-              ConversationToolbar( {video:{enabled: true}, audio:{enabled: true}} )
-            ),
-            Example( {summary:"Video muted"}, 
-              ConversationToolbar( {video:{enabled: false}, audio:{enabled: true}} )
-            ),
-            Example( {summary:"Audio muted"}, 
-              ConversationToolbar( {video:{enabled: true}, audio:{enabled: false}} )
+          Section({name: "ConversationToolbar"}, 
+            Example({summary: "Default"}, 
+              ConversationToolbar({video: {enabled: true}, audio: {enabled: true}})
+            ), 
+            Example({summary: "Video muted"}, 
+              ConversationToolbar({video: {enabled: false}, audio: {enabled: true}})
+            ), 
+            Example({summary: "Audio muted"}, 
+              ConversationToolbar({video: {enabled: true}, audio: {enabled: false}})
             )
-          ),
+          ), 
 
-          Section( {name:"ConversationView"}, 
-            Example( {summary:"Default"}, 
-              ConversationView( {video:{enabled: true}, audio:{enabled: true}} )
+          Section({name: "ConversationView"}, 
+            Example({summary: "Default"}, 
+              ConversationView({video: {enabled: true}, audio: {enabled: true}})
             )
-          ),
+          ), 
 
-          Section( {name:"FeedbackView"}, 
-            React.DOM.p( {className:"note"}, 
-              React.DOM.strong(null, "Note:"), " For the useable demo, you can access submitted data at ",
-              React.DOM.a( {href:"https://input.allizom.org/"}, "input.allizom.org"),"."
-            ),
-            Example( {summary:"Default (useable demo)", dashed:"true", style:{width: "280px"}}, 
-              FeedbackView( {feedbackApiClient:stageFeedbackApiClient} )
-            ),
-            Example( {summary:"Detailed form", dashed:"true", style:{width: "280px"}}, 
-              FeedbackView( {step:"form"} )
-            ),
-            Example( {summary:"Thank you!", dashed:"true", style:{width: "280px"}}, 
-              FeedbackView( {step:"finished"} )
+          Section({name: "FeedbackView"}, 
+            React.DOM.p({className: "note"}, 
+              React.DOM.strong(null, "Note:"), " For the useable demo, you can access submitted data at ", 
+              React.DOM.a({href: "https://input.allizom.org/"}, "input.allizom.org"), "."
+            ), 
+            Example({summary: "Default (useable demo)", dashed: "true", style: {width: "280px"}}, 
+              FeedbackView({feedbackApiClient: stageFeedbackApiClient})
+            ), 
+            Example({summary: "Detailed form", dashed: "true", style: {width: "280px"}}, 
+              FeedbackView({step: "form"})
+            ), 
+            Example({summary: "Thank you!", dashed: "true", style: {width: "280px"}}, 
+              FeedbackView({step: "finished"})
             )
-          ),
+          ), 
 
-          Section( {name:"CallUrlExpiredView"}, 
-            Example( {summary:"Firefox User"}, 
-              CallUrlExpiredView( {helper:{isFirefox: returnTrue}} )
-            ),
-            Example( {summary:"Non-Firefox User"}, 
-              CallUrlExpiredView( {helper:{isFirefox: returnFalse}} )
+          Section({name: "CallUrlExpiredView"}, 
+            Example({summary: "Firefox User"}, 
+              CallUrlExpiredView({helper: {isFirefox: returnTrue}})
+            ), 
+            Example({summary: "Non-Firefox User"}, 
+              CallUrlExpiredView({helper: {isFirefox: returnFalse}})
             )
           )
         )
@@ -152,6 +152,6 @@
   });
 
   window.addEventListener("DOMContentLoaded", function() {
-    React.renderComponent(App(null ), document.body);
+    React.renderComponent(App(null), document.body);
   });
 })();