Bug 1203454 - Backout incomplete feature work from Loop's visual refresh in Fx42 - Backout bug 1183617. a=sledru
authorMark Banner <standard8@mozilla.com>
Thu, 10 Sep 2015 11:13:41 +0100
changeset 289205 01567d5dc281c52ee7c4b3201d01889a1aee3bc3
parent 289204 1b471080813debbcdf0b18bf5f82cf14d5a85131
child 289206 ea37f9d31481e575094e732f43adfb8064cbd94d
push id5067
push userraliiev@mozilla.com
push dateMon, 21 Sep 2015 14:04:52 +0000
treeherdermozilla-beta@14221ffe5b2f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerssledru
bugs1203454, 1183617
milestone42.0a2
Bug 1203454 - Backout incomplete feature work from Loop's visual refresh in Fx42 - Backout bug 1183617. a=sledru
browser/components/loop/content/css/contacts.css
browser/components/loop/content/css/panel.css
browser/components/loop/content/js/contacts.js
browser/components/loop/content/js/contacts.jsx
--- a/browser/components/loop/content/css/contacts.css
+++ b/browser/components/loop/content/css/contacts.css
@@ -278,36 +278,8 @@ html[dir="rtl"] .contacts-gravatar-promo
   top: 8px;
   right: 8px;
 }
 
 html[dir="rtl"] .contacts-gravatar-promo > .button-close {
   right: auto;
   left: 8px;
 }
-
-.contact-controls {
-  padding: 0 16px;
-}
-
-.contact-controls > .button {
-  padding: .5em;
-  border: none;
-  border-radius: 5px;
-}
-
-.button.primary {
-  background: #00A9DC;
-  color: #fff;
-}
-
-.button.secondary {
-  background: #EBEBEB;
-  color: #4D4D4D;
-}
-
-.contact-controls > .primary {
-  flex: 5;
-}
-
-.contact-controls > .secondary {
-  flex: 3;
-}
--- a/browser/components/loop/content/css/panel.css
+++ b/browser/components/loop/content/css/panel.css
@@ -430,17 +430,20 @@ body {
 .button {
   padding: 2px 5px;
   background-color: #fbfbfb;
   color: #333;
   border: 1px solid #c1c1c1;
   border-radius: 2px;
   min-height: 26px;
   font-size: 1.2rem;
-  line-height: 1.2rem;
+}
+
+.button > .button-caption {
+  vertical-align: middle;
 }
 
 .button:hover {
   background-color: #ebebeb;
 }
 
 .button:hover:active {
   background-color: #ccc;
@@ -777,17 +780,17 @@ html[dir="rtl"] .settings-menu .dropdown
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: space-between;
   align-content: stretch;
   align-items: center;
   font-size: 1rem;
   background-color: #fff;
   color: #666666;
-  padding: .5rem 15px;
+  padding: .5rem 1rem;
 }
 
 .footer .signin-details {
   align-items: center;
   display: flex;
 }
 
 .footer .user-identity {
--- a/browser/components/loop/content/js/contacts.js
+++ b/browser/components/loop/content/js/contacts.js
@@ -585,16 +585,29 @@ loop.contacts = (function(_, mozL10n) {
             shownContacts.blocked = shownContacts.blocked.filter(filterFn);
           }
         }
       }
 
       return (
         React.createElement("div", null, 
           React.createElement("div", {className: "content-area"}, 
+            React.createElement(ButtonGroup, null, 
+              React.createElement(Button, {caption: this.state.importBusy
+                               ? mozL10n.get("importing_contacts_progress_button")
+                               : mozL10n.get("import_contacts_button2"), 
+                      disabled: this.state.importBusy, 
+                      onClick: this.handleImportButtonClick}, 
+                React.createElement("div", {className: cx({"contact-import-spinner": true,
+                                    spinner: true,
+                                    busy: this.state.importBusy})})
+              ), 
+              React.createElement(Button, {caption: mozL10n.get("new_contact_button"), 
+                      onClick: this.handleAddContactButtonClick})
+            ), 
             showFilter ?
             React.createElement("input", {className: "contact-filter", 
                    placeholder: mozL10n.get("contacts_search_placesholder"), 
                    valueLink: this.linkState("filter")})
             : null, 
             React.createElement(GravatarPromo, {handleUse: this.handleUseGravatar})
           ), 
           React.createElement("ul", {className: "contact-list"}, 
@@ -602,31 +615,16 @@ loop.contacts = (function(_, mozL10n) {
               shownContacts.available.sort(this.sortContacts).map(viewForItem) :
               null, 
             shownContacts.blocked && shownContacts.blocked.length > 0 ?
               React.createElement("div", {className: "contact-separator"}, mozL10n.get("contacts_blocked_contacts")) :
               null, 
             shownContacts.blocked ?
               shownContacts.blocked.sort(this.sortContacts).map(viewForItem) :
               null
-          ), 
-          React.createElement(ButtonGroup, {additionalClass: "contact-controls"}, 
-            React.createElement(Button, {additionalClass: "secondary", 
-                    caption: this.state.importBusy
-                             ? mozL10n.get("importing_contacts_progress_button")
-                             : mozL10n.get("import_contacts_button3"), 
-                    disabled: this.state.importBusy, 
-                    onClick: this.handleImportButtonClick}, 
-              React.createElement("div", {className: cx({"contact-import-spinner": true,
-                                  spinner: true,
-                                  busy: this.state.importBusy})})
-            ), 
-            React.createElement(Button, {additionalClass: "primary", 
-                    caption: mozL10n.get("new_contact_button"), 
-                    onClick: this.handleAddContactButtonClick})
           )
         )
       );
     }
   });
 
   const ContactDetailsForm = React.createClass({displayName: "ContactDetailsForm",
     mixins: [React.addons.LinkedStateMixin],
--- a/browser/components/loop/content/js/contacts.jsx
+++ b/browser/components/loop/content/js/contacts.jsx
@@ -585,16 +585,29 @@ loop.contacts = (function(_, mozL10n) {
             shownContacts.blocked = shownContacts.blocked.filter(filterFn);
           }
         }
       }
 
       return (
         <div>
           <div className="content-area">
+            <ButtonGroup>
+              <Button caption={this.state.importBusy
+                               ? mozL10n.get("importing_contacts_progress_button")
+                               : mozL10n.get("import_contacts_button2")}
+                      disabled={this.state.importBusy}
+                      onClick={this.handleImportButtonClick}>
+                <div className={cx({"contact-import-spinner": true,
+                                    spinner: true,
+                                    busy: this.state.importBusy})} />
+              </Button>
+              <Button caption={mozL10n.get("new_contact_button")}
+                      onClick={this.handleAddContactButtonClick} />
+            </ButtonGroup>
             {showFilter ?
             <input className="contact-filter"
                    placeholder={mozL10n.get("contacts_search_placesholder")}
                    valueLink={this.linkState("filter")} />
             : null }
             <GravatarPromo handleUse={this.handleUseGravatar}/>
           </div>
           <ul className="contact-list">
@@ -603,31 +616,16 @@ loop.contacts = (function(_, mozL10n) {
               null}
             {shownContacts.blocked && shownContacts.blocked.length > 0 ?
               <div className="contact-separator">{mozL10n.get("contacts_blocked_contacts")}</div> :
               null}
             {shownContacts.blocked ?
               shownContacts.blocked.sort(this.sortContacts).map(viewForItem) :
               null}
           </ul>
-          <ButtonGroup additionalClass="contact-controls">
-            <Button additionalClass="secondary"
-                    caption={this.state.importBusy
-                             ? mozL10n.get("importing_contacts_progress_button")
-                             : mozL10n.get("import_contacts_button3")}
-                    disabled={this.state.importBusy}
-                    onClick={this.handleImportButtonClick} >
-              <div className={cx({"contact-import-spinner": true,
-                                  spinner: true,
-                                  busy: this.state.importBusy})} />
-            </Button>
-            <Button additionalClass="primary"
-                    caption={mozL10n.get("new_contact_button")}
-                    onClick={this.handleAddContactButtonClick} />
-          </ButtonGroup>
         </div>
       );
     }
   });
 
   const ContactDetailsForm = React.createClass({
     mixins: [React.addons.LinkedStateMixin],