Merge m-c to inbound, a=merge

CLOBBER

@@ -22,5 +22,5 @@
 # changes to stick? As of bug 928195, this shouldn't be necessary! Please
 # don't change CLOBBER for WebIDL changes any more.
 
-Bug 1179909 - Android's build system apparently doesn't pick up the removal of
-a Cpptest from the moz.build file and errors out trying to run it anyway.
+Bug 1195388 - Moving location of generated R.java files requires a
+clobber.

b2g/config/aries/sources.xml

@@ -15,7 +15,7 @@
   <project name="platform_build" path="build" remote="b2g" revision="aacd9b12da7fc3c8f4deaaa8eedfbb158f4fefe7">
     <copyfile dest="Makefile" src="core/root.mk"/>
   </project>
-  <project name="gaia" path="gaia" remote="mozillaorg" revision="89e0096a3de0378e3eda77e6a2a0bb5ca03eb8bb"/>
+  <project name="gaia" path="gaia" remote="mozillaorg" revision="c6705f739fb605031eb2a0b943ba55c64bee5a03"/>
   <project name="fake-libdvm" path="dalvik" remote="b2g" revision="d50ae982b19f42f0b66d08b9eb306be81687869f"/>
   <project name="gonk-misc" path="gonk-misc" remote="b2g" revision="62cfa11ae7d77f6330de019a5aa79607e35be7d1"/>
   <project name="librecovery" path="librecovery" remote="b2g" revision="1b3591a50ed352fc6ddb77462b7b35d0bfa555a3"/>

b2g/config/dolphin/sources.xml

@@ -15,7 +15,7 @@
   <project name="platform_build" path="build" remote="b2g" revision="aacd9b12da7fc3c8f4deaaa8eedfbb158f4fefe7">
     <copyfile dest="Makefile" src="core/root.mk"/>
   </project>
-  <project name="gaia" path="gaia" remote="mozillaorg" revision="89e0096a3de0378e3eda77e6a2a0bb5ca03eb8bb"/>
+  <project name="gaia" path="gaia" remote="mozillaorg" revision="c6705f739fb605031eb2a0b943ba55c64bee5a03"/>
   <project name="fake-libdvm" path="dalvik" remote="b2g" revision="d50ae982b19f42f0b66d08b9eb306be81687869f"/>
   <project name="gonk-misc" path="gonk-misc" remote="b2g" revision="62cfa11ae7d77f6330de019a5aa79607e35be7d1"/>
   <project name="librecovery" path="librecovery" remote="b2g" revision="1b3591a50ed352fc6ddb77462b7b35d0bfa555a3"/>

b2g/config/emulator-ics/sources.xml

@@ -19,7 +19,7 @@
     <copyfile dest="Makefile" src="core/root.mk"/>
   </project>
   <project name="fake-dalvik" path="dalvik" remote="b2g" revision="ca1f327d5acc198bb4be62fa51db2c039032c9ce"/>
-  <project name="gaia.git" path="gaia" remote="mozillaorg" revision="89e0096a3de0378e3eda77e6a2a0bb5ca03eb8bb"/>
+  <project name="gaia.git" path="gaia" remote="mozillaorg" revision="c6705f739fb605031eb2a0b943ba55c64bee5a03"/>
   <project name="gonk-misc" path="gonk-misc" remote="b2g" revision="62cfa11ae7d77f6330de019a5aa79607e35be7d1"/>
   <project name="rilproxy" path="rilproxy" remote="b2g" revision="5ef30994f4778b4052e58a4383dbe7890048c87e"/>
   <project name="platform_hardware_ril" path="hardware/ril" remote="b2g" revision="2d58f4b9206b50b8fda0d5036da6f0c62608db7c"/>

b2g/config/emulator-jb/sources.xml

@@ -17,7 +17,7 @@
   </project>
   <project name="rilproxy" path="rilproxy" remote="b2g" revision="5ef30994f4778b4052e58a4383dbe7890048c87e"/>
   <project name="fake-libdvm" path="dalvik" remote="b2g" revision="d50ae982b19f42f0b66d08b9eb306be81687869f"/>
-  <project name="gaia" path="gaia" remote="mozillaorg" revision="89e0096a3de0378e3eda77e6a2a0bb5ca03eb8bb"/>
+  <project name="gaia" path="gaia" remote="mozillaorg" revision="c6705f739fb605031eb2a0b943ba55c64bee5a03"/>
   <project name="gonk-misc" path="gonk-misc" remote="b2g" revision="62cfa11ae7d77f6330de019a5aa79607e35be7d1"/>
   <project name="moztt" path="external/moztt" remote="b2g" revision="bfdb6348725a33bdcdc4e17999cb500be6beedb5"/>
   <project name="apitrace" path="external/apitrace" remote="apitrace" revision="a6f9a1245d98c51172c15afecb9ade1a6ca511e2"/>

b2g/config/emulator-kk/sources.xml

@@ -15,7 +15,7 @@
   <project name="platform_build" path="build" remote="b2g" revision="aacd9b12da7fc3c8f4deaaa8eedfbb158f4fefe7">
     <copyfile dest="Makefile" src="core/root.mk"/>
   </project>
-  <project name="gaia" path="gaia" remote="mozillaorg" revision="89e0096a3de0378e3eda77e6a2a0bb5ca03eb8bb"/>
+  <project name="gaia" path="gaia" remote="mozillaorg" revision="c6705f739fb605031eb2a0b943ba55c64bee5a03"/>
   <project name="fake-libdvm" path="dalvik" remote="b2g" revision="d50ae982b19f42f0b66d08b9eb306be81687869f"/>
   <project name="gonk-misc" path="gonk-misc" remote="b2g" revision="62cfa11ae7d77f6330de019a5aa79607e35be7d1"/>
   <project name="librecovery" path="librecovery" remote="b2g" revision="1b3591a50ed352fc6ddb77462b7b35d0bfa555a3"/>

b2g/config/emulator-l/sources.xml

@@ -15,7 +15,7 @@
   <project name="platform_build" path="build" remote="b2g" revision="05a36844c1046a1eb07d5b1325f85ed741f961ea">
     <copyfile dest="Makefile" src="core/root.mk"/>
   </project>
-  <project name="gaia" path="gaia" remote="mozillaorg" revision="89e0096a3de0378e3eda77e6a2a0bb5ca03eb8bb"/>
+  <project name="gaia" path="gaia" remote="mozillaorg" revision="c6705f739fb605031eb2a0b943ba55c64bee5a03"/>
   <project name="fake-libdvm" path="dalvik" remote="b2g" revision="d50ae982b19f42f0b66d08b9eb306be81687869f"/>
   <project name="gonk-misc" path="gonk-misc" remote="b2g" revision="62cfa11ae7d77f6330de019a5aa79607e35be7d1"/>
   <project name="librecovery" path="librecovery" remote="b2g" revision="1b3591a50ed352fc6ddb77462b7b35d0bfa555a3"/>

b2g/config/emulator/sources.xml

@@ -19,7 +19,7 @@
     <copyfile dest="Makefile" src="core/root.mk"/>
   </project>
   <project name="fake-dalvik" path="dalvik" remote="b2g" revision="ca1f327d5acc198bb4be62fa51db2c039032c9ce"/>
-  <project name="gaia.git" path="gaia" remote="mozillaorg" revision="89e0096a3de0378e3eda77e6a2a0bb5ca03eb8bb"/>
+  <project name="gaia.git" path="gaia" remote="mozillaorg" revision="c6705f739fb605031eb2a0b943ba55c64bee5a03"/>
   <project name="gonk-misc" path="gonk-misc" remote="b2g" revision="62cfa11ae7d77f6330de019a5aa79607e35be7d1"/>
   <project name="rilproxy" path="rilproxy" remote="b2g" revision="5ef30994f4778b4052e58a4383dbe7890048c87e"/>
   <project name="platform_hardware_ril" path="hardware/ril" remote="b2g" revision="2d58f4b9206b50b8fda0d5036da6f0c62608db7c"/>

b2g/config/flame-kk/sources.xml

@@ -15,7 +15,7 @@
   <project name="platform_build" path="build" remote="b2g" revision="aacd9b12da7fc3c8f4deaaa8eedfbb158f4fefe7">
     <copyfile dest="Makefile" src="core/root.mk"/>
   </project>
-  <project name="gaia" path="gaia" remote="mozillaorg" revision="89e0096a3de0378e3eda77e6a2a0bb5ca03eb8bb"/>
+  <project name="gaia" path="gaia" remote="mozillaorg" revision="c6705f739fb605031eb2a0b943ba55c64bee5a03"/>
   <project name="fake-libdvm" path="dalvik" remote="b2g" revision="d50ae982b19f42f0b66d08b9eb306be81687869f"/>
   <project name="gonk-misc" path="gonk-misc" remote="b2g" revision="62cfa11ae7d77f6330de019a5aa79607e35be7d1"/>
   <project name="librecovery" path="librecovery" remote="b2g" revision="1b3591a50ed352fc6ddb77462b7b35d0bfa555a3"/>

b2g/config/gaia.json

@@ -1,9 +1,9 @@
 {
     "git": {
-        "git_revision": "89e0096a3de0378e3eda77e6a2a0bb5ca03eb8bb", 
+        "git_revision": "c6705f739fb605031eb2a0b943ba55c64bee5a03", 
         "remote": "https://git.mozilla.org/releases/gaia.git", 
         "branch": ""
     }, 
-    "revision": "68da3c242dcd332c0aa579fbdc9da20d9db60022", 
+    "revision": "69fd2d2a3adce973a5e86ea2f96d1e311e11239d", 
     "repo_path": "integration/gaia-central"
 }

b2g/config/nexus-4/sources.xml

@@ -17,7 +17,7 @@
   </project>
   <project name="rilproxy" path="rilproxy" remote="b2g" revision="5ef30994f4778b4052e58a4383dbe7890048c87e"/>
   <project name="fake-libdvm" path="dalvik" remote="b2g" revision="d50ae982b19f42f0b66d08b9eb306be81687869f"/>
-  <project name="gaia" path="gaia" remote="mozillaorg" revision="89e0096a3de0378e3eda77e6a2a0bb5ca03eb8bb"/>
+  <project name="gaia" path="gaia" remote="mozillaorg" revision="c6705f739fb605031eb2a0b943ba55c64bee5a03"/>
   <project name="gonk-misc" path="gonk-misc" remote="b2g" revision="62cfa11ae7d77f6330de019a5aa79607e35be7d1"/>
   <project name="moztt" path="external/moztt" remote="b2g" revision="bfdb6348725a33bdcdc4e17999cb500be6beedb5"/>
   <project name="apitrace" path="external/apitrace" remote="apitrace" revision="a6f9a1245d98c51172c15afecb9ade1a6ca511e2"/>

b2g/config/nexus-5-l/sources.xml

@@ -15,7 +15,7 @@
   <project name="platform_build" path="build" remote="b2g" revision="05a36844c1046a1eb07d5b1325f85ed741f961ea">
     <copyfile dest="Makefile" src="core/root.mk"/>
   </project>
-  <project name="gaia" path="gaia" remote="mozillaorg" revision="89e0096a3de0378e3eda77e6a2a0bb5ca03eb8bb"/>
+  <project name="gaia" path="gaia" remote="mozillaorg" revision="c6705f739fb605031eb2a0b943ba55c64bee5a03"/>
   <project name="fake-libdvm" path="dalvik" remote="b2g" revision="d50ae982b19f42f0b66d08b9eb306be81687869f"/>
   <project name="gonk-misc" path="gonk-misc" remote="b2g" revision="62cfa11ae7d77f6330de019a5aa79607e35be7d1"/>
   <project name="librecovery" path="librecovery" remote="b2g" revision="1b3591a50ed352fc6ddb77462b7b35d0bfa555a3"/>

browser/app/profile/firefox.js

@@ -1694,13 +1694,7 @@ pref("pdfjs.previousHandler.alwaysAskBeforeHandling", false);
 
 // Shumway is only bundled in Nightly.
 #ifdef NIGHTLY_BUILD
-// By default, Shumway (SWF player) is only enabled for whitelisted SWFs on Windows + OS X.
-#ifdef UNIX_BUT_NOT_MAC
 pref("shumway.disabled", true);
-#else
-pref("shumway.disabled", false);
-pref("shumway.swf.whitelist", "http://www.areweflashyet.com/*.swf");
-#endif
 #endif
 
 // The maximum amount of decoded image data we'll willingly keep around (we

browser/base/content/test/general/browser_urlbarSearchSuggestionsNotification.js

@@ -130,6 +130,18 @@ add_task(function* enable() {
   assertSuggestionsPresent(true);
 });
 
+add_task(function* privateWindow() {
+  // Since suggestions are disabled in private windows, the notification should
+  // not appear even when suggestions are otherwise enabled.
+  let win = yield BrowserTestUtils.openNewBrowserWindow({ private: true });
+  win.gURLBar.blur();
+  win.gURLBar.focus();
+  yield promiseAutocompleteResultPopup("foo", win);
+  assertVisible(false, win);
+  win.gURLBar.blur();
+  yield BrowserTestUtils.closeWindow(win);
+});
+
 function assertSuggestionsPresent(expectedPresent) {
   let controller = gURLBar.popup.input.controller;
   let matchCount = controller.matchCount;
@@ -147,9 +159,9 @@ function assertSuggestionsPresent(expectedPresent) {
   Assert.equal(actualPresent, expectedPresent);
 }
 
-function assertVisible(visible) {
+function assertVisible(visible, win=window) {
   let style =
-    window.getComputedStyle(gURLBar.popup.searchSuggestionsNotification);
+    win.getComputedStyle(win.gURLBar.popup.searchSuggestionsNotification);
   Assert.equal(style.visibility, visible ? "visible" : "collapse");
 }
 

browser/base/content/urlbarBindings.xml

@@ -932,6 +932,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
       <property name="shouldShowSearchSuggestionsNotification" readonly="true">
         <getter><![CDATA[
           return !this._userMadeSearchSuggestionsChoice &&
+                 !this.inPrivateContext &&
                  // When _urlbarFocused is true, tabbrowser would close the
                  // popup if it's opened here, so don't show the notification.
                  !gBrowser.selectedBrowser._urlbarFocused &&

browser/components/loop/content/css/panel.css

@@ -206,35 +206,12 @@ html[dir="rtl"] .tab-view li:nth-child(2).selected ~ .slide-bar {
   font-weight: 700;
 }
 
-#fte-getstarted {
-  padding-top: .5rem;
-  padding-bottom: .5rem;
-}
-
-#fte-title {
-  text-align: center;
-  margin-bottom: .5rem;
-}
-
-#fte-button {
-  width: 50%;
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  font-size: 1rem;
-  padding: .5rem 1rem;
-}
-
-#fte-getstarted + #powered-by-wrapper {
-  position: absolute;
-  bottom: 0;
-}
-
 /* Need to remove when these rules when the Beta tag is removed */
 #share-link-header {
   -moz-padding-start: 20px;
 }
-#fte-getstarted + .generate-url > #share-link-header,
+
+.fte-get-started-container + .generate-url > #share-link-header,
 .tab-view + .tab .content-area > .generate-url > #share-link-header {
   /* The header shouldn't be indented if the tabs are present. */
   -moz-padding-start: 0;
@@ -560,7 +537,7 @@ html[dir="rtl"] .tab-view li:nth-child(2).selected ~ .slide-bar {
   background-color: #ebebeb;
 }
 
-.button:hover:active {
+.button:active {
   background-color: #ccc;
   color: #fff;
 }
@@ -595,6 +572,12 @@ html[dir="rtl"] .tab-view li:nth-child(2).selected ~ .slide-bar {
   color: #c3c3c3;
 }
 
+.button.button-accept:active {
+  background-color: #3aa689;
+  border-color: #3aa689;
+  color: #fff;
+}
+
 .button-close {
   background-color: transparent;
   background-image: url(../shared/img/icons-10x10.svg#close);
@@ -671,9 +654,8 @@ html[dir="rtl"] .generate-url-spinner {
   right: auto;
 }
 
-#fte-button,
 .generate-url .button {
-  background-color: #0096dd;
+  background-color: #00a9dc;
   border-color: #0096dd;
   color: #fff;
 }
@@ -681,18 +663,17 @@ html[dir="rtl"] .generate-url-spinner {
 .generate-url .button:hover {
   background-color: #008acb;
   border-color: #008acb;
-  color: #fff;
 }
 
 #powered-by,
 .terms-service {
-  color: #888;
-  font-size: .9em;
+  color: #4a4a4a;
+  font-size: 1.1rem;
 }
 
 #powered-by {
   border-top: 1px solid #ccc;
-  padding-top: .5rem;
+  padding-top: 1.5rem;
   text-align: center;
   margin-top: 0;
 }
@@ -750,13 +731,15 @@ html[dir="rtl"] .generate-url-spinner {
 }
 
 .terms-service {
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-bottom: .5rem;
+  padding-left: 5rem;
+  padding-right: 5rem;
+  padding-bottom: 1rem;
+  text-align: center;
 }
 
 .terms-service > a {
   color: #00a9dc;
+  text-decoration: none;
 }
 
 /* DnD menu */
@@ -930,3 +913,65 @@ html[dir="rtl"] .settings-menu .dropdown-menu {
   font-weight: bold;
   margin: 0;
 }
+
+/* First time use */
+
+.fte-get-started-content {
+  flex: 1;
+  padding: 4.5rem 0 3.4rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.fte-title {
+  flex: 1;
+  margin: 0 44px;
+}
+
+.fte-title > img {
+  width: 100%;
+}
+
+.fte-subheader {
+  text-align: center;
+  font-size: 1.8rem;
+  margin-bottom: 2rem;
+  color: #4a4a4a;
+}
+
+.fte-get-started-content + .powered-by-wrapper {
+  flex: 0;
+}
+
+.fte-get-started-container {
+  height: 100%;
+  width: 100%;
+  min-height: 270px;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-content: flex-start;
+  align-items: flex-start;
+  background: #fbfbfb;
+}
+
+.fte-get-started-button {
+  border: none;
+  color: #fff;
+  background-color: #00a9dc;
+  border-color: none;
+  line-height: 43px;
+  margin: 0 15px;
+  padding: 0;
+  border-radius: 4px;
+  font-size: 1.4rem;
+  font-weight: bold;
+}
+
+.fte-get-started-button:hover,
+.fte-get-started-button:focus,
+.fte-get-started-button:active {
+  background-color: #5cccee;
+  color: #fff;
+}

browser/components/loop/content/js/contacts.js

@@ -624,7 +624,7 @@ loop.contacts = (function(_, mozL10n) {
         return (
           React.createElement("div", {className: "contact-filter-container"}, 
             React.createElement("input", {className: "contact-filter", 
-                   placeholder: mozL10n.get("contacts_search_placesholder"), 
+                   placeholder: mozL10n.get("contacts_search_placesholder2"), 
                    valueLink: this.linkState("filter")}), 
             this._renderFilterClearButton()
           )

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

@@ -624,7 +624,7 @@ loop.contacts = (function(_, mozL10n) {
         return (
           <div className="contact-filter-container">
             <input className="contact-filter"
-                   placeholder={mozL10n.get("contacts_search_placesholder")}
+                   placeholder={mozL10n.get("contacts_search_placesholder2")}
                    valueLink={this.linkState("filter")} />
             {this._renderFilterClearButton()}
           </div>

browser/components/loop/content/js/conversationViews.js

@@ -698,14 +698,15 @@ loop.conversationViews = (function(mozL10n) {
             screenSharePosterUrl: null, 
             screenShareVideoObject: this.state.screenShareVideoObject, 
             showContextRoomName: false, 
-            useDesktopPaths: true}), 
-          React.createElement(loop.shared.views.ConversationToolbar, {
-            audio: this.props.audio, 
-            dispatcher: this.props.dispatcher, 
-            edit: { visible: false, enabled: false}, 
-            hangup: this.hangup, 
-            publishStream: this.publishStream, 
-            video: this.props.video})
+            useDesktopPaths: true}, 
+            React.createElement(loop.shared.views.ConversationToolbar, {
+              audio: this.props.audio, 
+              dispatcher: this.props.dispatcher, 
+              edit: { visible: false, enabled: false}, 
+              hangup: this.hangup, 
+              publishStream: this.publishStream, 
+              video: this.props.video})
+          )
         )
       );
     }
@@ -802,13 +803,13 @@ loop.conversationViews = (function(mozL10n) {
         }
         case CALL_STATES.ONGOING: {
           return (React.createElement(OngoingConversationView, {
-            audio: {enabled: !this.state.audioMuted}, 
+            audio: { enabled: !this.state.audioMuted, visible: true}, 
             conversationStore: this.getStore(), 
             dispatcher: this.props.dispatcher, 
             mediaConnected: this.state.mediaConnected, 
             remoteSrcVideoObject: this.state.remoteSrcVideoObject, 
             remoteVideoEnabled: this.state.remoteVideoEnabled, 
-            video: {enabled: !this.state.videoMuted}})
+            video: { enabled: !this.state.videoMuted, visible: true}})
           );
         }
         case CALL_STATES.FINISHED: {

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

@@ -698,14 +698,15 @@ loop.conversationViews = (function(mozL10n) {
             screenSharePosterUrl={null}
             screenShareVideoObject={this.state.screenShareVideoObject}
             showContextRoomName={false}
-            useDesktopPaths={true} />
-          <loop.shared.views.ConversationToolbar
-            audio={this.props.audio}
-            dispatcher={this.props.dispatcher}
-            edit={{ visible: false, enabled: false }}
-            hangup={this.hangup}
-            publishStream={this.publishStream}
-            video={this.props.video} />
+            useDesktopPaths={true}>
+            <loop.shared.views.ConversationToolbar
+              audio={this.props.audio}
+              dispatcher={this.props.dispatcher}
+              edit={{ visible: false, enabled: false }}
+              hangup={this.hangup}
+              publishStream={this.publishStream}
+              video={this.props.video} />
+          </sharedViews.MediaLayoutView>
         </div>
       );
     }
@@ -802,13 +803,13 @@ loop.conversationViews = (function(mozL10n) {
         }
         case CALL_STATES.ONGOING: {
           return (<OngoingConversationView
-            audio={{enabled: !this.state.audioMuted}}
+            audio={{ enabled: !this.state.audioMuted, visible: true }}
             conversationStore={this.getStore()}
             dispatcher={this.props.dispatcher}
             mediaConnected={this.state.mediaConnected}
             remoteSrcVideoObject={this.state.remoteSrcVideoObject}
             remoteVideoEnabled={this.state.remoteVideoEnabled}
-            video={{enabled: !this.state.videoMuted}} />
+            video={{ enabled: !this.state.videoMuted, visible: true }} />
           );
         }
         case CALL_STATES.FINISHED: {

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

@@ -188,6 +188,10 @@ loop.panel = (function(_, mozL10n) {
   var GettingStartedView = React.createClass({displayName: "GettingStartedView",
     mixins: [sharedMixins.WindowCloseMixin],
 
+    propTypes: {
+      mozLoop: React.PropTypes.object.isRequired
+    },
+
     handleButtonClick: function() {
       navigator.mozLoop.openGettingStartedTour("getting-started");
       navigator.mozLoop.setLoopPref("gettingStarted.seen", true);
@@ -197,17 +201,19 @@ loop.panel = (function(_, mozL10n) {
     },
 
     render: function() {
-      if (navigator.mozLoop.getLoopPref("gettingStarted.seen")) {
+      if (this.props.mozLoop.getLoopPref("gettingStarted.seen")) {
         return null;
       }
       return (
-        React.createElement("div", {id: "fte-getstarted"}, 
-          React.createElement("header", {id: "fte-title"}, 
-            mozL10n.get("first_time_experience_title", {
-              "clientShortname": mozL10n.get("clientShortname2")
-            })
+        React.createElement("div", {className: "fte-get-started-content"}, 
+          React.createElement("header", {className: "fte-title"}, 
+            React.createElement("img", {src: "loop/shared/img/hello_logo.svg"}), 
+            React.createElement("div", {className: "fte-subheader"}, 
+              mozL10n.get("first_time_experience_subheading")
+            )
           ), 
-          React.createElement(Button, {caption: mozL10n.get("first_time_experience_button_label"), 
+          React.createElement(Button, {additionalClass: "fte-get-started-button", 
+                  caption: mozL10n.get("first_time_experience_button_label"), 
                   htmlId: "fte-button", 
                   onClick: this.handleButtonClick})
         )
@@ -268,20 +274,24 @@ loop.panel = (function(_, mozL10n) {
   var ToSView = React.createClass({displayName: "ToSView",
     mixins: [sharedMixins.WindowCloseMixin],
 
+    propTypes: {
+      mozLoop: React.PropTypes.object.isRequired
+    },
+
     handleLinkClick: function(event) {
       if (!event.target || !event.target.href) {
         return;
       }
 
       event.preventDefault();
-      navigator.mozLoop.openURL(event.target.href);
+      this.props.mozLoop.openURL(event.target.href);
       this.closeWindow();
     },
 
     render: function() {
       var locale = mozL10n.getLanguage();
-      var terms_of_use_url = navigator.mozLoop.getLoopPref("legal.ToS_url");
-      var privacy_notice_url = navigator.mozLoop.getLoopPref("legal.privacy_url");
+      var terms_of_use_url = this.props.mozLoop.getLoopPref("legal.ToS_url");
+      var privacy_notice_url = this.props.mozLoop.getLoopPref("legal.privacy_url");
       var tosHTML = mozL10n.get("legal_text_and_links3", {
         "clientShortname": mozL10n.get("clientShortname2"),
         "terms_of_use": React.renderToStaticMarkup(
@@ -295,11 +305,12 @@ loop.panel = (function(_, mozL10n) {
           )
         )
       });
+
       return (
         React.createElement("div", {id: "powered-by-wrapper"}, 
           React.createElement("p", {className: "powered-by", id: "powered-by"}, 
             mozL10n.get("powered_by_beforeLogo"), 
-            React.createElement("img", {className: locale, id: "powered-by-logo"}), 
+            React.createElement("span", {className: locale, id: "powered-by-logo"}), 
             mozL10n.get("powered_by_afterLogo")
           ), 
           React.createElement("p", {className: "terms-service", 
@@ -939,12 +950,12 @@ loop.panel = (function(_, mozL10n) {
 
       if (!this.state.gettingStartedSeen) {
         return (
-          React.createElement("div", null, 
+          React.createElement("div", {className: "fte-get-started-container"}, 
             React.createElement(NotificationListView, {
               clearOnDocumentHidden: true, 
               notifications: this.props.notifications}), 
-            React.createElement(GettingStartedView, null), 
-            React.createElement(ToSView, null)
+            React.createElement(GettingStartedView, {mozLoop: this.props.mozLoop}), 
+            React.createElement(ToSView, {mozLoop: this.props.mozLoop})
           )
         );
       }

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

@@ -188,6 +188,10 @@ loop.panel = (function(_, mozL10n) {
   var GettingStartedView = React.createClass({
     mixins: [sharedMixins.WindowCloseMixin],
 
+    propTypes: {
+      mozLoop: React.PropTypes.object.isRequired
+    },
+
     handleButtonClick: function() {
       navigator.mozLoop.openGettingStartedTour("getting-started");
       navigator.mozLoop.setLoopPref("gettingStarted.seen", true);
@@ -197,17 +201,19 @@ loop.panel = (function(_, mozL10n) {
     },
 
     render: function() {
-      if (navigator.mozLoop.getLoopPref("gettingStarted.seen")) {
+      if (this.props.mozLoop.getLoopPref("gettingStarted.seen")) {
         return null;
       }
       return (
-        <div id="fte-getstarted">
-          <header id="fte-title">
-            {mozL10n.get("first_time_experience_title", {
-              "clientShortname": mozL10n.get("clientShortname2")
-            })}
+        <div className="fte-get-started-content">
+          <header className="fte-title">
+            <img src="loop/shared/img/hello_logo.svg" />
+            <div className="fte-subheader">
+              {mozL10n.get("first_time_experience_subheading")}
+            </div>
           </header>
-          <Button caption={mozL10n.get("first_time_experience_button_label")}
+          <Button additionalClass="fte-get-started-button"
+                  caption={mozL10n.get("first_time_experience_button_label")}
                   htmlId="fte-button"
                   onClick={this.handleButtonClick} />
         </div>
@@ -268,20 +274,24 @@ loop.panel = (function(_, mozL10n) {
   var ToSView = React.createClass({
     mixins: [sharedMixins.WindowCloseMixin],
 
+    propTypes: {
+      mozLoop: React.PropTypes.object.isRequired
+    },
+
     handleLinkClick: function(event) {
       if (!event.target || !event.target.href) {
         return;
       }
 
       event.preventDefault();
-      navigator.mozLoop.openURL(event.target.href);
+      this.props.mozLoop.openURL(event.target.href);
       this.closeWindow();
     },
 
     render: function() {
       var locale = mozL10n.getLanguage();
-      var terms_of_use_url = navigator.mozLoop.getLoopPref("legal.ToS_url");
-      var privacy_notice_url = navigator.mozLoop.getLoopPref("legal.privacy_url");
+      var terms_of_use_url = this.props.mozLoop.getLoopPref("legal.ToS_url");
+      var privacy_notice_url = this.props.mozLoop.getLoopPref("legal.privacy_url");
       var tosHTML = mozL10n.get("legal_text_and_links3", {
         "clientShortname": mozL10n.get("clientShortname2"),
         "terms_of_use": React.renderToStaticMarkup(
@@ -295,11 +305,12 @@ loop.panel = (function(_, mozL10n) {
           </a>
         )
       });
+
       return (
         <div id="powered-by-wrapper">
           <p className="powered-by" id="powered-by">
             {mozL10n.get("powered_by_beforeLogo")}
-            <img className={locale} id="powered-by-logo" />
+            <span className={locale} id="powered-by-logo"/>
             {mozL10n.get("powered_by_afterLogo")}
           </p>
           <p className="terms-service"
@@ -939,12 +950,12 @@ loop.panel = (function(_, mozL10n) {
 
       if (!this.state.gettingStartedSeen) {
         return (
-          <div>
+          <div className="fte-get-started-container">
             <NotificationListView
               clearOnDocumentHidden={true}
               notifications={this.props.notifications} />
-            <GettingStartedView />
-            <ToSView />
+            <GettingStartedView mozLoop={this.props.mozLoop} />
+            <ToSView mozLoop={this.props.mozLoop} />
           </div>
         );
       }

browser/components/loop/content/js/roomViews.js

@@ -743,6 +743,15 @@ loop.roomViews = (function(mozL10n) {
                 screenShareVideoObject: this.state.screenShareVideoObject, 
                 showContextRoomName: false, 
                 useDesktopPaths: true}, 
+                React.createElement(sharedViews.ConversationToolbar, {
+                  audio: {enabled: !this.state.audioMuted, visible: true}, 
+                  dispatcher: this.props.dispatcher, 
+                  edit: { visible: this.state.contextEnabled, enabled: !this.state.showEditContext}, 
+                  hangup: this.leaveRoom, 
+                  onEditClick: this.handleEditContextClick, 
+                  publishStream: this.publishStream, 
+                  screenShare: screenShareData, 
+                  video: {enabled: !this.state.videoMuted, visible: true}}), 
                 React.createElement(DesktopRoomInvitationView, {
                   dispatcher: this.props.dispatcher, 
                   error: this.state.error, 
@@ -762,16 +771,7 @@ loop.roomViews = (function(mozL10n) {
                   roomData: roomData, 
                   savingContext: this.state.savingContext, 
                   show: !shouldRenderInvitationOverlay && shouldRenderEditContextView})
-              ), 
-              React.createElement(sharedViews.ConversationToolbar, {
-                audio: {enabled: !this.state.audioMuted, visible: true}, 
-                dispatcher: this.props.dispatcher, 
-                edit: { visible: this.state.contextEnabled, enabled: !this.state.showEditContext}, 
-                hangup: this.leaveRoom, 
-                onEditClick: this.handleEditContextClick, 
-                publishStream: this.publishStream, 
-                screenShare: screenShareData, 
-                video: {enabled: !this.state.videoMuted, visible: true}})
+              )
             )
           );
         }

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

@@ -743,6 +743,15 @@ loop.roomViews = (function(mozL10n) {
                 screenShareVideoObject={this.state.screenShareVideoObject}
                 showContextRoomName={false}
                 useDesktopPaths={true}>
+                <sharedViews.ConversationToolbar
+                  audio={{enabled: !this.state.audioMuted, visible: true}}
+                  dispatcher={this.props.dispatcher}
+                  edit={{ visible: this.state.contextEnabled, enabled: !this.state.showEditContext }}
+                  hangup={this.leaveRoom}
+                  onEditClick={this.handleEditContextClick}
+                  publishStream={this.publishStream}
+                  screenShare={screenShareData}
+                  video={{enabled: !this.state.videoMuted, visible: true}} />
                 <DesktopRoomInvitationView
                   dispatcher={this.props.dispatcher}
                   error={this.state.error}
@@ -763,15 +772,6 @@ loop.roomViews = (function(mozL10n) {
                   savingContext={this.state.savingContext}
                   show={!shouldRenderInvitationOverlay && shouldRenderEditContextView} />
               </sharedViews.MediaLayoutView>
-              <sharedViews.ConversationToolbar
-                audio={{enabled: !this.state.audioMuted, visible: true}}
-                dispatcher={this.props.dispatcher}
-                edit={{ visible: this.state.contextEnabled, enabled: !this.state.showEditContext }}
-                hangup={this.leaveRoom}
-                onEditClick={this.handleEditContextClick}
-                publishStream={this.publishStream}
-                screenShare={screenShareData}
-                video={{enabled: !this.state.videoMuted, visible: true}} />
             </div>
           );
         }

browser/components/loop/content/shared/css/common.css

@@ -118,15 +118,15 @@ p {
 .btn-accept,
 .btn-success,
 .btn-accept + .btn-chevron {
-  background-color: #5bc0a4;
-  border: 1px solid #5bc0a4;
+  background-color: #56b397;
+  border: 1px solid #56b397;
 }
 
   .btn-accept:hover,
   .btn-success:hover,
   .btn-accept + .btn-chevron:hover {
-    background-color: #47b396;
-    border: 1px solid #47b396;
+    background-color: #50e3c2;
+    border: 1px solid #50e3c2;
   }
 
   .btn-accept:active,

browser/components/loop/content/shared/css/conversation.css

@@ -2,111 +2,135 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+html {
+  font-size: 10px;
+  font-family: menu;
+}
+
 /* Shared conversation window styles */
 .conversation {
   position: relative;
 }
 
-.conversation-toolbar {
-  z-index: 999; /* required to have it superimposed to the video element */
-  border: 1px solid #5a5a5a;
-  border-left: 0;
-  border-right: 0;
-  background: rgba(0,0,0,.70);
+button::-moz-focus-inner {
+  border: 0;
 }
 
-/* desktop version */
-.fx-embedded .conversation-toolbar {
-  /* required to have dropdowns float atop the .room-invitation-overlay: */
-  z-index: 1020;
+.conversation-toolbar {
+  z-index: 1020; /* required to have it superimposed to the video element */
+  border: 0;
+  left: 1.2rem;
+  right: .7rem;
+  height: 2.6rem;
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  /* note that .room-invitation-overlay top matches this */
-  height: 26px;
+  bottom: 1.5rem;
+}
+
+html[dir="rtl"] .conversation-toolbar {
+  left: .7rem;
+  right: 1.2rem;
+}
+
+.idle {
+  transition: opacity 1.5s;
+  opacity: .75;
 }
 
 /* standalone version */
-.standalone .conversation-toolbar {
-  padding: 20px;
-  height: 64px;
-  border: none;
-}
-
-.standalone .focus-stream {
-  /* Set at maximum height, minus height of conversation toolbar */
-  height: calc(100% - 64px);
-}
-
-.standalone .in-call .focus-stream {
-  height: 100%;
-}
 
 .conversation-toolbar > li {
   float: left;
+  margin-right: .7rem;
   font-size: 0; /* prevents vertical bottom padding added to buttons in google
                    chrome */
 }
 
-  .standalone .conversation-toolbar > li {
-    /* XXX Might make sense to use relative units here.
-     */
-    margin-right: 16px;
-  }
-
-.btn-edit-entry {
-  float: right !important;
-  border-left: 1px solid #5a5a5a;
+html[dir="rtl"] .conversation-toolbar > li {
+  float: right;
+  margin-left: .7rem;
+  margin-right: auto;
 }
 
-.conversation-toolbar-btn-box {
-  border-right: 1px solid #5a5a5a;
-}
-
-  .standalone .conversation-toolbar-btn-box {
-    /* overwrite the style for standalone
-     * because we reuse the same component */
-    border: none;
-  }
-
 .conversation-toolbar .btn {
-  /* dimensions according to spec
-   * https://people.mozilla.org/~dhenein/labs/loop-link-spec/#video-call */
-  width: 32px;
-  height: 24px;
   background-position: center;
-  background-size: 40%;
+  background-size: 28px;
   background-repeat: no-repeat;
+  background-color: transparent;
+  height: 28px;
+  width: 33px;
 }
 
-.standalone .media-control {
-  width: 36px;
+.conversation-toolbar-media-btn-group-box {
   background-position: center;
-  border-radius: 28px;
+  background-repeat: no-repeat;
+  background-color: transparent;
+  background-image: url("../img/svg/media-group.svg");
+  background-size: cover;
+  height: 28px;
+  width: 67px;
 }
 
-  .standalone-conversation-toolbar-media-btn:hover {
-    background-color: rgba(255,255,255,.35);
-  }
+.conversation-toolbar-media-btn-group-box > button:last-child:active,
+.conversation-toolbar-media-btn-group-box > button:last-child:hover {
+  background-image: url("../img/svg/media-group-right-hover.svg");
+  background-size: cover;
+}
+
+html[dir="rtl"] .conversation-toolbar-media-btn-group-box > button:last-child:active,
+html[dir="rtl"] .conversation-toolbar-media-btn-group-box > button:last-child:hover {
+  background-image: url("../img/svg/media-group-left-hover.svg");
+  background-size: cover;
+}
+
+.conversation-toolbar-media-btn-group-box > button:first-child:active,
+.conversation-toolbar-media-btn-group-box > button:first-child:hover {
+  background-image: url("../img/svg/media-group-left-hover.svg");
+  background-size: cover;
+}
+
+html[dir="rtl"] .conversation-toolbar-media-btn-group-box > button:first-child:active,
+html[dir="rtl"] .conversation-toolbar-media-btn-group-box > button:first-child:hover {
+  background-image: url("../img/svg/media-group-right-hover.svg");
+  background-size: cover;
+}
+
+.conversation-toolbar-media-btn-group-box > li {
+  float: left;
+}
+
+html[dir="rtl"] .conversation-toolbar-media-btn-group-box > li {
+  float: right;
+}
+
+.conversation-toolbar-btn-box.btn-edit-entry {
+  float: right;
+}
+
+html[dir="rtl"] .conversation-toolbar-btn-box.btn-edit-entry {
+  float: left;
+}
 
 .fx-embedded-answer-btn-text {
-  vertical-align: bottom;
   /* always leave space for the icon (width and margin) */
-  max-width: calc(100% - .8rem - .2rem);
+  max-width: calc(100% - 24px - .2rem);
+  height: 22px;
+  line-height: 22px;
 }
 
 .fx-embedded-btn-icon-video,
 .fx-embedded-btn-icon-audio {
+  width: 24px;
+  height: 24px;
   display: inline-block;
-  vertical-align: top;
-  width: .8rem;
-  height: .8rem;
   background-repeat: no-repeat;
-  cursor: pointer;
+  background-position: center;
+  background-size: 14px 14px;
+  border-radius: 50%;
   -moz-margin-start: .2rem;
 }
 
+/* conversationViews.jsx */
+
 .fx-embedded-btn-icon-video,
 .fx-embedded-btn-video-small,
 .fx-embedded-tiny-video-icon {
@@ -124,113 +148,80 @@
   width: 26px;
   height: 26px;
   border-left: 1px solid rgba(255,255,255,.4);
+  background-color: #56b397;
   border-top-right-radius: 2px;
   border-bottom-right-radius: 2px;
-  background-color: #5bc0a4;
   background-position: center;
-  background-size: 1rem;
   background-repeat: no-repeat;
   cursor: pointer;
 }
 
   .fx-embedded-btn-video-small:hover,
   .fx-embedded-btn-audio-small:hover {
-    background-color: #6cb23e;
+    background-color: #50e3c2;
   }
 
-@media (min-resolution: 2dppx) {
-  .fx-embedded-btn-audio-small {
-    background-image: url("../img/audio-inverse-14x14@2x.png");
-  }
-  .fx-embedded-btn-video-small {
-    background-image: url("../img/video-inverse-14x14@2x.png");
-  }
-}
-
-.standalone .btn-hangup {
-  width: auto;
-  font-size: 12px;
-  border-radius: 2px;
-  padding: 0 20px;
-}
-
-.fx-embedded .conversation-toolbar .btn-hangup {
-  background-image: url(../img/hangup-inverse-14x14.png);
-}
-@media (min-resolution: 2dppx) {
-  .fx-embedded .conversation-toolbar .btn-hangup {
-    background-image: url(../img/hangup-inverse-14x14@2x.png);
-  }
-}
-
-/* Common media control buttons behavior */
-.conversation-toolbar .transparent-button {
-  background-color: transparent;
-  opacity: 1;
-}
-.conversation-toolbar .transparent-button:hover,
-.conversation-toolbar .transparent-button.menu-showing {
-  background-color: rgba(255,255,255,.35);
-  opacity: 1;
-}
-.conversation-toolbar .media-control.muted {
-  background-color: #0096DD;
-  opacity: 1;
+.conversation-toolbar .btn-hangup {
+  background-image: url("../img/svg/exit.svg");
+  border: 0;
 }
 
 /* Audio mute button */
-.btn-mute-audio {
-  background-image: url(../img/audio-inverse-14x14.png);
+.btn-mute-audio:after {
+  content: url("../img/svg/audio.svg");
 }
-.btn-mute-audio.muted {
-  background-image: url(../img/mute-inverse-14x14.png);
+
+.btn-mute-audio.muted:after {
+  content: url("../img/svg/audio-mute.svg");
 }
-@media (min-resolution: 2dppx) {
-  .btn-mute-audio {
-    background-image: url(../img/audio-inverse-14x14@2x.png);
-  }
-  .btn-mute-audio.muted {
-    background-image: url(../img/mute-inverse-14x14@2x.png);
-  }
+.btn-mute-audio:hover:after,
+.btn-mute-audio:active:after {
+  content: url("../img/svg/audio-hover.svg");
+}
+
+.btn-mute-audio.muted:hover:after,
+.btn-mute-audio.muted:active:after {
+  content: url("../img/svg/audio-mute-hover.svg");
 }
 
 /* Video mute button */
-.btn-mute-video {
-  background-image: url(../img/video-inverse-14x14.png);
-}
-.btn-mute-video.muted {
-  background-image: url(../img/facemute-14x14.png);
-}
-@media (min-resolution: 2dppx) {
-  .btn-mute-video {
-    background-image: url(../img/video-inverse-14x14@2x.png);
-  }
-  .btn-mute-video.muted {
-    background-image: url(../img/facemute-14x14@2x.png);
-  }
+.btn-mute-video:after {
+  content: url("../img/svg/video.svg");
 }
 
-/* Screen share button */
-.btn-mute-edit,
-.btn-screen-share {
-  position: relative;
-  background-image: url(../img/icons-10x10.svg#edit-white);
-  background-size: 16px 16px;
+.btn-mute-video:active:after,
+.btn-mute-video:hover:after {
+  content: url("../img/svg/video-hover.svg");
+}
+
+.btn-mute-video.muted:after {
+  content: url("../img/svg/video-mute.svg");
+}
+
+.btn-mute-video.muted:hover:after,
+.btn-mute-video.muted:active:after {
+  content: url("../img/svg/video-mute-hover.svg");
+}
+
+.btn-mute-edit {
+  width: 28px;
+  height: 28px;
+  background-size: 28px;
+  background-image: url("../img/svg/settings.svg");
+}
+
+.btn-mute-edit:hover,
+.btn-mute-edit:active {
+  background-image: url("../img/svg/settings-hover.svg");
 }
 
 .btn-screen-share {
-  background-image: url(../img/icons-16x16.svg#screen-white);
-  width: 42px;
+  background-image: url("../img/svg/sharing.svg");
 }
 
-/* Make room for the chevron. */
-.conversation-toolbar .btn-screen-share:not(.active) {
-  background-position: 5px center;
-}
-
-.btn-screen-share.active {
-  background-image: url(../img/icons-16x16.svg#screenmute-white);
-  background-color: #6CB23E;
+.btn-screen-share:hover,
+.btn-screen-share:active {
+  background-image: url("../img/svg/sharing-hover.svg");
 }
 
 .btn-mute-edit.muted,
@@ -239,21 +230,7 @@
 }
 
 .btn-screen-share.disabled {
-  background-image: url(../img/icons-16x16.svg#screen-disabled);
-}
-
-.btn-screen-share .chevron {
-  background-image: url(../img/icons-10x10.svg#dropdown-white);
-  background-size: 10px 10px;
-  position: absolute;
-  right: 2px;
-  top: 8px;
-  width: 10px;
-  height: 10px;
-}
-
-.btn-screen-share.disabled .chevron {
-  background-image: url(../img/icons-10x10.svg#dropdown-disabled);
+  background-image: url("../img/svg/sharing-mute.svg");
 }
 
 .fx-embedded .remote_wrapper {
@@ -398,9 +375,13 @@
     background-color: #111;
   }
 
+.conversation-window-dropdown {
+  bottom: 4rem;
+}
+
 .conversation-window-dropdown > li {
-  padding: 2px;
-  font-size: .7rem;
+  padding: .2rem;
+  font-size: 1rem;
   white-space: nowrap;
 }
 
@@ -535,7 +516,8 @@
 /*
  * Used to center the loading spinner
  */
-.focus-stream, .remote {
+.focus-stream,
+.media-wrapper:not(.receiving-screen-share) > .remote {
   position: relative;
 }
 
@@ -620,19 +602,18 @@
 }
 
 .fx-embedded-call-detail {
-  padding-top: 1.2em;
+  padding-top: 0.6em;
 }
 
 .fx-embedded-tiny-video-icon {
-  margin: 0 0.8em;
+  margin: 0 .8em;
 }
 
 .fx-embedded-tiny-audio-icon,
 .fx-embedded-tiny-video-icon {
-  width: 18px;
-  height: 18px;
-  background-size: 12px 12px;
-  background-color: #4ba6e7;
+  width: 24px;
+  height: 24px;
+  background-color: #00a9dc;
   display: inline-block;
   background-repeat: no-repeat;
   background-position: center;
@@ -799,15 +780,14 @@ html[dir="rtl"] .room-conversation-wrapper header a {
 }
 
 .fx-embedded .room-conversation .conversation-toolbar .btn-hangup {
-  background-image: url("../img/icons-16x16.svg#leave");
+  background-image: url("../img/icons-14x14.svg#exit-white");
 }
 
 .room-invitation-overlay {
   position: absolute;
-  background: rgba(0,0,0,.6);
-  /* This matches .fx-embedded .conversation toolbar height */
-  top: 26px;
-  height: calc(100% - 26px);
+  background: rgba(255, 255, 255, 0.6);
+  top: 0;
+  height: 100%;
   right: 0;
   left: 0;
   text-align: center;
@@ -835,7 +815,7 @@ html[dir="rtl"] .room-conversation-wrapper header a {
 }
 
 .room-invitation-overlay .btn-group {
-  padding: 0 0 1em 0;
+  padding: 0 0 5rem 0;
 }
 
 .room-invitation-addcontext {
@@ -915,9 +895,7 @@ body[platform="win"] .share-service-dropdown.overflow > .dropdown-menu-item {
   left: 0;
   bottom: 0;
   width: 100%;
-  /* Stretch to the maximum available space whilst not covering the conversation
-     toolbar (26px). */
-  height: calc(100% - 26px);
+  height: 100%;
   font-size: .9em;
   display: flex;
   flex-flow: column nowrap;
@@ -1060,8 +1038,8 @@ html[dir="rtl"] .room-context-btn-close {
 }
 
 .standalone-room-wrapper > .media-layout {
-  /* 50px is the header, 64px for toolbar, 3em is the footer. */
-  height: calc(100% - 50px - 64px - 3em);
+  /* 50px is the header, 3em is the footer. */
+  height: calc(100% - 50px - 3em);
   margin: 0 10px;
 }
 
@@ -1109,6 +1087,10 @@ html[dir="rtl"] .room-context-btn-close {
   height: calc(100% - 150px);
 }
 
+.media-wrapper.showing-local-streams.receiving-screen-share {
+  position: relative;
+}
+
 .media-wrapper.showing-local-streams.receiving-screen-share > .text-chat-view {
   /* When we're displaying the local streams, then we need to make the text
      chat view a bit shorter to give room. */
@@ -1117,10 +1099,7 @@ html[dir="rtl"] .room-context-btn-close {
 
 .desktop-call-wrapper > .media-layout > .media-wrapper > .text-chat-view,
 .desktop-room-wrapper > .media-layout > .media-wrapper > .text-chat-view {
-  /* Account for height of .conversation-toolbar on desktop */
-  /* When we change the toolbar in bug 1184559 we can remove this. */
-  margin-top: 26px;
-  height: calc(100% - 150px - 26px);
+  height: calc(100% - 150px);
 }
 
 /* Temporarily slaved from .media-wrapper until we use it in more places
@@ -1199,6 +1178,11 @@ html[dir="rtl"] .room-context-btn-close {
     height: 100%;
   }
 
+  .media-wrapper > .focus-stream > .local ~ .conversation-toolbar {
+    /* 22px are the margins, 120px is for the local video area. */
+    max-width: calc(100% - 22px - 120px);
+  }
+
   .media-wrapper > .focus-stream > .local {
     /* Position over the remote video */
     position: absolute;
@@ -1206,6 +1190,7 @@ html[dir="rtl"] .room-context-btn-close {
     z-index: 2;
     margin: 3px;
     right: 0;
+    left:auto;
     /* 29px is (30% of 50px high header) + (height toolbar (38px) +
        height footer (25px) - height header (50px)) */
     bottom: 0;
@@ -1213,6 +1198,12 @@ html[dir="rtl"] .room-context-btn-close {
     height: 120px;
   }
 
+  html[dir="rtl"] .media-wrapper > .focus-stream > .local {
+    right: auto;
+    left: 0;
+  }
+
+
   .standalone-room-wrapper > .media-layout > .media-wrapper > .local {
     /* Add 10px for the margin on standalone */
     right: 10px;
@@ -1239,9 +1230,6 @@ html[dir="rtl"] .room-context-btn-close {
 
   .desktop-call-wrapper > .media-layout > .media-wrapper > .text-chat-view,
   .desktop-room-wrapper > .media-layout > .media-wrapper > .text-chat-view {
-    /* When we change the toolbar in bug 1184559 we can remove this. */
-    /* Reset back to 0 for .conversation-toolbar override on desktop */
-    margin-top: 0;
     /* This is temp, to echo the .media-wrapper > .text-chat-view above */
     height: 30%;
   }
@@ -1293,9 +1281,15 @@ html[dir="rtl"] .room-context-btn-close {
     flex-flow: column nowrap;
   }
 
+  .media-wrapper > .focus-stream > .local ~ .conversation-toolbar {
+    max-width: calc(75% - 22px);
+  }
+
   .media-wrapper > .focus-stream > .local {
     position: absolute;
+    display:fixed;
     right: 0;
+    left: auto;
     /* 30% is the height of the text chat. As we have a margin,
        we don't need to worry about any offset for a border */
     bottom: 0;
@@ -1307,6 +1301,11 @@ html[dir="rtl"] .room-context-btn-close {
     height: 25%;
   }
 
+  html[dir="rtl"] .media-wrapper > .focus-stream > .local {
+    left: 0;
+    right: auto;
+  }
+
   .media-wrapper:not(.showing-remote-streams) > .focus-stream > .no-video {
     display: none;
   }
@@ -1322,6 +1321,10 @@ html[dir="rtl"] .room-context-btn-close {
     background-color: black;
   }
 
+  .media-wrapper:not(.showing-remote-streams) > .focus-stream > .local ~ .conversation-toolbar {
+    max-width: calc(100% - 22px);
+  }
+
   .media-wrapper > .focus-stream {
     flex: 1 1 auto;
     height: auto;
@@ -1339,7 +1342,6 @@ html[dir="rtl"] .room-context-btn-close {
   height: 100%;
   background: #000;
 }
-
 .standalone .room-conversation-wrapper .video-layout-wrapper {
   /* 50px = height of header, 3em = height of footer */
   /* XXX This is currently wrong for narrow/mobile display,
@@ -1691,11 +1693,6 @@ html[dir="rtl"] .text-chat-entry.received .text-chat-arrow {
   .standalone .room-conversation .video_wrapper.remote_wrapper.not-joined {
     width: 100%;
   }
-
-  .standalone .conversation-toolbar {
-    height: 38px;
-    padding: 8px;
-  }
   .standalone .conversation .focus-stream {
     /* Set at maximum height, minus height of conversation toolbar */
     height: 100%;
@@ -1716,20 +1713,14 @@ html[dir="rtl"] .text-chat-entry.received .text-chat-arrow {
     max-height: 160px;
     /* 60px min-height of .text-chat-entries plus 40px of .text-chat-box */
     min-height: 100px;
-    /* The !important is to override the values defined above which have more
-       specificity when we fix bug 1184559, we should be able to remove it,
-       but this should be tested first. */
-    height: auto !important;
+    height: auto;
     /* Let the view be the minimum size it needs to be - don't flex to take up
        more. */
     flex: 0 0 auto !important;
   }
 
   .text-chat-entries {
-    /* The !important is to override the values defined above which have more
-       specificity when we fix bug 1184559, we should be able to remove it,
-       but this should be tests first. */
-    flex: 1 1 auto !important;
+    flex: 1 1 auto;
     max-height: 120px;
     min-height: 60px;
   }
@@ -1816,7 +1807,7 @@ html[dir="rtl"] .text-chat-entry.received .text-chat-arrow {
 /* Make sure the loading spinner always gets the same background */
 .loading-background {
   background: black;
-  position: absolute;
+  position: relative;
   width: 100%;
   height: 100%;
 }

browser/components/loop/content/shared/img/icons-14x14.svg

@@ -14,28 +14,30 @@
       fill: #444;
     }
     use[id$="-active"] {
-      fill: #0095dd;
+      fill:  #5cccee;
+    }
+    use[id$="-still"] {
+      fill:  #00a9dc;
     }
     use[id$="-white"] {
-      fill: #fff;
+      fill: #ffffff;
+    }
+    use[id$="-grey"] {
+      fill: #4a4a4a;
     }
   </style>
   <defs>
-    <path id="audio-shape" fill-rule="evenodd" d="M9.571,6.143v1.714c0,1.42-1.151,2.571-2.571,2.571 c-1.42,0-2.571-1.151-2.571-2.571V6.143H3.571v1.714c0,1.597,1.093,2.935,2.571,3.316v0.97H5.714c-0.56,0-1.034,0.358-1.211,0.857 h4.993c-0.177-0.499-0.651-0.857-1.211-0.857H7.857v-0.97c1.478-0.381,2.571-1.719,2.571-3.316V6.143H9.571z M7,10 c1.183,0,2.143-0.959,2.143-2.143V3.143C9.143,1.959,8.183,1,7,1C5.817,1,4.857,1.959,4.857,3.143v4.714C4.857,9.041,5.817,10,7,10 z"/>
-    <g id="facemute-shape">
-      <path fill-rule="evenodd" d="M12.174,3.551L9.568,5.856V5.847L3.39,11.49h5.066 c0.613,0,1.111-0.533,1.111-1.19V8.526l2.606,2.304C12.4,11.071,12.71,11.142,13,11.078V3.302C12.71,3.239,12.4,3.309,12.174,3.551 z"/>
-      <path fill-rule="evenodd" d="M12.395,2.617l-0.001-0.001l-0.809-0.884l-2.102,1.92 C9.316,3.221,8.919,2.918,8.457,2.918H2.111C1.498,2.918,1,3.451,1,4.109v6.191c0,0.318,0.118,0.607,0.306,0.821l-0.288,0.263 l0.809,0.884l0.001,0.001l0.853-0.779l6.887-6.29L12.395,2.617z"/>
-    </g>
-    <path id="hangup-shape" fill-rule="evenodd" d="M13,11.732c-0.602,0.52-1.254,0.946-1.941,1.267 c-1.825-0.337-4.164-1.695-6.264-3.795C2.696,7.106,1.339,4.769,1,2.945c0.321-0.688,0.748-1.341,1.268-1.944l2.528,2.855 C4.579,4.153,4.377,4.454,4.209,4.759L4.22,4.77C3.924,5.42,4.608,6.833,5.889,8.114c1.281,1.28,2.694,1.965,3.343,1.669 l0.011,0.011c0.305-0.168,0.606-0.37,0.904-0.587L13,11.732z"/>
-    <path id="incoming-shape" fill-rule="evenodd" d="M2.745,7.558l0.637,0.669c0.04,0.041,0.085,0.073,0.134,0.1 l3.249,3.313c0.38,0.393,0.915,0.478,1.197,0.186l0.638-0.676c0.281-0.292,0.2-0.848-0.18-1.244L7.097,8.558h3.566 c0.419,0,0.759-0.34,0.759-0.759V6.28c0-0.419-0.34-0.759-0.759-0.759H7.059l1.42-1.443c0.381-0.392,0.461-0.945,0.18-1.234 l-0.637-0.67C7.74,1.883,7.204,1.966,6.824,2.359L3.55,5.688C3.487,5.717,3.43,5.755,3.381,5.806L2.745,6.482 c-0.131,0.137-0.183,0.332-0.162,0.54C2.562,7.229,2.613,7.423,2.745,7.558z"/>
-    <path id="link-shape" fill-rule="evenodd" d="M7.359,6.107c0.757-0.757,0.757-1.995,0-2.752 L5.573,1.568c-0.757-0.757-1.995-0.757-2.752,0L1.568,2.82c-0.757,0.757-0.757,1.995,0,2.752l1.787,1.787 c0.757,0.757,1.995,0.757,2.752,0L6.266,7.2L6.8,7.734L6.641,7.893c-0.757,0.757-0.757,1.995,0,2.752l1.787,1.787 c0.757,0.757,1.995,0.757,2.752,0l1.253-1.253c0.757-0.757,0.757-1.995,0-2.752l-1.787-1.787c-0.757-0.757-1.995-0.757-2.752,0 L7.734,6.8L7.2,6.266L7.359,6.107z M9.87,7.868l1.335,1.335c0.294,0.294,0.294,0.774,0,1.068l-0.934,0.934 c-0.294,0.294-0.774,0.294-1.068,0L7.868,9.87c-0.294-0.294-0.294-0.774,0-1.068L8.13,9.064c0.294,0.294,0.744,0.324,1.001,0.067 C9.388,8.874,9.358,8.424,9.064,8.13L8.802,7.868C9.096,7.574,9.577,7.574,9.87,7.868z M4.13,6.132L2.795,4.797 c-0.294-0.294-0.294-0.774,0-1.068l0.934-0.934c0.294-0.294,0.774-0.294,1.068,0L6.132,4.13c0.294,0.294,0.294,0.774,0,1.068 L5.86,4.926C5.567,4.632,5.116,4.602,4.859,4.859C4.602,5.116,4.632,5.567,4.926,5.86l0.272,0.272 C4.904,6.426,4.423,6.426,4.13,6.132z"/>
-    <g id="mute-shape">
-      <path fill-rule="evenodd" d="M5.186,9.492L5.49,9.188l3.822-3.822l2.354-2.354l-0.848-0.848 L9.312,3.669V3.142C9.312,1.959,8.352,1,7.169,1C5.986,1,5.026,1.959,5.026,3.142v4.715c0,0.032,0.001,0.064,0.002,0.096 L4.643,8.338c-0.03-0.156-0.046-0.317-0.046-0.481V6.142H3.741v1.715c0,0.414,0.073,0.81,0.208,1.176l-1.615,1.615l0.848,0.848 l1.398-1.398v0L5.186,9.492z"/>
-      <path fill-rule="evenodd" d="M9.312,7.857V6.045L5.829,9.528C6.196,9.824,6.662,10,7.169,10 C8.352,10,9.312,9.04,9.312,7.857z"/>
-      <path fill-rule="evenodd" d="M9.741,7.857c0,1.42-1.151,2.572-2.572,2.572 c-0.625,0-1.199-0.223-1.645-0.595l-0.605,0.605c0.395,0.344,0.87,0.599,1.393,0.734v0.97H5.884c-0.56,0-1.034,0.359-1.212,0.858 h4.994c-0.178-0.499-0.652-0.858-1.212-0.858H8.026v-0.97c1.478-0.38,2.572-1.718,2.572-3.316V6.142H9.741V7.857z"/>
-    </g>
-    <path id="pause-shape" fill-rule="evenodd" d="M4.75,1h-1.5C2.836,1,2.5,1.336,2.5,1.75v10.5 C2.5,12.664,2.836,13,3.25,13h1.5c0.414,0,0.75-0.336,0.75-0.75V1.75C5.5,1.336,5.164,1,4.75,1z M10.75,1h-1.5 C8.836,1,8.5,1.336,8.5,1.75v10.5C8.5,12.664,8.836,13,9.25,13h1.5c0.414,0,0.75-0.336,0.75-0.75V1.75C11.5,1.336,11.164,1,10.75,1 z"/>
-    <path id="video-shape" d="M1.59247473,11.4075253 C1.9956945,11.7983901 2.46237364,12 3.02957694,12 L7.98333957,12 C8.53762636,12 9.01666043,11.7983901 9.40752527,11.4075253 C9.81130663,11.0043055 10,10.5376264 10,9.97042306 L10,8.81074504 L12.8360165,11.6467615 C12.9247473,11.7354923 13.0252714,11.7731187 13.1516286,11.7731187 C13.2145264,11.7731187 13.2650693,11.7607638 13.3279671,11.7354923 C13.517222,11.659678 13.6053912,11.5209659 13.6053912,11.319356 L13.6053912,3.66772744 C13.6053912,3.47903407 13.517222,3.34032198 13.3279671,3.25215275 C13.2650693,3.23923624 13.2145264,3.22688132 13.1516286,3.22688132 C13.0252714,3.22688132 12.9247473,3.26450768 12.8360165,3.3526769 L10,6.17633845 L10,5.01666043 C10,4.46181206 9.81130663,3.98333957 9.40752527,3.59247473 C9.01666043,3.18869337 8.53762636,3 7.98333957,3 L3.02957694,3 C2.46237364,3 1.9956945,3.18869337 1.59247473,3.59247473 C1.20160988,3.98333957 1,4.46181206 1,5.01666043 L1,9.97042306 C1,10.5376264 1.20160988,11.0043055 1.59247473,11.4075253" fill="#fff" fill-rule="evenodd"/>
+    <path id="audio-shape" fill-rule="evenodd" d="M12,6.49959616 C12,6.22659966 11.7736696,5.99910258 11.4995064,5.99910258 C11.2265099,5.99910258 10.9990128,6.22543301 10.9990128,6.49959616 L10.9990128,7.49941667 C10.9990128,9.4290586 9.42869963,10.9993718 7.4990577,10.9993718 C5.56941578,10.9993718 3.99910258,9.4290586 3.99910258,7.49941667 L3.99910258,6.49959616 C3.99910258,6.22659966 3.77277214,5.99910258 3.49860899,5.99910258 C3.22561249,5.99910258 2.99811541,6.22543301 2.99811541,6.49959616 L2.99811541,7.49941667 C2.99811541,9.81172036 4.74809297,11.7180293 6.99856412,11.9676927 L6.99856412,12.9990128 L4.99892309,12.9990128 C4.72592659,12.9990128 4.49842951,13.2253433 4.49842951,13.4995064 C4.49842951,13.7725029 4.72475994,14 4.99892309,14 L9.99919232,14 C10.2721888,14 10.4996859,13.7736696 10.4996859,13.4995064 C10.4996859,13.2265099 10.2733555,12.9990128 9.99919232,12.9990128 L7.99955129,12.9990128 L7.99955129,11.9676927 C10.2500224,11.7180293 12,9.81172036 12,7.49941667 L12,6.49959616 L12,6.49959616 Z M10.000359,3.50013461 C10.000359,2.12465225 8.87570672,1 7.50022436,1 C6.12474199,1 5.00008974,2.12465225 5.00008974,3.50013461 L5.00008974,7.50058333 C5.00008974,8.87606569 6.12474199,10.0007179 7.50022436,10.0007179 C8.87570672,10.0007179 10.000359,8.87606569 10.000359,7.50058333 L10.000359,3.50013461 L10.000359,3.50013461 Z" />
+    <path id="facemute-shape" fill-rule="evenodd" d="M3.5056409,12 L7.98333957,12 C8.53762636,12 9.01666043,11.7983901 9.40752527,11.4075253 C9.81130663,11.0043055 10,10.5376264 10,9.97042306 L10,8.81074504 L12.8360165,11.6467615 C12.9247473,11.7354923 13.0252714,11.7731187 13.1516286,11.7731187 C13.2145264,11.7731187 13.2650693,11.7607638 13.3279671,11.7354923 C13.517222,11.659678 13.6053912,11.5209659 13.6053912,11.319356 L13.6053912,3.66772744 C13.6053912,3.47903407 13.517222,3.34032198 13.3279671,3.25215275 C13.2650693,3.23923624 13.2145264,3.22688132 13.1516286,3.22688132 C13.0252714,3.22688132 12.9247473,3.26450768 12.8360165,3.3526769 L10,6.17633845 L10,5.5056409 L11.8301248,3.67551608 C11.8719395,3.63370139 11.900024,3.56380221 11.900024,3.49327892 C11.900024,3.43773404 11.8719395,3.36721075 11.8301248,3.32539606 L11.1860538,2.68132501 C11.1298848,2.62515602 11.0737158,2.59707153 11.0038166,2.59707153 C10.9339174,2.59707153 10.8777484,2.62515602 10.8215795,2.68132501 L1.16987518,12.318675 C1.12806049,12.374844 1.099976,12.431013 1.099976,12.5009121 C1.099976,12.5708113 1.12806049,12.6269803 1.16987518,12.6831493 L1.81394623,13.3272204 C1.87011522,13.3696591 1.92628421,13.3971195 1.99618339,13.3971195 C2.06670667,13.3971195 2.12225156,13.3696591 2.17842055,13.3272204 L3.5056409,12 Z M8.45401801,3.04996594 C8.30389858,3.01642927 8.14689515,3 7.98333957,3 L3.02957694,3 C2.46237364,3 1.9956945,3.18869337 1.59247473,3.59247473 C1.20160988,3.98333957 1,4.46181206 1,5.01666043 L1,9.97042306 C1,10.1358084 1.01714068,10.2926472 1.05111577,10.4418584 L8.45401801,3.04996594 L8.45401801,3.04996594 Z" />
+    <path id="hangup-shape" fill-rule="evenodd" d="M13,11.732c-0.602,0.52-1.254,0.946-1.941,1.267 c-1.825-0.337-4.164-1.695-6.264-3.795C2.696,7.106,1.339,4.769,1,2.945c0.321-0.688,0.748-1.341,1.268-1.944l2.528,2.855 C4.579,4.153,4.377,4.454,4.209,4.759L4.22,4.77C3.924,5.42,4.608,6.833,5.889,8.114c1.281,1.28,2.694,1.965,3.343,1.669 l0.011,0.011c0.305-0.168,0.606-0.37,0.904-0.587L13,11.732z" />
+    <path id="incoming-shape" fill-rule="evenodd" d="M2.745,7.558l0.637,0.669c0.04,0.041,0.085,0.073,0.134,0.1 l3.249,3.313c0.38,0.393,0.915,0.478,1.197,0.186l0.638-0.676c0.281-0.292,0.2-0.848-0.18-1.244L7.097,8.558h3.566 c0.419,0,0.759-0.34,0.759-0.759V6.28c0-0.419-0.34-0.759-0.759-0.759H7.059l1.42-1.443c0.381-0.392,0.461-0.945,0.18-1.234 l-0.637-0.67C7.74,1.883,7.204,1.966,6.824,2.359L3.55,5.688C3.487,5.717,3.43,5.755,3.381,5.806L2.745,6.482 c-0.131,0.137-0.183,0.332-0.162,0.54C2.562,7.229,2.613,7.423,2.745,7.558z" />
+    <path id="link-shape" fill-rule="evenodd" d="M7.359,6.107c0.757-0.757,0.757-1.995,0-2.752 L5.573,1.568c-0.757-0.757-1.995-0.757-2.752,0L1.568,2.82c-0.757,0.757-0.757,1.995,0,2.752l1.787,1.787 c0.757,0.757,1.995,0.757,2.752,0L6.266,7.2L6.8,7.734L6.641,7.893c-0.757,0.757-0.757,1.995,0,2.752l1.787,1.787 c0.757,0.757,1.995,0.757,2.752,0l1.253-1.253c0.757-0.757,0.757-1.995,0-2.752l-1.787-1.787c-0.757-0.757-1.995-0.757-2.752,0 L7.734,6.8L7.2,6.266L7.359,6.107z M9.87,7.868l1.335,1.335c0.294,0.294,0.294,0.774,0,1.068l-0.934,0.934 c-0.294,0.294-0.774,0.294-1.068,0L7.868,9.87c-0.294-0.294-0.294-0.774,0-1.068L8.13,9.064c0.294,0.294,0.744,0.324,1.001,0.067 C9.388,8.874,9.358,8.424,9.064,8.13L8.802,7.868C9.096,7.574,9.577,7.574,9.87,7.868z M4.13,6.132L2.795,4.797 c-0.294-0.294-0.294-0.774,0-1.068l0.934-0.934c0.294-0.294,0.774-0.294,1.068,0L6.132,4.13c0.294,0.294,0.294,0.774,0,1.068 L5.86,4.926C5.567,4.632,5.116,4.602,4.859,4.859C4.602,5.116,4.632,5.567,4.926,5.86l0.272,0.272 C4.904,6.426,4.423,6.426,4.13,6.132z" />
+    <path id="exit-shape" fill-rule="evenodd" d="M7.01905144,5.00017279 C7.01277908,5.00005776 7.0064926,5 7.00019251,5 L3.99980749,5 C3.44371665,5 3,5.44762906 3,5.99980749 L3,9.00019251 C3,9.55628335 3.44762906,10 3.99980749,10 L7.00019251,10 C7.00649341,10 7.01277988,9.99994253 7.01905144,9.99982809 L7.01905144,11.5391818 C7.01905144,12.078915 7.37554713,12.2645548 7.81530684,11.9314625 L12.8239665,8.13769619 C13.2653143,7.80340108 13.2637262,7.26455476 12.8239665,6.93146254 L7.81530684,3.13769619 C7.37395904,2.80340108 7.01905144,2.98023404 7.01905144,3.52997693 L7.01905144,5.00017279 Z M1,3 L6,3 L6,4 L2,4 L2,11 L6,11 L6,12.0100024 L1,12.0100021 L1,3 Z" />
+    <path id="mute-shape" fill-rule="evenodd" d="M2.16990529,12.6831493 L2.81397634,13.3272204 C2.87014533,13.3696591 2.92631431,13.3971195 2.9962135,13.3971195 C3.06673678,13.3971195 3.12228167,13.3696591 3.17845065,13.3272204 L5.1537267,11.3382141 C5.72789857,11.6883341 6.34450922,11.8986558 7.00293457,11.968555 L7.00293457,13.0051848 L4.99957403,13.0051848 C4.85977567,13.0051848 4.74743769,13.0469995 4.64945402,13.1593375 C4.55147034,13.2573212 4.49530135,13.3696591 4.49530135,13.4957273 C4.49530135,13.6355257 4.55147034,13.7478637 4.64945402,13.8458473 C4.74743769,13.943831 4.85977567,14 4.99957403,14 L10.0004862,14 C10.1402845,14 10.2526225,13.943831 10.3506062,13.8458473 C10.4485899,13.7478637 10.5047589,13.6355257 10.5047589,13.4957273 C10.5047589,13.3696591 10.4485899,13.2573212 10.3506062,13.1593375 C10.2526225,13.0469995 10.1402845,13.0051848 10.0004862,13.0051848 L7.99712564,13.0051848 L7.99712564,11.968555 C9.13173918,11.8424868 10.0847397,11.3662986 10.8548789,10.5119059 C11.6256422,9.6568891 12.0038467,8.64834373 12.0038467,7.5 L12.0038467,6.50518483 C12.0038467,6.36538646 11.9476777,6.25304849 11.8496941,6.15506481 C11.7517104,6.05708113 11.6393724,6.00091215 11.5133042,6.00091215 C11.3735059,6.00091215 11.2611679,6.05708113 11.1631842,6.15506481 C11.0652005,6.25304849 11.0090315,6.36538646 11.0090315,6.50518483 L11.0090315,7.5 C11.0090315,8.46673068 10.6589115,9.29303889 9.97240169,9.97954873 C9.28589185,10.6660586 8.45958364,11.0018243 7.50720726,11.0018243 C6.93303539,11.0018243 6.40005411,10.8757561 5.89578143,10.6098896 L6.65281455,9.85348056 C6.93303539,9.95146423 7.21263212,10.0076332 7.50720726,10.0076332 C8.1937171,10.0076332 8.78161916,9.75549688 9.27216165,9.26495439 C9.76208004,8.77441191 10.0004862,8.18650984 10.0004862,7.5 L10.0004862,6.50518483 L12.8301549,3.67551608 C12.8719696,3.63370139 12.9000541,3.56380221 12.9000541,3.49327892 C12.9000541,3.43773404 12.8719696,3.36721075 12.8301549,3.32539606 L12.1860839,2.68132501 C12.1299149,2.62515602 12.0737459,2.59707153 12.0038467,2.59707153 C11.9339475,2.59707153 11.8777785,2.62515602 11.8216096,2.68132501 L2.16990529,12.318675 C2.1280906,12.374844 2.1000061,12.431013 2.1000061,12.5009121 C2.1000061,12.5708113 2.1280906,12.6269803 2.16990529,12.6831493 L2.16990529,12.6831493 Z M3.31887312,9.18070091 L4.10274254,8.3824772 C4.03284336,8.07417187 3.99102867,7.78022084 3.99102867,7.5 L3.99102867,6.50518483 C3.99102867,6.36538646 3.93485968,6.25304849 3.836876,6.15506481 C3.73889233,6.05708113 3.62655435,6.00091215 3.50048618,6.00091215 C3.36068781,6.00091215 3.24834984,6.05708113 3.15036616,6.15506481 C3.05238248,6.25304849 2.9962135,6.36538646 2.9962135,6.50518483 L2.9962135,7.5 C2.9962135,8.07417187 3.10855147,8.63461354 3.31887312,9.18070091 L3.31887312,9.18070091 Z M9.86068781,2.65324052 C9.67845065,2.16269803 9.37014533,1.77076332 8.95012612,1.46245799 C8.51575262,1.15415266 8.03956443,1 7.50720726,1 C6.80634312,1 6.21844105,1.23840614 5.72789857,1.72832453 C5.23798018,2.21886702 4.99957403,2.80739318 4.99957403,3.49327892 L4.99957403,7.5 L9.86068781,2.65324052 L9.86068781,2.65324052 Z" />
+    <path id="pause-shape" fill-rule="evenodd" d="M4.75,1h-1.5C2.836,1,2.5,1.336,2.5,1.75v10.5 C2.5,12.664,2.836,13,3.25,13h1.5c0.414,0,0.75-0.336,0.75-0.75V1.75C5.5,1.336,5.164,1,4.75,1z M10.75,1h-1.5 C8.836,1,8.5,1.336,8.5,1.75v10.5C8.5,12.664,8.836,13,9.25,13h1.5c0.414,0,0.75-0.336,0.75-0.75V1.75C11.5,1.336,11.164,1,10.75,1 z" />
+    <path id="video-shape" fill-rule="evenodd" d="M1.59247473,11.4075253 C1.9956945,11.7983901 2.46237364,12 3.02957694,12 L7.98333957,12 C8.53762636,12 9.01666043,11.7983901 9.40752527,11.4075253 C9.81130663,11.0043055 10,10.5376264 10,9.97042306 L10,8.81074504 L12.8360165,11.6467615 C12.9247473,11.7354923 13.0252714,11.7731187 13.1516286,11.7731187 C13.2145264,11.7731187 13.2650693,11.7607638 13.3279671,11.7354923 C13.517222,11.659678 13.6053912,11.5209659 13.6053912,11.319356 L13.6053912,3.66772744 C13.6053912,3.47903407 13.517222,3.34032198 13.3279671,3.25215275 C13.2650693,3.23923624 13.2145264,3.22688132 13.1516286,3.22688132 C13.0252714,3.22688132 12.9247473,3.26450768 12.8360165,3.3526769 L10,6.17633845 L10,5.01666043 C10,4.46181206 9.81130663,3.98333957 9.40752527,3.59247473 C9.01666043,3.18869337 8.53762636,3 7.98333957,3 L3.02957694,3 C2.46237364,3 1.9956945,3.18869337 1.59247473,3.59247473 C1.20160988,3.98333957 1,4.46181206 1,5.01666043 L1,9.97042306 C1,10.5376264 1.20160988,11.0043055 1.59247473,11.4075253" />
+    <path id="screen-shape" fill-rule="evenodd" d="M10.001,4 L10.001,3.003 C10.001,2.438 9.554,2 9.003,2 L1.998,2 C1.447,2 1,2.449 1,3.003 L1,7.997 C1,8.562 1.447,9 1.998,9 L3,9 L3,5.003 C3,4.449 3.446,4 3.998,4 L10,4 L10.001,4 Z M4,6.00292933 C4,5.44902676 4.4463114,5 4.99754465,5 L12.0024554,5 C12.553384,5 13,5.43788135 13,6.00292933 L13,10.9970707 C13,11.5509732 12.5536886,12 12.0024554,12 L4.99754465,12 C4.44661595,12 4,11.5621186 4,10.9970707 L4,6.00292933 Z" />
+    <path id="screenmute-shape" fill-rule="evenodd" d="M12.579,5.18 C12.416,5.066 12.218,5 12.004,5 L4.999,5 C4.448,5 4.001,5.449 4.001,6.003 L4.001,10.899 L12.579,5.18 L12.579,5.18 Z M13.001,6.1 L13.001,10.996 C13.001,11.55 12.555,11.999 12.003,11.999 L4.998,11.999 C4.784,11.999 4.585,11.933 4.423,11.819 L13.001,6.1 L13.001,6.1 Z M10.001,4 L10.001,3.003 C10.001,2.438 9.554,2 9.003,2 L1.998,2 C1.447,2 1,2.449 1,3.003 L1,7.997 C1,8.562 1.447,9 1.998,9 L3,9 L3,5.003 C3,4.449 3.446,4 3.998,4 L10,4 L10.001,4 Z" />
     <g id="volume-shape">
       <path fill-rule="evenodd" d="M3.513,4.404H1.896c-0.417,0-0.756,0.338-0.756,0.755v3.679 c0,0.417,0.338,0.755,0.756,0.755H3.51l2.575,2.575c0.261,0.261,0.596,0.4,0.938,0.422V1.409C6.682,1.431,6.346,1.57,6.085,1.831 L3.513,4.404z M8.555,5.995C8.619,6.32,8.653,6.656,8.653,7c0,0.344-0.034,0.679-0.098,1.004l0.218,0.142 C8.852,7.777,8.895,7.393,8.895,7c0-0.394-0.043-0.777-0.123-1.147L8.555,5.995z M12.224,3.6l-0.475,0.31 c0.359,0.962,0.557,2.003,0.557,3.09c0,1.087-0.198,2.128-0.557,3.09l0.475,0.31c0.41-1.054,0.635-2.201,0.635-3.4 C12.859,5.8,12.634,4.654,12.224,3.6z M10.061,5.012C10.25,5.642,10.353,6.308,10.353,7c0,0.691-0.103,1.358-0.293,1.987 l0.351,0.229C10.634,8.517,10.756,7.772,10.756,7c0-0.773-0.121-1.517-0.345-2.216L10.061,5.012z"/>
       <path d="M7.164,12.74l-0.15-0.009c-0.389-0.024-0.754-0.189-1.028-0.463L3.452,9.735H1.896 C1.402,9.735,1,9.333,1,8.838V5.16c0-0.494,0.402-0.896,0.896-0.896h1.558l2.531-2.531C6.26,1.458,6.625,1.293,7.014,1.269 l0.15-0.009V12.74z M1.896,4.545c-0.339,0-0.615,0.276-0.615,0.615v3.679c0,0.339,0.276,0.615,0.615,0.615h1.672l2.616,2.616 c0.19,0.19,0.434,0.316,0.697,0.363V1.568C6.619,1.615,6.375,1.741,6.185,1.931L3.571,4.545H1.896z M12.292,10.612l-0.714-0.467 l0.039-0.105C11.981,9.067,12.165,8.044,12.165,7c0-1.044-0.184-2.067-0.548-3.041l-0.039-0.105l0.714-0.467l0.063,0.162 C12.783,4.649,13,5.81,13,7s-0.217,2.351-0.645,3.451L12.292,10.612z M11.92,10.033l0.234,0.153 c0.374-1.019,0.564-2.09,0.564-3.186s-0.19-2.167-0.564-3.186L11.92,3.966C12.27,4.94,12.447,5.96,12.447,7 C12.447,8.04,12.27,9.059,11.92,10.033z M10.489,9.435L9.895,9.047l0.031-0.101C10.116,8.315,10.212,7.66,10.212,7 c0-0.661-0.096-1.316-0.287-1.947L9.895,4.952l0.594-0.388l0.056,0.176C10.779,5.471,10.897,6.231,10.897,7 c0,0.769-0.118,1.529-0.351,2.259L10.489,9.435z M10.225,8.926l0.106,0.069C10.52,8.348,10.615,7.677,10.615,7 c0-0.677-0.095-1.348-0.284-1.996l-0.106,0.07C10.403,5.699,10.494,6.347,10.494,7C10.494,7.652,10.403,8.3,10.225,8.926z M8.867,8.376L8.398,8.07l0.018-0.093C8.48,7.654,8.512,7.325,8.512,7S8.48,6.345,8.417,6.022L8.398,5.929l0.469-0.306l0.043,0.2 C8.994,6.211,9.036,6.607,9.036,7c0,0.393-0.042,0.789-0.126,1.176L8.867,8.376z"/>
@@ -48,15 +50,23 @@
   <use id="audio" xlink:href="#audio-shape"/>
   <use id="audio-active" xlink:href="#audio-shape"/>
   <use id="audio-disabled" xlink:href="#audio-shape"/>
+  <use id="audio-still" xlink:href="#audio-shape"/>
+  <use id="audio-white" xlink:href="#audio-shape"/>
   <use id="contacts" xlink:href="#contacts-shape"/>
   <use id="contacts-hover" xlink:href="#contacts-shape"/>
   <use id="contacts-active" xlink:href="#contacts-shape"/>
+  <use id="exit" xlink:href="#exit-shape"/>
+  <use id="exit-active" xlink:href="#exit-shape"/>
+  <use id="exit-white" xlink:href="#exit-shape"/>
   <use id="facemute" xlink:href="#facemute-shape"/>
   <use id="facemute-active" xlink:href="#facemute-shape"/>
   <use id="facemute-disabled" xlink:href="#facemute-shape"/>
+  <use id="facemute-still" xlink:href="#facemute-shape"/>
+  <use id="facemute-white" xlink:href="#facemute-shape"/>
   <use id="hangup" xlink:href="#hangup-shape"/>
   <use id="hangup-active" xlink:href="#hangup-shape"/>
   <use id="hangup-disabled" xlink:href="#hangup-shape"/>
+  <use id="hangup-white" xlink:href="#hangup-shape"/>
   <use id="hello" xlink:href="#hello-shape"/>
   <use id="hello-hover" xlink:href="#hello-shape"/>
   <use id="hello-active" xlink:href="#hello-shape"/>
@@ -69,13 +79,20 @@
   <use id="mute" xlink:href="#mute-shape"/>
   <use id="mute-active" xlink:href="#mute-shape"/>
   <use id="mute-disabled" xlink:href="#mute-shape"/>
+  <use id="mute-still" xlink:href="#mute-shape"/>
+  <use id="mute-white" xlink:href="#mute-shape"/>
   <use id="pause" xlink:href="#pause-shape"/>
   <use id="pause-active" xlink:href="#pause-shape"/>
   <use id="pause-disabled" xlink:href="#pause-shape"/>
+  <use id="screen-white" xlink:href="#screen-shape"/>
+  <use id="screen-hover" xlink:href="#screen-shape"/>
+  <use id="screen-disabled" xlink:href="#screen-shape"/>
+  <use id="screenmute-white" xlink:href="#screenmute-shape"/>
   <use id="video" xlink:href="#video-shape"/>
   <use id="video-white" xlink:href="#video-shape"/>
   <use id="video-active" xlink:href="#video-shape"/>
   <use id="video-disabled" xlink:href="#video-shape"/>
+  <use id="video-still" xlink:href="#video-shape"/>
   <use id="volume" xlink:href="#volume-shape"/>
   <use id="volume-active" xlink:href="#volume-shape"/>
   <use id="volume-disabled" xlink:href="#volume-shape"/>

browser/components/loop/content/shared/img/icons-16x16.svg

@@ -14,7 +14,7 @@
       fill: #444;
     }
     use[id$="-active"] {
-      fill: #0095dd;
+      fill: #5cccee;
     }
     use[id$="-red"] {
       fill: #d74345
@@ -28,6 +28,9 @@
     use[id$="-disabled"] {
       fill: rgba(255,255,255,.6);
     }
+    use[id$="-still"] {
+      fill: #00a9dc;
+    }
   </style>
   <defs>
     <polygon id="add-shape" points="16,6.4 9.6,6.4 9.6,0 6.4,0 6.4,6.4 0,6.4 0,9.6 6.4,9.6 6.4,16 9.6,16 9.6,9.6 16,9.6"/>
@@ -69,14 +72,6 @@
       <polygon fill="#fff" points="15.66816,7.77344 9.6,2.27456 9.6,5.6 3.68,5.6 3.68,9.92 9.6,9.92 9.6,13.27232"/>
     </g>
     <path id="tour-shape" fill="#5a5a5a" d="M8,0C4.831,0,2.262,2.674,2.262,5.972c0,1.393,1.023,3.398,2.206,5.249l0.571, 0.866C6.504,14.245,8,16,8,16 s1.496-1.755,2.961-3.912l0.571-0.866c1.182-1.852,2.206-3.856,2.206-5.249C13.738,2.674, 11.169,0,8,0z M8,7.645 c-0.603,0-1.146-0.262-1.534-0.681C6.098,6.566,5.87,6.025,5.87,5.428c0-1.224,0.954-2.217, 2.13-2.217s2.13,0.992,2.13,2.217 C10.13,6.653,9.177,7.645,8,7.645z"/>
-    <g id="screen-shape">
-      <path d="M12.199,3.915v-0.4c0-0.837-0.65-1.515-1.452-1.515H2.452C1.65,2,1,2.678,1,3.515v6.242 c0,0.837,0.65,1.515,1.452,1.515h0.514V5.431c0-0.837,0.65-1.515,1.452-1.515H12.199z"/>
-      <path d="M13.548,4.727H5.253c-0.802,0-1.452,0.678-1.452,1.515v6.242c0,0.837,0.65,1.515,1.452, 1.515h8.294 C14.35,14,15,13.322,15,12.485V6.242C15,5.406,14.35,4.727,13.548,4.727z"/>
-    </g>
-    <g id="screenmute-shape">
-      <path fill-rule="evenodd" d="M13.55,4.73h-0.54l-8.13,8.13L4.2,13.53 C4.46,13.82,4.84,14,5.25,14h8.3c0.8,0,1.45-0.68,1.45-1.52V6.24C15,5.41,14.35,4.73,13.55,4.73z"/>
-      <path fill-rule="evenodd" d="M14.21,2.72l-0.99-0.99l-1.15,1.15C11.83,2.36,11.33,2,10.75,2 h-8.3C1.65,2,1,2.68,1,3.52v6.24c0,0.83,0.65,1.51,1.45,1.51h0.52V5.43c0-0.84,0.65-1.51,1.45-1.51h6.61l-0.81, 0.81H5.25 c-0.8,0-1.45,0.68-1.45,1.51v4.91l-1.89,1.89l0.99,0.99l1-1l8.3-8.3L14.21,2.72z"/>
-    </g>
     <g id="delete-shape">
       <path fill="#ccc" d="M14.191,4.579c0-1.149-0.832-2.08-1.857-2.08h-0.902V1.997C11.432,0.894,10.633,0,9.648,0H6.352 C5.367,0,4.568,0.894,4.568,1.997v0.502H3.666c-1.026,0-1.857,0.932-1.857,2.08v1.389h1.064l0.785,8.416 C3.742,15.29,4.499,16,5.383,16h5.231c0.883,0,1.64-0.709,1.724-1.614l0.788-8.417h1.064V4.579z M5.535,2.218V2.065 c0-0.58,0.42-1.05,0.938-1.05h3.055c0.518,0,0.937,0.47,0.937,1.05v0.153c0,0.098-0.016,0.191-0.038,0.281H5.573 C5.55,2.409,5.535,2.316,5.535,2.218z M11.184,14.277c-0.029,0.305-0.29,0.562-0.57,0.562H5.383c-0.281,0-0.541-0.257-0.57-0.562 L4.038,5.969h7.924L11.184,14.277z"/>
       <rect x="7.612" y="7.291" fill="#ccc" width="0.774" height="6.191"/>
@@ -93,8 +88,6 @@
   <use id="add-hover" xlink:href="#add-shape"/>
   <use id="add-active" xlink:href="#add-shape"/>
   <use id="audio" xlink:href="#audio-shape"/>
-  <use id="audio-hover" xlink:href="#audio-shape"/>
-  <use id="audio-active" xlink:href="#audio-shape"/>
   <use id="block" xlink:href="#block-shape"/>
   <use id="block-red" xlink:href="#block-shape"/>
   <use id="block-hover" xlink:href="#block-shape"/>
@@ -124,12 +117,7 @@
   <use id="unblock-hover" xlink:href="#unblock-shape"/>
   <use id="unblock-active" xlink:href="#unblock-shape"/>
   <use id="video" xlink:href="#video-shape"/>
-  <use id="video-hover" xlink:href="#video-shape"/>
-  <use id="video-active" xlink:href="#video-shape"/>
   <use id="tour" xlink:href="#tour-shape"/>
-  <use id="screen-white" xlink:href="#screen-shape"/>
-  <use id="screen-disabled" xlink:href="#screen-shape"/>
-  <use id="screenmute-white" xlink:href="#screenmute-shape"/>
   <use id="delete" xlink:href="#delete-shape"/>
   <use id="status-available" xlink:href="#status-available-shape"/>
   <use id="status-unavailable" xlink:href="#status-unavailable-shape"/>

browser/components/loop/content/shared/img/svg/audio-hover.svg

@@ -0,0 +1 @@
+<svg width="31" height="24" viewBox="0 0 31 24" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M19.002 11.5c0-.273-.226-.5-.5-.5-.273 0-.5.226-.5.5v1c0 1.93-1.57 3.5-3.5 3.5s-3.5-1.57-3.5-3.5v-1c0-.273-.226-.5-.5-.5-.273 0-.5.226-.5.5v1c0 2.312 1.75 4.219 4 4.468v1.031h-2c-.273 0-.5.226-.5.5 0 .273.226.5.5.5h5c.273 0 .5-.226.5-.5 0-.273-.226-.5-.5-.5h-2v-1.031c2.25-.25 4-2.156 4-4.468v-1zm-2-2.999c0-1.375-1.125-2.5-2.5-2.5s-2.5 1.125-2.5 2.5v4c0 1.375 1.125 2.5 2.5 2.5s2.5-1.125 2.5-2.5v-4z" fill="#fff"/></g></svg>

browser/components/loop/content/shared/img/svg/audio-mute-hover.svg

@@ -0,0 +1 @@
+<svg width="31" height="24" viewBox="0 0 31 24" xmlns="http://www.w3.org/2000/svg"><path d="M9.07 17.683l.644.644c.056.042.112.07.182.07.071 0 .126-.027.182-.07l1.975-1.989c.574.35 1.191.56 1.849.63v1.037h-2.003c-.14 0-.252.042-.35.154-.098.098-.154.21-.154.336 0 .14.056.252.154.35.098.098.21.154.35.154h5.001c.14 0 .252-.056.35-.154.098-.098.154-.21.154-.35 0-.126-.056-.238-.154-.336-.098-.112-.21-.154-.35-.154h-2.003v-1.037c1.135-.126 2.088-.602 2.858-1.457.771-.855 1.149-1.864 1.149-3.012v-.995c0-.14-.056-.252-.154-.35-.098-.098-.21-.154-.336-.154-.14 0-.252.056-.35.154-.098.098-.154.21-.154.35v.995c0 .967-.35 1.793-1.037 2.48-.687.687-1.513 1.022-2.465 1.022-.574 0-1.107-.126-1.611-.392l.757-.756c.28.098.56.154.854.154.687 0 1.274-.252 1.765-.743.49-.491.728-1.078.728-1.765v-.995l2.83-2.83c.042-.042.07-.112.07-.182 0-.056-.028-.126-.07-.168l-.644-.644c-.056-.056-.112-.084-.182-.084-.07 0-.126.028-.182.084l-9.652 9.637c-.042.056-.07.112-.07.182 0 .07.028.126.07.182zm1.149-3.502l.784-.798c-.07-.308-.112-.602-.112-.882v-.995c0-.14-.056-.252-.154-.35-.098-.098-.21-.154-.336-.154-.14 0-.252.056-.35.154-.098.098-.154.21-.154.35v.995c0 .574.112 1.135.323 1.681zm6.542-6.527c-.182-.491-.491-.882-.911-1.191-.434-.308-.911-.462-1.443-.462-.701 0-1.289.238-1.779.728-.49.491-.728 1.079-.728 1.765v4.007l4.861-4.847z" fill="#fff"/></svg>

browser/components/loop/content/shared/img/svg/audio-mute.svg

@@ -0,0 +1 @@
+<svg width="31" height="24" viewBox="0 0 31 24" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M9.07 17.683l.644.644c.056.042.112.07.182.07.071 0 .126-.027.182-.07l1.975-1.989c.574.35 1.191.56 1.849.63v1.037h-2.003c-.14 0-.252.042-.35.154-.098.098-.154.21-.154.336 0 .14.056.252.154.35.098.098.21.154.35.154h5.001c.14 0 .252-.056.35-.154.098-.098.154-.21.154-.35 0-.126-.056-.238-.154-.336-.098-.112-.21-.154-.35-.154h-2.003v-1.037c1.135-.126 2.088-.602 2.858-1.457.771-.855 1.149-1.864 1.149-3.012v-.995c0-.14-.056-.252-.154-.35-.098-.098-.21-.154-.336-.154-.14 0-.252.056-.35.154-.098.098-.154.21-.154.35v.995c0 .967-.35 1.793-1.037 2.48-.687.687-1.513 1.022-2.465 1.022-.574 0-1.107-.126-1.611-.392l.757-.756c.28.098.56.154.854.154.687 0 1.274-.252 1.765-.743.49-.491.728-1.078.728-1.765v-.995l2.83-2.83c.042-.042.07-.112.07-.182 0-.056-.028-.126-.07-.168l-.644-.644c-.056-.056-.112-.084-.182-.084-.07 0-.126.028-.182.084l-9.652 9.637c-.042.056-.07.112-.07.182 0 .07.028.126.07.182zm1.149-3.502l.784-.798c-.07-.308-.112-.602-.112-.882v-.995c0-.14-.056-.252-.154-.35-.098-.098-.21-.154-.336-.154-.14 0-.252.056-.35.154-.098.098-.154.21-.154.35v.995c0 .574.112 1.135.323 1.681zm6.542-6.527c-.182-.491-.491-.882-.911-1.191-.434-.308-.911-.462-1.443-.462-.701 0-1.289.238-1.779.728-.49.491-.728 1.079-.728 1.765v4.007l4.861-4.847z" fill="#00A9DC"/></g></svg>

browser/components/loop/content/shared/img/svg/audio.svg

@@ -0,0 +1 @@
+<svg width="31" height="24" viewBox="0 0 31 24" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M19.002 11.5c0-.273-.226-.5-.5-.5-.273 0-.5.226-.5.5v1c0 1.93-1.57 3.5-3.5 3.5s-3.5-1.57-3.5-3.5v-1c0-.273-.226-.5-.5-.5-.273 0-.5.226-.5.5v1c0 2.312 1.75 4.219 4 4.468v1.031h-2c-.273 0-.5.226-.5.5 0 .273.226.5.5.5h5c.273 0 .5-.226.5-.5 0-.273-.226-.5-.5-.5h-2v-1.031c2.25-.25 4-2.156 4-4.468v-1zm-2-2.999c0-1.375-1.125-2.5-2.5-2.5s-2.5 1.125-2.5 2.5v4c0 1.375 1.125 2.5 2.5 2.5s2.5-1.125 2.5-2.5v-4z" fill="#00A9DC"/></g></svg>

browser/components/loop/content/shared/img/svg/cam_audio-no.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="67px" height="28px" viewBox="0 0 67 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M2,14 C2,7.372583 7.37049212,2 13.9962035,2 L52.9937982,2 C59.6191184,2 64.9900017,7.37112582 64.9900017,14 C64.9900017,20.627417 59.6195096,26 52.9937982,26 L13.9962035,26 C7.37088326,26 2,20.6288742 2,14 Z M32.994984,7.28907739 L32.994984,21.2024677 L33.9950177,21.2024677 L33.9950177,7.28907739 L32.994984,7.28907739 Z" id="Rectangle-1264" fill-opacity="0.95" fill="#FFFFFF"></path>
+        <path d="M2,14 L2,14 C2,20.6288742 7.37173577,26 13.9981077,26 L53.0018923,26 C59.6286554,26 65,20.627417 65,14 L65,14 C65,7.37112582 59.6282642,2 53.0018923,2 L13.9981077,2 C7.37134457,2 2,7.372583 2,14 L2,14 Z M0,14 L0,14 C0,6.26795905 6.26682948,0 13.9981077,0 L53.0018923,0 C60.73337,0 67,6.26709264 67,14 C67,21.7320409 60.7331705,28 53.0018923,28 L13.9981077,28 C6.26662998,28 0,21.7329074 0,14 L0,14 Z" id="Shape" fill-opacity="0.2" fill="#000000"></path>
+        <path d="M14.5056409,19.4029285 L18.9833396,19.4029285 C19.5376264,19.4029285 20.0166604,19.2013186 20.4075253,18.8104537 C20.8113066,18.407234 21,17.9405548 21,17.3733515 L21,16.2136735 L23.8360165,19.04969 C23.9247473,19.1384208 24.0252714,19.1760472 24.1516286,19.1760472 C24.2145264,19.1760472 24.2650693,19.1636922 24.3279671,19.1384208 C24.517222,19.0626065 24.6053912,18.9238944 24.6053912,18.7222845 L24.6053912,11.0706559 C24.6053912,10.8819625 24.517222,10.7432504 24.3279671,10.6550812 C24.2650693,10.6421647 24.2145264,10.6298098 24.1516286,10.6298098 C24.0252714,10.6298098 23.9247473,10.6674361 23.8360165,10.7556054 L21,13.5792669 L21,12.9085694 L22.8301248,11.0784446 C22.8719395,11.0366299 22.900024,10.9667307 22.900024,10.8962074 C22.900024,10.8406625 22.8719395,10.7701392 22.8301248,10.7283245 L22.1860538,10.0842535 C22.1298848,10.0280845 22.0737158,10 22.0038166,10 C21.9339174,10 21.8777484,10.0280845 21.8215795,10.0842535 L12.1698752,19.7216035 C12.1280605,19.7777724 12.099976,19.8339414 12.099976,19.9038406 C12.099976,19.9737398 12.1280605,20.0299088 12.1698752,20.0860778 L12.8139462,20.7301488 C12.8701152,20.7725876 12.9262842,20.800048 12.9961834,20.800048 C13.0667067,20.800048 13.1222516,20.7725876 13.1784205,20.7301488 L14.5056409,19.4029285 Z M19.454018,10.4528944 C19.3038986,10.4193577 19.1468952,10.4029285 18.9833396,10.4029285 L14.0295769,10.4029285 C13.4623736,10.4029285 12.9956945,10.5916218 12.5924747,10.9954032 C12.2016099,11.386268 12,11.8647405 12,12.4195889 L12,17.3733515 C12,17.5387368 12.0171407,17.6955757 12.0511158,17.8447868 L19.454018,10.4528944 L19.454018,10.4528944 Z" id="Fill-83-Copy-3" fill="#00A9DC"></path>
+        <path d="M42.0698992,19.6831493 L42.7139702,20.3272204 C42.7701392,20.3696591 42.8263082,20.3971195 42.8962074,20.3971195 C42.9667307,20.3971195 43.0222756,20.3696591 43.0784446,20.3272204 L45.0537206,18.3382141 C45.6278925,18.6883341 46.2445031,18.8986558 46.9029285,18.968555 L46.9029285,20.0051848 L44.8995679,20.0051848 C44.7597696,20.0051848 44.6474316,20.0469995 44.5494479,20.1593375 C44.4514642,20.2573212 44.3952952,20.3696591 44.3952952,20.4957273 C44.3952952,20.6355257 44.4514642,20.7478637 44.5494479,20.8458473 C44.6474316,20.943831 44.7597696,21 44.8995679,21 L49.9004801,21 C50.0402784,21 50.1526164,20.943831 50.2506001,20.8458473 C50.3485838,20.7478637 50.4047528,20.6355257 50.4047528,20.4957273 C50.4047528,20.3696591 50.3485838,20.2573212 50.2506001,20.1593375 C50.1526164,20.0469995 50.0402784,20.0051848 49.9004801,20.0051848 L47.8971195,20.0051848 L47.8971195,18.968555 C49.0317331,18.8424868 49.9847336,18.3662986 50.7548728,17.5119059 C51.5256361,16.6568891 51.9038406,15.6483437 51.9038406,14.5 L51.9038406,13.5051848 C51.9038406,13.3653865 51.8476716,13.2530485 51.749688,13.1550648 C51.6517043,13.0570811 51.5393663,13.0009121 51.4132981,13.0009121 C51.2734998,13.0009121 51.1611618,13.0570811 51.0631781,13.1550648 C50.9651944,13.2530485 50.9090254,13.3653865 50.9090254,13.5051848 L50.9090254,14.5 C50.9090254,15.4667307 50.5589054,16.2930389 49.8723956,16.9795487 C49.1858857,17.6660586 48.3595775,18.0018243 47.4072012,18.0018243 C46.8330293,18.0018243 46.300048,17.8757561 45.7957753,17.6098896 L46.5528084,16.8534806 C46.8330293,16.9514642 47.112626,17.0076332 47.4072012,17.0076332 C48.093711,17.0076332 48.6816131,16.7554969 49.1721555,16.2649544 C49.6620739,15.7744119 49.9004801,15.1865098 49.9004801,14.5 L49.9004801,13.5051848 L52.7301488,10.6755161 C52.7719635,10.6337014 52.800048,10.5638022 52.800048,10.4932789 C52.800048,10.437734 52.7719635,10.3672108 52.7301488,10.3253961 L52.0860778,9.68132501 C52.0299088,9.62515602 51.9737398,9.59707153 51.9038406,9.59707153 C51.8339414,9.59707153 51.7777724,9.62515602 51.7216035,9.68132501 L42.0698992,19.318675 C42.0280845,19.374844 42,19.431013 42,19.5009121 C42,19.5708113 42.0280845,19.6269803 42.0698992,19.6831493 L42.0698992,19.6831493 Z M43.218867,16.1807009 L44.0027364,15.3824772 C43.9328373,15.0741719 43.8910226,14.7802208 43.8910226,14.5 L43.8910226,13.5051848 C43.8910226,13.3653865 43.8348536,13.2530485 43.7368699,13.1550648 C43.6388862,13.0570811 43.5265482,13.0009121 43.4004801,13.0009121 C43.2606817,13.0009121 43.1483437,13.0570811 43.0503601,13.1550648 C42.9523764,13.2530485 42.8962074,13.3653865 42.8962074,13.5051848 L42.8962074,14.5 C42.8962074,15.0741719 43.0085454,15.6346135 43.218867,16.1807009 L43.218867,16.1807009 Z M49.7606817,9.65324052 C49.5784446,9.16269803 49.2701392,8.77076332 48.85012,8.46245799 C48.4157465,8.15415266 47.9395583,8 47.4072012,8 C46.706337,8 46.1184349,8.23840614 45.6278925,8.72832453 C45.1379741,9.21886702 44.8995679,9.80739318 44.8995679,10.4932789 L44.8995679,14.5 L49.7606817,9.65324052 L49.7606817,9.65324052 Z" id="Fill-90-Copy-2" fill="#00A9DC"></path>
+    </g>
+</svg>

browser/components/loop/content/shared/img/svg/cam_audio.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="67px" height="28px" viewBox="0 0 67 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Rectangle-1264-+-Shape">
+            <path d="M2,14 C2,7.372583 7.37049212,2 13.9962035,2 L52.9937982,2 C59.6191184,2 64.9900017,7.37112582 64.9900017,14 C64.9900017,20.627417 59.6195096,26 52.9937982,26 L13.9962035,26 C7.37088326,26 2,20.6288742 2,14 Z M32.994984,7.28907739 L32.994984,21.2024677 L33.9950177,21.2024677 L33.9950177,7.28907739 L32.994984,7.28907739 Z" id="Rectangle-1264" opacity="0.95" fill="#FFFFFF"></path>
+            <path d="M2,14 L2,14 C2,20.6288742 7.37173577,26 13.9981077,26 L53.0018923,26 C59.6286554,26 65,20.627417 65,14 L65,14 C65,7.37112582 59.6282642,2 53.0018923,2 L13.9981077,2 C7.37134457,2 2,7.372583 2,14 L2,14 Z M0,14 L0,14 C0,6.26795905 6.26682948,0 13.9981077,0 L53.0018923,0 C60.73337,0 67,6.26709264 67,14 C67,21.7320409 60.7331705,28 53.0018923,28 L13.9981077,28 C6.26662998,28 0,21.7329074 0,14 L0,14 Z" id="Shape" fill-opacity="0.2" fill="#4A4A4A"></path>
+        </g>
+    </g>
+</svg>

browser/components/loop/content/shared/img/svg/cam_audio_h.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="67px" height="28px" viewBox="0 0 67 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M2,14 C2,7.372583 7.37049212,2 13.9962035,2 L52.9937982,2 C59.6191184,2 64.9900017,7.37112582 64.9900017,14 C64.9900017,20.627417 59.6195096,26 52.9937982,26 L13.9962035,26 C7.37088326,26 2,20.6288742 2,14 Z M32.994984,7.28907739 L32.994984,21.2024677 L33.9950177,21.2024677 L33.9950177,7.28907739 L32.994984,7.28907739 Z" id="Rectangle-1264" opacity="0.95" fill="#5CCCEE"></path>
+        <path d="M2,14 L2,14 C2,20.6288742 7.37173577,26 13.9981077,26 L53.0018923,26 C59.6286554,26 65,20.627417 65,14 L65,14 C65,7.37112582 59.6282642,2 53.0018923,2 L13.9981077,2 C7.37134457,2 2,7.372583 2,14 L2,14 Z M0,14 L0,14 C0,6.26795905 6.26682948,0 13.9981077,0 L53.0018923,0 C60.73337,0 67,6.26709264 67,14 C67,21.7320409 60.7331705,28 53.0018923,28 L13.9981077,28 C6.26662998,28 0,21.7329074 0,14 L0,14 Z" id="Shape" fill-opacity="0.2" fill="#000000"></path>
+    </g>
+</svg>

browser/components/loop/content/shared/img/svg/exit.svg

@@ -0,0 +1,9 @@
+<svg width="28" height="28" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+
+ <g>
+  <title>Layer 1</title>
+  <rect rx="40" height="24" width="24" y="2.1" x="2" fill="#D74345" opacity="0.95" id="Rectangle-1264-Copy"/>
+  <path fill="#000000" fill-opacity="0.2" id="Shape" d="m2,14.1l0,0c0,6.62887 5.37258,12 12,12l0,0c6.62887,0 12,-5.37258 12,-12l0,0c0,-6.62887 -5.37258,-12 -12,-12l0,0c-6.62887,0 -12,5.37258 -12,12l0,0zm-2,0l0,0c0,-7.73245 6.26702,-14 14,-14c7.73245,0 14,6.26702 14,14c0,7.73245 -6.267019,14 -14,14c-7.73245,0 -14,-6.267019 -14,-14l0,0z"/>
+  <path fill="#FFFFFF" id="Shape" d="m14.726974,11.994536l-3.000204,0c-0.556093,0 -0.999815,0.451912 -0.999815,1.009375l0,1.98127c0,0.56602 0.447632,1.00937 0.999815,1.00937l3.000204,0l0,1.00297c0,0.543991 0.34978,0.717209 0.78125,0.37203l3.4375,-2.750002c0.43758,-0.350061 0.431469,-0.904824 0,-1.250006l-3.4375,-2.750013c-0.43758,-0.350061 -0.78125,-0.178611 -0.78125,0.372032l0,1.002975zm-6.000027,-2.00001l5.000022,0l0,1.000005l-4.000019,0l0,6.000019l4.000019,0l0,1.01l-5.000022,0l0,-8.010024z"/>
+ </g>
+</svg> 

browser/components/loop/content/shared/img/svg/media-group-left-hover.svg

@@ -0,0 +1,5 @@
+<svg width="34px" height="28px" viewBox="0 0 34 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <path fill="#5CCCEE" opacity="0.95" id="Rectangle-1264" d="m2,14c0,-6.62742 5.37049,-12 11.9962,-12l19.9976,0.1l-0.00368,12l0.00988,11.9l-20.0038,0c-6.62532,0 -11.9962,-5.37113 -11.9962,-12zm30.99498,-6.71092l0,13.91339l1.00004,0l0,-13.91339l-1.00004,0z"/>
+    </g>
+</svg>

browser/components/loop/content/shared/img/svg/media-group-right-hover.svg

@@ -0,0 +1,5 @@
+<svg width="33px" height="28px" viewBox="0 0 33 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <path fill="#5CCCEE" opacity="0.95" id="Rectangle-1264" d="m0.00391,13l-0.0038,-11l19.9976,0c6.62532,0 11.99621,5.37113 11.99621,12c0,6.62742 -5.3705,12 -11.99621,12l-19.9976,0l0.0038,-13zm-0.00502,-5.71092l0,13.91339l1.00004,0l0,-13.91339l-1.00004,0z"/>
+  </g>
+</svg>

browser/components/loop/content/shared/img/svg/media-group.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="67px" height="28px" viewBox="0 0 67 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Rectangle-1264-+-Shape">
+            <path d="M2,14 C2,7.372583 7.37049212,2 13.9962035,2 L52.9937982,2 C59.6191184,2 64.9900017,7.37112582 64.9900017,14 C64.9900017,20.627417 59.6195096,26 52.9937982,26 L13.9962035,26 C7.37088326,26 2,20.6288742 2,14 Z M32.994984,7.28907739 L32.994984,21.2024677 L33.9950177,21.2024677 L33.9950177,7.28907739 L32.994984,7.28907739 Z" id="Rectangle-1264" opacity="0.95" fill="#FFFFFF"></path>
+            <path d="M2,14 L2,14 C2,20.6288742 7.37173577,26 13.9981077,26 L53.0018923,26 C59.6286554,26 65,20.627417 65,14 L65,14 C65,7.37112582 59.6282642,2 53.0018923,2 L13.9981077,2 C7.37134457,2 2,7.372583 2,14 L2,14 Z M0,14 L0,14 C0,6.26795905 6.26682948,0 13.9981077,0 L53.0018923,0 C60.73337,0 67,6.26709264 67,14 C67,21.7320409 60.7331705,28 53.0018923,28 L13.9981077,28 C6.26662998,28 0,21.7329074 0,14 L0,14 Z" id="Shape" fill-opacity="0.2" fill="#4A4A4A"></path>
+        </g>
+    </g>
+</svg>

browser/components/loop/content/shared/img/svg/settings-hover.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle-1264-Copy-2" opacity="0.95" fill="#5CCCEE" x="2" y="2" width="24" height="24" rx="40"></rect>
+        <path d="M2,14 L2,14 C2,20.6288742 7.372583,26 14,26 L14,26 C20.6288742,26 26,20.627417 26,14 L26,14 C26,7.37112582 20.627417,2 14,2 L14,2 C7.37112582,2 2,7.372583 2,14 L2,14 Z M0,14 L0,14 C0,6.26754774 6.26702203,0 14,0 C21.7324523,0 28,6.26702203 28,14 C28,21.7324523 21.732978,28 14,28 C6.26754774,28 0,21.732978 0,14 L0,14 Z" id="Shape" fill-opacity="0.2" fill="#000000"></path>
+        <path d="M16,14 C16,15.1015625 15.1015625,16 14,16 C12.8984375,16 12,15.1015625 12,14 C12,12.8984375 12.8984375,12 14,12 C15.1015625,12 16,12.8984375 16,14 L16,14 Z M20,13.1484375 C20,13.015625 19.90625,12.890625 19.7734375,12.8671875 L18.34375,12.6484375 C18.265625,12.390625 18.15625,12.1328125 18.0234375,11.8828125 C18.2890625,11.515625 18.578125,11.171875 18.84375,10.8125 C18.8828125,10.7578125 18.90625,10.703125 18.90625,10.6328125 C18.90625,10.5703125 18.890625,10.5078125 18.8515625,10.4609375 C18.5234375,10 17.9765625,9.515625 17.5625,9.1328125 C17.5078125,9.0859375 17.4375,9.0546875 17.3671875,9.0546875 C17.296875,9.0546875 17.2265625,9.078125 17.1796875,9.125 L16.0703125,9.9609375 C15.84375,9.84375 15.609375,9.75 15.3671875,9.671875 L15.1484375,8.234375 C15.1328125,8.1015625 15.0078125,8 14.8671875,8 L13.1328125,8 C12.9921875,8 12.8828125,8.09375 12.8515625,8.21875 C12.7265625,8.6875 12.6796875,9.1953125 12.625,9.671875 C12.3828125,9.75 12.140625,9.8515625 11.9140625,9.96875 L10.8359375,9.1328125 C10.7734375,9.0859375 10.703125,9.0546875 10.6328125,9.0546875 C10.3671875,9.0546875 9.3125,10.1953125 9.125,10.453125 C9.0859375,10.5078125 9.0546875,10.5625 9.0546875,10.6328125 C9.0546875,10.703125 9.0859375,10.765625 9.1328125,10.8203125 C9.421875,11.171875 9.703125,11.5234375 9.96875,11.8984375 C9.84375,12.1328125 9.7421875,12.3671875 9.6640625,12.6171875 L8.2109375,12.8359375 C8.09375,12.859375 8,13 8,13.1171875 L8,14.8515625 C8,14.984375 8.09375,15.109375 8.2265625,15.1328125 L9.65625,15.34375 C9.734375,15.609375 9.84375,15.8671875 9.9765625,16.1171875 C9.7109375,16.484375 9.421875,16.828125 9.15625,17.1875 C9.1171875,17.2421875 9.09375,17.296875 9.09375,17.3671875 C9.09375,17.4296875 9.109375,17.4921875 9.1484375,17.546875 C9.4765625,18 10.0234375,18.484375 10.4375,18.859375 C10.4921875,18.9140625 10.5625,18.9453125 10.6328125,18.9453125 C10.703125,18.9453125 10.7734375,18.921875 10.828125,18.875 L11.9296875,18.0390625 C12.15625,18.15625 12.390625,18.25 12.6328125,18.328125 L12.8515625,19.765625 C12.8671875,19.8984375 12.9921875,20 13.1328125,20 L14.8671875,20 C15.0078125,20 15.1171875,19.90625 15.1484375,19.78125 C15.2734375,19.3125 15.3203125,18.8046875 15.375,18.328125 C15.6171875,18.25 15.859375,18.1484375 16.0859375,18.03125 L17.1640625,18.875 C17.2265625,18.9140625 17.296875,18.9453125 17.3671875,18.9453125 C17.6328125,18.9453125 18.6875,17.796875 18.875,17.546875 C18.921875,17.4921875 18.9453125,17.4375 18.9453125,17.3671875 C18.9453125,17.296875 18.9140625,17.2265625 18.8671875,17.171875 C18.578125,16.8203125 18.296875,16.4765625 18.03125,16.09375 C18.15625,15.8671875 18.25,15.6328125 18.3359375,15.3828125 L19.78125,15.1640625 C19.90625,15.140625 20,15 20,14.8828125 L20,13.1484375 Z" id="-2-copy" fill="#FFFFFF"></path>
+    </g>
+</svg>

browser/components/loop/content/shared/img/svg/settings.svg

@@ -0,0 +1 @@
+<svg width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg"><g fill="none"><rect opacity=".95" fill="#fff" x="2" y="2" width="24" height="24" rx="40"/><path d="M2 14c0 6.629 5.373 12 12 12 6.629 0 12-5.373 12-12 0-6.629-5.373-12-12-12-6.629 0-12 5.373-12 12zm-2 0c0-7.732 6.267-14 14-14 7.732 0 14 6.267 14 14 0 7.732-6.267 14-14 14-7.732 0-14-6.267-14-14z" fill-opacity=".2" fill="#000"/><path d="M16 14c0 1.102-.898 2-2 2-1.102 0-2-.898-2-2 0-1.102.898-2 2-2 1.102 0 2 .898 2 2zm4-.852c0-.133-.094-.258-.227-.281l-1.43-.219c-.078-.258-.188-.516-.32-.766l.82-1.07c.039-.055.063-.109.063-.18 0-.063-.016-.125-.055-.172-.328-.461-.875-.945-1.289-1.328-.055-.047-.125-.078-.195-.078s-.141.023-.188.07l-1.109.836c-.227-.117-.461-.211-.703-.289l-.219-1.438c-.016-.133-.141-.234-.281-.234h-1.734c-.141 0-.25.094-.281.219-.125.469-.172.977-.227 1.453-.242.078-.484.18-.711.297l-1.078-.836c-.063-.047-.133-.078-.203-.078-.266 0-1.32 1.141-1.508 1.398-.039.055-.07.109-.07.18 0 .07.031.133.078.188.289.352.57.703.836 1.078-.125.234-.227.469-.305.719l-1.453.219c-.117.023-.211.164-.211.281v1.734c0 .133.094.258.227.281l1.43.211c.078.266.188.523.32.773l-.82 1.07c-.039.055-.063.109-.063.18 0 .063.016.125.055.18.328.453.875.938 1.289 1.313.055.055.125.086.195.086s.141-.023.195-.07l1.102-.836c.227.117.461.211.703.289l.219 1.438c.016.133.141.234.281.234h1.734c.141 0 .25-.094.281-.219.125-.469.172-.977.227-1.453.242-.078.484-.18.711-.297l1.078.844c.063.039.133.07.203.07.266 0 1.32-1.148 1.508-1.398.047-.055.07-.109.07-.18 0-.07-.031-.141-.078-.195-.289-.352-.57-.695-.836-1.078.125-.227.219-.461.305-.711l1.445-.219c.125-.023.219-.164.219-.281v-1.734z" fill="#4A4A4A"/></g></svg>

browser/components/loop/content/shared/img/svg/sharing-hover.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle-1264-Copy" opacity="0.95" fill="#5CCCEE" x="2" y="2" width="24" height="24" rx="40"></rect>
+        <path d="M2,14 L2,14 C2,20.6288742 7.372583,26 14,26 L14,26 C20.6288742,26 26,20.627417 26,14 L26,14 C26,7.37112582 20.627417,2 14,2 L14,2 C7.37112582,2 2,7.372583 2,14 L2,14 Z M0,14 L0,14 C0,6.26754774 6.26702203,0 14,0 C21.7324523,0 28,6.26702203 28,14 C28,21.7324523 21.732978,28 14,28 C6.26754774,28 0,21.732978 0,14 L0,14 Z" id="Shape" fill-opacity="0.2" fill="#000000"></path>
+        <rect id="Rectangle-170-Copy-4" fill="#FFFFFF" x="11" y="12" width="9" height="7" rx="1"></rect>
+        <path d="M17,11 L17,10.0029293 C17,9.43788135 16.553384,9 16.0024554,9 L8.99754465,9 C8.4463114,9 8,9.44902676 8,10.0029293 L8,14.9970707 C8,15.5621186 8.44661595,16 8.99754465,16 L10,16 L10,12.0029293 C10,11.4490268 10.4463114,11 10.9975446,11 L17,11 Z" id="Rectangle-170-Copy" fill="#FFFFFF"></path>
+    </g>
+</svg>

browser/components/loop/content/shared/img/svg/sharing-mute.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle-1264-Copy" opacity="0.95" fill="#FFFFFF" x="2" y="2" width="24" height="24" rx="40"></rect>
+        <path d="M2,14 L2,14 C2,20.6288742 7.372583,26 14,26 L14,26 C20.6288742,26 26,20.627417 26,14 L26,14 C26,7.37112582 20.627417,2 14,2 L14,2 C7.37112582,2 2,7.372583 2,14 L2,14 Z M0,14 L0,14 C0,6.26754774 6.26702203,0 14,0 C21.7324523,0 28,6.26702203 28,14 C28,21.7324523 21.732978,28 14,28 C6.26754774,28 0,21.732978 0,14 L0,14 Z" id="Shape" fill-opacity="0.2" fill="#000000"></path>
+        <path d="M16.4994509,12 L11.9975446,12 C11.4463114,12 11,12.4490268 11,13.0029293 L11,17.491272 L16.4994509,12 Z M11.1367161,19.3689248 C11.1138915,19.40931 11.099976,19.4517095 11.099976,19.5009121 C11.099976,19.5708113 11.1280605,19.6269803 11.1698752,19.6831493 L11.8139462,20.3272204 C11.8701152,20.3696591 11.9262842,20.3971195 11.9961834,20.3971195 C12.0667067,20.3971195 12.1222516,20.3696591 12.1784205,20.3272204 L13.5056409,19 L19.0024554,19 C19.5536886,19 20,18.5509732 20,17.9970707 L20,13.0029293 C20,12.8551278 19.9694422,12.716027 19.9144529,12.591188 L21.8301248,10.6755161 C21.8719395,10.6337014 21.900024,10.5638022 21.900024,10.4932789 C21.900024,10.437734 21.8719395,10.3672108 21.8301248,10.3253961 L21.1860538,9.68132501 C21.1298848,9.62515602 21.0737158,9.59707153 21.0038166,9.59707153 C20.9339174,9.59707153 20.8777484,9.62515602 20.8215795,9.68132501 L19.8517551,10.6497071 C19.8450712,10.6591494 19.8378312,10.6678097 19.8301248,10.6755161 L11.1367161,19.3689248 Z M17.001,11 L17.001,10.003 C17.001,9.438 16.554,9 16.003,9 L8.998,9 C8.447,9 8,9.449 8,10.003 L8,14.997 C8,15.562 8.447,16 8.998,16 L10,16 L10,12.003 C10,11.449 10.446,11 10.998,11 L17,11 L17.001,11 Z" id="Shape-Copy-3" fill="#4A4A4A"></path>
+    </g>
+</svg>

browser/components/loop/content/shared/img/svg/sharing.svg

@@ -0,0 +1 @@
+<svg width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg"><g fill="none"><rect opacity=".95" fill="#fff" x="2" y="2" width="24" height="24" rx="40"/><path d="M2 14c0 6.629 5.373 12 12 12 6.629 0 12-5.373 12-12 0-6.629-5.373-12-12-12-6.629 0-12 5.373-12 12zm-2 0c0-7.732 6.267-14 14-14 7.732 0 14 6.267 14 14 0 7.732-6.267 14-14 14-7.732 0-14-6.267-14-14z" fill-opacity=".2" fill="#000"/><rect fill="#4A4A4A" x="11" y="12" width="9" height="7" rx="1"/><path d="M17 11v-.997c0-.565-.447-1.003-.998-1.003h-7.005c-.551 0-.998.449-.998 1.003v4.994c0 .565.447 1.003.998 1.003h1.002v-3.997c0-.554.446-1.003.998-1.003h6.002z" fill="#4A4A4A"/></g></svg>

browser/components/loop/content/shared/img/svg/video-hover.svg

@@ -0,0 +1 @@
+<svg width="31" height="24" viewBox="0 0 31 24" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M11.592 16.408c.403.391.87.592 1.437.592h4.954c.554 0 1.033-.202 1.424-.592.404-.403.592-.87.592-1.437v-1.16l2.836 2.836c.089.089.189.126.316.126l.176-.038c.189-.076.277-.215.277-.416v-7.652c0-.189-.088-.327-.277-.416l-.176-.025c-.126 0-.227.038-.316.126l-2.836 2.824v-1.16c0-.555-.189-1.033-.592-1.424-.391-.404-.87-.592-1.424-.592h-4.954c-.567 0-1.034.189-1.437.592-.391.391-.592.869-.592 1.424v4.954c0 .567.202 1.034.592 1.437" fill="#fff"/></g></svg>

browser/components/loop/content/shared/img/svg/video-mute-hover.svg

@@ -0,0 +1 @@
+<svg width="31" height="24" viewBox="0 0 31 24" xmlns="http://www.w3.org/2000/svg"><path d="M13.506 17.003h4.478c.554 0 1.033-.202 1.424-.592.404-.403.592-.87.592-1.437v-1.16l2.836 2.836c.089.089.189.126.316.126l.176-.038c.189-.076.277-.215.277-.416v-7.652c0-.189-.088-.327-.277-.416l-.176-.025c-.126 0-.227.038-.316.126l-2.836 2.824v-.671l1.83-1.83c.042-.042.07-.112.07-.182 0-.056-.028-.126-.07-.168l-.644-.644c-.056-.056-.112-.084-.182-.084-.07 0-.126.028-.182.084l-9.652 9.637c-.042.056-.07.112-.07.182 0 .07.028.126.07.182l.644.644c.056.042.112.07.182.07.071 0 .126-.027.182-.07l1.327-1.327zm4.948-8.95c-.15-.034-.307-.05-.471-.05h-4.954c-.567 0-1.034.189-1.437.592-.391.391-.592.869-.592 1.424v4.954c0 .165.017.322.051.471l7.403-7.392z" fill="#fff"/></svg>

browser/components/loop/content/shared/img/svg/video-mute.svg

@@ -0,0 +1 @@
+<svg width="31" height="24" viewBox="0 0 31 24" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M13.506 17.003h4.478c.554 0 1.033-.202 1.424-.592.404-.403.592-.87.592-1.437v-1.16l2.836 2.836c.089.089.189.126.316.126l.176-.038c.189-.076.277-.215.277-.416v-7.652c0-.189-.088-.327-.277-.416l-.176-.025c-.126 0-.227.038-.316.126l-2.836 2.824v-.671l1.83-1.83c.042-.042.07-.112.07-.182 0-.056-.028-.126-.07-.168l-.644-.644c-.056-.056-.112-.084-.182-.084-.07 0-.126.028-.182.084l-9.652 9.637c-.042.056-.07.112-.07.182 0 .07.028.126.07.182l.644.644c.056.042.112.07.182.07.071 0 .126-.027.182-.07l1.327-1.327zm4.948-8.95c-.15-.034-.307-.05-.471-.05h-4.954c-.567 0-1.034.189-1.437.592-.391.391-.592.869-.592 1.424v4.954c0 .165.017.322.051.471l7.403-7.392z" fill="#00A9DC"/></g></svg>

browser/components/loop/content/shared/img/svg/video.svg

@@ -0,0 +1 @@
+<svg width="31" height="24" viewBox="0 0 31 24" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M11.592 16.408c.403.391.87.592 1.437.592h4.954c.554 0 1.033-.202 1.424-.592.404-.403.592-.87.592-1.437v-1.16l2.836 2.836c.089.089.189.126.316.126l.176-.038c.189-.076.277-.215.277-.416v-7.652c0-.189-.088-.327-.277-.416l-.176-.025c-.126 0-.227.038-.316.126l-2.836 2.824v-1.16c0-.555-.189-1.033-.592-1.424-.391-.404-.87-.592-1.424-.592h-4.954c-.567 0-1.034.189-1.437.592-.391.391-.592.869-.592 1.424v4.954c0 .567.202 1.034.592 1.437" fill="#00A9DC"/></g></svg>

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

@@ -60,7 +60,7 @@ loop.shared.views = (function(_, mozL10n) {
       }
 
       var prefix = this.props.enabled ? "mute" : "unmute";
-      var suffix = "button_title";
+      var suffix = (this.props.type === "video") ? "button_title2" : "button_title";
       var msgId = [prefix, this.props.scope, this.props.type, suffix].join("_");
       return mozL10n.get(msgId);
     },
@@ -194,6 +194,12 @@ loop.shared.views = (function(_, mozL10n) {
       };
     },
 
+    getInitialState: function() {
+      return {
+        idle: false
+      };
+    },
+
     propTypes: {
       audio: React.PropTypes.object.isRequired,
       dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired,
@@ -225,13 +231,83 @@ loop.shared.views = (function(_, mozL10n) {
       }
     },
 
+    componentDidMount: function() {
+      this.userActivity = false;
+      this.startIdleCountDown();
+      document.body.addEventListener("mousemove", this._onBodyMouseMove);
+    },
+
+    componentWillUnmount: function() {
+      clearTimeout(this.inactivityTimeout);
+      clearInterval(this.inactivityPollInterval);
+      document.body.removeEventListener("mousemove", this._onBodyMouseMove);
+    },
+
+    /**
+     * If the conversation toolbar is idle, update its state and initialize the countdown
+     * to return of the idle state. If the toolbar is active, only it's updated the userActivity flag.
+     */
+    _onBodyMouseMove: function() {
+      if (this.state.idle) {
+        this.setState({idle: false});
+        this.startIdleCountDown();
+      } else {
+        this.userActivity = true;
+      }
+    },
+
+    /**
+     * Instead of resetting the timeout for every mousemove (this event is called to many times,
+     * when the mouse is moving, we check the flat userActivity every 4 seconds. If the flag is activated,
+     * the user is still active, and we can restart the countdown for the idle state
+     */
+    checkUserActivity: function() {
+      this.inactivityPollInterval = setInterval(function() {
+        if (this.userActivity) {
+          this.userActivity = false;
+          this.restartIdleCountDown();
+        }
+      }.bind(this), 4000);
+    },
+
+    /**
+     * Stop the execution of the current inactivity countdown and it starts a new one.
+     */
+    restartIdleCountDown: function() {
+      clearTimeout(this.inactivityTimeout);
+      this.startIdleCountDown();
+    },
+
+    /**
+     * Launchs the process to check the user activity and the inactivity countdown to change
+     * the toolbar to idle.
+     * When the toolbar changes to idle, we remove the procces to check the user activity,
+     * because the toolbar is going to be updated directly when the user moves the mouse.
+     */
+    startIdleCountDown: function() {
+      this.checkUserActivity();
+      this.inactivityTimeout = setTimeout(function() {
+        this.setState({idle: true});
+        clearInterval(this.inactivityPollInterval);
+      }.bind(this), 6000);
+    },
+
     _getHangupButtonLabel: function() {
       return this.props.hangupButtonLabel || mozL10n.get("hangup_button_caption2");
     },
 
     render: function() {
+      var cx = React.addons.classSet;
+      var conversationToolbarCssClasses = cx({
+        "conversation-toolbar": true,
+        "idle": this.state.idle
+      });
+      var mediaButtonGroupCssClasses = cx({
+        "conversation-toolbar-media-btn-group-box": true,
+        "hide": (!this.props.video.visible && !this.props.audio.visible)
+      });
       return (
-        React.createElement("ul", {className: "conversation-toolbar"}, 
+        React.createElement("ul", {className: conversationToolbarCssClasses}, 
           React.createElement("li", {className: "conversation-toolbar-btn-box btn-hangup-entry"}, 
             React.createElement("button", {className: "btn btn-hangup", 
                     disabled: !this.props.enableHangup, 
@@ -241,16 +317,17 @@ loop.shared.views = (function(_, mozL10n) {
             )
           ), 
           React.createElement("li", {className: "conversation-toolbar-btn-box"}, 
-            React.createElement(MediaControlButton, {action: this.handleToggleVideo, 
-                                enabled: this.props.video.enabled, 
-                                scope: "local", type: "video", 
-                                visible: this.props.video.visible})
-          ), 
-          React.createElement("li", {className: "conversation-toolbar-btn-box"}, 
-            React.createElement(MediaControlButton, {action: this.handleToggleAudio, 
-                                enabled: this.props.audio.enabled, 
-                                scope: "local", type: "audio", 
-                                visible: this.props.audio.visible})
+            React.createElement("div", {className: mediaButtonGroupCssClasses}, 
+                React.createElement(MediaControlButton, {action: this.handleToggleVideo, 
+                                    enabled: this.props.video.enabled, 
+                                    scope: "local", type: "video", 
+                                    visible: this.props.video.visible}), 
+                React.createElement(MediaControlButton, {action: this.handleToggleAudio, 
+                                    enabled: this.props.audio.enabled, 
+                                    scope: "local", type: "audio", 
+                                    visible: this.props.audio.visible})
+
+            )
           ), 
           React.createElement("li", {className: "conversation-toolbar-btn-box"}, 
             React.createElement(ScreenShareControlButton, {dispatcher: this.props.dispatcher, 
@@ -477,16 +554,18 @@ loop.shared.views = (function(_, mozL10n) {
           React.createElement("div", {className: "conversation in-call"}, 
             React.createElement("div", {className: "media nested"}, 
               React.createElement("div", {className: "video_wrapper remote_wrapper"}, 
-                React.createElement("div", {className: "video_inner remote focus-stream"})
+                React.createElement("div", {className: "video_inner remote focus-stream"}, 
+                  React.createElement(ConversationToolbar, {
+                    audio: this.state.audio, 
+                    dispatcher: this.props.dispatcher, 
+                    hangup: this.hangup, 
+                    publishStream: this.publishStream, 
+                    video: this.state.video})
+                )
               ), 
               React.createElement("div", {className: localStreamClasses})
-            ), 
-            React.createElement(ConversationToolbar, {
-              audio: this.state.audio, 
-              dispatcher: this.props.dispatcher, 
-              hangup: this.hangup, 
-              publishStream: this.publishStream, 
-              video: this.state.video})
+
+            )
           )
         )
       );
@@ -1064,6 +1143,7 @@ loop.shared.views = (function(_, mozL10n) {
                this.state.localMediaAboslutelyPositioned ?
                 this.renderLocalVideo() : null, 
                this.props.children
+
             ), 
             React.createElement("div", {className: screenShareStreamClasses}, 
               React.createElement(MediaView, {displayAvatar: false, 

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

@@ -60,7 +60,7 @@ loop.shared.views = (function(_, mozL10n) {
       }
 
       var prefix = this.props.enabled ? "mute" : "unmute";
-      var suffix = "button_title";
+      var suffix = (this.props.type === "video") ? "button_title2" : "button_title";
       var msgId = [prefix, this.props.scope, this.props.type, suffix].join("_");
       return mozL10n.get(msgId);
     },
@@ -194,6 +194,12 @@ loop.shared.views = (function(_, mozL10n) {
       };
     },
 
+    getInitialState: function() {
+      return {
+        idle: false
+      };
+    },
+
     propTypes: {
       audio: React.PropTypes.object.isRequired,
       dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired,
@@ -225,13 +231,83 @@ loop.shared.views = (function(_, mozL10n) {
       }
     },
 
+    componentDidMount: function() {
+      this.userActivity = false;
+      this.startIdleCountDown();
+      document.body.addEventListener("mousemove", this._onBodyMouseMove);
+    },
+
+    componentWillUnmount: function() {
+      clearTimeout(this.inactivityTimeout);
+      clearInterval(this.inactivityPollInterval);
+      document.body.removeEventListener("mousemove", this._onBodyMouseMove);
+    },
+
+    /**
+     * If the conversation toolbar is idle, update its state and initialize the countdown
+     * to return of the idle state. If the toolbar is active, only it's updated the userActivity flag.
+     */
+    _onBodyMouseMove: function() {
+      if (this.state.idle) {
+        this.setState({idle: false});
+        this.startIdleCountDown();
+      } else {
+        this.userActivity = true;
+      }
+    },
+
+    /**
+     * Instead of resetting the timeout for every mousemove (this event is called to many times,
+     * when the mouse is moving, we check the flat userActivity every 4 seconds. If the flag is activated,
+     * the user is still active, and we can restart the countdown for the idle state
+     */
+    checkUserActivity: function() {
+      this.inactivityPollInterval = setInterval(function() {
+        if (this.userActivity) {
+          this.userActivity = false;
+          this.restartIdleCountDown();
+        }
+      }.bind(this), 4000);
+    },
+
+    /**
+     * Stop the execution of the current inactivity countdown and it starts a new one.
+     */
+    restartIdleCountDown: function() {
+      clearTimeout(this.inactivityTimeout);
+      this.startIdleCountDown();
+    },
+
+    /**
+     * Launchs the process to check the user activity and the inactivity countdown to change
+     * the toolbar to idle.
+     * When the toolbar changes to idle, we remove the procces to check the user activity,
+     * because the toolbar is going to be updated directly when the user moves the mouse.
+     */
+    startIdleCountDown: function() {
+      this.checkUserActivity();
+      this.inactivityTimeout = setTimeout(function() {
+        this.setState({idle: true});
+        clearInterval(this.inactivityPollInterval);
+      }.bind(this), 6000);
+    },
+
     _getHangupButtonLabel: function() {
       return this.props.hangupButtonLabel || mozL10n.get("hangup_button_caption2");
     },
 
     render: function() {
+      var cx = React.addons.classSet;
+      var conversationToolbarCssClasses = cx({
+        "conversation-toolbar": true,
+        "idle": this.state.idle
+      });
+      var mediaButtonGroupCssClasses = cx({
+        "conversation-toolbar-media-btn-group-box": true,
+        "hide": (!this.props.video.visible && !this.props.audio.visible)
+      });
       return (
-        <ul className="conversation-toolbar">
+        <ul className={conversationToolbarCssClasses}>
           <li className="conversation-toolbar-btn-box btn-hangup-entry">
             <button className="btn btn-hangup"
                     disabled={!this.props.enableHangup}
@@ -241,16 +317,17 @@ loop.shared.views = (function(_, mozL10n) {
             </button>
           </li>
           <li className="conversation-toolbar-btn-box">
-            <MediaControlButton action={this.handleToggleVideo}
-                                enabled={this.props.video.enabled}
-                                scope="local" type="video"
-                                visible={this.props.video.visible} />
-          </li>
-          <li className="conversation-toolbar-btn-box">
-            <MediaControlButton action={this.handleToggleAudio}
-                                enabled={this.props.audio.enabled}
-                                scope="local" type="audio"
-                                visible={this.props.audio.visible} />
+            <div className={mediaButtonGroupCssClasses}>
+                <MediaControlButton action={this.handleToggleVideo}
+                                    enabled={this.props.video.enabled}
+                                    scope="local" type="video"
+                                    visible={this.props.video.visible}/>
+                <MediaControlButton action={this.handleToggleAudio}
+                                    enabled={this.props.audio.enabled}
+                                    scope="local" type="audio"
+                                    visible={this.props.audio.visible}/>
+
+            </div>
           </li>
           <li className="conversation-toolbar-btn-box">
             <ScreenShareControlButton dispatcher={this.props.dispatcher}
@@ -477,16 +554,18 @@ loop.shared.views = (function(_, mozL10n) {
           <div className="conversation in-call">
             <div className="media nested">
               <div className="video_wrapper remote_wrapper">
-                <div className="video_inner remote focus-stream"></div>
+                <div className="video_inner remote focus-stream">
+                  <ConversationToolbar
+                    audio={this.state.audio}
+                    dispatcher={this.props.dispatcher}
+                    hangup={this.hangup}
+                    publishStream={this.publishStream}
+                    video={this.state.video} />
+                </div>
               </div>
               <div className={localStreamClasses}></div>
+
             </div>
-            <ConversationToolbar
-              audio={this.state.audio}
-              dispatcher={this.props.dispatcher}
-              hangup={this.hangup}
-              publishStream={this.publishStream}
-              video={this.state.video} />
           </div>
         </div>
       );
@@ -1064,6 +1143,7 @@ loop.shared.views = (function(_, mozL10n) {
               { this.state.localMediaAboslutelyPositioned ?
                 this.renderLocalVideo() : null }
               { this.props.children }
+
             </div>
             <div className={screenShareStreamClasses}>
               <MediaView displayAvatar={false}

browser/components/loop/jar.mn

@@ -58,6 +58,23 @@ browser.jar:
   content/browser/loop/shared/img/svg/glyph-signin-16x16.svg    (content/shared/img/svg/glyph-signin-16x16.svg)
   content/browser/loop/shared/img/svg/glyph-signout-16x16.svg   (content/shared/img/svg/glyph-signout-16x16.svg)
   content/browser/loop/shared/img/svg/glyph-help-16x16.svg      (content/shared/img/svg/glyph-help-16x16.svg)
+  content/browser/loop/shared/img/svg/exit.svg                  (content/shared/img/svg/exit.svg)
+  content/browser/loop/shared/img/svg/audio.svg                 (content/shared/img/svg/audio.svg)
+  content/browser/loop/shared/img/svg/audio-hover.svg           (content/shared/img/svg/audio-hover.svg)
+  content/browser/loop/shared/img/svg/audio-mute.svg            (content/shared/img/svg/audio-mute.svg)
+  content/browser/loop/shared/img/svg/audio-mute-hover.svg      (content/shared/img/svg/audio-mute-hover.svg)
+  content/browser/loop/shared/img/svg/video.svg                 (content/shared/img/svg/video.svg)
+  content/browser/loop/shared/img/svg/video-hover.svg           (content/shared/img/svg/video-hover.svg)
+  content/browser/loop/shared/img/svg/video-mute.svg            (content/shared/img/svg/video-mute.svg)
+  content/browser/loop/shared/img/svg/video-mute-hover.svg      (content/shared/img/svg/video-mute-hover.svg)
+  content/browser/loop/shared/img/svg/settings.svg              (content/shared/img/svg/settings.svg)
+  content/browser/loop/shared/img/svg/settings-hover.svg        (content/shared/img/svg/settings-hover.svg)
+  content/browser/loop/shared/img/svg/sharing.svg               (content/shared/img/svg/sharing.svg)
+  content/browser/loop/shared/img/svg/sharing-hover.svg         (content/shared/img/svg/sharing-hover.svg)
+  content/browser/loop/shared/img/svg/sharing-mute.svg          (content/shared/img/svg/sharing-mute.svg)
+  content/browser/loop/shared/img/svg/media-group.svg           (content/shared/img/svg/media-group.svg)
+  content/browser/loop/shared/img/svg/media-group-left-hover.svg (content/shared/img/svg/media-group-left-hover.svg)
+  content/browser/loop/shared/img/svg/media-group-right-hover.svg (content/shared/img/svg/media-group-right-hover.svg)
   content/browser/loop/shared/img/audio-call-avatar.svg         (content/shared/img/audio-call-avatar.svg)
   content/browser/loop/shared/img/beta-ribbon.svg               (content/shared/img/beta-ribbon.svg)
   content/browser/loop/shared/img/check.svg                     (content/shared/img/check.svg)
@@ -71,6 +88,7 @@ browser.jar:
   content/browser/loop/shared/img/02.png                        (content/shared/img/02.png)
   content/browser/loop/shared/img/02@2x.png                     (content/shared/img/02@2x.png)
   content/browser/loop/shared/img/telefonica.png                (content/shared/img/telefonica.png)
+  content/browser/loop/shared/img/hello_logo.svg                (content/shared/img/hello_logo.svg)
   content/browser/loop/shared/img/telefonica@2x.png             (content/shared/img/telefonica@2x.png)
   content/browser/loop/shared/img/ellipsis-v.svg                (content/shared/img/ellipsis-v.svg)
   content/browser/loop/shared/img/empty_contacts.svg            (content/shared/img/empty_contacts.svg)

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

@@ -110,9 +110,9 @@ body,
 
 .terms-service,
 .terms-service a {
-  font-size: .6rem;
+  font-size: 1.1rem;
   font-weight: 400;
-  color: #adadad;
+  color: #4a4a4a;
 }
 
   .terms-service a {

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

@@ -519,19 +519,19 @@ loop.standaloneRoomViews = (function(mozL10n) {
               isFirefox: this.props.isFirefox, 
               joinRoom: this.joinRoom, 
               roomState: this.state.roomState, 
-              roomUsed: this.state.used})
+              roomUsed: this.state.used}), 
+            React.createElement(sharedViews.ConversationToolbar, {
+              audio: {enabled: !this.state.audioMuted,
+                      visible: this._roomIsActive()}, 
+              dispatcher: this.props.dispatcher, 
+              edit: { visible: false, enabled: false}, 
+              enableHangup: this._roomIsActive(), 
+              hangup: this.leaveRoom, 
+              hangupButtonLabel: mozL10n.get("rooms_leave_button_label"), 
+              publishStream: this.publishStream, 
+              video: {enabled: !this.state.videoMuted,
+                      visible: this._roomIsActive()}})
           ), 
-          React.createElement(sharedViews.ConversationToolbar, {
-            audio: {enabled: !this.state.audioMuted,
-                    visible: this._roomIsActive()}, 
-            dispatcher: this.props.dispatcher, 
-            edit: { visible: false, enabled: false}, 
-            enableHangup: this._roomIsActive(), 
-            hangup: this.leaveRoom, 
-            hangupButtonLabel: mozL10n.get("rooms_leave_button_label"), 
-            publishStream: this.publishStream, 
-            video: {enabled: !this.state.videoMuted,
-                    visible: this._roomIsActive()}}), 
           React.createElement(loop.fxOSMarketplaceViews.FxOSHiddenMarketplaceView, {
             marketplaceSrc: this.state.marketplaceSrc, 
             onMarketplaceMessage: this.state.onMarketplaceMessage}), 

browser/components/loop/standalone/content/js/standaloneRoomViews.jsx

@@ -520,18 +520,18 @@ loop.standaloneRoomViews = (function(mozL10n) {
               joinRoom={this.joinRoom}
               roomState={this.state.roomState}
               roomUsed={this.state.used} />
+            <sharedViews.ConversationToolbar
+              audio={{enabled: !this.state.audioMuted,
+                      visible: this._roomIsActive()}}
+              dispatcher={this.props.dispatcher}
+              edit={{ visible: false, enabled: false }}
+              enableHangup={this._roomIsActive()}
+              hangup={this.leaveRoom}
+              hangupButtonLabel={mozL10n.get("rooms_leave_button_label")}
+              publishStream={this.publishStream}
+              video={{enabled: !this.state.videoMuted,
+                      visible: this._roomIsActive()}} />
           </sharedViews.MediaLayoutView>
-          <sharedViews.ConversationToolbar
-            audio={{enabled: !this.state.audioMuted,
-                    visible: this._roomIsActive()}}
-            dispatcher={this.props.dispatcher}
-            edit={{ visible: false, enabled: false }}
-            enableHangup={this._roomIsActive()}
-            hangup={this.leaveRoom}
-            hangupButtonLabel={mozL10n.get("rooms_leave_button_label")}
-            publishStream={this.publishStream}
-            video={{enabled: !this.state.videoMuted,
-                    visible: this._roomIsActive()}} />
           <loop.fxOSMarketplaceViews.FxOSHiddenMarketplaceView
             marketplaceSrc={this.state.marketplaceSrc}
             onMarketplaceMessage={this.state.onMarketplaceMessage} />

browser/components/loop/standalone/content/l10n/en-US/loop.properties

@@ -15,8 +15,8 @@ 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
+mute_local_video_button_title2=Disable video
+unmute_local_video_button_title2=Enable video
 active_screenshare_button_title=Stop sharing
 inactive_screenshare_button_title=Share your screen
 

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

@@ -26,11 +26,14 @@ describe("loop.conversation", function() {
       },
       setLoopPref: setLoopPrefStub,
       getLoopPref: function(prefName) {
-        if (prefName === "debug.sdk") {
-          return false;
+        switch (prefName) {
+          case "contextInConversations.enabled":
+            return false;
+          case "debug.sdk":
+            return false;
+          default:
+            return "http://fake";
         }
-
-        return "http://fake";
       },
       LOOP_SESSION_TYPE: {
         GUEST: 1,

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

@@ -95,7 +95,7 @@
 
     describe("Unexpected Warnings Check", function() {
       it("should long only the warnings we expect", function() {
-        chai.expect(caughtWarnings.length).to.eql(28);
+        chai.expect(caughtWarnings.length).to.eql(27);
       });
     });
 

browser/components/loop/test/shared/views_test.js

@@ -253,7 +253,7 @@ describe("loop.shared.views", function() {
   });
 
   describe("ConversationToolbar", function() {
-    var hangup, publishStream;
+    var clock, hangup, publishStream;
 
     function mountTestComponent(props) {
       props = _.extend({
@@ -266,6 +266,47 @@ describe("loop.shared.views", function() {
     beforeEach(function() {
       hangup = sandbox.stub();
       publishStream = sandbox.stub();
+      clock = sinon.useFakeTimers();
+    });
+
+    afterEach(function() {
+      clock.restore();
+    });
+
+    it("should start no idle", function() {
+      var comp = mountTestComponent({
+        hangupButtonLabel: "foo",
+        hangup: hangup,
+        publishStream: publishStream
+      });
+      expect(comp.getDOMNode().classList.contains("idle")).eql(false);
+    });
+
+    it("should be on idle state after 6 seconds", function() {
+      var comp = mountTestComponent({
+        hangupButtonLabel: "foo",
+        hangup: hangup,
+        publishStream: publishStream
+      });
+      expect(comp.getDOMNode().classList.contains("idle")).eql(false);
+
+      clock.tick(6001);
+      expect(comp.getDOMNode().classList.contains("idle")).eql(true);
+    });
+
+    it("should remove idle state when the user moves the mouse", function() {
+      var comp = mountTestComponent({
+        hangupButtonLabel: "foo",
+        hangup: hangup,
+        publishStream: publishStream
+      });
+
+      clock.tick(6001);
+      expect(comp.getDOMNode().classList.contains("idle")).eql(true);
+
+      document.body.dispatchEvent(new CustomEvent("mousemove"));
+
+      expect(comp.getDOMNode().classList.contains("idle")).eql(false);
     });
 
     it("should accept a hangupButtonLabel optional prop", function() {

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

@@ -14,6 +14,8 @@
   navigator.mozL10n = document.mozL10n = {
     initialize: function(){},
 
+    getLanguage: function(){},
+
     getDirection: function(){
       if (document.location.search === "?rtl=1") {
         return "rtl";

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

@@ -21,6 +21,7 @@
   var ContactDetailsForm = loop.contacts.ContactDetailsForm;
   var ContactDropdown = loop.contacts.ContactDropdown;
   var ContactDetail = loop.contacts.ContactDetail;
+  var GettingStartedView = loop.panel.GettingStartedView;
   // 1.2. Conversation Window
   var AcceptCallView = loop.conversationViews.AcceptCallView;
   var DesktopPendingConversationView = loop.conversationViews.PendingConversationView;
@@ -489,6 +490,15 @@
     callback(null, fakeFewerContacts); // Defined in fake-mozLoop.js.
   };
 
+  var firstTimeUseMozLoop = _.cloneDeep(navigator.mozLoop);
+  firstTimeUseMozLoop.getLoopPref = function(prop) {
+    if (prop === "gettingStarted.seen") {
+      return false;
+    }
+
+    return true;
+  };
+
   var mockContact = {
     name: ["Mr Smith"],
     email: [{
@@ -542,7 +552,7 @@
         "dropdown-white", "dropdown-active", "dropdown-disabled", "edit",
         "edit-active", "edit-disabled", "edit-white", "expand", "expand-active",
         "expand-disabled", "minimize", "minimize-active", "minimize-disabled",
-        "settings-cog"
+        "settings-cog-grey", "settings-cog-white"
       ],
       "14x14": ["audio", "audio-active", "audio-disabled", "facemute",
         "facemute-active", "facemute-disabled", "hangup", "hangup-active",
@@ -716,6 +726,21 @@
                            height: 410, 
                            summary: "Re-sign-in view", 
                            width: 332}, 
+              React.createElement("div", {className: "panel"}, 
+                React.createElement(PanelView, {client: mockClient, 
+                  dispatcher: dispatcher, 
+                  mozLoop: firstTimeUseMozLoop, 
+                  notifications: notifications, 
+                  roomStore: roomStore, 
+                  selectedTab: "rooms"})
+              )
+            ), 
+
+            React.createElement(FramedExample, {cssClass: "fx-embedded-panel", 
+              dashed: true, 
+              height: 410, 
+              summary: "Re-sign-in view", 
+              width: 332}, 
               React.createElement("div", {className: "panel"}, 
                 React.createElement(SignInRequestView, {mozLoop: mockMozLoopLoggedIn})
               )
@@ -981,76 +1006,38 @@
           ), 
 
           React.createElement(Section, {name: "ConversationToolbar"}, 
-            React.createElement("h2", null, "Desktop Conversation Window"), 
             React.createElement("div", null, 
               React.createElement(FramedExample, {dashed: true, 
-                             height: 26, 
+                             height: 56, 
                              summary: "Default", 
                              width: 300}, 
                 React.createElement("div", {className: "fx-embedded"}, 
-                  React.createElement(ConversationToolbar, {audio: {enabled: true}, 
+                  React.createElement(ConversationToolbar, {audio: { enabled: true, visible: true}, 
                                        hangup: noop, 
                                        publishStream: noop, 
-                                       video: {enabled: true}})
+                                       video: { enabled: true, visible: true}})
                 )
               ), 
               React.createElement(FramedExample, {dashed: true, 
-                             height: 26, 
+                             height: 56, 
                              summary: "Video muted", 
                              width: 300}, 
                 React.createElement("div", {className: "fx-embedded"}, 
-                  React.createElement(ConversationToolbar, {audio: {enabled: true}, 
+                  React.createElement(ConversationToolbar, {audio: { enabled: true, visible: true}, 
                                        hangup: noop, 
                                        publishStream: noop, 
-                                       video: {enabled: false}})
+                                       video: { enabled: false, visible: true}})
                 )
               ), 
               React.createElement(FramedExample, {dashed: true, 
-                             height: 26, 
+                             height: 56, 
                              summary: "Audio muted", 
                              width: 300}, 
                 React.createElement("div", {className: "fx-embedded"}, 
-                  React.createElement(ConversationToolbar, {audio: {enabled: false}, 
+                  React.createElement(ConversationToolbar, {audio: { enabled: false, visible: true}, 
                                        hangup: noop, 
                                        publishStream: noop, 
-                                       video: {enabled: true}})
-                )
-              )
-            ), 
-
-            React.createElement("h2", null, "Standalone"), 
-            React.createElement("div", {className: "standalone override-position"}, 
-              React.createElement(FramedExample, {dashed: true, 
-                             height: 26, 
-                             summary: "Default", 
-                             width: 300}, 
-                React.createElement("div", {className: "fx-embedded"}, 
-                  React.createElement(ConversationToolbar, {audio: {enabled: true}, 
-                                       hangup: noop, 
-                                       publishStream: noop, 
-                                       video: {enabled: true}})
-                )
-              ), 
-              React.createElement(FramedExample, {dashed: true, 
-                             height: 26, 
-                             summary: "Video muted", 
-                             width: 300}, 
-                React.createElement("div", {className: "fx-embedded"}, 
-                  React.createElement(ConversationToolbar, {audio: {enabled: true}, 
-                                       hangup: noop, 
-                                       publishStream: noop, 
-                                       video: {enabled: false}})
-                )
-              ), 
-              React.createElement(FramedExample, {dashed: true, 
-                             height: 26, 
-                             summary: "Audio muted", 
-                             width: 300}, 
-                React.createElement("div", {className: "fx-embedded"}, 
-                  React.createElement(ConversationToolbar, {audio: {enabled: false}, 
-                                       hangup: noop, 
-                                       publishStream: noop, 
-                                       video: {enabled: true}})
+                                       video: { enabled: true, visible: true}})
                 )
               )
             )
@@ -1110,14 +1097,14 @@
                            width: 298}, 
               React.createElement("div", {className: "fx-embedded"}, 
                 React.createElement(OngoingConversationView, {
-                  audio: {enabled: true}, 
+                  audio: { enabled: true, visible: true}, 
                   conversationStore: conversationStores[0], 
                   dispatcher: dispatcher, 
                   localPosterUrl: "sample-img/video-screen-local.png", 
                   mediaConnected: true, 
                   remotePosterUrl: "sample-img/video-screen-remote.png", 
                   remoteVideoEnabled: true, 
-                  video: {enabled: true}})
+                  video: { enabled: true, visible: true}})
               )
             ), 
 
@@ -1128,14 +1115,14 @@
                            width: 600}, 
               React.createElement("div", {className: "fx-embedded"}, 
                 React.createElement(OngoingConversationView, {
-                  audio: {enabled: true}, 
+                  audio: { enabled: true, visible: true}, 
                   conversationStore: conversationStores[1], 
                   dispatcher: dispatcher, 
                   localPosterUrl: "sample-img/video-screen-local.png", 
                   mediaConnected: true, 
                   remotePosterUrl: "sample-img/video-screen-remote.png", 
                   remoteVideoEnabled: true, 
-                  video: {enabled: true}})
+                  video: { enabled: true, visible: true}})
               )
             ), 
 
@@ -1145,14 +1132,14 @@
                            width: 800}, 
               React.createElement("div", {className: "fx-embedded"}, 
                 React.createElement(OngoingConversationView, {
-                  audio: {enabled: true}, 
+                  audio: { enabled: true, visible: true}, 
                   conversationStore: conversationStores[2], 
                   dispatcher: dispatcher, 
                   localPosterUrl: "sample-img/video-screen-local.png", 
                   mediaConnected: true, 
                   remotePosterUrl: "sample-img/video-screen-remote.png", 
                   remoteVideoEnabled: true, 
-                  video: {enabled: true}})
+                  video: { enabled: true, visible: true}})
               )
             ), 
 
@@ -1163,14 +1150,14 @@
                            width: 298}, 
               React.createElement("div", {className: "fx-embedded"}, 
                 React.createElement(OngoingConversationView, {
-                  audio: {enabled: true}, 
+                  audio: { enabled: true, visible: true}, 
                   conversationStore: conversationStores[3], 
                   dispatcher: dispatcher, 
                   localPosterUrl: "sample-img/video-screen-local.png", 
                   mediaConnected: true, 
                   remotePosterUrl: "sample-img/video-screen-remote.png", 
                   remoteVideoEnabled: true, 
-                  video: {enabled: false}})
+                  video: { enabled: true, visible: true}})
               )
             ), 
 
@@ -1181,14 +1168,14 @@
                            width: 298}, 
               React.createElement("div", {className: "fx-embedded"}, 
                 React.createElement(OngoingConversationView, {
-                  audio: {enabled: true}, 
+                  audio: { enabled: true, visible: true}, 
                   conversationStore: conversationStores[4], 
                   dispatcher: dispatcher, 
                   localPosterUrl: "sample-img/video-screen-local.png", 
                   mediaConnected: true, 
                   remotePosterUrl: "sample-img/video-screen-remote.png", 
                   remoteVideoEnabled: false, 
-                  video: {enabled: true}})
+                  video: { enabled: true, visible: true}})
               )
             )
 
@@ -1681,7 +1668,7 @@
 
       // This simulates the mocha layout for errors which means we can run
       // this alongside our other unit tests but use the same harness.
-      var expectedWarningsCount = 16;
+      var expectedWarningsCount = 10;
       var warningsMismatch = caughtWarnings.length !== expectedWarningsCount;
       if (uncaughtError || warningsMismatch) {
         $("#results").append("<div class='failures'><em>" +

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

@@ -21,6 +21,7 @@
   var ContactDetailsForm = loop.contacts.ContactDetailsForm;
   var ContactDropdown = loop.contacts.ContactDropdown;
   var ContactDetail = loop.contacts.ContactDetail;
+  var GettingStartedView = loop.panel.GettingStartedView;
   // 1.2. Conversation Window
   var AcceptCallView = loop.conversationViews.AcceptCallView;
   var DesktopPendingConversationView = loop.conversationViews.PendingConversationView;
@@ -489,6 +490,15 @@
     callback(null, fakeFewerContacts); // Defined in fake-mozLoop.js.
   };
 
+  var firstTimeUseMozLoop = _.cloneDeep(navigator.mozLoop);
+  firstTimeUseMozLoop.getLoopPref = function(prop) {
+    if (prop === "gettingStarted.seen") {
+      return false;
+    }
+
+    return true;
+  };
+
   var mockContact = {
     name: ["Mr Smith"],
     email: [{
@@ -542,7 +552,7 @@
         "dropdown-white", "dropdown-active", "dropdown-disabled", "edit",
         "edit-active", "edit-disabled", "edit-white", "expand", "expand-active",
         "expand-disabled", "minimize", "minimize-active", "minimize-disabled",
-        "settings-cog"
+        "settings-cog-grey", "settings-cog-white"
       ],
       "14x14": ["audio", "audio-active", "audio-disabled", "facemute",
         "facemute-active", "facemute-disabled", "hangup", "hangup-active",
@@ -716,6 +726,21 @@
                            height={410}
                            summary="Re-sign-in view"
                            width={332}>
+              <div className="panel">
+                <PanelView client={mockClient}
+                  dispatcher={dispatcher}
+                  mozLoop={firstTimeUseMozLoop}
+                  notifications={notifications}
+                  roomStore={roomStore}
+                  selectedTab="rooms" />
+              </div>
+            </FramedExample>
+
+            <FramedExample cssClass="fx-embedded-panel"
+              dashed={true}
+              height={410}
+              summary="Re-sign-in view"
+              width={332}>
               <div className="panel">
                 <SignInRequestView mozLoop={mockMozLoopLoggedIn} />
               </div>
@@ -981,76 +1006,38 @@
           </Section>
 
           <Section name="ConversationToolbar">
-            <h2>Desktop Conversation Window</h2>
             <div>
               <FramedExample dashed={true}
-                             height={26}
+                             height={56}
                              summary="Default"
                              width={300}>
                 <div className="fx-embedded">
-                  <ConversationToolbar audio={{enabled: true}}
+                  <ConversationToolbar audio={{ enabled: true, visible: true }}
                                        hangup={noop}
                                        publishStream={noop}
-                                       video={{enabled: true}} />
+                                       video={{ enabled: true, visible: true }} />
                 </div>
               </FramedExample>
               <FramedExample dashed={true}
-                             height={26}
+                             height={56}
                              summary="Video muted"
                              width={300}>
                 <div className="fx-embedded">
-                  <ConversationToolbar audio={{enabled: true}}
+                  <ConversationToolbar audio={{ enabled: true, visible: true }}
                                        hangup={noop}
                                        publishStream={noop}
-                                       video={{enabled: false}} />
+                                       video={{ enabled: false, visible: true }} />
                 </div>
               </FramedExample>
               <FramedExample dashed={true}
-                             height={26}
+                             height={56}
                              summary="Audio muted"
                              width={300}>
                 <div className="fx-embedded">
-                  <ConversationToolbar audio={{enabled: false}}
+                  <ConversationToolbar audio={{ enabled: false, visible: true }}
                                        hangup={noop}
                                        publishStream={noop}
-                                       video={{enabled: true}} />
-                </div>
-              </FramedExample>
-            </div>
-
-            <h2>Standalone</h2>
-            <div className="standalone override-position">
-              <FramedExample dashed={true}
-                             height={26}
-                             summary="Default"
-                             width={300}>
-                <div className="fx-embedded">
-                  <ConversationToolbar audio={{enabled: true}}
-                                       hangup={noop}
-                                       publishStream={noop}
-                                       video={{enabled: true}} />
-                </div>
-              </FramedExample>
-              <FramedExample dashed={true}
-                             height={26}
-                             summary="Video muted"
-                             width={300}>
-                <div className="fx-embedded">
-                  <ConversationToolbar audio={{enabled: true}}
-                                       hangup={noop}
-                                       publishStream={noop}
-                                       video={{enabled: false}} />
-                </div>
-              </FramedExample>
-              <FramedExample dashed={true}
-                             height={26}
-                             summary="Audio muted"
-                             width={300}>
-                <div className="fx-embedded">
-                  <ConversationToolbar audio={{enabled: false}}
-                                       hangup={noop}
-                                       publishStream={noop}
-                                       video={{enabled: true}} />
+                                       video={{ enabled: true, visible: true }} />
                 </div>
               </FramedExample>
             </div>
@@ -1110,14 +1097,14 @@
                            width={298}>
               <div className="fx-embedded">
                 <OngoingConversationView
-                  audio={{enabled: true}}
+                  audio={{ enabled: true, visible: true }}
                   conversationStore={conversationStores[0]}
                   dispatcher={dispatcher}
                   localPosterUrl="sample-img/video-screen-local.png"
                   mediaConnected={true}
                   remotePosterUrl="sample-img/video-screen-remote.png"
                   remoteVideoEnabled={true}
-                  video={{enabled: true}} />
+                  video={{ enabled: true, visible: true }} />
               </div>
             </FramedExample>
 
@@ -1128,14 +1115,14 @@
                            width={600}>
               <div className="fx-embedded">
                 <OngoingConversationView
-                  audio={{enabled: true}}
+                  audio={{ enabled: true, visible: true }}
                   conversationStore={conversationStores[1]}
                   dispatcher={dispatcher}
                   localPosterUrl="sample-img/video-screen-local.png"
                   mediaConnected={true}
                   remotePosterUrl="sample-img/video-screen-remote.png"
                   remoteVideoEnabled={true}
-                  video={{enabled: true}} />
+                  video={{ enabled: true, visible: true }} />
               </div>
             </FramedExample>
 
@@ -1145,14 +1132,14 @@
                            width={800}>
               <div className="fx-embedded">
                 <OngoingConversationView
-                  audio={{enabled: true}}
+                  audio={{ enabled: true, visible: true }}
                   conversationStore={conversationStores[2]}
                   dispatcher={dispatcher}
                   localPosterUrl="sample-img/video-screen-local.png"
                   mediaConnected={true}
                   remotePosterUrl="sample-img/video-screen-remote.png"
                   remoteVideoEnabled={true}
-                  video={{enabled: true}} />
+                  video={{ enabled: true, visible: true }} />
               </div>
             </FramedExample>
 
@@ -1163,14 +1150,14 @@
                            width={298}>
               <div className="fx-embedded">
                 <OngoingConversationView
-                  audio={{enabled: true}}
+                  audio={{ enabled: true, visible: true }}
                   conversationStore={conversationStores[3]}
                   dispatcher={dispatcher}
                   localPosterUrl="sample-img/video-screen-local.png"
                   mediaConnected={true}
                   remotePosterUrl="sample-img/video-screen-remote.png"
                   remoteVideoEnabled={true}
-                  video={{enabled: false}} />
+                  video={{ enabled: true, visible: true }} />
               </div>
             </FramedExample>
 
@@ -1181,14 +1168,14 @@
                            width={298} >
               <div className="fx-embedded">
                 <OngoingConversationView
-                  audio={{enabled: true}}
+                  audio={{ enabled: true, visible: true }}
                   conversationStore={conversationStores[4]}
                   dispatcher={dispatcher}
                   localPosterUrl="sample-img/video-screen-local.png"
                   mediaConnected={true}
                   remotePosterUrl="sample-img/video-screen-remote.png"
                   remoteVideoEnabled={false}
-                  video={{enabled: true}} />
+                  video={{ enabled: true, visible: true }} />
               </div>
             </FramedExample>
 
@@ -1681,7 +1668,7 @@
 
       // This simulates the mocha layout for errors which means we can run
       // this alongside our other unit tests but use the same harness.
-      var expectedWarningsCount = 16;
+      var expectedWarningsCount = 10;
       var warningsMismatch = caughtWarnings.length !== expectedWarningsCount;
       if (uncaughtError || warningsMismatch) {
         $("#results").append("<div class='failures'><em>" +

browser/components/nsBrowserGlue.js

@@ -1021,7 +1021,7 @@ BrowserGlue.prototype = {
 
 #ifdef NIGHTLY_BUILD
     // Registering Shumway bootstrap script the child processes.
-    aWindow.messageManager.loadFrameScript("chrome://shumway/content/bootstrap-content.js", true);
+    Services.ppmm.loadProcessScript("chrome://shumway/content/bootstrap-content.js", true);
     // Initializing Shumway (shall be run after child script registration).
     ShumwayUtils.init();
 #endif

browser/components/tabview/tabitems.js

@@ -673,20 +673,22 @@ TabItem.prototype = Utils.extend(new Item(), new Subscribable(), {
   updateCanvas: function TabItem_updateCanvas() {
     // ___ thumbnail
     let $canvas = this.$canvas;
-    if (!this.canvasSizeForced) {
-      let w = $canvas.width();
-      let h = $canvas.height();
-      if (w != $canvas[0].width || h != $canvas[0].height) {
-        $canvas[0].width = w;
-        $canvas[0].height = h;
-      }
-    }
+    let w = $canvas.width();
+    let h = $canvas.height();
+    let dimsChanged = !this.canvasSizeForced &&
+      (w != $canvas[0].width || h != $canvas[0].height);
 
     TabItems._lastUpdateTime = Date.now();
     this._lastTabUpdateTime = TabItems._lastUpdateTime;
 
-    if (this.tabCanvas)
-      this.tabCanvas.paint();
+    if (this.tabCanvas) {
+      if (dimsChanged) {
+        // more tasking as it involves the creation of a temp canvas.
+        this.tabCanvas.update(w, h);
+      } else {
+        this.tabCanvas.paint();
+      }
+    }
 
     // ___ cache
     if (this.isShowingCachedData())
@@ -1388,6 +1390,31 @@ TabCanvas.prototype = Utils.extend(new Subscribable(), {
     });
   },
 
+  // ----------
+  // Function: update
+  // Changing the dims of a canvas will clear it, so we don't want to do
+  // do this to a canvas we're currently displaying. This method grabs
+  // a new thumbnail at the new dims and then copies it over to the
+  // displayed canvas.
+  update: function TabCanvas_update(aWidth, aHeight) {
+    let temp = gPageThumbnails.createCanvas(window);
+    temp.width = aWidth;
+    temp.height = aHeight;
+    gPageThumbnails.captureToCanvas(this.tab.linkedBrowser, temp, () => {
+      let ctx = this.canvas.getContext('2d');
+      this.canvas.width = aWidth;
+      this.canvas.height = aHeight;
+      try {
+        ctx.drawImage(temp, 0, 0);
+      } catch (ex if ex.name == "InvalidStateError") {
+        // Can't draw if the canvas created by page thumbs isn't valid. This
+        // can happen during shutdown.
+        return;
+      }
+      this._sendToSubscribers("painted");
+    });
+  },
+
   // ----------
   // Function: toImageData
   toImageData: function TabCanvas_toImageData() {

browser/components/uitour/UITour.jsm

@@ -8,6 +8,7 @@ this.EXPORTED_SYMBOLS = ["UITour", "UITourMetricsProvider"];
 
 const {classes: Cc, interfaces: Ci, utils: Cu, results: Cr} = Components;
 
+Cu.import("resource://gre/modules/AppConstants.jsm");
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 Cu.import("resource://gre/modules/Promise.jsm");
@@ -1805,6 +1806,27 @@ this.UITour = {
           }
         } catch (e) {}
         appinfo["defaultBrowser"] = isDefaultBrowser;
+
+        let canSetDefaultBrowserInBackground = true;
+        if (AppConstants.isPlatformAndVersionAtLeast("win", "6.2")) {
+          let prefBranch =
+            Services.prefs.getBranch("browser.shell.associationHash");
+          let prefChildren = prefBranch.getChildList("");
+          canSetDefaultBrowserInBackground = prefChildren.length > 0;
+        } else if (AppConstants.isPlatformAndVersionAtLeast("macosx", "10.10")) {
+          canSetDefaultBrowserInBackground = false;
+        } else if (AppConstants.platform == "linux") {
+          // The ShellService may not exist on some versions of Linux.
+          try {
+            let shell = aWindow.getShellService();
+          } catch (e) {
+            canSetDefaultBrowserInBackground = null;
+          }
+        }
+
+        appinfo["canSetDefaultBrowserInBackground"] =
+          canSetDefaultBrowserInBackground;
+
         this.sendPageCallback(aMessageManager, aCallbackID, appinfo);
         break;
       case "availableTargets":

browser/components/uitour/test/browser_UITour_defaultBrowser.js

@@ -61,7 +61,34 @@ let tests = [
                           .getService(Components.interfaces.nsIShellService);
     let isDefault = shell.isDefaultBrowser(false);
     gContentAPI.getConfiguration("appinfo", (data) => {
-      is(data.value, data.defaultBrowser, "gContentAPI result should match shellService.isDefaultBrowser");
+      is(isDefault, data.defaultBrowser, "gContentAPI result should match shellService.isDefaultBrowser");
+      done();
+    });
+  }),
+
+  taskify(function* test_setInBackgroundWhenPrefExists(done) {
+    Services.prefs.setCharPref("browser.shell.associationHash.http", "ABCDEFG");
+    gContentAPI.getConfiguration("appinfo", (data) => {
+      let canSetInBackground = true;
+      is(canSetInBackground, data.canSetDefaultBrowserInBackground,
+        "canSetDefaultBrowserInBackground should be true when a hash is present");
+      Services.prefs.clearUserPref("browser.shell.associationHash.http");
+      done();
+    });
+  }),
+
+  taskify(function* test_setInBackgroundWhenPrefDoesntExist(done) {
+    /* The association hashes are only supported on Windows. */
+    Cu.import("resource://gre/modules/AppConstants.jsm");
+    if (AppConstants.platform != "win") {
+      info("Skipping test_setInBackgroundWhenPrefDoesntExist on non-Windows platform");
+      return;
+    }
+
+    gContentAPI.getConfiguration("appinfo", (data) => {
+      let canSetInBackground = false;
+      is(canSetInBackground, data.canSetDefaultBrowserInBackground,
+        "canSetDefaultBrowserInBackground should be false when no hashes are present");
       done();
     });
   })

browser/devtools/framework/test/browser_toolbox_tool_ready.js

@@ -1,12 +1,14 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
-///////////////////
-//
-// Whitelisting this test.
-// As part of bug 1077403, the leaking uncaught rejection should be fixed.
-//
-thisTestLeaksUncaughtRejectionsAndShouldBeFixed("Error: Shader Editor is still waiting for a WebGL context to be created.");
+"use strict";
+
+/**
+ * Whitelisting this test.
+ * As part of bug 1077403, the leaking uncaught rejection should be fixed.
+ */
+thisTestLeaksUncaughtRejectionsAndShouldBeFixed("Error: Shader Editor is " +
+  "still waiting for a WebGL context to be created.");
 
 function performChecks(target) {
   return Task.spawn(function*() {
@@ -18,11 +20,6 @@ function performChecks(target) {
     for (let index = 0; index < toolIds.length; index++) {
       let toolId = toolIds[index];
 
-      // FIXME Bug 1175850 - Enable storage inspector tests after upgrading for E10S
-      if (toolId === "storage") {
-        continue;
-      }
-
       info("About to open " + index + "/" + toolId);
       toolbox = yield gDevTools.showToolbox(target, toolId);
       ok(toolbox, "toolbox exists for " + toolId);

browser/devtools/framework/test/browser_toolbox_tool_remote_reopen.js

@@ -1,12 +1,14 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
-///////////////////
-//
-// Whitelisting this test.
-// As part of bug 1077403, the leaking uncaught rejection should be fixed.
-//
-thisTestLeaksUncaughtRejectionsAndShouldBeFixed("Error: Shader Editor is still waiting for a WebGL context to be created.");
+"use strict";
+
+/**
+ * Whitelisting this test.
+ * As part of bug 1077403, the leaking uncaught rejection should be fixed.
+ */
+thisTestLeaksUncaughtRejectionsAndShouldBeFixed("Error: Shader Editor is " +
+  "still waiting for a WebGL context to be created.");
 
 const { DebuggerServer } = require("devtools/server/main");
 const { DebuggerClient } = require("devtools/toolkit/client/main");
@@ -47,11 +49,6 @@ function runTools(target) {
     for (let index = 0; index < toolIds.length; index++) {
       let toolId = toolIds[index];
 
-      // FIXME Bug 1175850 - Enable storage inspector tests after upgrading for E10S
-      if (toolId === "storage") {
-        continue;
-      }
-
       info("About to open " + index + "/" + toolId);
       toolbox = yield gDevTools.showToolbox(target, toolId, "window");
       ok(toolbox, "toolbox exists for " + toolId);
@@ -86,7 +83,7 @@ function getClient() {
 function getTarget(client) {
   let deferred = promise.defer();
 
-  let tabList = client.listTabs(tabList => {
+  client.listTabs(tabList => {
     let target = TargetFactory.forRemoteTab({
       client: client,
       form: tabList.tabs[tabList.selected],

browser/devtools/framework/test/browser_toolbox_window_shortcuts.js

@@ -1,6 +1,8 @@
 /* Any copyright is dedicated to the Public Domain.
  * http://creativecommons.org/publicdomain/zero/1.0/ */
 
+"use strict";
+
 let {Toolbox} = require("devtools/framework/toolbox");
 
 let toolbox, toolIDs, idIndex, modifiedPrefs = [];
@@ -43,12 +45,6 @@ function testShortcuts(aToolbox, aIndex) {
   toolbox = aToolbox;
   info("Toolbox fired a `ready` event");
 
-  // FIXME Bug 1175850 - Enable storage inspector tests after upgrading for E10S
-  if (toolIDs[aIndex] === "storage") {
-    testShortcuts(toolbox, aIndex + 1);
-    return;
-  }
-
   toolbox.once("select", selectCB);
 
   let key = gDevTools._tools.get(toolIDs[aIndex]).key;

browser/devtools/storage/panel.js

@@ -4,7 +4,9 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-const {Cc, Ci, Cu, Cr} = require("chrome");
+"use strict";
+
+const {Cu} = require("chrome");
 
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 Cu.import("resource://gre/modules/Services.jsm");
@@ -18,7 +20,8 @@ loader.lazyGetter(this, "StorageFront",
 loader.lazyGetter(this, "StorageUI",
   () => require("devtools/storage/ui").StorageUI);
 
-this.StoragePanel = function StoragePanel(panelWin, toolbox) {
+let StoragePanel = this.StoragePanel =
+function StoragePanel(panelWin, toolbox) {
   EventEmitter.decorate(this);
 
   this._toolbox = toolbox;
@@ -26,7 +29,7 @@ this.StoragePanel = function StoragePanel(panelWin, toolbox) {
   this._panelWin = panelWin;
 
   this.destroy = this.destroy.bind(this);
-}
+};
 
 exports.StoragePanel = StoragePanel;
 
@@ -58,8 +61,9 @@ StoragePanel.prototype = {
       this.UI = new StorageUI(this._front, this._target, this._panelWin);
       this.isReady = true;
       this.emit("ready");
+
       return this;
-    }, console.error);
+    }).catch(this.destroy);
   },
 
   /**
@@ -68,22 +72,25 @@ StoragePanel.prototype = {
   destroy: function() {
     if (!this._destroyed) {
       this.UI.destroy();
+      this.UI = null;
+
       // Destroy front to ensure packet handler is removed from client
       this._front.destroy();
+      this._front = null;
       this._destroyed = true;
 
       this._target.off("close", this.destroy);
       this._target = null;
       this._toolbox = null;
-      this._panelDoc = null;
+      this._panelWin = null;
     }
 
     return Promise.resolve(null);
   },
-}
+};
 
 XPCOMUtils.defineLazyGetter(StoragePanel.prototype, "strings",
-  function () {
+  function() {
     return Services.strings.createBundle(
             "chrome://browser/locale/devtools/storage.properties");
   });

browser/devtools/storage/test/browser.ini

@@ -1,8 +1,5 @@
 [DEFAULT]
 tags = devtools
-# Bug 1049888 - storage actors do not work in e10s for now
-# Bug 1105803 - permafailing on debug release builds since devedition landed
-skip-if = e10s || debug
 subsuite = devtools
 support-files =
   storage-complex-values.html

browser/devtools/storage/test/browser_storage_basic.js

@@ -17,7 +17,10 @@
 // These entries are formed by the cookies, local storage, session storage and
 // indexedDB entries created in storage-listings.html,
 // storage-secured-iframe.html and storage-unsecured-iframe.html
-const storeItems = [
+
+"use strict";
+
+const testCases = [
   [["cookies", "test1.example.org"],
    ["c1", "cs2", "c3", "uc1"]],
   [["cookies", "sectest1.example.org"],
@@ -65,7 +68,7 @@ const storeItems = [
  */
 function testTree() {
   let doc = gPanelWindow.document;
-  for (let item of storeItems) {
+  for (let item of testCases) {
     ok(doc.querySelector("[data-id='" + JSON.stringify(item[0]) + "']"),
        "Tree item " + item[0] + " should be present in the storage tree");
   }
@@ -74,21 +77,20 @@ function testTree() {
 /**
  * Test that correct table entries are shown for each of the tree item
  */
-let testTables = Task.async(function*() {
+function* testTables() {
   let doc = gPanelWindow.document;
   // Expand all nodes so that the synthesized click event actually works
   gUI.tree.expandAll();
 
   // First tree item is already selected so no clicking and waiting for update
-  for (let id of storeItems[0][1]) {
+  for (let id of testCases[0][1]) {
     ok(doc.querySelector(".table-widget-cell[data-id='" + id + "']"),
        "Table item " + id + " should be present");
   }
 
   // Click rest of the tree items and wait for the table to be updated
-  for (let item of storeItems.slice(1)) {
-    selectTreeItem(item[0]);
-    yield gUI.once("store-objects-updated");
+  for (let item of testCases.slice(1)) {
+    yield selectTreeItem(item[0]);
 
     // Check whether correct number of items are present in the table
     is(doc.querySelectorAll(
@@ -101,14 +103,13 @@ let testTables = Task.async(function*() {
          "Table item " + id + " should be present");
     }
   }
-});
+}
+
+add_task(function*() {
+  yield openTabAndSetupStorage(MAIN_DOMAIN + "storage-listings.html");
 
-let startTest = Task.async(function*() {
   testTree();
   yield testTables();
-  finishTests();
-});
 
-function test() {
-  openTabAndSetupStorage(MAIN_DOMAIN + "storage-listings.html").then(startTest);
-}
+  yield finishTests();
+});

browser/devtools/storage/test/browser_storage_dynamic_updates.js

@@ -2,7 +2,10 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-let testUpdates = Task.async(function*() {
+"use strict";
+
+add_task(function*() {
+  yield openTabAndSetupStorage(MAIN_DOMAIN + "storage-updates.html");
 
   let $ = id => gPanelWindow.document.querySelector(id);
   let $$ = sel => gPanelWindow.document.querySelectorAll(sel);
@@ -10,14 +13,13 @@ let testUpdates = Task.async(function*() {
   gUI.tree.expandAll();
 
   ok(gUI.sidebar.hidden, "Sidebar is initially hidden");
-  selectTableItem("c1");
-  yield gUI.once("sidebar-updated");
+  yield selectTableItem("c1");
 
   // test that value is something initially
   let initialValue = [[
     {name: "c1", value: "1.2.3.4.5.6.7"},
     {name: "c1.path", value: "/browser"}
-  ],[
+  ], [
     {name: "c1", value: "Array"},
     {name: "c1.0", value: "1"},
     {name: "c1.6", value: "7"}
@@ -27,7 +29,7 @@ let testUpdates = Task.async(function*() {
   let finalValue = [[
     {name: "c1", value: '{"foo": 4,"bar":6}'},
     {name: "c1.path", value: "/browser"}
-  ],[
+  ], [
     {name: "c1", value: "Object"},
     {name: "c1.foo", value: "4"},
     {name: "c1.bar", value: "6"}
@@ -44,9 +46,10 @@ let testUpdates = Task.async(function*() {
 
   yield findVariableViewProperties(finalValue[0], false);
   yield findVariableViewProperties(finalValue[1], true);
-  ok($("#value [data-id='c1'].table-widget-cell"), "cell is present after update");
+  ok($("#value [data-id='c1'].table-widget-cell"),
+     "cell is present after update");
   is($("#value [data-id='c1'].table-widget-cell").value, '{"foo": 4,"bar":6}',
-       "correct final value in table");
+     "correct final value in table");
 
   // Add a new entry
   is($$("#value .table-widget-cell").length, 2,
@@ -116,8 +119,7 @@ let testUpdates = Task.async(function*() {
   ok(gUI.sidebar.hidden, "Sidebar is hidden when no rows");
 
   // Testing in local storage
-  selectTreeItem(["localStorage", "http://test1.example.org"]);
-  yield gUI.once("store-objects-updated");
+  yield selectTreeItem(["localStorage", "http://test1.example.org"]);
 
   is($$("#value .table-widget-cell").length, 7,
      "Correct number of rows after delete update 7");
@@ -153,9 +155,7 @@ let testUpdates = Task.async(function*() {
       "Value got updated for local storage");
 
   // Testing in session storage
-  selectTreeItem(["sessionStorage", "http://test1.example.org"]);
-
-  yield gUI.once("store-objects-updated");
+  yield selectTreeItem(["sessionStorage", "http://test1.example.org"]);
 
   is($$("#value .table-widget-cell").length, 3,
      "Correct number of rows for session storage");
@@ -181,9 +181,7 @@ let testUpdates = Task.async(function*() {
   is($$("#value .table-widget-cell").length, 2,
      "Correct number of rows after removing items from session storage");
 
-  selectTableItem("ss2");
-
-  yield gUI.once("sidebar-updated");
+  yield selectTableItem("ss2");
 
   ok(!gUI.sidebar.hidden, "sidebar is visible");
 
@@ -199,13 +197,5 @@ let testUpdates = Task.async(function*() {
 
   yield findVariableViewProperties([{name: "ss2", value: "changed=ss2"}]);
 
+  yield finishTests();
 });
-
-let startTest = Task.async(function*() {
-  yield testUpdates();
-  finishTests();
-});
-
-function test() {
-  openTabAndSetupStorage(MAIN_DOMAIN + "storage-updates.html").then(startTest);
-}

browser/devtools/storage/test/browser_storage_sidebar.js

@@ -11,57 +11,115 @@
 //   <do we wait for the async "sidebar-updated" event>,
 //   <is the sidebar open>
 // ]
+
+"use strict";
+
 const testCases = [
-  [["cookies", "sectest1.example.org"], 0, 0],
-  ["cs2", 1, 1],
-  [null, 0, 0],
-  ["cs2", 1, 1],
-  ["uc1", 1, 1],
-  ["uc1", 0, 1],
-  [["localStorage", "http://sectest1.example.org"], 0, 0],
-  ["iframe-u-ls1", 1, 1],
-  ["iframe-u-ls1", 0, 1],
-  [null, 0, 0],
-  [["sessionStorage", "http://test1.example.org"], 0, 0],
-  ["ss1", 1, 1],
-  [null, 0, 0],
-  [["indexedDB", "http://test1.example.org"], 0, 0],
-  ["idb2", 1, 1],
-  [["indexedDB", "http://test1.example.org", "idb2", "obj3"], 0, 0],
-  [["indexedDB", "https://sectest1.example.org", "idb-s2"], 0, 0],
-  ["obj-s2", 1, 1],
-  [null, 0, 0],
-  [null, 0, 0],
-  ["obj-s2", 1, 1],
-  [null, 0, 0],
+  {
+    location: ["cookies", "sectest1.example.org"],
+    sidebarHidden: true
+  },
+  {
+    location: "cs2",
+    sidebarHidden: false
+  },
+  {
+    sendEscape: true
+  },
+  {
+    location: "cs2",
+    sidebarHidden: false
+  },
+  {
+    location: "uc1",
+    sidebarHidden: false
+  },
+  {
+    location: "uc1",
+    sidebarHidden: false
+  },
+
+  {
+    location: ["localStorage", "http://sectest1.example.org"],
+    sidebarHidden: true
+  },
+  {
+    location: "iframe-u-ls1",
+    sidebarHidden: false
+  },
+  {
+    location: "iframe-u-ls1",
+    sidebarHidden: false
+  },
+  {
+    sendEscape: true
+  },
+
+  {
+    location: ["sessionStorage", "http://test1.example.org"],
+    sidebarHidden: true
+  },
+  {
+    location: "ss1",
+    sidebarHidden: false
+  },
+  {
+    sendEscape: true
+  },
+
+  {
+    location: ["indexedDB", "http://test1.example.org"],
+    sidebarHidden: true
+  },
+  {
+    location: "idb2",
+    sidebarHidden: false
+  },
+
+  {
+    location: ["indexedDB", "http://test1.example.org", "idb2", "obj3"],
+    sidebarHidden: true
+  },
+
+  {
+    location: ["indexedDB", "https://sectest1.example.org", "idb-s2"],
+    sidebarHidden: true
+  },
+  {
+    location: "obj-s2",
+    sidebarHidden: false
+  },
+  {
+    sendEscape: true
+  }, {
+    location: "obj-s2",
+    sidebarHidden: false
+  }
 ];
 
-let testSidebar = Task.async(function*() {
-  let doc = gPanelWindow.document;
-  for (let item of testCases) {
-    info("clicking for item " + item);
-    if (Array.isArray(item[0])) {
-      selectTreeItem(item[0]);
-      yield gUI.once("store-objects-updated");
+add_task(function*() {
+  yield openTabAndSetupStorage(MAIN_DOMAIN + "storage-listings.html");
+
+  for (let test of testCases) {
+    let { location, sidebarHidden, sendEscape } = test;
+
+    info("running " + JSON.stringify(test));
+
+    if (Array.isArray(location)) {
+      yield selectTreeItem(location);
+    } else if (location) {
+      yield selectTableItem(location);
     }
-    else if (item[0]) {
-      selectTableItem(item[0]);
-    }
-    else {
+
+    if (sendEscape) {
       EventUtils.sendKey("ESCAPE", gPanelWindow);
+    } else {
+      is(gUI.sidebar.hidden, sidebarHidden,
+        "correct visibility state of sidebar.");
     }
-    if (item[1]) {
-      yield gUI.once("sidebar-updated");
-    }
-    is(!item[2], gUI.sidebar.hidden, "Correct visibility state of sidebar");
+
+    info("-".repeat(80));
   }
-});
 
-let startTest = Task.async(function*() {
-  yield testSidebar();
-  finishTests();
+  yield finishTests();
 });
-
-function test() {
-  openTabAndSetupStorage(MAIN_DOMAIN + "storage-listings.html").then(startTest);
-}

browser/devtools/storage/test/browser_storage_values.js

@@ -11,6 +11,9 @@
 //     which will be asserted to exist in the storage sidebar,
 //   true if the check is to be made in the parsed value section
 // ]
+
+"use strict";
+
 const testCases = [
   ["cs2", [
     {name: "cs2", value: "sessionCookie"},
@@ -30,7 +33,7 @@ const testCases = [
     {name: "c1.expires", value: new Date(2000000000000).toLocaleString()},
     {name: "c1.isSecure", value: "false"},
   ]],
-  [/*"c1"*/, [
+  [null, [
     {name: "c1", value: "Array"},
     {name: "c1.0", value: "foo"},
     {name: "c1.1", value: "Bar"},
@@ -48,7 +51,7 @@ const testCases = [
         nobody: "cares"
       }]})}
   ]],
-  [/*ls1*/, [
+  [null, [
     {name: "ls1", value: "Object"},
     {name: "ls1.es6", value: "for"},
     {name: "ls1.the", value: "win"},
@@ -63,14 +66,14 @@ const testCases = [
   ["ls3", [
     {name: "ls3", "value": "http://foobar.com/baz.php"}
   ]],
-  [/*ls3*/, [
+  [null, [
     {name: "ls3", "value": "http://foobar.com/baz.php", dontMatch: true}
   ], true],
   [["sessionStorage", "http://test1.example.org"]],
   ["ss1", [
     {name: "ss1", value: "This#is#an#array"}
   ]],
-  [/*ss1*/, [
+  [null, [
     {name: "ss1", value: "Array"},
     {name: "ss1.0", value: "This"},
     {name: "ss1.1", value: "is"},
@@ -94,7 +97,7 @@ const testCases = [
   [1, [
     {name: 1, value: JSON.stringify({id: 1, name: "foo", email: "foo@bar.com"})}
   ]],
-  [/*1*/, [
+  [null, [
     {name: "1.id", value: "1"},
     {name: "1.name", value: "foo"},
     {name: "1.email", value: "foo@bar.com"},
@@ -105,7 +108,7 @@ const testCases = [
       id2: 1, name: "foo", email: "foo@bar.com", extra: "baz"
     })}
   ]],
-  [/*1*/, [
+  [null, [
     {name: "1.id2", value: "1"},
     {name: "1.name", value: "foo"},
     {name: "1.email", value: "foo@bar.com"},
@@ -113,31 +116,23 @@ const testCases = [
   ], true]
 ];
 
-let testValues = Task.async(function*() {
+add_task(function*() {
+  yield openTabAndSetupStorage(MAIN_DOMAIN + "storage-complex-values.html");
+
   gUI.tree.expandAll();
-  let doc = gPanelWindow.document;
+
   for (let item of testCases) {
     info("clicking for item " + item);
+
     if (Array.isArray(item[0])) {
-      selectTreeItem(item[0]);
-      yield gUI.once("store-objects-updated");
+      yield selectTreeItem(item[0]);
       continue;
+    } else if (item[0]) {
+      yield selectTableItem(item[0]);
     }
-    else if (item[0]) {
-      selectTableItem(item[0]);
-    }
-    if (item[0] && item[1]) {
-      yield gUI.once("sidebar-updated");
-    }
+
     yield findVariableViewProperties(item[1], item[2]);
   }
-});
 
-let startTest = Task.async(function*() {
-  yield testValues();
-  finishTests();
+  yield finishTests();
 });
-
-function test() {
-  openTabAndSetupStorage(MAIN_DOMAIN + "storage-complex-values.html").then(startTest);
-}

browser/devtools/storage/test/head.js

@@ -10,6 +10,8 @@ let { console } = Cu.import("resource://gre/modules/devtools/Console.jsm", {});
 
 const SPLIT_CONSOLE_PREF = "devtools.toolbox.splitconsoleEnabled";
 const STORAGE_PREF = "devtools.storage.enabled";
+const DUMPEMIT_PREF = "devtools.dump.emit";
+const DEBUGGERLOG_PREF = "devtools.debugger.log";
 const PATH = "browser/browser/devtools/storage/test/";
 const MAIN_DOMAIN = "http://test1.example.org/" + PATH;
 const ALT_DOMAIN = "http://sectest1.example.org/" + PATH;
@@ -22,12 +24,17 @@ waitForExplicitFinish();
 
 let gToolbox, gPanelWindow, gWindow, gUI;
 
+// Services.prefs.setBoolPref(DUMPEMIT_PREF, true);
+// Services.prefs.setBoolPref(DEBUGGERLOG_PREF, true);
+
 Services.prefs.setBoolPref(STORAGE_PREF, true);
 DevToolsUtils.testing = true;
 registerCleanupFunction(() => {
   gToolbox = gPanelWindow = gWindow = gUI = null;
   Services.prefs.clearUserPref(STORAGE_PREF);
   Services.prefs.clearUserPref(SPLIT_CONSOLE_PREF);
+  Services.prefs.clearUserPref(DUMPEMIT_PREF);
+  Services.prefs.clearUserPref(DEBUGGERLOG_PREF);
   DevToolsUtils.testing = false;
   while (gBrowser.tabs.length > 1) {
     gBrowser.removeCurrentTab();
@@ -66,15 +73,16 @@ function addTab(url) {
 }
 
 /**
- * Opens the given url in a new tab, then sets up the page by waiting for
- * all cookies, indexedDB items etc. to be created; Then opens the storage
- * inspector and waits for the storage tree and table to be populated
+ * This generator function opens the given url in a new tab, then sets up the
+ * page by waiting for all cookies, indexedDB items etc. to be created; Then
+ * opens the storage inspector and waits for the storage tree and table to be
+ * populated.
  *
  * @param url {String} The url to be opened in the new tab
  *
  * @return {Promise} A promise that resolves after storage inspector is ready
  */
-let openTabAndSetupStorage = Task.async(function*(url) {
+function* openTabAndSetupStorage(url) {
   /**
    * This method iterates over iframes in a window and setups the indexed db
    * required for this test.
@@ -83,11 +91,9 @@ let openTabAndSetupStorage = Task.async(function*(url) {
     if (w[i] && w[i].idbGenerator) {
       w[i].setupIDB = w[i].idbGenerator(() => setupIDBInFrames(w, i + 1, c));
       w[i].setupIDB.next();
-    }
-    else if (w[i] && w[i + 1]) {
+    } else if (w[i] && w[i + 1]) {
       setupIDBInFrames(w, i + 1, c);
-    }
-    else {
+    } else {
       c();
     }
   };
@@ -109,7 +115,7 @@ let openTabAndSetupStorage = Task.async(function*(url) {
 
   // open storage inspector
   return yield openStoragePanel();
-});
+}
 
 /**
  * Open the toolbox, with the storage tool visible.
@@ -138,12 +144,12 @@ let openStoragePanel = Task.async(function*(cb) {
       info("Toolbox and storage already open");
       if (cb) {
         return cb(storage, toolbox);
-      } else {
-        return {
-          toolbox: toolbox,
-          storage: storage
-        };
       }
+
+      return {
+        toolbox: toolbox,
+        storage: storage
+      };
     }
   }
 
@@ -161,12 +167,12 @@ let openStoragePanel = Task.async(function*(cb) {
 
   if (cb) {
     return cb(storage, toolbox);
-  } else {
-    return {
-      toolbox: toolbox,
-      storage: storage
-    };
   }
+
+  return {
+    toolbox: toolbox,
+    storage: storage
+  };
 });
 
 /**
@@ -195,46 +201,61 @@ function forceCollections() {
 }
 
 /**
- * Cleans up and finishes the test
+ * Get all windows including frames recursively.
+ *
+ * @param {Window} [baseWindow]
+ *        The base window at which to start looking for child windows
+ *        (optional).
+ * @return {Set}
+ *         A set of windows.
  */
-function finishTests() {
-  // Cleanup so that indexed db created from this test do not interfere next ones
+function getAllWindows(baseWindow=gWindow) {
+  let windows = new Set();
 
-  /**
-   * This method iterates over iframes in a window and clears the indexed db
-   * created by this test.
-   */
-  let clearIDB = (w, i, c) => {
-    if (w[i] && w[i].clear) {
-      w[i].clearIterator = w[i].clear(() => clearIDB(w, i + 1, c));
-      w[i].clearIterator.next();
-    }
-    else if (w[i] && w[i + 1]) {
-      clearIDB(w, i + 1, c);
-    }
-    else {
-      c();
+  let _getAllWindows = function(win) {
+    windows.add(win);
+
+    for (let i = 0; i < win.length; i++) {
+      _getAllWindows(win[i]);
     }
   };
+  _getAllWindows(baseWindow);
 
-  gWindow.clearIterator = gWindow.clear(() => {
-    clearIDB(gWindow, 0, () => {
-      // Forcing GC/CC to get rid of docshells and windows created by this test.
-      forceCollections();
-      finish();
-    });
-  });
-  gWindow.clearIterator.next();
+  return windows;
+}
+
+/**
+ * Cleans up and finishes the test
+ */
+function* finishTests() {
+  for (let win of getAllWindows()) {
+    if (win.clear) {
+      console.log("Clearing cookies, localStorage and indexedDBs from " +
+                  win.document.location);
+      yield win.clear();
+    }
+  }
+
+  forceCollections();
+  finish();
 }
 
 // Sends a click event on the passed DOM node in an async manner
-function click(node) {
+function* click(node) {
+  let def = promise.defer();
+
   node.scrollIntoView();
-  executeSoon(() => EventUtils.synthesizeMouseAtCenter(node, {}, gPanelWindow));
+
+  // We need setTimeout here to allow any scrolling to complete before clicking
+  // the node.
+  setTimeout(() => {
+    node.click();
+    def.resolve();
+  }, 200);
+
+  return def;
 }
 
-
-
 /**
  * Recursively expand the variables view up to a given property.
  *
@@ -264,18 +285,13 @@ function variablesViewExpandTo(aOptions) {
       if (newProp && newProp.expand) {
         newProp.expand();
         getNext(newProp);
-      }
-      else {
-        lastDeferred.reject(aProp);
-      }
-    }
-    else {
-      if (newProp) {
-        lastDeferred.resolve(newProp);
-      }
-      else {
+      } else {
         lastDeferred.reject(aProp);
       }
+    } else if (newProp) {
+      lastDeferred.resolve(newProp);
+    } else {
+      lastDeferred.reject(aProp);
     }
   }
 
@@ -286,9 +302,8 @@ function variablesViewExpandTo(aOptions) {
   if (root && root.expand) {
     root.expand();
     getNext(root);
-  }
-  else {
-    lastDeferred.resolve(root)
+  } else {
+    lastDeferred.resolve(root);
   }
 
   return lastDeferred.promise;
@@ -321,7 +336,7 @@ function findVariableViewProperties(aRules, aParsed) {
     // Thus, adding a blank parent to each name
     if (aParsed) {
       aRules = aRules.map(({name, value, dontMatch}) => {
-        return {name: "." + name, value, dontMatch}
+        return {name: "." + name, value, dontMatch};
       });
     }
     // Separate out the rules that require expanding properties throughout the
@@ -357,10 +372,10 @@ function findVariableViewProperties(aRules, aParsed) {
     }
   }
 
-  function finder(aRules, aView, aPromises) {
+  function finder(rules, aView, aPromises) {
     for (let scope of aView) {
-      for (let [id, prop] of scope) {
-        for (let rule of aRules) {
+      for (let [, prop] of scope) {
+        for (let rule of rules) {
           let matcher = matchVariablesViewProperty(prop, rule);
           aPromises.push(matcher.then(onMatch.bind(null, prop, rule)));
         }
@@ -368,15 +383,15 @@ function findVariableViewProperties(aRules, aParsed) {
     }
   }
 
-  function processExpandRules(aRules) {
-    let rule = aRules.shift();
+  function processExpandRules(rules) {
+    let rule = rules.shift();
     if (!rule) {
       return promise.resolve(null);
     }
 
     let deferred = promise.defer();
     let expandOptions = {
-      rootVariable: gUI.view.getScopeAtIndex(aParsed ? 1: 0),
+      rootVariable: gUI.view.getScopeAtIndex(aParsed ? 1 : 0),
       expandTo: rule.name
     };
 
@@ -391,28 +406,26 @@ function findVariableViewProperties(aRules, aParsed) {
       });
     }, function onFailure() {
       return promise.resolve(null);
-    }).then(processExpandRules.bind(null, aRules)).then(function() {
+    }).then(processExpandRules.bind(null, rules)).then(function() {
       deferred.resolve(null);
     });
 
     return deferred.promise;
   }
 
-  function onAllRulesMatched(aRules) {
-    for (let rule of aRules) {
+  function onAllRulesMatched(rules) {
+    for (let rule of rules) {
       let matched = rule.matchedProp;
       if (matched && !rule.dontMatch) {
         ok(true, "rule " + rule.name + " matched for property " + matched.name);
-      }
-      else if (matched && rule.dontMatch) {
+      } else if (matched && rule.dontMatch) {
         ok(false, "rule " + rule.name + " should not match property " +
            matched.name);
-      }
-      else {
+      } else {
         ok(rule.dontMatch, "rule " + rule.name + " did not match any property");
       }
     }
-    return aRules;
+    return rules;
   }
 
   return init();
@@ -461,7 +474,7 @@ function matchVariablesViewProperty(aProp, aRule) {
                 displayValue == aRule.value;
     if (!match) {
       info("rule " + aRule.name + " did not match value, expected '" +
-           aRule.value + "', found '" + displayValue  + "'");
+           aRule.value + "', found '" + displayValue + "'");
       return resolve(false);
     }
   }
@@ -475,39 +488,18 @@ function matchVariablesViewProperty(aProp, aRule) {
  * @param {[String]} ids
  *        The array id of the item in the tree
  */
-function selectTreeItem(ids) {
+function* selectTreeItem(ids) {
   // Expand tree as some/all items could be collapsed leading to click on an
   // incorrect tree item
   gUI.tree.expandAll();
-  let target = gPanelWindow.document.querySelector(
-                 "[data-id='" + JSON.stringify(ids) + "'] > .tree-widget-item");
 
-  // Look for an animating list
-  //
-  // If the list is still expanding we won't be able to click the requested
-  // item. We detect if a list (or one of its ancestor lists) is animating
-  // by checking if max-height is set. If the animation effect in
-  // widgets.inc.css changes this will likely break but until the Web
-  // Animations API is available (specifically, bug 1074630 and bug 1112422)
-  // there is no reliable way to detect if animations are running, particularly
-  // in the face of interactions that can cancel an animation without triggering
-  // an animationend event.
-  let animatingList = target.nextElementSibling;
-  while (animatingList) {
-    if (window.getComputedStyle(animatingList).maxHeight != "none") {
-      break;
-    }
-    animatingList = animatingList.parentNode.closest(".tree-widget-item + ul");
-  }
+  let selector = "[data-id='" + JSON.stringify(ids) + "'] > .tree-widget-item";
+  let target = gPanelWindow.document.querySelector(selector);
 
-  if (animatingList) {
-    animatingList.addEventListener("animationend", function animationend() {
-      animatingList.removeEventListener("animationend", animationend);
-      click(target);
-    });
-  } else {
-    click(target);
-  }
+  let updated = gUI.once("store-objects-updated");
+
+  yield click(target);
+  yield updated;
 }
 
 /**
@@ -516,7 +508,40 @@ function selectTreeItem(ids) {
  * @param {String} id
  *        The id of the row in the table widget
  */
-function selectTableItem(id) {
-  click(gPanelWindow.document.querySelector(".table-widget-cell[data-id='" +
-        id + "']"));
+function* selectTableItem(id) {
+  let selector = ".table-widget-cell[data-id='" + id + "']";
+  let target = gPanelWindow.document.querySelector(selector);
+
+  yield click(target);
+  yield gUI.once("sidebar-updated");
+}
+
+/**
+ * Wait for eventName on target.
+ * @param {Object} target An observable object that either supports on/off or
+ * addEventListener/removeEventListener
+ * @param {String} eventName
+ * @param {Boolean} [useCapture] for addEventListener/removeEventListener
+ * @return A promise that resolves when the event has been handled
+ */
+function once(target, eventName, useCapture=false) {
+  info("Waiting for event: '" + eventName + "' on " + target + ".");
+
+  let deferred = promise.defer();
+
+  for (let [add, remove] of [
+    ["addEventListener", "removeEventListener"],
+    ["addListener", "removeListener"],
+    ["on", "off"]
+  ]) {
+    if ((add in target) && (remove in target)) {
+      target[add](eventName, function onEvent(...aArgs) {
+        target[remove](eventName, onEvent, useCapture);
+        deferred.resolve.apply(deferred, aArgs);
+      }, useCapture);
+      break;
+    }
+  }
+
+  return deferred.promise;
 }

browser/devtools/storage/test/storage-complex-values.html

@@ -9,7 +9,7 @@ Bug 970517 - Storage inspector front end - tests
 </head>
 <body>
 <script type="application/javascript;version=1.7">
-
+"use strict";
 let partialHostname = location.hostname.match(/^[^.]+(\..*)$/)[1];
 let cookieExpiresTime = 2000000000000;
 // Setting up some cookies to eat.
@@ -20,7 +20,7 @@ document.cookie = "c1=" + JSON.stringify([
   "; path=/browser";
 document.cookie = "cs2=sessionCookie; path=/; domain=" + partialHostname;
 // ... and some local storage items ..
-var es6 = "for";
+const es6 = "for";
 localStorage.setItem("ls1", JSON.stringify({
   es6, the: "win", baz: [0, 2, 3, {
     deep: "down",
@@ -42,7 +42,7 @@ window.idbGenerator = function*(callback) {
   let request = indexedDB.open("idb1", 1);
   request.onupgradeneeded = success;
   request.onsuccess = success;
-  request.onerror = function(e) {
+  request.onerror = function() {
     throw new Error("error opening db connection");
   };
   let event = yield undefined;
@@ -58,7 +58,11 @@ window.idbGenerator = function*(callback) {
   yield undefined;
   store1.add({id: 3, name: "foo2", email: "foo3@bar.com"}).onsuccess = success;
   yield undefined;
-  store2.add({id2: 1, name: "foo", email: "foo@bar.com", extra: "baz"}).onsuccess = success;
+  store2.add({
+    id2: 1,
+    name: "foo",
+    email: "foo@bar.com",
+    extra: "baz"}).onsuccess = success;
   yield undefined;
 
   yield undefined;
@@ -77,24 +81,28 @@ window.idbGenerator = function*(callback) {
   db2.close();
   console.log("added cookies and stuff from main page");
   callback();
+};
+
+function deleteDB(dbName) {
+  return new Promise(resolve => {
+    dump("removing database " + dbName + " from " + document.location + "\n");
+    indexedDB.deleteDatabase(dbName).onsuccess = resolve;
+  });
 }
 
-function successClear(event) {
-  clearIterator.next(event);
-}
-
-window.clear = function*(callback) {
+window.clear = function*() {
   document.cookie = "c1=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/browser";
   document.cookie = "cs2=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
+
   localStorage.clear();
   sessionStorage.clear();
-  indexedDB.deleteDatabase("idb1").onsuccess = successClear;
-  yield undefined;
-  indexedDB.deleteDatabase("idb2").onsuccess = successClear;
-  yield undefined;
-  console.log("removed cookies and stuff from main page");
-  callback();
-}
+
+  yield deleteDB("idb1");
+  yield deleteDB("idb2");
+
+  dump("removed cookies, localStorage, sessionStorage and indexedDB data " +
+       "from " + document.location + "\n");
+};
 </script>
 </body>
 </html>

browser/devtools/storage/test/storage-listings.html

@@ -11,7 +11,7 @@ Bug 970517 - Storage inspector front end - tests
 <iframe src="http://sectest1.example.org/browser/browser/devtools/storage/test/storage-unsecured-iframe.html"></iframe>
 <iframe src="https://sectest1.example.org:443/browser/browser/devtools/storage/test/storage-secured-iframe.html"></iframe>
 <script type="application/javascript;version=1.7">
-
+"use strict";
 let partialHostname = location.hostname.match(/^[^.]+(\..*)$/)[1];
 let cookieExpiresTime1 = 2000000000000;
 let cookieExpiresTime2 = 2000000001000;
@@ -26,7 +26,7 @@ localStorage.setItem("ls1", "foobar");
 localStorage.setItem("ls2", "foobar-2");
 // ... and finally some session storage items too
 sessionStorage.setItem("ss1", "foobar-3");
-console.log("added cookies and stuff from main page");
+dump("added cookies and stuff from main page\n");
 
 function success(event) {
   setupIDB.next(event);
@@ -36,7 +36,7 @@ window.idbGenerator = function*(callback) {
   let request = indexedDB.open("idb1", 1);
   request.onupgradeneeded = success;
   request.onsuccess = success;
-  request.onerror = function(e) {
+  request.onerror = function() {
     throw new Error("error opening db connection");
   };
   let event = yield undefined;
@@ -52,7 +52,11 @@ window.idbGenerator = function*(callback) {
   yield undefined;
   store1.add({id: 3, name: "foo2", email: "foo3@bar.com"}).onsuccess = success;
   yield undefined;
-  store2.add({id2: 1, name: "foo", email: "foo@bar.com", extra: "baz"}).onsuccess = success;
+  store2.add({
+    id2: 1,
+    name: "foo",
+    email: "foo@bar.com",
+    extra: "baz"}).onsuccess = success;
   yield undefined;
 
   yield undefined;
@@ -69,27 +73,34 @@ window.idbGenerator = function*(callback) {
 
   yield undefined;
   db2.close();
-  console.log("added cookies and stuff from main page");
+  dump("added cookies and stuff from main page\n");
   callback();
+};
+
+function deleteDB(dbName) {
+  return new Promise(resolve => {
+    dump("removing database " + dbName + " from " + document.location + "\n");
+    indexedDB.deleteDatabase(dbName).onsuccess = resolve;
+  });
 }
 
-function successClear(event) {
-  clearIterator.next(event);
-}
-
-window.clear = function*(callback) {
+window.clear = function*() {
   document.cookie = "c1=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/browser";
-  document.cookie = "c3=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; secure=true";
-  document.cookie = "cs2=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=" + partialHostname;
+  document.cookie =
+    "c3=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; secure=true";
+  document.cookie =
+    "cs2=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=" +
+    partialHostname;
+
   localStorage.clear();
   sessionStorage.clear();
-  indexedDB.deleteDatabase("idb1").onsuccess = successClear;
-  yield undefined;
-  indexedDB.deleteDatabase("idb2").onsuccess = successClear;
-  yield undefined;
-  console.log("removed cookies and stuff from main page");
-  callback();
-}
+
+  yield deleteDB("idb1");
+  yield deleteDB("idb2");
+
+  dump("removed cookies, localStorage, sessionStorage and indexedDB data " +
+       "from " + document.location + "\n");
+};
 </script>
 </body>
 </html>

browser/devtools/storage/test/storage-secured-iframe.html

@@ -8,7 +8,7 @@ Iframe for testing multiple host detetion in storage actor
 </head>
 <body>
 <script type="application/javascript;version=1.7">
-
+"use strict";
 document.cookie = "sc1=foobar;";
 localStorage.setItem("iframe-s-ls1", "foobar");
 sessionStorage.setItem("iframe-s-ss1", "foobar-2");
@@ -21,7 +21,7 @@ window.idbGenerator = function*(callback) {
   let request = indexedDB.open("idb-s1", 1);
   request.onupgradeneeded = success;
   request.onsuccess = success;
-  request.onerror = function(e) {
+  request.onerror = function() {
     throw new Error("error opening db connection");
   };
   let event = yield undefined;
@@ -42,32 +42,37 @@ window.idbGenerator = function*(callback) {
   event = yield undefined;
 
   let db2 = event.target.result;
-  let store3 = db2.createObjectStore("obj-s2", { keyPath: "id3", autoIncrement: true });
+  let store3 =
+    db2.createObjectStore("obj-s2", { keyPath: "id3", autoIncrement: true });
   store3.createIndex("name2", "name2", { unique: true });
   store3.add({id3: 16, name2: "foo", email: "foo@bar.com"}).onsuccess = success;
   yield undefined;
 
   yield undefined;
   db2.close();
-  console.log("added cookies and stuff from secured iframe");
+  dump("added cookies and stuff from secured iframe\n");
   callback();
+};
+
+function deleteDB(dbName) {
+  return new Promise(resolve => {
+    dump("removing database " + dbName + " from " + document.location + "\n");
+    indexedDB.deleteDatabase(dbName).onsuccess = resolve;
+  });
 }
 
-function successClear(event) {
-  clearIterator.next(event);
-}
-
-window.clear = function*(callback) {
+window.clear = function*() {
   document.cookie = "sc1=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
+
   localStorage.clear();
   sessionStorage.clear();
-  indexedDB.deleteDatabase("idb-s1").onsuccess = successClear;
-  yield undefined;
-  indexedDB.deleteDatabase("idb-s2").onsuccess = successClear;
-  yield undefined;
-  console.log("removed cookies and stuff from secured iframe");
-  callback();
-}
+
+  yield deleteDB("idb-s1");
+  yield deleteDB("idb-s2");
+
+  dump("removed cookies, localStorage, sessionStorage and indexedDB data " +
+       "from " + document.location + "\n");
+};
 </script>
 </body>
 </html>

browser/devtools/storage/test/storage-unsecured-iframe.html

@@ -8,20 +8,23 @@ Iframe for testing multiple host detetion in storage actor
 </head>
 <body>
 <script>
-
+"use strict";
 document.cookie = "uc1=foobar; domain=.example.org; path=/; secure=true";
 localStorage.setItem("iframe-u-ls1", "foobar");
 sessionStorage.setItem("iframe-u-ss1", "foobar1");
 sessionStorage.setItem("iframe-u-ss2", "foobar2");
 console.log("added cookies and stuff from unsecured iframe");
 
-window.clear = function*(callback) {
-  document.cookie = "uc1=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=.example.org; secure=true";
+window.clear = function*() {
+  document.cookie = "uc1=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; " +
+                    "domain=.example.org; secure=true";
+
   localStorage.clear();
   sessionStorage.clear();
-  console.log("removed cookies and stuff from unsecured iframe");
-  callback();
-}
+
+  dump("removed cookies, localStorage and sessionStorage from " +
+       document.location + "\n");
+};
 </script>
 </body>
 </html>

browser/devtools/storage/test/storage-updates.html

@@ -8,10 +8,10 @@ Bug 965872 - Storage inspector actor with cookies, local storage and session sto
   <title>Storage inspector blank html for tests</title>
 </head>
 <body>
-<script>
-
+<script type="application/javascript;version=1.7">
+"use strict";
 window.addCookie = function(name, value, path, domain, expires, secure) {
-  var cookieString = name + "=" + value + ";";
+  let cookieString = name + "=" + value + ";";
   if (path) {
     cookieString += "path=" + path + ";";
   }
@@ -28,19 +28,23 @@ window.addCookie = function(name, value, path, domain, expires, secure) {
 };
 
 window.removeCookie = function(name, path) {
-  document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=" + path;
-}
+  document.cookie =
+    name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=" + path;
+};
 
-window.clear = function*(callback) {
-  var cookies = document.cookie;
-  for (var cookie of cookies.split(";")) {
+window.clear = function*() {
+  let cookies = document.cookie;
+  for (let cookie of cookies.split(";")) {
     removeCookie(cookie.split("=")[0]);
     removeCookie(cookie.split("=")[0], "/browser");
   }
+
   localStorage.clear();
   sessionStorage.clear();
-  callback();
-}
+
+  dump("removed cookies, localStorage and sessionStorage from " +
+       document.location + "\n");
+};
 
 window.onload = function() {
   addCookie("c1", "1.2.3.4.5.6.7", "/browser");
@@ -57,7 +61,7 @@ window.onload = function() {
   sessionStorage.setItem("ss1", "foobar");
   sessionStorage.setItem("ss2", "foobar");
   sessionStorage.setItem("ss3", "foobar");
-}
+};
 </script>
 </body>
 </html>

browser/devtools/storage/ui.js

@@ -30,7 +30,8 @@ let L10N = new ViewHelpers.L10N(STORAGE_STRINGS);
 
 const GENERIC_VARIABLES_VIEW_SETTINGS = {
   lazyEmpty: true,
-  lazyEmptyDelay: 10, // ms
+   // ms
+  lazyEmptyDelay: 10,
   searchEnabled: true,
   searchPlaceholder: L10N.getStr("storage.search.placeholder"),
   preventDescriptorModifiers: true
@@ -53,7 +54,7 @@ const HIDDEN_COLUMNS = [
  * @param {Window} panelWin
  *        Window of the toolbox panel to populate UI in.
  */
-this.StorageUI = function StorageUI(front, target, panelWin) {
+let StorageUI = this.StorageUI = function StorageUI(front, target, panelWin) {
   EventEmitter.decorate(this);
 
   this._target = target;
@@ -72,7 +73,7 @@ this.StorageUI = function StorageUI(front, target, panelWin) {
     highlightUpdated: true,
   });
   this.displayObjectSidebar = this.displayObjectSidebar.bind(this);
-  this.table.on(TableWidget.EVENTS.ROW_SELECTED, this.displayObjectSidebar)
+  this.table.on(TableWidget.EVENTS.ROW_SELECTED, this.displayObjectSidebar);
 
   this.sidebar = this._panelDoc.getElementById("storage-sidebar");
   this.sidebar.setAttribute("width", "300");
@@ -81,7 +82,7 @@ this.StorageUI = function StorageUI(front, target, panelWin) {
 
   this.front.listStores().then(storageTypes => {
     this.populateStorageTree(storageTypes);
-  }).then(null, Cu.reportError);
+  }).then(null, console.error);
 
   this.onUpdate = this.onUpdate.bind(this);
   this.front.on("stores-update", this.onUpdate);
@@ -93,7 +94,7 @@ this.StorageUI = function StorageUI(front, target, panelWin) {
 
   this._telemetry = new Telemetry();
   this._telemetry.toolOpened("storage");
-}
+};
 
 exports.StorageUI = StorageUI;
 
@@ -126,15 +127,13 @@ StorageUI.prototype = {
   removeItemFromTable: function(name) {
     if (this.table.isSelected(name)) {
       if (this.table.selectedIndex == 0) {
-        this.table.selectNextRow()
-      }
-      else {
+        this.table.selectNextRow();
+      } else {
         this.table.selectPreviousRow();
       }
       this.table.remove(name);
       this.displayObjectSidebar();
-    }
-    else {
+    } else {
       this.table.remove(name);
     }
   },
@@ -190,8 +189,7 @@ StorageUI.prototype = {
             }
 
             this.tree.remove([type, host]);
-          }
-          else if (this.tree.isSelected([type, host])) {
+          } else if (this.tree.isSelected([type, host])) {
             for (let name of deleted[type][host]) {
               try {
                 // trying to parse names in case its for indexedDB
@@ -203,12 +201,11 @@ StorageUI.prototype = {
                     this.table.clear();
                     this.hideSidebar();
                   }
-                }
-                else if (this.tree.isSelected([type, host, names[0], names[1]])) {
+                } else if (this.tree.isSelected([ type, host,
+                                                  names[0], names[1]])) {
                   this.removeItemFromTable(names[2]);
                 }
-              }
-              catch (ex) {
+              } catch (ex) {
                 this.removeItemFromTable(name);
               }
             }
@@ -232,7 +229,9 @@ StorageUI.prototype = {
                 this.tree.selectedItem = [type, host, name[0], name[1]];
                 this.fetchStorageObjects(type, host, [JSON.stringify(name)], 1);
               }
-            } catch(ex) {}
+            } catch(ex) {
+              // Do nothing
+            }
           }
 
           if (this.tree.isSelected([type, host])) {
@@ -255,8 +254,7 @@ StorageUI.prototype = {
               }
             }
             this.fetchStorageObjects(type, host, toUpdate, 2);
-          }
-          catch (ex) {
+          } catch (ex) {
             this.fetchStorageObjects(type, host, changed[type][host], 2);
           }
         }
@@ -307,6 +305,10 @@ StorageUI.prototype = {
   populateStorageTree: function(storageTypes) {
     this.storageTypes = {};
     for (let type in storageTypes) {
+      if (type === "from") {
+        continue;
+      }
+
       let typeLabel = L10N.getStr("tree.labels." + type);
       this.tree.add([{id: type, label: typeLabel, type: "store"}]);
       if (storageTypes[type].hosts) {
@@ -314,7 +316,6 @@ StorageUI.prototype = {
         for (let host in storageTypes[type].hosts) {
           this.tree.add([type, {id: host, type: "url"}]);
           for (let name of storageTypes[type].hosts[host]) {
-
             try {
               let names = JSON.parse(name);
               this.tree.add([type, host, ...names]);
@@ -322,7 +323,9 @@ StorageUI.prototype = {
                 this.tree.selectedItem = [type, host, names[0], names[1]];
                 this.fetchStorageObjects(type, host, [name], 0);
               }
-            } catch(ex) {}
+            } catch(ex) {
+              // Do nothing
+            }
           }
           if (!this.tree.selectedItem) {
             this.tree.selectedItem = [type, host];
@@ -371,7 +374,9 @@ StorageUI.prototype = {
         // which may be available.
         let rawObject = Object.create(null);
         let otherProps =
-          itemProps.filter(e => e != "name" && e != "value" && e != "valueActor");
+          itemProps.filter(e => e != "name" &&
+                                e != "value" &&
+                                e != "valueActor");
         for (let prop of otherProps) {
           rawObject[prop] = item[prop];
         }
@@ -402,11 +407,10 @@ StorageUI.prototype = {
    *        The string to be parsed into an object
    */
   parseItemValue: function(name, value) {
-    let json = null
+    let json = null;
     try {
       json = JSON.parse(value);
-    }
-    catch (ex) {
+    } catch (ex) {
       json = null;
     }
 
@@ -426,9 +430,10 @@ StorageUI.prototype = {
     }
 
     let jsonObject = Object.create(null);
+    let view = this.view;
     jsonObject[name] = json;
-    let valueScope = this.view.getScopeAtIndex(1) ||
-                     this.view.addScope(L10N.getStr("storage.parsedValue.label"));
+    let valueScope = view.getScopeAtIndex(1) ||
+                     view.addScope(L10N.getStr("storage.parsedValue.label"));
     valueScope.expanded = true;
     let jsonVar = valueScope.addItem("", Object.create(null), true);
     jsonVar.expanded = true;
@@ -562,8 +567,7 @@ StorageUI.prototype = {
       }
       if (reason < 2) {
         this.table.push(item, reason == 0);
-      }
-      else {
+      } else {
         this.table.update(item);
         if (item == this.table.selectedRow && !this.sidebar.hidden) {
           this.displayObjectSidebar();
@@ -586,4 +590,4 @@ StorageUI.prototype = {
       event.preventDefault();
     }
   }
-}
+};

browser/devtools/styleinspector/computed-view.js

@@ -513,6 +513,17 @@ CssComputedView.prototype = {
     }
   },
 
+  /**
+   * Set the filter style search value.
+   * @param {String} value
+   *        The search value.
+   */
+  setFilterStyles: function(value="") {
+    this.searchField.value = value;
+    this.searchField.focus();
+    this._onFilterStyles();
+  },
+
   /**
    * Called when the user enters a search term in the filter style search box.
    */
@@ -568,9 +579,7 @@ CssComputedView.prototype = {
    */
   _onClearSearch: function() {
     if (this.searchField.value) {
-      this.searchField.value = "";
-      this.searchField.focus();
-      this._onFilterStyles();
+      this.setFilterStyles("");
       return true;
     }
 

browser/devtools/styleinspector/rule-view.js

@@ -1574,6 +1574,17 @@ CssRuleView.prototype = {
     }
   },
 
+  /**
+   * Set the filter style search value.
+   * @param {String} value
+   *        The search value.
+   */
+  setFilterStyles: function(value="") {
+    this.searchField.value = value;
+    this.searchField.focus();
+    this._onFilterStyles();
+  },
+
   /**
    * Called when the user enters a search term in the filter style search box.
    */
@@ -1643,9 +1654,7 @@ CssRuleView.prototype = {
    */
   _onClearSearch: function() {
     if (this.searchField.value) {
-      this.searchField.value = "";
-      this.searchField.focus();
-      this._onFilterStyles();
+      this.setFilterStyles("");
       return true;
     }
 

browser/extensions/shumway/content/ShumwayBootstrapUtils.jsm

@@ -69,11 +69,20 @@ Factory.prototype = {
     var registrar = Cm.QueryInterface(Ci.nsIComponentRegistrar);
     registrar.registerFactory(proto.classID, proto.classDescription,
       proto.contractID, factory);
+
+    if (proto.classID2) {
+      this._classID2 = proto.classID2;
+      registrar.registerFactory(proto.classID2, proto.classDescription,
+                                proto.contractID2, factory);
+    }
   },
 
   unregister: function unregister() {
     var registrar = Cm.QueryInterface(Ci.nsIComponentRegistrar);
     registrar.unregisterFactory(this._classID, this._factory);
+    if (this._classID2) {
+      registrar.unregisterFactory(this._classID2, this._factory);
+    }
   }
 };
 
@@ -128,25 +137,6 @@ var ShumwayBootstrapUtils = {
       let converterFactory = new Factory();
       converterFactory.register(ShumwayStreamConverter);
       this.converterFactory = converterFactory;
-      let overlayConverterFactory = new Factory();
-      overlayConverterFactory.register(ShumwayStreamOverlayConverter);
-      this.overlayConverterFactory = overlayConverterFactory;
-
-      let registerOverlayPreview = 'registerPlayPreviewMimeType' in Ph;
-      if (registerOverlayPreview) {
-        var ignoreCTP = getBoolPref(PREF_IGNORE_CTP, true);
-        var whitelist = getStringPref(PREF_WHITELIST);
-        // Some platforms cannot support video playback, and our whitelist targets
-        // only video players atm. We need to disable Shumway for those platforms.
-        if (whitelist && !Services.prefs.prefHasUserValue(PREF_WHITELIST) && !allowedPlatformForMedia()) {
-          log('Default SWF whitelist is used on an unsupported platform -- ' +
-          'using demo whitelist.');
-          whitelist = 'http://www.areweflashyet.com/*.swf';
-        }
-        Ph.registerPlayPreviewMimeType(SWF_CONTENT_TYPE, ignoreCTP,
-          undefined, whitelist);
-      }
-      this.registerOverlayPreview = registerOverlayPreview;
     }
   },
 
@@ -163,12 +153,6 @@ var ShumwayBootstrapUtils = {
     } else {
       this.converterFactory.unregister();
       this.converterFactory = null;
-      this.overlayConverterFactory.unregister();
-      this.overlayConverterFactory = null;
-
-      if (this.registerOverlayPreview) {
-        Ph.unregisterPlayPreviewMimeType(SWF_CONTENT_TYPE);
-      }
     }
   }
 };

browser/extensions/shumway/content/ShumwayStreamConverter.jsm

@@ -403,7 +403,10 @@ ShumwayStreamConverter.prototype = new ShumwayStreamConverterBase();
 copyProperties(ShumwayStreamConverter.prototype, {
   classID: Components.ID('{4c6030f7-e20a-264f-5b0e-ada3a9e97384}'),
   classDescription: 'Shumway Content Converter Component',
-  contractID: '@mozilla.org/streamconv;1?from=application/x-shockwave-flash&to=*/*'
+  contractID: '@mozilla.org/streamconv;1?from=application/x-shockwave-flash&to=*/*',
+
+  classID2: Components.ID('{4c6030f8-e20a-264f-5b0e-ada3a9e97384}'),
+  contractID2: '@mozilla.org/streamconv;1?from=application/x-shockwave-flash&to=text/html'
 });
 
 function ShumwayStreamOverlayConverter() {}

browser/locales/en-US/chrome/browser/loop/loop.properties

@@ -25,10 +25,10 @@ sign_in_again_button=Sign In
 ## will be replaced by the super short brandname.
 sign_in_again_use_as_guest_button2=Use {{clientSuperShortname}} as a Guest
 
-## LOCALIZATION_NOTE(first_time_experience.title): clientShortname will be
-## replaced by the brand name
-first_time_experience_title={{clientShortname}} — Join the conversation
 first_time_experience_button_label=Get Started
+## LOCALIZATION_NOTE(first_time_experience_subheading): Message inviting the
+## user to create his or her first conversation.
+first_time_experience_subheading=Join the conversation
 
 invite_header_text=Invite someone to join you.
 
@@ -86,7 +86,7 @@ settings_menu_button_tooltip=Settings
 
 ## LOCALIZATION NOTE(contacts_search_placeholder): This is the placeholder text for
 ## the search field.
-contacts_search_placesholder=Type in contact name, email, phone number
+contacts_search_placesholder2=Search…
 
 ## LOCALIZATION NOTE (new_contact_button): This is the button to open the
 ## new contact sub-panel.
@@ -131,7 +131,7 @@ import_contacts_success_message={{total}} contact was successfully imported.;{{t
 ## LOCALIZATION NOTE(sync_contacts_button): This button is displayed in place of
 ## importing_contacts_button once contacts have been imported once.
 sync_contacts_button=Sync Contacts
-# LOCALIZATION NOTE(no_contacts_message_heading): Title shown when user has no
+## LOCALIZATION NOTE(no_contacts_message_heading): Title shown when user has no
 ## contacts in his address book
 no_contacts_message_heading=No contacts yet
 ## LOCALIZATION NOTE(no_contacts_import_or_add): Subheading inviting the user
@@ -225,8 +225,8 @@ 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
+mute_local_video_button_title2=Disable video
+unmute_local_video_button_title2=Enable video
 active_screenshare_button_title=Stop sharing
 inactive_screenshare_button_title=Share your screen
 share_tabs_button_title2=Share your Tabs

browser/themes/osx/browser.css

@@ -1453,6 +1453,13 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba
   -moz-image-region: rect(2px, 78px, 18px, 62px);
 }
 
+/* tabview yosemite vibrancy background */
+@media (-moz-mac-yosemite-theme) {
+  #tab-view {
+    -moz-appearance: -moz-mac-vibrancy-light;
+  }
+}
+
 /* undo close tab menu item */
 #alltabs_undoCloseTab {
   list-style-image: url(chrome://browser/skin/undoCloseTab.png);

browser/themes/osx/tabview/tabview.css

@@ -9,12 +9,14 @@ body {
   font-size: 12px;
 }
 
-#bg {
-  background: linear-gradient(#C4C4C4, #9E9E9E);
-}
+@media not all and (-moz-mac-yosemite-theme) { /* yosemite uses vibrant background on parent iframe */
+  #bg {
+    background: linear-gradient(#C4C4C4, #9E9E9E);
+  }
 
-#bg:-moz-window-inactive {
-  background: linear-gradient(#EDEDED, #D8D8D8);
+  #bg:-moz-window-inactive {
+    background: linear-gradient(#EDEDED, #D8D8D8);
+  }
 }
 
 /* Tabs

build/mobile/robocop/Makefile.in

@@ -5,8 +5,6 @@
 mobile-tests := mobile/android/tests/browser/robocop
 TESTPATH     := $(topsrcdir)/$(mobile-tests)
 
-ANDROID_APK_NAME := robocop-debug
-
 ANDROID_EXTRA_JARS += \
   $(srcdir)/robotium-solo-4.3.1.jar \
   $(NULL)

build/mobile/robocop/moz.build

@@ -8,6 +8,8 @@ DEFINES['ANDROID_PACKAGE_NAME'] = CONFIG['ANDROID_PACKAGE_NAME']
 
 base = '/mobile/android/tests/browser/robocop/'
 
+ANDROID_APK_NAME = 'robocop-debug'
+ANDROID_APK_PACKAGE = 'org.mozilla.roboexample.test'
 ANDROID_ASSETS_DIRS += [base + 'assets']
 
 TEST_HARNESS_FILES.testing.mochitest += [

build/mobile/sutagent/android/Makefile.in

@@ -2,7 +2,7 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
-ANDROID_APK_NAME := sutAgentAndroid
+include $(topsrcdir)/config/config.mk
 
 JAVAFILES = \
   AlertLooperThread.java \
@@ -25,6 +25,4 @@ ANDROID_EXTRA_JARS = \
   $(srcdir)/network-libs/jmdns.jar \
   $(NULL)
 
-include $(topsrcdir)/config/rules.mk
-
 tools:: $(ANDROID_APK_NAME).apk

build/mobile/sutagent/android/fencp/Makefile.in

@@ -2,7 +2,7 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
-ANDROID_APK_NAME := FenCP
+include $(topsrcdir)/config/config.mk
 
 JAVAFILES = \
   DirCursor.java \
@@ -11,6 +11,4 @@ JAVAFILES = \
   FileCursor.java \
   $(NULL)
 
-include $(topsrcdir)/config/rules.mk
-
 tools:: $(ANDROID_APK_NAME).apk

build/mobile/sutagent/android/fencp/moz.build

@@ -3,3 +3,6 @@
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+ANDROID_APK_NAME = 'FenCP'
+ANDROID_APK_PACKAGE = 'org.mozilla.fencp'

build/mobile/sutagent/android/ffxcp/Makefile.in

@@ -2,7 +2,7 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
-ANDROID_APK_NAME := FfxCP
+include $(topsrcdir)/config/config.mk
 
 JAVAFILES = \
   DirCursor.java \
@@ -11,6 +11,4 @@ JAVAFILES = \
   FileCursor.java \
   $(NULL)
 
-include $(topsrcdir)/config/rules.mk
-
 tools:: $(ANDROID_APK_NAME).apk

build/mobile/sutagent/android/ffxcp/moz.build

@@ -3,3 +3,6 @@
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+ANDROID_APK_NAME = 'FfxCP'
+ANDROID_APK_PACKAGE = 'org.mozilla.ffxcp'

build/mobile/sutagent/android/moz.build

@@ -3,3 +3,6 @@
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+ANDROID_APK_NAME = 'sutAgentAndroid'
+ANDROID_APK_PACKAGE = 'com.mozilla.SUTAgentAndroid'

build/mobile/sutagent/android/watcher/Makefile.in

@@ -2,7 +2,7 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
-ANDROID_APK_NAME := Watcher
+include $(topsrcdir)/config/config.mk
 
 JAVAFILES = \
   IWatcherService.java \
@@ -12,6 +12,4 @@ JAVAFILES = \
   WatcherService.java \
   $(NULL)
 
-include $(topsrcdir)/config/rules.mk
-
 tools:: $(ANDROID_APK_NAME).apk

build/mobile/sutagent/android/watcher/moz.build

@@ -3,3 +3,6 @@
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+ANDROID_APK_NAME = 'Watcher'
+ANDROID_APK_PACKAGE = 'com.mozilla.watcher'

config/makefiles/java-build.mk

@@ -16,15 +16,19 @@ endif #} JAVAFILES
 
 
 ifdef ANDROID_APK_NAME #{
+$(if $(ANDROID_APK_PACKAGE),,$(error Missing ANDROID_APK_PACKAGE with ANDROID_APK_NAME))
+
 android_res_dirs := $(or $(ANDROID_RES_DIRS),$(srcdir)/res)
 _ANDROID_RES_FLAG := $(addprefix -S ,$(android_res_dirs))
 _ANDROID_ASSETS_FLAG := $(if $(ANDROID_ASSETS_DIRS),$(addprefix -A ,$(ANDROID_ASSETS_DIRS)))
 android_manifest := $(or $(ANDROID_MANIFEST_FILE),AndroidManifest.xml)
 
-GENERATED_DIRS += classes
+GENERATED_DIRS += classes generated
+
+generated_r_java := generated/$(subst .,/,$(ANDROID_APK_PACKAGE))/R.java
 
 classes.dex: $(call mkdir_deps,classes)
-classes.dex: R.java
+classes.dex: $(generated_r_java)
 classes.dex: $(ANDROID_APK_NAME).ap_
 classes.dex: $(ANDROID_EXTRA_JARS)
 classes.dex: $(JAVAFILES)
@@ -38,17 +42,35 @@ classes.dex: $(JAVAFILES)
 # all causes Make to treat the target differently, in a way that
 # defeats our dependencies.
 
-R.java: .aapt.deps ;
+$(generated_r_java): .aapt.deps ;
 $(ANDROID_APK_NAME).ap_: .aapt.deps ;
 
 # This uses the fact that Android resource directories list all
 # resource files one subdirectory below the parent resource directory.
 android_res_files := $(wildcard $(addsuffix /*,$(wildcard $(addsuffix /*,$(android_res_dirs)))))
 
+# An extra package like org.example.app generates dependencies like:
+# generated/org/example/app/R.java: .aapt.deps ;
+# classes.dex: generated/org/example/app/R.java
+# GARBAGE: generated/org/example/app/R.java
+$(foreach extra_package,$(ANDROID_EXTRA_PACKAGES), \
+  $(eval generated/$(subst .,/,$(extra_package))/R.java: .aapt.deps ;) \
+  $(eval classes.dex: generated/$(subst .,/,$(extra_package))/R.java) \
+  $(eval GARBAGE: generated/$(subst .,/,$(extra_package))/R.java) \
+)
+
+# aapt flag -m: 'make package directories under location specified by -J'.
+# The --extra-package list is colon separated.
 .aapt.deps: $(android_manifest) $(android_res_files) $(wildcard $(ANDROID_ASSETS_DIRS))
 	@$(TOUCH) $@
 	$(AAPT) package -f -M $< -I $(ANDROID_SDK)/android.jar $(_ANDROID_RES_FLAG) $(_ANDROID_ASSETS_FLAG) \
-		-J ${@D} \
+		--custom-package $(ANDROID_APK_PACKAGE) \
+		--non-constant-id \
+		--auto-add-overlay \
+		$(if $(ANDROID_EXTRA_PACKAGES),--extra-packages $(subst $(NULL) ,:,$(strip $(ANDROID_EXTRA_PACKAGES)))) \
+		$(if $(ANDROID_EXTRA_RES_DIRS),$(addprefix -S ,$(ANDROID_EXTRA_RES_DIRS))) \
+		-m \
+		-J ${@D}/generated \
 		-F $(ANDROID_APK_NAME).ap_
 
 $(ANDROID_APK_NAME)-unsigned-unaligned.apk: $(ANDROID_APK_NAME).ap_ classes.dex
@@ -60,10 +82,10 @@ $(ANDROID_APK_NAME)-unaligned.apk: $(ANDROID_APK_NAME)-unsigned-unaligned.apk
 	$(DEBUG_JARSIGNER) $@
 
 $(ANDROID_APK_NAME).apk: $(ANDROID_APK_NAME)-unaligned.apk
-	$(ZIPALIGN) -f -v 4 $< $@
+	$(ZIPALIGN) -f 4 $< $@
 
 GARBAGE += \
-  R.java \
+  $(generated_r_java) \
   classes.dex  \
   $(ANDROID_APK_NAME).ap_ \
   $(ANDROID_APK_NAME)-unsigned-unaligned.apk \