Bug 1175441 - Clear the 'Let's talk about' tickbox in the Loop panel when the page selection changes. r=mikedeboer
authorMark Banner <standard8@mozilla.com>
Thu, 18 Jun 2015 12:39:52 +0100
changeset 267624 c150d89825a6978ceacc6162f92f37227297a42b
parent 267623 ad76805ea0fbdb7eaa857be5a1814c6f03559688
child 267625 5d40b50b36ef874e01d3bada9d95c65e7ca450a9
push id4932
push userjlund@mozilla.com
push dateMon, 10 Aug 2015 18:23:06 +0000
treeherdermozilla-esr52@6dd5a4f5f745 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmikedeboer
bugs1175441
milestone41.0a1
Bug 1175441 - Clear the 'Let's talk about' tickbox in the Loop panel when the page selection changes. r=mikedeboer
browser/components/loop/content/js/panel.js
browser/components/loop/content/js/panel.jsx
browser/components/loop/content/shared/js/views.js
browser/components/loop/content/shared/js/views.jsx
browser/components/loop/test/desktop-local/panel_test.js
browser/components/loop/test/shared/views_test.js
--- a/browser/components/loop/content/js/panel.js
+++ b/browser/components/loop/content/js/panel.js
@@ -725,16 +725,17 @@ loop.panel = (function(_, mozL10n) {
         if (!this.isMounted()) {
           return;
         }
 
         var previewImage = metadata.favicon || "";
         var description = metadata.title || metadata.description;
         var url = metadata.url;
         this.setState({
+          checked: false,
           previewImage: previewImage,
           description: description,
           url: url
         });
       }.bind(this));
     },
 
     onCheckboxChange: function(newState) {
@@ -770,17 +771,18 @@ loop.panel = (function(_, mozL10n) {
         context: true,
         hide: !hostname ||
           !this.props.mozLoop.getLoopPref("contextInConversations.enabled")
       });
 
       return (
         React.createElement("div", {className: "new-room-view"}, 
           React.createElement("div", {className: contextClasses}, 
-            React.createElement(Checkbox, {label: mozL10n.get("context_inroom_label"), 
+            React.createElement(Checkbox, {checked: this.state.checked, 
+                      label: mozL10n.get("context_inroom_label"), 
                       onChange: this.onCheckboxChange}), 
             React.createElement(sharedViews.ContextUrlView, {
               allowClick: false, 
               description: this.state.description, 
               showContextTitle: false, 
               thumbnail: this.state.previewImage, 
               url: this.state.url, 
               useDesktopPaths: true})
--- a/browser/components/loop/content/js/panel.jsx
+++ b/browser/components/loop/content/js/panel.jsx
@@ -725,16 +725,17 @@ loop.panel = (function(_, mozL10n) {
         if (!this.isMounted()) {
           return;
         }
 
         var previewImage = metadata.favicon || "";
         var description = metadata.title || metadata.description;
         var url = metadata.url;
         this.setState({
+          checked: false,
           previewImage: previewImage,
           description: description,
           url: url
         });
       }.bind(this));
     },
 
     onCheckboxChange: function(newState) {
@@ -770,17 +771,18 @@ loop.panel = (function(_, mozL10n) {
         context: true,
         hide: !hostname ||
           !this.props.mozLoop.getLoopPref("contextInConversations.enabled")
       });
 
       return (
         <div className="new-room-view">
           <div className={contextClasses}>
-            <Checkbox label={mozL10n.get("context_inroom_label")}
+            <Checkbox checked={this.state.checked}
+                      label={mozL10n.get("context_inroom_label")}
                       onChange={this.onCheckboxChange} />
             <sharedViews.ContextUrlView
               allowClick={false}
               description={this.state.description}
               showContextTitle={false}
               thumbnail={this.state.previewImage}
               url={this.state.url}
               useDesktopPaths={true} />
--- a/browser/components/loop/content/shared/js/views.js
+++ b/browser/components/loop/content/shared/js/views.js
@@ -628,16 +628,25 @@ loop.shared.views = (function(_, l10n) {
         additionalClass: "",
         checked: false,
         disabled: false,
         label: null,
         value: ""
       };
     },
 
+    componentWillReceiveProps: function(nextProps) {
+      // Only change the state if the prop has changed, and if it is also
+      // different from the state.
+      if (this.props.checked !== nextProps.checked &&
+          this.state.checked !== nextProps.checked) {
+        this.setState({ checked: nextProps.checked });
+      }
+    },
+
     getInitialState: function() {
       return {
         checked: this.props.checked,
         value: this.props.checked ? this.props.value : ""
       };
     },
 
     _handleClick: function(event) {
--- a/browser/components/loop/content/shared/js/views.jsx
+++ b/browser/components/loop/content/shared/js/views.jsx
@@ -628,16 +628,25 @@ loop.shared.views = (function(_, l10n) {
         additionalClass: "",
         checked: false,
         disabled: false,
         label: null,
         value: ""
       };
     },
 
+    componentWillReceiveProps: function(nextProps) {
+      // Only change the state if the prop has changed, and if it is also
+      // different from the state.
+      if (this.props.checked !== nextProps.checked &&
+          this.state.checked !== nextProps.checked) {
+        this.setState({ checked: nextProps.checked });
+      }
+    },
+
     getInitialState: function() {
       return {
         checked: this.props.checked,
         value: this.props.checked ? this.props.value : ""
       };
     },
 
     _handleClick: function(event) {
--- a/browser/components/loop/test/desktop-local/panel_test.js
+++ b/browser/components/loop/test/desktop-local/panel_test.js
@@ -845,16 +845,35 @@ describe("loop.panel", function() {
 
       // Simulate being visible
       view.onDocumentVisible();
 
       var contextContent = view.getDOMNode().querySelector(".context-content");
       expect(contextContent).to.not.equal(null);
     });
 
+    it("should cancel the checkbox when a new URL is available", function() {
+      fakeMozLoop.getSelectedTabMetadata = function (callback) {
+        callback({
+          url: "https://www.example.com",
+          description: "fake description",
+          previews: [""]
+        });
+      };
+
+      var view = createTestComponent();
+
+      view.setState({ checked: true });
+
+      // Simulate being visible
+      view.onDocumentVisible();
+
+      expect(view.state.checked).eql(false);
+    });
+
     it("should show a default favicon when none is available", function() {
       fakeMozLoop.getSelectedTabMetadata = function (callback) {
         callback({
           url: "https://www.example.com",
           description: "fake description",
           previews: [""]
         });
       };
--- a/browser/components/loop/test/shared/views_test.js
+++ b/browser/components/loop/test/shared/views_test.js
@@ -760,16 +760,36 @@ describe("loop.shared.views", function()
         view = mountTestComponent({
           disabled: true
         });
 
         var node = view.getDOMNode();
         expect(node.classList.contains("disabled")).to.eql(true);
         expect(node.hasAttribute("disabled")).to.eql(true);
       });
+
+      it("should render the checkbox as checked when the prop is set", function() {
+        view = mountTestComponent({
+          checked: true
+        });
+
+        var checkbox = view.getDOMNode().querySelector(".checkbox");
+        expect(checkbox.classList.contains("checked")).eql(true);
+      });
+
+      it("should alter the render state when the props are changed", function() {
+        view = mountTestComponent({
+          checked: true
+        });
+
+        view.setProps({checked: false});
+
+        var checkbox = view.getDOMNode().querySelector(".checkbox");
+        expect(checkbox.classList.contains("checked")).eql(false);
+      });
     });
 
     describe("#_handleClick", function() {
       var onChange;
 
       beforeEach(function() {
         onChange = sinon.stub();
       });