Bug 1131584: add 'Share my Tabs' button to the screenshare dropdown menu in the conversation window. r=Standard8

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

@@ -202,6 +202,8 @@ loop.shared.actions = (function() {
      * Used to start a screen share.
      */
     StartScreenShare: Action.define("startScreenShare", {
+      // The part of the screen to share, e.g. "window" or "browser".
+      type: String
     }),
 
     /**

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

@@ -89,14 +89,13 @@ loop.OTSdkDriver = (function() {
     /**
      * Initiates a screen sharing publisher.
      */
-    startScreenShare: function() {
+    startScreenShare: function(actionData) {
       this.dispatcher.dispatch(new sharedActions.ScreenSharingState({
         state: SCREEN_SHARE_STATES.PENDING
       }));
 
       var config = this._getCopyPublisherConfig();
-      // This is temporary until we get a sharing type selector
-      config.videoSource = "window";
+      config.videoSource = actionData.type;
 
       this.screenshare = this.sdk.initPublisher(this.getScreenShareElementFunc(),
         config);

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

@@ -102,8 +102,18 @@ loop.shared.views = (function(_, l10n) {
       }
     },
 
+    _startScreenShare: function(type) {
+      this.props.dispatcher.dispatch(new sharedActions.StartScreenShare({
+        type: type
+      }));
+    },
+
+    _handleShareTabs: function() {
+      this._startScreenShare("browser");
+    },
+
     _handleShareWindows: function() {
-      this.props.dispatcher.dispatch(new sharedActions.StartScreenShare({}));
+      this._startScreenShare("window");
     },
 
     _getTitle: function() {
@@ -143,6 +153,9 @@ loop.shared.views = (function(_, l10n) {
             isActive ? null : React.createElement("span", {className: "chevron"})
           ), 
           React.createElement("ul", {ref: "menu", className: dropdownMenuClasses}, 
+            React.createElement("li", {onClick: this._handleShareTabs, className: "disabled"}, 
+              l10n.get("share_tabs_button_title")
+            ), 
             React.createElement("li", {onClick: this._handleShareWindows}, 
               l10n.get("share_windows_button_title")
             )

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

@@ -102,8 +102,18 @@ loop.shared.views = (function(_, l10n) {
       }
     },
 
+    _startScreenShare: function(type) {
+      this.props.dispatcher.dispatch(new sharedActions.StartScreenShare({
+        type: type
+      }));
+    },
+
+    _handleShareTabs: function() {
+      this._startScreenShare("browser");
+    },
+
     _handleShareWindows: function() {
-      this.props.dispatcher.dispatch(new sharedActions.StartScreenShare({}));
+      this._startScreenShare("window");
     },
 
     _getTitle: function() {
@@ -143,6 +153,9 @@ loop.shared.views = (function(_, l10n) {
             {isActive ? null : <span className="chevron"/>}
           </button>
           <ul ref="menu" className={dropdownMenuClasses}>
+            <li onClick={this._handleShareTabs} className="disabled">
+              {l10n.get("share_tabs_button_title")}
+            </li>
             <li onClick={this._handleShareWindows}>
               {l10n.get("share_windows_button_title")}
             </li>

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

@@ -139,7 +139,9 @@ describe("loop.OTSdkDriver", function () {
     });
 
     it("should dispatch a `ScreenSharingState` action", function() {
-      driver.startScreenShare(new sharedActions.StartScreenShare());
+      driver.startScreenShare(new sharedActions.StartScreenShare({
+        type: "window"
+      }));
 
       sinon.assert.calledOnce(dispatcher.dispatch);
       sinon.assert.calledWithExactly(dispatcher.dispatch,
@@ -149,7 +151,9 @@ describe("loop.OTSdkDriver", function () {
     });
 
     it("should initialize a publisher", function() {
-      driver.startScreenShare(new sharedActions.StartScreenShare());
+      driver.startScreenShare(new sharedActions.StartScreenShare({
+        type: "window"
+      }));
 
       sinon.assert.calledOnce(sdk.initPublisher);
       sinon.assert.calledWithMatch(sdk.initPublisher,
@@ -161,7 +165,9 @@ describe("loop.OTSdkDriver", function () {
     beforeEach(function() {
       driver.getScreenShareElementFunc = function() {};
 
-      driver.startScreenShare(new sharedActions.StartScreenShare());
+      driver.startScreenShare(new sharedActions.StartScreenShare({
+        type: "window"
+      }));
 
       sandbox.stub(dispatcher, "dispatch");
 
@@ -611,7 +617,9 @@ describe("loop.OTSdkDriver", function () {
 
       driver.getScreenShareElementFunc = function() {};
 
-      driver.startScreenShare(new sharedActions.StartScreenShare());
+      driver.startScreenShare(new sharedActions.StartScreenShare({
+        type: "window"
+      }));
 
       sandbox.stub(dispatcher, "dispatch");
     });

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

@@ -152,7 +152,7 @@ describe("loop.shared.views", function() {
         expect(comp.state.showMenu).eql(true);
       });
 
-    it("should dispatch a StartScreenShare action on option click in screenshare dropdown",
+    it("should dispatch a 'browser' StartScreenShare action on option click",
       function() {
         var comp = TestUtils.renderIntoDocument(
           React.createElement(sharedViews.ScreenShareControlButton, {
@@ -166,7 +166,24 @@ describe("loop.shared.views", function() {
 
         sinon.assert.calledOnce(dispatcher.dispatch);
         sinon.assert.calledWithExactly(dispatcher.dispatch,
-          new sharedActions.StartScreenShare({}));
+          new sharedActions.StartScreenShare({ type: "browser" }));
+      });
+
+    it("should dispatch a 'window' StartScreenShare action on option click",
+      function() {
+        var comp = TestUtils.renderIntoDocument(
+          React.createElement(sharedViews.ScreenShareControlButton, {
+            dispatcher: dispatcher,
+            visible: true,
+            state: SCREEN_SHARE_STATES.INACTIVE
+          }));
+
+        TestUtils.Simulate.click(comp.getDOMNode().querySelector(
+          ".conversation-window-dropdown > li:last-child"));
+
+        sinon.assert.calledOnce(dispatcher.dispatch);
+        sinon.assert.calledWithExactly(dispatcher.dispatch,
+          new sharedActions.StartScreenShare({ type: "window" }));
       });
 
     it("should dispatch a EndScreenShare action on click when the state is active",

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

@@ -187,6 +187,7 @@ mute_local_video_button_title=Mute your video
 unmute_local_video_button_title=Unmute your video
 active_screenshare_button_title=Stop sharing
 inactive_screenshare_button_title=Share your screen
+share_tabs_button_title=Share my Tabs
 share_windows_button_title=Share other Windows
 
 ## LOCALIZATION NOTE (call_with_contact_title): The title displayed