Bug 1174702 - Fix unnecessary scroll on Windows while editing context. r=mikedeboer

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

@@ -491,6 +491,7 @@ loop.roomViews = (function(mozL10n) {
             disabled: checked, 
             label: checkboxLabel, 
             onChange: this.handleCheckboxChange, 
+            useEllipsis: true, 
             value: location}), 
           React.createElement("form", {onSubmit: this.handleFormSubmit}, 
             React.createElement("input", {className: "room-context-name", 
@@ -508,7 +509,7 @@ loop.roomViews = (function(mozL10n) {
             React.createElement("textarea", {className: "room-context-comments", 
               onKeyDown: this.handleTextareaKeyDown, 
               placeholder: mozL10n.get("context_edit_comments_placeholder"), 
-              rows: "3", type: "text", 
+              rows: "2", type: "text", 
               valueLink: this.linkState("newRoomDescription")})
           ), 
           React.createElement("button", {className: "btn btn-info", 

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

@@ -491,6 +491,7 @@ loop.roomViews = (function(mozL10n) {
             disabled={checked}
             label={checkboxLabel}
             onChange={this.handleCheckboxChange}
+            useEllipsis={true}
             value={location} />
           <form onSubmit={this.handleFormSubmit}>
             <input className="room-context-name"
@@ -508,7 +509,7 @@ loop.roomViews = (function(mozL10n) {
             <textarea className="room-context-comments"
               onKeyDown={this.handleTextareaKeyDown}
               placeholder={mozL10n.get("context_edit_comments_placeholder")}
-              rows="3" type="text"
+              rows="2" type="text"
               valueLink={this.linkState("newRoomDescription")} />
           </form>
           <button className="btn btn-info"

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

@@ -524,6 +524,12 @@ html[dir="rtl"] .checkbox {
   background-image: url("../img/check.svg#check-disabled");
 }
 
+.checkbox-label.ellipsis {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
 /* ContextUrlView classes */
 
 .context-content {

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

@@ -949,6 +949,7 @@ body[platform="win"] .share-service-dropdown.overflow > .dropdown-menu-item {
 
 .room-context > .checkbox-wrapper {
   margin-bottom: .5em;
+  width: 100%;
 }
 
 .room-context-label {

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

@@ -857,6 +857,9 @@ loop.shared.views = (function(_, mozL10n) {
       disabled: React.PropTypes.bool,
       label: React.PropTypes.string,
       onChange: React.PropTypes.func.isRequired,
+      // If true, this will cause the label to be cut off at the end of the
+      // first line with an ellipsis, and a tooltip supplied.
+      useEllipsis: React.PropTypes.bool,
       // If `value` is not supplied, the consumer should rely on the boolean
       // `checked` state changes.
       value: React.PropTypes.string
@@ -868,6 +871,7 @@ loop.shared.views = (function(_, mozL10n) {
         checked: false,
         disabled: false,
         label: null,
+        useEllipsis: false,
         value: ""
       };
     },
@@ -910,6 +914,11 @@ loop.shared.views = (function(_, mozL10n) {
         checked: this.state.checked,
         disabled: this.props.disabled
       };
+      var labelClasses = {
+        "checkbox-label": true,
+        "ellipsis": this.props.useEllipsis
+      };
+
       if (this.props.additionalClass) {
         wrapperClasses[this.props.additionalClass] = true;
       }
@@ -918,9 +927,13 @@ loop.shared.views = (function(_, mozL10n) {
              disabled: this.props.disabled, 
              onClick: this._handleClick}, 
           React.createElement("div", {className: cx(checkClasses)}), 
-          this.props.label ?
-            React.createElement("label", null, this.props.label) :
-            null
+          
+            this.props.label ?
+              React.createElement("div", {className: cx(labelClasses), 
+                   title: this.props.useEllipsis ? this.props.label : ""}, 
+                this.props.label
+              ) : null
+          
         )
       );
     }

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

@@ -857,6 +857,9 @@ loop.shared.views = (function(_, mozL10n) {
       disabled: React.PropTypes.bool,
       label: React.PropTypes.string,
       onChange: React.PropTypes.func.isRequired,
+      // If true, this will cause the label to be cut off at the end of the
+      // first line with an ellipsis, and a tooltip supplied.
+      useEllipsis: React.PropTypes.bool,
       // If `value` is not supplied, the consumer should rely on the boolean
       // `checked` state changes.
       value: React.PropTypes.string
@@ -868,6 +871,7 @@ loop.shared.views = (function(_, mozL10n) {
         checked: false,
         disabled: false,
         label: null,
+        useEllipsis: false,
         value: ""
       };
     },
@@ -910,6 +914,11 @@ loop.shared.views = (function(_, mozL10n) {
         checked: this.state.checked,
         disabled: this.props.disabled
       };
+      var labelClasses = {
+        "checkbox-label": true,
+        "ellipsis": this.props.useEllipsis
+      };
+
       if (this.props.additionalClass) {
         wrapperClasses[this.props.additionalClass] = true;
       }
@@ -918,9 +927,13 @@ loop.shared.views = (function(_, mozL10n) {
              disabled={this.props.disabled}
              onClick={this._handleClick}>
           <div className={cx(checkClasses)} />
-          {this.props.label ?
-            <label>{this.props.label}</label> :
-            null}
+          {
+            this.props.label ?
+              <div className={cx(labelClasses)}
+                   title={this.props.useEllipsis ? this.props.label : ""}>
+                {this.props.label}
+              </div> : null
+          }
         </div>
       );
     }

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

@@ -941,7 +941,7 @@ describe("loop.shared.views", function() {
         view = mountTestComponent({ label: "Some label" });
 
         var node = view.getDOMNode();
-        expect(node.lastChild.localName).to.eql("label");
+        expect(node.lastChild.localName).to.eql("div");
         expect(node.lastChild.textContent).to.eql("Some label");
       });
 
@@ -974,6 +974,26 @@ describe("loop.shared.views", function() {
         var checkbox = view.getDOMNode().querySelector(".checkbox");
         expect(checkbox.classList.contains("checked")).eql(false);
       });
+
+      it("should add an ellipsis class when the prop is set", function() {
+        view = mountTestComponent({
+          label: "Some label",
+          useEllipsis: true
+        });
+
+        var label = view.getDOMNode().querySelector(".checkbox-label");
+        expect(label.classList.contains("ellipsis")).eql(true);
+      });
+
+      it("should not add an ellipsis class when the prop is not set", function() {
+        view = mountTestComponent({
+          label: "Some label",
+          useEllipsis: false
+        });
+
+        var label = view.getDOMNode().querySelector(".checkbox-label");
+        expect(label.classList.contains("ellipsis")).eql(false);
+      });
     });
 
     describe("#_handleClick", function() {