Bug 1069028 - Implement Loop panel footer layout/styling with FxA pieces. r=MattN
authorTomasz Kołodziejski <tkolodziejski@mozilla.com>
Wed, 22 Oct 2014 17:53:00 -0700
changeset 212121 52e8c44b21f0775b2d77fb4e4a0bd1e92400a2c0
parent 212120 b20cca81a9cf209d94a2508a79ca65cb3f8b494d
child 212122 c77cb1e0d919d2f8b798b802d8b83ebb02b877a6
push id27698
push usercbook@mozilla.com
push dateFri, 24 Oct 2014 13:53:50 +0000
treeherdermozilla-central@6e35802ae3e2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMattN
bugs1069028
milestone36.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1069028 - Implement Loop panel footer layout/styling with FxA pieces. r=MattN
browser/components/loop/content/js/panel.js
browser/components/loop/content/js/panel.jsx
browser/components/loop/content/shared/css/panel.css
browser/components/loop/ui/fake-mozLoop.js
browser/modules/Social.jsm
browser/themes/shared/aboutSocialError.css
--- a/browser/components/loop/content/js/panel.js
+++ b/browser/components/loop/content/js/panel.js
@@ -712,18 +712,21 @@ loop.panel = (function(_, mozL10n) {
                                   selectTab: this.selectTab})
             )
           ), 
           React.DOM.div({className: "footer"}, 
             React.DOM.div({className: "user-details"}, 
               UserIdentity({displayName: displayName}), 
               AvailabilityDropdown(null)
             ), 
-            AuthLink(null), 
-            SettingsDropdown(null)
+            React.DOM.div({className: "signin-details"}, 
+              AuthLink(null), 
+              React.DOM.div({className: "footer-signin-separator"}), 
+              SettingsDropdown(null)
+            )
           )
         )
       );
     }
   });
 
   /**
    * Panel initialisation.
--- a/browser/components/loop/content/js/panel.jsx
+++ b/browser/components/loop/content/js/panel.jsx
@@ -712,18 +712,21 @@ loop.panel = (function(_, mozL10n) {
                                   selectTab={this.selectTab}/>
             </Tab>
           </TabView>
           <div className="footer">
             <div className="user-details">
               <UserIdentity displayName={displayName} />
               <AvailabilityDropdown />
             </div>
-            <AuthLink />
-            <SettingsDropdown />
+            <div className="signin-details">
+              <AuthLink />
+              <div className="footer-signin-separator" />
+              <SettingsDropdown />
+            </div>
           </div>
         </div>
       );
     }
   });
 
   /**
    * Panel initialisation.
--- a/browser/components/loop/content/shared/css/panel.css
+++ b/browser/components/loop/content/shared/css/panel.css
@@ -263,17 +263,17 @@ body {
 /* Dropdown menu */
 
 .dropdown {
   position: relative;
 }
 
 .dropdown-menu {
   position: absolute;
-  top: -28px;
+  bottom: 0;
   left: 0;
   background-color: #fdfdfd;
   box-shadow: 0 1px 3px rgba(0,0,0,.3);
   list-style: none;
   padding: 5px;
   border-radius: 2px;
 }
 
@@ -340,16 +340,20 @@ body[dir=rtl] .dropdown-menu-item {
   color: #00caee;
 }
 
 /* DnD menu */
 
 .dnd-status {
   border: 1px solid transparent;
   padding: 2px 4px;
+  margin: 0;
+  /* Undo the start border + padding so that unhovered dnd-status is aligned
+     as if there was no additional spacing. */
+  -moz-margin-start: calc(-1px + -4px);
   font-size: .9em;
   cursor: pointer;
   border-radius: 3px;
 }
 
 .dnd-status:hover {
   border: 1px solid #DDD;
   background-color: #f1f1f1;
@@ -372,29 +376,32 @@ body[dir=rtl] .dropdown-menu-item {
 .status-dnd {
   border: 1px solid #888;
 }
 
 /* Sign in/up link */
 
 .signin-link {
   flex: 2 1 auto;
-  margin-top: 14px;
-  border-right: 1px solid #aaa;
-  padding-right: 1em;
-  margin-right: 1em;
+  margin: 0;
   text-align: right;
 }
 
 .signin-link a {
   font-size: .9em;
   text-decoration: none;
   color: #888;
 }
 
+.footer-signin-separator {
+  border-right: 1px solid #aaa;
+  height: 16px;
+  margin: 0 1em;
+}
+
 /* Settings (gear) menu */
 
 .button-settings {
   display: inline-block;
   overflow: hidden;
   margin: 0;
   padding: 0;
   border: none;
@@ -408,17 +415,16 @@ body[dir=rtl] .dropdown-menu-item {
   cursor: pointer;
   background: transparent url(../img/svg/glyph-settings-16x16.svg) no-repeat center center;
   background-size: contain;
   width: 12px;
   height: 12px;
 }
 
 .footer .button-settings {
-  margin-top: 17px; /* used to align the gear icon with the availability dropdown menu inner text */
   opacity: .6;      /* used to "grey" the icon a little */
 }
 
 .settings-menu .dropdown-menu {
   /* The panel can't have dropdown menu overflowing its iframe boudaries;
      let's anchor it from the bottom-right, while resetting the top & left values
      set by .dropdown-menu */
   top: auto;
@@ -454,15 +460,27 @@ body[dir=rtl] .dropdown-menu-item {
 /* Footer */
 
 .footer {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: space-between;
   align-content: stretch;
-  align-items: flex-start;
+  align-items: center;
   font-size: 1em;
   border-top: 1px solid #D1D1D1;
   background-color: #eaeaea;
   color: #7f7f7f;
   padding: 14px;
 }
+
+.footer .signin-details {
+  align-items: center;
+  display: flex;
+  -moz-margin-start: 5px;
+}
+
+.footer .user-identity {
+  color: #000;
+  font-weight: bold;
+  margin: 0;
+}
--- a/browser/components/loop/ui/fake-mozLoop.js
+++ b/browser/components/loop/ui/fake-mozLoop.js
@@ -16,10 +16,11 @@ navigator.mozLoop = {
     }
   },
   releaseCallData: function() {},
   contacts: {
     getAll: function(callback) {
       callback(null, []);
     },
     on: function() {}
-  }
+  },
+  fxAEnabled: true
 };
--- a/browser/modules/Social.jsm
+++ b/browser/modules/Social.jsm
@@ -9,17 +9,17 @@ this.EXPORTED_SYMBOLS = ["Social", "Crea
                          "DynamicResizeWatcher", "sizeSocialPanelToContent"];
 
 const Ci = Components.interfaces;
 const Cc = Components.classes;
 const Cu = Components.utils;
 
 // The minimum sizes for the auto-resize panel code, minimum size necessary to
 // properly show the error page in the panel.
-const PANEL_MIN_HEIGHT = 200;
+const PANEL_MIN_HEIGHT = 190;
 const PANEL_MIN_WIDTH = 330;
 
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 
 XPCOMUtils.defineLazyModuleGetter(this, "CustomizableUI",
   "resource:///modules/CustomizableUI.jsm");
 XPCOMUtils.defineLazyModuleGetter(this, "SocialService",
--- a/browser/themes/shared/aboutSocialError.css
+++ b/browser/themes/shared/aboutSocialError.css
@@ -1,13 +1,14 @@
 body {
   background-color: rgb(241, 244, 248);
   margin-top: 2em;
   font: message-box;
   font-size: 100%;
+  min-height: 200px;
 }
 
 p {
   font-size: .8em;
 }
 
 #error-box {
   background: url('chrome://global/skin/icons/information-24.png') no-repeat left 4px;