Bug 1059967 - Updating SHB to conform to UX v1.0 spec

apps/system/index.html

@@ -65,7 +65,7 @@
     <script defer src="shared/elements/gaia_overflow_menu/script.js"></script>
     -->
 
-
+    <link rel="stylesheet" type="text/css" href="style/definitions.css">
     <link rel="stylesheet" type="text/css" href="style/attention_indicator.css">
 
     <!-- System -->
@@ -168,6 +168,10 @@
     <link rel="stylesheet" type="text/css" href="style/action_menu/action_menu_extended.css">
     <script defer src="js/action_menu.js"></script>
 
+    <!-- Date and Time Selector Extension -->
+    <link rel="stylesheet" type="text/css" href="style/date_selector/date_selector_extended.css">
+    <link rel="stylesheet" type="text/css" href="style/time_selector/time_selector_extended.css">
+
     <!-- Ime Menu -->
     <script defer src="js/ime_menu.js"></script>
 

apps/system/style/action_menu/action_menu_extended.css

@@ -1,6 +1,16 @@
 #screen.software-button-enabled [role="dialog"][data-type="action"],
 #screen.software-button-enabled [role="dialog"][data-type="object"] {
-  bottom: 5rem;
+  bottom: var(--software-home-button-height);
+}
+
+#screen.fullscreen-layout-app.software-button-enabled [role="dialog"][data-type="action"] {
+  height: calc(100% - 7rem - var(--software-home-button-height));
+}
+
+@media (orientation: landscape) {
+  #screen.fullscreen-layout-app.software-button-enabled [role="dialog"][data-type="action"] {
+    height: calc(100% - 7rem);
+  }
 }
 
 /* Extending action menu with icon capability & transition*/

apps/system/style/authentication_dialog.css

@@ -10,7 +10,7 @@
 }
 
 #screen.fullscreen-layout-app.software-button-enabled .authentication-dialog {
-  height: calc(100% - 3rem - 5rem);
+  height: calc(100% - 3rem - var(--software-home-button-height));
 }
 
 @media (orientation: landscape) {

apps/system/style/cards_view/cards_view.css

@@ -14,14 +14,14 @@
 
 @media not all and (-moz-physical-home-button) {
   #screen:not(.software-button-disabled) #cards-view {
-    height: calc(100% - 5rem);
-    bottom: 5rem;
+    height: calc(100% - var(--software-home-button-height));
+    bottom: var(--software-home-button-height);
   }
 }
 
 #screen.software-button-enabled #cards-view {
-  height: calc(100% - 5rem);
-  bottom: 5rem;
+  height: calc(100% - var(--software-home-button-height));
+  bottom: var(--software-home-button-height);
 }
 
 #cards-view.active {

apps/system/style/date_selector/date_selector_extended.css

@@ -0,0 +1,9 @@
+#screen.fullscreen-layout-app.software-button-enabled [role="dialog"][data-type="date-selector"] {
+  height: calc(100% - 7rem - var(--software-home-button-height));
+}
+
+@media (orientation: landscape) {
+  #screen.fullscreen-layout-app.software-button-enabled [role="dialog"][data-type="date-selector"] {
+    height: calc(100% - 7rem);
+  }
+}

apps/system/style/definitions.css

@@ -0,0 +1,5 @@
+/*csslint empty-rules: false*/
+/* See bug 1053721 */
+:root {
+  --software-home-button-height: 4.4rem;
+}

apps/system/style/edges/edges.css

@@ -38,7 +38,7 @@
 @media (orientation: portrait) {
   #screen.software-button-enabled #right-panel,
   #screen.software-button-enabled #left-panel {
-    height: calc(100% - 10rem - 5rem);
+    height: calc(100% - 10rem - var(--software-home-button-height));
   }
 }
 

apps/system/style/modal_dialog/modal_dialog.css

@@ -33,7 +33,7 @@
 }
 
 #screen.fullscreen-layout-app.software-button-enabled .appWindow > .modal-dialog {
-  height: calc(100% - 5rem);
+  height: calc(100% - var(--software-home-button-height));
 }
 
 @media (orientation: landscape) {

apps/system/style/modal_dialog/prompt.css

@@ -53,5 +53,5 @@ form[role="dialog"][data-type="confirm"] {
 /* Shift the bottom of the prompt to account for the height of the
    software home button */
 #screen.software-button-enabled form[role="dialog"][data-type="confirm"] {
-  bottom: 5rem;
+  bottom: var(--software-home-button-height);
 }

apps/system/style/permission_manager/permission_manager.css

@@ -11,7 +11,7 @@
 }
 
 #screen.fullscreen-layout-app.software-button-enabled #permission-screen {
-  height: calc(100% - 5rem);
+  height: calc(100% - var(--software-home-button-height));
 }
 
 @media (orientation: landscape) {
@@ -44,29 +44,29 @@
 
 @media not all and (-moz-physical-home-button) {
   #screen:not(.software-button-disabled) #permission-screen {
-    height: calc(100% - 5rem);
+    height: calc(100% - var(--software-home-button-height));
   }
 
   #screen.attention:not(.software-button-disabled) #permission-screen {
-    height: calc(100% - 4rem - 5rem);
+    height: calc(100% - 4rem - var(--software-home-button-height));
   }
 
   #screen.fullscreen-app:not(.software-button-disabled) #permission-screen {
-    height: calc(100% - 5rem);
+    height: calc(100% - var(--software-home-button-height));
   }
 }
 
 #screen.software-button-enabled #permission-screen {
-  height: calc(100% - 5rem);
+  height: calc(100% - var(--software-home-button-height));
 }
 
 #screen.software-button-enabled.attention #permission-screen {
-  height: calc(100% - 4rem - 5rem);
+  height: calc(100% - 4rem - var(--software-home-button-height));
 }
 
 
 #screen.software-button-enabled.fullscreen-app #permission-screen {
-  height: calc(100% - 5rem);
+  height: calc(100% - var(--software-home-button-height));
 }
 
 #permission-title {

apps/system/style/rocketbar/rocketbar.css

@@ -131,9 +131,9 @@
 }
 
 /* Rocketbar results is normally 7rem tall and should be adjusted by the
-   height of the SHB of 5rem when enabled */
+   height of the SHB when enabled */
 #screen.software-button-enabled #rocketbar-results {
-  height: calc(100% - 12rem);
+  height: calc(100% - 7rem - var(--software-home-button-height));
 }
 
 #rocketbar-results.hidden, #rocketbar-results iframe.hidden,
@@ -149,11 +149,11 @@
 
 @media (orientation:landscape) {
   #screen.software-button-enabled #rocketbar {
-    width: calc(100% - 5rem);
+    width: calc(100% - var(--software-home-button-height));
   }
 
   #screen.software-button-enabled #rocketbar-results {
     height: calc(100% - 7rem);
-    width: calc(100% - 5rem);
+    width: calc(100% - var(--software-home-button-height));
   }
 }

apps/system/style/software_button_manager/software_button_manager.css

@@ -4,16 +4,19 @@
   align-items: center;
   text-align: center;
   right: 0;
-  bottom: -5rem;
+  bottom: calc(var(--software-home-button-height) * -1);
   left: 0;
   position: absolute;
-  background: black;
-  height: 5rem;
+  height: var(--software-home-button-height);
   transition-duration: 0.4s;
   transition-timing-function: ease-in-out;
   visibility: hidden;
 }
 
+#software-buttons {
+  background: black;
+}
+
 #software-buttons.no-transition {
   transition: none;
 }
@@ -25,6 +28,7 @@
 
 #software-buttons-fullscreen-layout {
   bottom: 0;
+  background: none;
 }
 
 #screen.fullscreen-layout-app #software-buttons-fullscreen-layout {
@@ -43,10 +47,10 @@
   #software-buttons,
   #software-buttons-fullscreen-layout {
     top: 0;
-    right: -5rem;
+    right: calc(var(--software-home-button-height) * -1);
     bottom: 0;
     left: auto;
-    width: 5rem;
+    width: var(--software-home-button-height);
     height: auto;
   }
 
@@ -62,25 +66,34 @@
 #software-home-button,
 #fullscreen-software-home-button,
 #fullscreen-layout-software-home-button {
-  width: 4rem;
-  height: 4rem;
+  --button-width: 2.6rem;
+  width: var(--button-width);
+  height: var(--button-width);
   margin: 0 auto;
   background: transparent;
-  border: 0.2rem solid white;
+  border-width: 0.35rem;
+  border-style: solid;
+  border-color: #ffffff;
   border-radius: 50%;
   box-sizing: border-box;
 }
 
+#fullscreen-software-home-button,
+#fullscreen-layout-software-home-button {
+  opacity: 0.8;
+  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.45), inset 0 1px 5px 0 rgba(0, 0, 0, 0.45);
+}
+
 #software-home-button.active,
 #fullscreen-software-home-button.active,
 #fullscreen-layout-software-home-button.active {
-  box-shadow: 0 0 1rem white;
+  border-color: #00caf2;
 }
 
 #fullscreen-software-home-button {
   position: absolute;
   bottom: 0.5rem;
-  left: calc(50% - 2.5rem);
+  left: calc(50% - var(--button-width) / 2);
   opacity: 0.5;
   visibility: hidden;
 }
@@ -94,7 +107,7 @@
     top: auto;
     left: auto;
     right: 0.5rem;
-    bottom: calc(50% - 2.5rem);
+    bottom: calc(50% - var(--button-width) / 2);
   }
 }
 

apps/system/style/statusbar/statusbar.css

@@ -21,7 +21,7 @@
 @media (orientation: landscape) {
   #screen.software-button-enabled #statusbar-background,
   #screen.software-button-enabled #statusbar {
-    width: calc(100% - 5rem);
+    width: calc(100% - var(--software-home-button-height));
   }
 }
 

apps/system/style/system/keyboard.css

@@ -25,17 +25,17 @@
 
 @media not all and (-moz-physical-home-button) {
   #screen:not(.software-button-disabled) #keyboards {
-    bottom: 5rem;
+    bottom: var(--software-home-button-height);
   }
 }
 
 #screen.software-button-enabled #keyboards {
-  bottom: 5rem;
+  bottom: var(--software-home-button-height);
 }
 
 @media (orientation: landscape) {
   #screen.software-button-enabled #keyboards {
-    right: 5rem;
+    right: var(--software-home-button-height);
     bottom: 0;
     left: 0;
     width: auto;

apps/system/style/system/system.css

@@ -276,8 +276,8 @@ body {
 }
 
 #screen.software-button-enabled #windows + #dialog-overlay {
-  bottom: 5rem;
-  height: calc(100% - 3rem - 5rem);
+  bottom: var(--software-home-button-height);
+  height: calc(100% - 3rem - var(--software-home-button-height));
 }
 
 #screen.active-statusbar #dialog-overlay,
@@ -338,7 +338,7 @@ body {
 
 /* Banner should be offset when software home button is enabled */
 #screen.software-button-enabled .generic-dialog.banner {
-  bottom: 5rem;
+  bottom: var(--software-home-button-height);
 }
 
 .generic-dialog.banner.visible {

apps/system/style/time_selector/time_selector_extended.css

@@ -0,0 +1,9 @@
+#screen.fullscreen-layout-app.software-button-enabled [role="dialog"][data-type="time-selector"] {
+  height: calc(100% - 7rem - var(--software-home-button-height));
+}
+
+@media (orientation: landscape) {
+  #screen.fullscreen-layout-app.software-button-enabled [role="dialog"][data-type="time-selector"] {
+    height: calc(100% - 7rem);
+  }
+}

apps/system/style/utility_tray/utility_tray.css

@@ -20,14 +20,14 @@
 
 @media (orientation: portrait) {
   #screen.software-button-enabled #utility-tray {
-    top: calc(-100% + 6rem + 5rem);
-    height: calc(100% - 3rem - 5rem);
+    top: calc(-100% + 6rem + var(--software-home-button-height));
+    height: calc(100% - 3rem - var(--software-home-button-height));
   }
 }
 
 @media (orientation: landscape) {
   #screen.software-button-enabled #utility-tray {
-    width: calc(100% - 5rem);
+    width: calc(100% - var(--software-home-button-height));
   }
 }
 
@@ -76,6 +76,6 @@
 
 @media (orientation: landscape) {
   #screen.software-button-enabled #utility-tray-notifications {
-    width: calc(100% - 5rem);
+    width: calc(100% - var(--software-home-button-height));
   }
 }

apps/system/style/value_selector/value_selector.css

@@ -15,10 +15,21 @@
   height: calc(100% - 7rem);
 }
 
+#screen.fullscreen-layout-app.software-button-enabled [role="dialog"][data-type="value-selector"] {
+  height: calc(100% - 7rem - var(--software-home-button-height));
+}
+
+@media (orientation: landscape) {
+  #screen.fullscreen-layout-app.software-button-enabled [role="dialog"][data-type="value-selector"] {
+    height: calc(100% - 7rem);
+  }
+}
+
 #screen.fullscreen-layout-app.software-button-enabled .generic-dialog[role="dialog"] .value-selector {
-  height: calc(100% - 5rem - 7rem);
+  height: calc(100% - 7rem - var(--software-home-button-height));
 }
 
+
 @media (orientation: landscape) {
   #screen.fullscreen-layout-app.software-button-enabled .generic-dialog[role="dialog"] .value-selector {
     height: calc(100% - 7rem);

apps/system/style/window.css

@@ -561,7 +561,7 @@
 
 @media (orientation: landscape) {
   #screen.software-button-enabled:not(.fullscreen-layout-app) #windows > .appWindow.outside-edges-right {
-    transform: translateX(calc(100% + 5rem));
+    transform: translateX(calc(100% + var(--software-home-button-height)));
   }
 }