Publish Vulpes Preview 15 sources for desktop, Android and Tundra

Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.

gaia/apps/system/style/accessibility/accessibility.css

@@ -0,0 +1,58 @@
+.accessibility-invert {
+  filter: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxmaWx0ZXIKICAgICAgaWQ9ImludmVydEZpbHRlciIKICAgICAgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KICAgIDxmZUNvbG9yTWF0cml4CiAgICAgICAgdmFsdWVzPSItMSAwIDAgMCAxIDAgLTEgMCAwIDEgMCAwIC0xIDAgMSAwIDAgMCAxIDAgIiAvPgogIDwvZmlsdGVyPgo8L3N2Zz4K#invertFilter);
+}
+
+#accessibility-captions-box {
+  padding: 0.5rem;
+  font-size: 1.6rem;
+  position: fixed;
+  bottom: 0;
+  left: calc(15% - 0.5rem);
+  pointer-events: none;
+  background-color: black;
+  width: 70%;
+  margin: 0 auto;
+  visibility: hidden;
+  opacity: 0;
+  text-align: center;
+  transition: visibility var(--transition-duration), opacity var(--transition-duration);
+  border-radius: 0.5rem 0.5rem 0 0;
+}
+
+#accessibility-captions-box.visible {
+  visibility: visible;
+  opacity: 0.9;
+}
+
+#accessibility-quicknav {
+  visibility: hidden;
+  position: absolute;
+  padding: 0;
+}
+
+#accessibility-quicknav.visible {
+  visibility: visible;
+}
+
+#accessibility-quicknav-container,
+#accessibility-quicknav-container > section,
+#accessibility-quicknav-container > section > ul {
+  height: 100%;
+  max-height: inherit;
+}
+
+#accessibility-quicknav-container > section > ul {
+  display: flex;
+  flex-direction: column;
+}
+
+#accessibility-quicknav-container > section > ul > li {
+  flex-grow: 1;
+}
+
+#accessibility-quicknav-container > section > ul > li > label {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}

gaia/apps/system/style/action_menu/action_menu_extended.css

@@ -0,0 +1,164 @@
+#screen:not(.locked).fullscreen-layout-app.software-button-enabled [role="dialog"][data-type="action"],
+#screen:not(.locked).fullscreen-layout-app.software-button-enabled [role="dialog"][data-type="object"],
+#screen.locked.secure-app.software-button-enabled [role="dialog"][data-type="action"],
+#screen.locked.secure-app.software-button-enabled [role="dialog"][data-type="object"],
+#screen:not(.locked).software-button-enabled [role="dialog"][data-type="action"],
+#screen:not(.locked).software-button-enabled [role="dialog"][data-type="object"] {
+  bottom: var(--software-home-button-height);
+}
+
+/* Dialogs inside an appWindow don't need to take the SHB into account */
+#screen.software-button-enabled .appWindow [role="dialog"][data-type="object"],
+#screen.software-button-enabled .appWindow [role="dialog"][data-type="action"] {
+  bottom: 0;
+}
+
+
+#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="object"],
+  #screen.fullscreen-layout-app.software-button-enabled [role="dialog"][data-type="action"],
+  #screen:not(.locked).software-button-enabled [role="dialog"][data-type="action"],
+  #screen:not(.locked).software-button-enabled [role="dialog"][data-type="object"],
+  #screen.software-button-enabled [role="dialog"][data-type="object"],
+  #screen.software-button-enabled [role="dialog"][data-type="action"] {
+    height: calc(100% - 7rem);
+    bottom: 0;
+    /* BiDi note: the software home button should not be mirrored in RTL. */
+    right: var(--software-home-button-height);
+  }
+
+  /* Dialogs inside an appWindow don't need to take the SHB into account */
+  #screen.software-button-enabled .appWindow [role="dialog"][data-type="object"],
+  #screen.software-button-enabled .appWindow [role="dialog"][data-type="action"] {
+    right: 0;
+  }
+}
+
+/* Extending action menu with icon capability & transition*/
+
+form[role="dialog"][data-type="action"] > menu > button.icon,
+form[role="dialog"][data-type="object"] > menu > button.icon {
+  background-repeat: no-repeat;
+  background-size: 3rem;
+}
+html[dir="ltr"] form[role="dialog"][data-type="action"] > menu > button.icon,
+html[dir="ltr"] form[role="dialog"][data-type="object"] > menu > button.icon {
+  background-position: left 0.5rem top 0.5rem;
+  padding-left: 4rem;
+}
+html[dir="rtl"] form[role="dialog"][data-type="action"] > menu > button.icon,
+html[dir="rtl"] form[role="dialog"][data-type="object"] > menu > button.icon {
+  background-position: right 0.5rem top 0.5rem;
+  padding-right: 4rem;
+}
+
+form[role="dialog"][data-type="action"],
+form[role="dialog"][data-type="object"] {
+  /* Forcing position absolute when hidden in order to avoid
+  unwanted scroll events due to Bug 1077474 */
+  position: absolute;
+
+  visibility: hidden;
+  transform: translateY(100%);
+  transition: transform ease-in-out .3s, visibility .3s;
+  pointer-events: none;
+}
+
+form[role="dialog"][data-type="action"].visible,
+form[role="dialog"][data-type="object"].visible {
+  position: fixed;
+  visibility: visible;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+/* Extending action menu to display checkbox */
+form[role="dialog"][data-type="action"] > menu > gaia-checkbox {
+  padding-bottom: 0.8rem;
+  padding-inline-start: 1.5rem;
+  box-sizing: border-box;
+}
+
+@media (min-width: 768px) {
+  form[role="dialog"][data-type="action"],
+  form[role="dialog"][data-type="object"] {
+    box-sizing: border-box;
+    background-color: rgba(0,0,0,0.6);
+  }
+
+  form[role="dialog"][data-type="action"] > header,
+  form[role="dialog"][data-type="object"] > header {
+    background: none;
+    top: calc(50% - 24rem);
+    width: 68rem;
+    height: 7rem;
+    padding: 0 6rem;
+    font-size: 2.2rem;
+    line-height: 7rem;
+    background-color: #333333;
+    box-shadow: 0 0 1rem #222222;
+    border: 0.1rem solid #282828;
+    border-bottom: none;
+    offset-inline-start: calc(50% - 34rem);
+  }
+
+  form[role="dialog"][data-type="action"] > header:after,
+  form[role="dialog"][data-type="object"] > header:after {
+    background: #222323;
+    width: 54rem;
+    offset-inline-start: 6rem;
+  }
+
+  form[role="dialog"][data-type="action"] > menu,
+  form[role="dialog"][data-type="object"] > menu {
+    top: calc(50% - 24rem + 7rem);
+    offset-inline-start: calc(50% - 34rem);
+    width: 56rem; /* 68 - 12 */
+    height: 31rem; /* 38 - 7 */
+    padding: 0 6rem;
+    font-size: 2.2rem;
+    background-color: #4d4d4d;
+    border: none;
+    z-index:1;
+  }
+
+  form[role="dialog"][data-type="action"] > menu > button,
+  form[role="dialog"][data-type="object"] > menu > button {
+    box-shadow: 0 0 1rem #222222;
+    border: 0.1rem solid #282828;
+    background: none no-repeat 1rem 50%;
+    background-color: #898989;
+    height: 4.7rem;
+    font-size: 2.3rem;
+    line-height: 3rem;
+    font-weight: 400;
+    padding: 1rem 6rem;
+    margin: 2.4rem 0 0;
+  }
+
+  form[role="dialog"][data-type="action"] > menu > button:last-child,
+  form[role="dialog"][data-type="object"] > menu > button:last-child {
+    position: absolute;
+    margin-top: 1.5rem;
+    margin-inline-start: calc(50% - 9rem);
+    font-size: 2.3rem;
+    line-height: 2.3rem;
+    font-weight: 400;
+    width: 18rem;
+    height: 4rem;
+  }
+
+  form[role="dialog"][data-type="action"] > menu > button:last-child:before,
+  form[role="dialog"][data-type="object"] > menu > button:last-child:before {
+    background: none;
+    background-color: #333333;
+    width: 67.8rem;
+    offset-inline-start: calc(50% - 33.9rem);
+    bottom: calc(50% - 14rem);
+    z-index: -1;
+  }
+}

gaia/apps/system/style/app_install_manager/app_install_manager.css

@@ -0,0 +1,173 @@
+/* dialog */
+/* FIXME we have to see why we need such specific style here and why
+ * the general style in confirm.css isn't sufficient */
+#setup-installed-app-dialog,
+#ime-layout-dialog,
+#app-install-dialog,
+#app-install-cancel-dialog,
+#app-download-cancel-dialog {
+  display: none;
+  top: 3rem;
+  pointer-events: none;
+}
+
+/* Shift the bottom of the prompt to account for the height of the
+   software home button */
+#screen.software-button-enabled #setup-installed-app-dialog,
+#screen.software-button-enabled #ime-layout-dialog,
+#screen.software-button-enabled #app-install-dialog,
+#screen.software-button-enabled #app-install-cancel-dialog,
+#screen.software-button-enabled #app-download-cancel-dialog {
+  bottom: var(--software-home-button-height);
+}
+
+@media (orientation: landscape) {
+  #screen.software-button-enabled #setup-installed-app-dialog,
+  #screen.software-button-enabled #ime-layout-dialog,
+  #screen.software-button-enabled #app-install-dialog,
+  #screen.software-button-enabled #app-install-cancel-dialog,
+  #screen.software-button-enabled #app-download-cancel-dialog {
+    bottom: 0;
+    /* BiDi note: the software home button should not be mirrored in RTL. */
+    right: var(--software-home-button-height);
+  }
+}
+
+#setup-installed-app-dialog.visible,
+#ime-layout-dialog.visible,
+#app-install-dialog.visible,
+#app-install-cancel-dialog.visible,
+#app-download-cancel-dialog.visible {
+  display: inline-block;
+  pointer-events: auto;
+}
+
+#app-uninstall-dialog {
+  position: absolute;
+}
+
+#setup-installed-app-dialog section,
+#ime-layout-dialog section,
+#app-install-dialog section,
+#app-install-cancel-dialog section,
+#app-download-cancel-dialog section {
+  height: auto;
+}
+
+#setup-installed-app-dialog h1,
+#ime-layout-dialog h1,
+#app-install-dialog h1,
+#app-install-cancel-dialog h1,
+#app-download-cancel-dialog h1 {
+  border-bottom: none;
+  background: none;
+}
+
+#app-install-dialog dl > dt {
+  width: 8rem;
+  margin-inline-end: 1rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+#app-install-dialog p {
+  font-size: 1.6rem;
+  font-weight: 400;
+  line-height: normal;
+  border-top: none;
+}
+#app-install-dialog #system-addon-warning p + p {
+  margin-top: 0;
+}
+#app-install-dialog span {
+  font-size: 1.6rem;
+  font-weight: 400;
+  line-height: normal;
+  color: inherit;
+}
+#app-install-dialog #system-addon-icon {
+  height: 3rem;
+  width: 3rem;
+}
+html[dir="ltr"] #app-install-dialog #system-addon-icon {
+  float: left;
+  margin: 1.5rem 0 0 1.5rem;
+}
+html[dir="rtl"] #app-install-dialog #system-addon-icon {
+  float: right;
+  margin: 1.5rem 1.5rem 0 0;
+}
+
+#app-install-author-url {
+  direction: ltr;
+}
+
+#app-install-cancel-dialog small:first-child {
+  margin-bottom: 1rem;
+}
+
+/* ... end of dialog */
+
+/* notification */
+#install-manager-notification-container > .fake-notification {
+  position: relative;
+  border-bottom: none;
+}
+
+#install-manager-notification-container > .fake-notification > * {
+  pointer-events: none;
+}
+
+#install-manager-notification-container [data-icon] {
+  color: #9ab0c0;
+  background-color: #edf1f4;
+}
+
+#install-manager-notification-container .title-container {
+  margin: 1.4rem 0 0;
+  line-height: 3rem;
+}
+html[dir="ltr"] #install-manager-notification-container .title-container {
+  margin-left: 3.7rem;
+}
+html[dir="rtl"] #install-manager-notification-container .title-container {
+  margin-right: 3.7rem;
+}
+
+#install-manager-notification-container progress {
+  position: absolute;
+  width: 100%;
+  height: 0.4rem;
+  left: 0;
+  top: 5.6rem;
+  border: none;
+}
+
+#install-manager-notification-container progress::-moz-progress-bar {
+  background: url(../shared/progress.gif) repeat-x;
+}
+
+/* ... end of notification */
+
+/* ... start of keyboard layout */
+ul#ime-list {
+  padding-inline-start: 1.5rem;
+}
+
+ul#ime-list > li {
+  /* Positioning */
+  position: relative;
+
+  /* Display & Box Model */
+  width: 100%;
+  height: 3rem;
+  padding-top: 2rem;
+
+  /* Other */
+  list-style: none;
+}
+
+ul#ime-list > li label {
+  text-transform: none;
+}
+
+/* ... end of keyboard layout */

gaia/apps/system/style/app_install_manager/images/alert-icon.svg

@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="Alert_Icon.svg"
+   x="0px"
+   y="0px"
+   width="30px"
+   height="30px"
+   viewBox="-9 11 30 30"
+   enable-background="new -9 11 30 30"
+   xml:space="preserve"><metadata
+     id="metadata3392"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs3390" /><sodipodi:namedview
+     id="namedview3969"
+     inkscape:cy="15"
+     guidetolerance="10"
+     borderopacity="1"
+     inkscape:cx="15"
+     inkscape:zoom="7.8666667"
+     objecttolerance="10"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     showgrid="false"
+     gridtolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="967"
+     inkscape:window-height="764"
+     inkscape:window-x="114"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="Layer_1" /><g
+     id="g3412"
+     transform="matrix(1.25,0,0,1.25,-1.5,-6.5)"><g
+       id="g3414"><circle
+         id="ellipse3416"
+         cx="6"
+         cy="26"
+         r="12"
+         style="fill:#b90000" /></g></g><path
+     id="path3426"
+     d="M 4.625,34.5 C 5,34.875 5.5,35.125 6,35.125 c 0.625,0 1.125,-0.25 1.5,-0.625 0.375,-0.375 0.625,-0.875 0.625,-1.375 0,-0.625 -0.25,-1 -0.625,-1.375 C 7.125,31.25 6.5,31 5.875,31 5.25,31 4.875,31.25 4.5,31.625 4.125,32 3.875,32.5 3.875,33 4,33.625 4,34.125 4.625,34.5 Z M 7.375,28.625 8,16.875 l -3.5,0 0.25,11.75 2.625,0 z"
+     inkscape:connector-curvature="0"
+     style="fill:#ffffff" /></svg>

gaia/apps/system/style/app_titlebar.css

@@ -0,0 +1,60 @@
+.appWindow .titlebar {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: var(--statusbar-height);
+  overflow: hidden;
+  z-index: 6;
+}
+
+.appWindow .titlebar .statusbar-shadow {
+  height: 100%;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+html[dir="ltr"] .appWindow .titlebar .statusbar-shadow { background-position: bottom right; }
+html[dir="rtl"] .appWindow .titlebar .statusbar-shadow { background-position: bottom left; }
+
+#screen:not(.attention):not(.rocketbar-focused):not(.utility-tray):not(.locked) #statusbar.light,
+#screen:not(.rocketbar-focused):not(.utility-tray):not(.locked) .appWindow.light > .titlebar .statusbar-shadow {
+  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'invert\'><feColorMatrix in=\'SourceGraphic\' color-interpolation-filters=\'sRGB\' type=\'matrix\' values=\'1 -1 0.3019 0 0 0 0.3019 0 0 0 0 0 0.3019 0 0 0 0 0 1 0\'/></filter></svg>#invert");
+}
+
+.appWindow:not(.lockScreenWindow) .titlebar .notifications-shadow {
+  background-image: -moz-element(#ambient-indicator);
+  width: 100%;
+  position: absolute;
+  top: 0;
+  height: .2rem;
+}
+
+/* Statusbar shadow hidden by default */
+.appWindow .titlebar {
+  visibility: hidden;
+}
+
+/* Statusbar shadow visible on app transitions */
+.appWindow.transition-opening > .titlebar,
+.appWindow.transition-opening > .titlebar > .titlebar-icons,
+.appWindow.transition-closing > .titlebar,
+.appWindow.transition-closing > .titlebar > .titlebar-icons,
+/* Statusbar shadow visible on edge gestures */
+.appWindow.inside-edges > .titlebar,
+.appWindow.outside-edges-right > .titlebar,
+.appWindow.outside-edges-left > .titlebar,
+.appWindow.will-become-active > .titlebar,
+/* Statusbar shadow visible on utility tray transitions */
+#screen.utility-tray-in-transition .appWindow > .titlebar,
+/* Statusbar shadow visible on fullscreen dragging */
+#screen:not(.minimized-tray) .appWindow > .chrome.dragging + .titlebar > .titlebar-icons {
+  visibility: visible;
+}
+
+.appWindow > .titlebar .titlebar-icons {
+  position: absolute;
+  right: 0;
+  background-image: -moz-element(#statusbar-wrapper);
+  width: 100%;
+}
+

gaia/apps/system/style/authentication_dialog.css

@@ -0,0 +1,35 @@
+.authentication-dialog {
+  display: block;
+  position: absolute;
+  top: var(--statusbar-height);
+  left: 0;
+  width: 100%;
+  height: calc(100% - var(--statusbar-height));
+  background-color: #EEEEEE;
+  font-weight: normal;
+}
+
+#screen.fullscreen-layout-app.software-button-enabled .authentication-dialog {
+  height: calc(100% - var(--statusbar-height) - var(--software-home-button-height));
+}
+
+@media (orientation: landscape) {
+  #screen.fullscreen-layout-app.software-button-enabled .authentication-dialog {
+    height: calc(100% - var(--statusbar-height));
+  }
+}
+
+.authentication-dialog-http-authentication-message {
+  display: block;
+  font-size: 1.5rem;
+  margin: 1rem 2rem;
+  color: #000;
+}
+
+.authentication-dialog label {
+  display: block;
+  margin: 1rem 2rem;
+  text-transform: uppercase;
+  font-size: 1.4rem;
+  color: #000;
+ }

gaia/apps/system/style/battery_overlay/battery_overlay.css

@@ -0,0 +1,77 @@
+#system-overlay.battery {
+  visibility: visible;
+}
+
+#system-overlay.battery #battery {
+  display: block;
+}
+
+#battery {
+  display: none;
+  background-image: url('images/header_bg.png');
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 4rem;
+  font-size: 1.4rem;
+  font-weight: 500;
+  padding: 1rem 0;
+  pointer-events: auto;
+}
+
+.icon-battery {
+  display: block;
+  width: 4.2rem;
+  height: 1.8rem;
+  margin: 0 1.3rem;
+  background-image: url('images/battery_empty_small.png');
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: 4.2rem;
+}
+html[dir="ltr"] .icon-battery { float: left; }
+html[dir="rtl"] .icon-battery { float: right; }
+
+#battery span.icon-battery {
+  height: 4rem;
+}
+
+#battery span {
+  vertical-align: middle;
+  line-height: 2rem;
+}
+
+.battery-notification {
+  display: inline-block;
+  width: calc(100% - 6.8rem);
+}
+
+.battery-notification span {
+  display: block;
+}
+
+html[dir="ltr"] #battery.disappearing {
+  animation: notification-disappear-ltr 1.5s;
+}
+html[dir="rtl"] #battery.disappearing {
+  animation: notification-disappear-rtl 1.5s;
+}
+
+@keyframes notification-disappear-ltr {
+  to {
+    transform: translateX(100%);
+  }
+  from {
+    transform: translateX(0);
+  }
+}
+
+@keyframes notification-disappear-rtl {
+  to {
+    transform: translateX(-100%);
+  }
+  from {
+    transform: translateX(0);
+  }
+}

gaia/apps/system/style/bluetooth_transfer/bluetooth_transfer.css

@@ -0,0 +1,46 @@
+#bluetooth-transfer-status {
+  position: relative;
+  border-bottom: none;
+}
+
+#bluetooth-transfer-status .title-container {
+  margin: 1.4rem 0 0;
+  line-height: 3rem;
+}
+html[dir="ltr"] #bluetooth-transfer-status .title-container { margin-left: 3.7rem; }
+html[dir="rtl"] #bluetooth-transfer-status .title-container { margin-right: 3.7rem; }
+
+#bluetooth-transfer-status progress {
+  position: absolute;
+  top: 5.6rem;
+  left: 0;
+  width: 100%;
+  height: 0.4rem;
+  padding: 0;
+
+  background-color: hsla(255, 100%, 100%, 0.1);
+  border: none;
+}
+
+#bluetooth-transfer-status progress::-moz-progress-bar {
+  background-color: #00caf2;
+  transform: skew(-45deg);
+  margin-inline-start: -1rem;
+}
+
+/* In use? */
+#bluetooth-transfer-status.applying .icon {
+  background-image: url(images/spinner.png);
+
+  animation: spin 1.75s infinite linear;
+  transform-origin: center center;
+}
+
+@-moz-keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

gaia/apps/system/style/browser_frame/browser_frame.css

@@ -0,0 +1,4 @@
+iframe.browser {
+  border: none;
+}
+

gaia/apps/system/style/browser_frame/private_browser.css

@@ -0,0 +1,30 @@
+* {
+  -moz-user-select: none;
+}
+
+html {
+  font-size: 10px;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+}
+
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 20.6rem 3rem 0;
+  -moz-box-sizing: border-box;
+  background: #392E54 url(images/pb_dialog.png) no-repeat center 5rem / 10.2rem 11.6rem;
+}
+
+h1 {
+    font-size: 2rem;
+}
+
+a, p {
+  color: #fff;
+  font-size: 1.3rem;
+  line-height: 1.8rem;
+  margin-bottom: 1rem;
+}

gaia/apps/system/style/cards_view/cards_view.css

@@ -0,0 +1,465 @@
+#task-manager {
+  visibility: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  -moz-user-select: none;
+  background-color: rgb(51, 51, 51);
+}
+
+#cards-view {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  /* NOTE: We can't use scroll-snap-destination, even though it's what we want,
+     because it thinks every element is positioned at 0px since everything
+     is positioned using CSS transforms. */
+  scroll-snap-points-x: repeat(calc(50% + 25px));
+  /* Requires that scrolling always end at a snap point
+     when the operation completes (hard snap). */
+  scroll-snap-type: mandatory;
+  direction: ltr;
+}
+
+@media not all and (-moz-physical-home-button) {
+  #screen:not(.software-button-disabled) #task-manager {
+    height: calc(100% - var(--software-home-button-height));
+    bottom: var(--software-home-button-height);
+  }
+}
+
+/* This reduce overpaint while the cards view is active */
+#screen.cards-view #windows {
+  opacity: 0;
+}
+
+#screen.software-button-enabled #task-manager {
+  /* clip the horizontal scrollbar */
+  height: calc(100% - var(--software-home-button-height));
+  bottom: var(--software-home-button-height);
+}
+
+@media (orientation:landscape) {
+  /* not currently in use, see bug 1174325 */
+  #screen.software-button-enabled #task-manager {
+    height: 100%;
+    width: calc(100% - var(--software-home-button-height));
+    bottom: 0;
+    right: var(--software-home-button-height);
+  }
+}
+
+#task-manager.active {
+  visibility: inherit;
+}
+
+#task-manager .no-recent-apps {
+  display: none;
+  position: absolute;
+  top: calc(50% - 1rem);
+  width: calc(100% - 6rem);
+  height: 2rem;
+  text-align: center;
+  color: #52b6cc;
+  font-size: 2rem;
+  font-weight: 500;
+}
+html[dir="ltr"] #cards-view .no-recent-apps { left: 3rem; }
+html[dir="rtl"] #cards-view .no-recent-apps { right: 3rem; }
+
+#task-manager.empty .no-recent-apps {
+  display: block;
+}
+
+#task-manager.empty.active {
+  background-color: rgba(51, 51, 51, .85);
+}
+
+#cards-list {
+  list-style: none;
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-align: center;
+}
+
+
+/* Cards */
+
+#cards-view .card {
+  display: block;
+  position: absolute;
+  top: 0;
+  width: 50vw;
+  height: 50%;
+  transform: translateY(0);
+  /* Defines the left of each card (column) as the
+     coordinate that should be used for snapping */
+  scroll-snap-coordinate: 0 0;
+  left: 0; /* BiDi proof */
+}
+
+#task-manager.active .card {
+  transition: transform var(--transition-duration) cubic-bezier(.27,.02,.74,1.14);
+}
+
+#cards-view .card > * {
+  pointer-events: none;
+}
+
+/* Screenshots */
+
+#cards-view .screenshotView {
+  background-size: cover;
+  background-repeat: no-repeat;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+html[dir="ltr"] #cards-view .screenshotView {
+  background-position: left top;
+}
+html[dir="rtl"] #cards-view .screenshotView {
+  background-position: right top;
+}
+
+#cards-view .screenshotView.rotate-90 {
+  transform: rotate(90deg);
+}
+
+#cards-view .screenshotView.rotate-270 {
+  transform: rotate(270deg);
+}
+
+#cards-view .screenshotView.rotate-180 {
+  transform: rotate(180deg);
+  transform-origin: 50% 50%;
+}
+
+#cards-view .card .privateOverlay {
+  display: none;
+  pointer-events: none;
+}
+
+#cards-view .card.private .privateOverlay {
+  display: block;
+  width: 100%;
+  height: 100%;
+  content: "";
+  position: absolute;
+  left: 0; top: 0;
+  background-color: rgba(57, 46, 84, 0.9);
+  background-image: url(../icons/pb_icon.png);
+  background-repeat: no-repeat;
+  background-size: 50%;
+  background-position: center center;
+}
+
+
+/* Various */
+
+#cards-view .card.appIconPreview {
+  background-color: rgba(255, 255, 255, 1);
+}
+
+#cards-view .card > .appIconView {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url(../icons/Default.png);
+  background-position: center center;
+  background-size: 8rem 8rem;
+  background-repeat: no-repeat;
+  opacity: 0;
+}
+
+#cards-view .card.appIconPreview > .appIconView {
+  opacity: 1;
+}
+
+#task-manager.filtered {
+  background-color: rgba(255, 255, 255, 1);
+}
+
+#task-manager.filtered .card .screenshotView {
+  outline: solid 1px rgba(133, 133, 133, 0.8);
+}
+
+/* Card Tray */
+
+#cards-view .card-tray {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+
+  height: 3rem;
+  width: 100%;
+  overflow: visible;
+  padding: 0;
+  box-sizing: border-box;
+  color: #fff;
+  background-color: rgb(95, 95, 95);
+  opacity: 0;
+}
+
+.cards-view .card-tray {
+  animation-name: card-tray-fade-in;
+  animation-duration: var(--transition-duration);
+  animation-fill-mode: both;
+}
+
+@keyframes card-tray-fade-in {
+  0%   { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+#task-manager.filtered .card-tray {
+  background-color: rgb(244, 244, 244);
+}
+
+#task-manager.filtered .private .card-tray {
+  background-color: rgb(95, 95, 95);
+}
+
+#cards-view .card-tray > menu.buttonbar {
+  margin: 0;
+  padding: 0;
+}
+
+#cards-view .card-tray > menu.buttonbar > button {
+  position: absolute;
+  top: 0;
+  width: 20%;
+  height: 100%;
+
+  border: none;
+  pointer-events: auto;
+
+  background-size: 20px 20px;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-color: transparent;
+}
+
+#cards-view .card-tray .close-button {
+  background-image: url(../task-manager/light/close.png);
+}
+
+html[dir="ltr"] #cards-view .card-tray .close-button { left: 0; }
+html[dir="rtl"] #cards-view .card-tray .close-button { right: 0; }
+
+#task-manager.filtered .card-tray .close-button {
+  background-image: url(../task-manager/dark/close.png);
+}
+
+#cards-view .card-tray .favorite-button {
+  background-image: url(../task-manager/light/favorite.png);
+  display: none;
+}
+
+html[dir="ltr"] #cards-view .card-tray .favorite-button { right: 0; }
+html[dir="rtl"] #cards-view .card-tray .favorite-button { left: 0; }
+
+#task-manager.filtered .card-tray .favorite-button {
+  background-image: url(../task-manager/dark/favorite.png);
+}
+
+#cards-view .card-tray > button.appIcon {
+  top: 1rem;
+  left: calc(50% - 2rem);
+  width: 4rem;
+  height: 4rem;
+  background-image: url(../icons/Default.png);
+  background-color: transparent;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  display: block;
+  border: none;
+  position: absolute;
+  pointer-events: auto;
+  opacity: 1;
+  transition: opacity var(--transition-duration);
+}
+html[dir="ltr"] #cards-view .card-tray > button.appIcon { left: calc(50% - 2rem); }
+html[dir="rtl"] #cards-view .card-tray > button.appIcon { right: calc(50% - 2rem); }
+#cards-view .card.browser .card-tray > button.appIcon {
+  background-image: url('../../shared/resources/branding/browser_126.png');
+}
+
+#cards-view .card .card-tray > button.appIcon.pending {
+  opacity: 0;
+}
+
+#cards-view .private .close-button,
+#task-manager.filtered .private .close-button {
+  background-image: url(../task-manager/light/close.png);
+}
+
+/* Titles */
+#cards-view .card .titles {
+  position: absolute;
+  top: -4rem;
+  left: 0;
+  width: 100%;
+}
+
+#cards-view .card .title {
+  width: 100%;
+  height: 2rem;
+  line-height: 2rem;
+
+  overflow-x: hidden;
+  margin: 0;
+
+  font-size: 1.4rem;
+  font-weight: 300;
+  font-style: italic;
+
+  text-overflow: ellipsis;
+  text-align: center;
+
+  pointer-events: auto;
+}
+
+#task-manager.filtered .card .titles h1 {
+  color: #4d4d4d;
+}
+
+#cards-view .card p.subtitle {
+  display: none;
+  pointer-events: auto;
+  overflow: hidden;
+  margin: 0;
+  text-align: center;
+  font-weight: normal;
+}
+
+#cards-view .card.show-subtitle p.subtitle {
+  display: block;
+}
+
+#cards-view .card.browser p.subtitle {
+  color: #e7e7e7;
+  pointer-events: auto;
+  font-style: italic;
+}
+
+#task-manager.filtered .card p.subtitle {
+  color: #858585;
+}
+
+#cards-view .titles .subtitle-url {
+  direction: ltr;
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+#cards-view .card.show-subtitle[data-ssl="secure"] p.subtitle,
+#cards-view .card.show-subtitle[data-ssl="broken"] p.subtitle {
+  padding-inline-start: 2rem;
+  padding-inline-end: 1rem;
+  min-height: 2rem;
+  background-repeat: no-repeat;
+  background-size: 3rem 3rem;
+}
+html[dir="ltr"] #cards-view .card.show-subtitle[data-ssl="secure"] p.subtitle,
+html[dir="ltr"] #cards-view .card.show-subtitle[data-ssl="broken"] p.subtitle {
+  background-position: left -0.5rem top -1rem;
+}
+html[dir="rtl"] #cards-view .card.show-subtitle[data-ssl="secure"] p.subtitle,
+html[dir="rtl"] #cards-view .card.show-subtitle[data-ssl="broken"] p.subtitle {
+  background-position: right -0.5rem top -1rem;
+}
+
+#cards-view .card.show-subtitle[data-ssl="secure"] p.subtitle {
+  background-image: url("../chrome/images/dark/ssl.png");
+}
+#cards-view .card.show-subtitle[data-ssl="broken"] p.subtitle {
+  background-image: url("../chrome/images/dark/ssl_broken.png");
+}
+
+#task-manager.filtered .card.show-subtitle[data-ssl="secure"] p.subtitle {
+  background-image: url("../chrome/images/light/ssl.png");
+}
+#cards-view .card.show-subtitle[data-ssl="broken"] p.subtitle {
+  background-image: url("../chrome/images/light/ssl_broken.png");
+}
+
+
+/* Animations */
+#task-manager.from-home {
+  animation: cardview-from-home 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
+}
+
+#task-manager.to-home {
+  animation: cardview-to-home 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
+  animation-fill-mode: forwards;
+}
+
+@keyframes cardview-from-home {
+  0%   { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@keyframes cardview-to-home {
+  0%   { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+
+
+
+#task-manager-buttons {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+#task-manager-new-private-sheet-button {
+  width: 7.5rem;
+  height: 4.8rem;
+  border: none;
+  background: url("../task-manager/images/tm_pb_tab.png") no-repeat center;
+  background-size: 3.5rem 1.8rem;
+}
+
+#task-manager-new-sheet-button {
+  width: 6.4rem;
+  height: 4.8rem;
+  border: none;
+  background: url("../task-manager/images/tm_new_tab.png") no-repeat center;
+  background-size: 2.4rem 2.4rem;
+}
+
+#task-manager-new-private-sheet-button:active {
+  background-image: url("../task-manager/images/tm_pb_tab_press.png");
+}
+
+#task-manager-new-sheet-button:active {
+  background-image: url("../task-manager/images/tm_new_tab_press.png");
+}
+
+#task-manager.filtered #task-manager-new-private-sheet-button:not(:active) {
+  filter: brightness(0.5);
+}
+
+#task-manager.filtered #task-manager-new-sheet-button:not(:active) {
+  filter: brightness(0.5);
+}

gaia/apps/system/style/chrome/chrome.css

@@ -0,0 +1,839 @@
+.appWindow:not(.bar) > .chrome {
+  pointer-events: none;
+  top: 0;
+  height: calc(var(--statusbar-height) + var(--rocketbar-urlbar-height));
+  transform: scaleY(var(--rocketbar-scale)) translateY(calc(var(--statusbar-height) * -1));
+  transition: transform var(--transition-duration) ease-in-out,
+              background-color var(--transition-duration) ease;
+
+  background-color: black;
+  background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1));
+  color: white;
+}
+html[dir="ltr"] .appWindow:not(.bar) > .chrome { transform-origin: top left; }
+html[dir="rtl"] .appWindow:not(.bar) > .chrome { transform-origin: top right; }
+
+:not(.browser).appWindow[data-shrinking-state="true"] > .chrome {
+  height: calc(var(--statusbar-height) / var(--rocketbar-scale));
+  transform: scaleY(var(--rocketbar-scale)) translateY(0);
+}
+
+.appWindow.light > .chrome {
+  background-image: linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05));
+  background-color: white;
+  color: #4d4d4d;
+}
+
+.appWindow.private > .chrome {
+  background-image: linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05));
+  background-color: #392e54;
+  color: #fff;
+}
+
+.appWindow:not(.bar) > .chrome.maximized {
+  transform: scaleY(1) translateY(0);
+}
+
+.appWindow.fullscreen-app:not(.bar) > .chrome:not(.maximized) {
+  height: var(--statusbar-height);
+  top: 0;
+}
+
+.appWindow:not(.bar).fullscreen-app > .chrome.maximized {
+  top: 0;
+  transform: scaleY(1) translateY(-7.6rem);
+}
+
+.controls {
+  pointer-events: auto;
+  background-color: transparent;
+  position: absolute;
+  top: calc(var(--statusbar-height) + .3rem);
+  width: 100%;
+  font-size: 0;
+}
+
+.chrome .controls .windows-button {
+  display: none;
+}
+
+/* Special cases */
+.searchWindow > .chrome {
+  display: none;
+}
+
+[data-manifest-name="FTU"]:not(.bar) > .chrome .controls,
+[data-manifest-name="FTU"]:not(.bar) > .chrome .progress,
+.lockScreenWindow:not(.bar) > .chrome .controls,
+.lockScreenWindow:not(.bar) > .chrome gaia-progress,
+.homescreen:not(.bar) > .chrome gaia-progress,
+.globalOverlayWindow:not(.bar) > .chrome .controls,
+.globalOverlayWindow:not(.bar) > .chrome gaia-progress {
+  visibility: hidden;
+}
+
+.lockScreenWindow:not(.bar) > .chrome,
+.globalOverlayWindow:not(.bar) > .chrome {
+  background-color: transparent;
+}
+
+#screen.attention .lockScreenWindow:not(.bar) > .chrome {
+  background-color: black;
+}
+
+/* Special cases for Rocketbar in apps with browser chrome */
+.appWindow:not(.browser) .chrome .controls .menu-button {
+  display: none;
+}
+
+/* Maximized rocketbar size when the 'Windows' button is not displayed */
+.appWindow.fullscreen-app:not(.browser) .chrome.maximized .controls .urlbar,
+.appWindow:not(.browser):not(.search-app) .chrome.maximized .controls .urlbar {
+  width: calc(100% - 1rem);
+}
+
+/* Special cases for rocketbar on the Top Sites view and homescreens */
+.homescreen .menu-button,
+.homescreen .controls .reload-button,
+.homescreen .controls .stop-button,
+.search-app .menu-button,
+.search-app .controls .reload-button,
+.search-app .controls .stop-button,
+.chrome .controls .windows-button {
+  display: none;
+}
+
+.chrome:not(.maximized) .controls .urlbar {
+  width: calc(100% - 8rem);
+}
+
+/* Give the urlbar an extra hit target reaching toward the top of the screen. */
+.chrome:not(.maximized) .controls .urlbar-hit-area {
+  position: absolute;
+  width: 100%;
+  height: 3.2rem;
+  top: -0.8rem;
+}
+
+.search-app .chrome .controls .windows-button {
+  display: inline;
+}
+
+/* URL bar */
+.chrome .controls .urlbar {
+  width: calc(100% - 4.5rem);
+  height: 3.2rem;
+  line-height: 3.2rem;
+  margin: 0.2rem 0 0.5rem;
+  border-radius: 1.8rem;
+  color: inherit;
+  overflow: visible;
+  background-color: transparent;
+  margin-inline-start: .5rem;
+  position: absolute;
+}
+html[dir="ltr"] .chrome .controls .urlbar { text-align: left; }
+html[dir="rtl"] .chrome .controls .urlbar { text-align: right; }
+
+.maximized .controls .urlbar {
+  background-color: rgba(204,204,204,0.2);
+}
+
+.appWindow.light.collapsible .controls .urlbar {
+  background-color: rgb(242, 242, 242); /* 255 * 0.95 */
+}
+
+.appWindow.light .maximized .controls .urlbar {
+  background-color: rgba(204,204,204,0.4);
+}
+
+.appWindow.private.collapsible .controls .urlbar {
+  background-color: #392e54;
+}
+
+.appWindow.private .maximized .controls .urlbar {
+  background-color: rgba(204, 204, 204, 0.2);
+}
+
+.chrome-combined .chrome-title-container {
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-inline-start: 3.85rem;
+  padding-inline-end: 0.8rem;
+  box-sizing: padding-box;
+  overflow: hidden;
+  float: none;
+  background-color: rgba(204,204,204,0.2);
+  border-radius: 1.8rem;
+}
+.chrome-combined.private .chrome-title-container {
+  padding-inline-start: 1.45rem;
+}
+
+.chrome-combined .title {
+  overflow: hidden;
+  white-space: nowrap;
+  font-weight: 300;
+  font-size: 1.8rem;
+  font-style: italic;
+  text-overflow: ellipsis;
+  display: block;
+}
+
+.chrome-combined.maximized .title {
+  width: calc(100% - 3.2rem);
+}
+
+.chrome-plain .title {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+}
+
+.search-app .chrome.maximized .controls .urlbar:after {
+  content: '';
+  width: 2rem;
+  height: 100%;
+  top: 0;
+  offset-inline-end: 0.8rem;
+  position: absolute;
+  background-image: url('images/search.png');
+  background-repeat: no-repeat;
+  background-size: 2rem auto;
+  background-position: center right;
+}
+
+.appWindow.light .chrome-combined:not(.maximized) .chrome-title-container {
+  background-color: rgba(204,204,204,0.4);
+}
+
+.chrome-combined.maximized .chrome-title-container {
+  background-color: transparent;
+}
+
+.homescreen .chrome-combined .chrome-title-container {
+  width: calc(100% - 2rem);
+  padding-inline-start: 2rem;
+}
+
+.chrome.maximized .controls .forward-button:not([disabled]) + .urlbar,
+.chrome.maximized .controls .back-button:not([disabled]) + .forward-button[disabled] + .urlbar {
+  width: calc(100% - 8rem);
+}
+html[dir="ltr"] .chrome.maximized .controls .forward-button:not([disabled]) + .urlbar,
+html[dir="ltr"] .chrome.maximized .controls .back-button:not([disabled]) + .forward-button[disabled] + .urlbar {
+  transform: translateX(3.5rem);
+}
+html[dir="rtl"] .chrome.maximized .controls .forward-button:not([disabled]) + .urlbar,
+html[dir="rtl"] .chrome.maximized .controls .back-button:not([disabled]) + .forward-button[disabled] + .urlbar {
+  transform: translateX(-3.5rem);
+}
+
+.chrome.maximized .controls .back-button:not([disabled]) + .forward-button:not([disabled]) + .urlbar {
+  width: calc(100% - 12rem);
+}
+html[dir="ltr"] .chrome.maximized .controls .back-button:not([disabled]) + .forward-button:not([disabled]) + .urlbar {
+  transform: translateX(7.5rem);
+}
+html[dir="rtl"] .chrome.maximized .controls .back-button:not([disabled]) + .forward-button:not([disabled]) + .urlbar {
+  transform: translateX(-7.5rem);
+}
+
+.appWindow:not(.browser) .chrome.maximized .controls .forward-button:not([disabled]) + .urlbar,
+.appWindow:not(.browser) .chrome.maximized .controls .back-button:not([disabled]) + .forward-button[disabled] + .urlbar {
+  width: calc(100% - 4.5rem);
+}
+html[dir="ltr"] .appWindow:not(.browser) .chrome.maximized .controls .forward-button:not([disabled]) + .urlbar,
+html[dir="ltr"] .appWindow:not(.browser) .chrome.maximized .controls .back-button:not([disabled]) + .forward-button[disabled] + .urlbar {
+  transform: translateX(3.5rem);
+}
+html[dir="rtl"] .appWindow:not(.browser) .chrome.maximized .controls .forward-button:not([disabled]) + .urlbar,
+html[dir="rtl"] .appWindow:not(.browser) .chrome.maximized .controls .back-button:not([disabled]) + .forward-button[disabled] + .urlbar {
+  transform: translateX(-3.5rem);
+}
+
+.appWindow:not(.browser) .chrome.maximized .controls .back-button:not([disabled]) + .forward-button:not([disabled]) + .urlbar {
+  width: calc(100% - 8.5rem);
+}
+html[dir="ltr"] .appWindow:not(.browser) .chrome.maximized .controls .back-button:not([disabled]) + .forward-button:not([disabled]) + .urlbar {
+  transform: translateX(7.5rem);
+}
+html[dir="rtl"] .appWindow:not(.browser) .chrome.maximized .controls .back-button:not([disabled]) + .forward-button:not([disabled]) + .urlbar {
+  transform: translateX(-7.5rem);
+}
+
+.controls .urlbar {
+  transform: scaleX(var(--rocketbar-scale)) translateY(0.1rem);
+  transition: transform 0.2s ease-in-out;
+}
+html[dir="ltr"] .controls .urlbar { transform-origin: top left; }
+html[dir="rtl"] .controls .urlbar { transform-origin: top right; }
+
+.appWindow.fullscreen-app .chrome.dragged,
+.appWindow.fullscreen-app .chrome.dragging {
+  visibility: visible;
+}
+
+.appWindow.attentionWindow .chrome,
+.appWindow.fullscreen-app .chrome {
+  visibility: hidden;
+}
+
+.appWindow.collapsible.active .urlbar {
+  will-change: transform;
+}
+
+.appWindow.fullscreen-app .chrome:not(.maximized) .controls .urlbar {
+  transform: scale(var(--rocketbar-scale)) translateY(-6.1rem);
+}
+html[dir="ltr"] .appWindow.fullscreen-app .chrome:not(.maximized) .controls .urlbar { transform-origin: bottom left; }
+html[dir="rtl"] .appWindow.fullscreen-app .chrome:not(.maximized) .controls .urlbar { transform-origin: bottom right; }
+
+.maximized .controls .urlbar {
+  transform: scaleX(1);
+}
+
+/* Pinning the web */
+
+.urlbar::before {
+  content: "";
+  bottom: -1.5rem;
+  height: 1.5rem;
+  width: 2.4rem;
+  position: absolute;
+  background-size: cover;
+  background-image: url("images/arrow.png");
+  transform: translateY(0) translateX(0) scale(1);
+  transition: opacity var(--transition-duration), transform var(--transition-duration);
+}
+html[dir="ltr"] .urlbar::before { left: 0.35rem; }
+html[dir="rtl"] .urlbar::before { right: 0.35rem; }
+
+.pin-dialog.hidden ~ .controls .urlbar::before {
+  opacity: 0;
+}
+html[dir="ltr"] .pin-dialog.hidden ~ .controls .urlbar::before {
+  transform: translateY(-50%) translateX(-50%) scale(.3);
+}
+html[dir="rtl"] .pin-dialog.hidden ~ .controls .urlbar::before {
+  transform: translateY(-50%) translateX(50%) scale(.3);
+}
+
+section.pin-dialog {
+  visibility: visible;
+  display: block;
+  position: absolute;
+  margin: 0 1rem;
+  width: calc(100% - 2rem);
+  top: calc(var(--statusbar-height) + var(--rocketbar-urlbar-height) + 0.8rem);
+  background-color: #F4F4F4;
+  font-size: 1.2rem;
+  color: #858585;
+  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15);
+  transform: translateY(0) translateX(0) scale(1);
+  transition: visibility var(--transition-duration), opacity var(--transition-duration), transform var(--transition-duration);
+}
+
+section.pin-dialog.hidden {
+  opacity: 0;
+  visibility: hidden;
+}
+html[dir="ltr"] section.pin-dialog.hidden {
+  transform: translateY(-50%) translateX(-50%) scale(.3);
+}
+html[dir="rtl"] section.pin-dialog.hidden {
+  transform: translateY(-50%) translateX(50%) scale(.3);
+}
+
+.pin-scrim {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  /* Note: we cannot use bottom: 0 because the parent (.chrome) has a
+     transition defined, which creates a new stacking context for it.
+     So any coordinates (top, left, etc.) will be relative to this parent
+     element instead of the viewport.
+     see https://bugzilla.mozilla.org/show_bug.cgi?id=879443
+  */
+  height: 100vh;
+  z-index: -1;
+  background-color: rgba(0, 0, 0, 0.45);
+  transition: opacity var(--transition-duration);
+  pointer-events: auto;
+}
+
+section.pin-dialog.hidden + .pin-scrim {
+  visibility: hidden;
+  opacity: 0;
+}
+
+section.pin-dialog .card-container {
+  overflow: hidden;
+  text-align: center;
+}
+
+section.pin-dialog .pin-site-icon {
+  font-weight: 300;
+  width: 6.4rem;
+  height: 6.4rem;
+  margin: 0 auto;
+  background-size: 6.4rem;
+  background-image: url('images/loading_icon_white.svg');
+}
+
+section.pin-dialog .pin-site-name {
+  margin: 0;
+  line-height: 6.5rem;
+  font-size: 1.6rem;
+  font-weight: 400;
+  font-style: italic;
+}
+
+section.pin-dialog header h2 {
+  margin: 0;
+  line-height: 6.2rem;
+  font-size: 1.8rem;
+  font-weight: 400;
+  font-family: sans-serif;
+  font-style: italic;
+  white-space: nowrap;
+  text-align: center;
+}
+
+section.pin-dialog footer {
+  padding: 2.3rem 0;
+}
+
+section.pin-dialog button {
+  position: relative;
+  display: block;
+  margin: 0 auto;
+  float: none;
+  width: -moz-fit-content;
+  background-color: white;
+  font-size: 1.6rem;
+  font-style: italic;
+}
+
+section.pin-dialog footer span {
+  display: block;
+  text-align: center;
+  line-height: 1.6rem;
+  font-size: 1.4rem;
+  font-weight: 400;
+  font-style: italic;
+}
+
+section.pin-dialog .origin {
+  padding: 0;
+  margin: 0 auto;
+  width: -moz-fit-content;
+  font-size: 1.4rem;
+  font-weight: 400;
+  font-style: italic;
+}
+
+section.pin-dialog .origin .tld {
+  display: inline;
+}
+
+section.pin-dialog .origin::before {
+  content: "";
+  display: block;
+  width: 3rem;
+  height: 3rem;
+  margin: -0.7rem -2.5rem;
+  background-size: cover;
+  position: absolute;
+}
+
+section.pin-dialog.secure .origin {
+  padding-inline-start: 1.5rem;
+}
+
+section.pin-dialog.secure .origin::before {
+  background-image: url("images/light/ssl.png");
+}
+
+section.pin-dialog button[data-action="pin"] {
+  padding-inline-start: 4rem;
+  padding-inline-end: 2rem;
+}
+
+section.pin-dialog button[data-action="pin"]::before {
+  content: "";
+  width: 1.6rem;
+  height: 1.6rem;
+  position: absolute;
+  top: 1.2rem;
+  offset-inline-start: 2rem;
+  background-size: 1.6rem 1.6rem;
+  background-image: url("images/pin.png");
+}
+
+@media (orientation: landscape) {
+  section.pin-dialog {
+    width: 26rem;
+  }
+
+  section.pin-dialog header h2 {
+    line-height: 5rem;
+  }
+
+  section.pin-dialog .pin-site-name {
+    line-height: 4rem;
+  }
+
+  section.pin-dialog footer {
+    padding: 1.7rem 0;
+  }
+}
+
+/* Private browser icon in rocketbar */
+.appWindow.private > .chrome-plain.maximized .chrome-title-container,
+.appWindow.private > .chrome-combined.maximized .chrome-title-container {
+  padding-inline-start: 4rem;
+}
+
+.appWindow.private > .chrome.maximized .pb-icon {
+  display: block;
+  width: 4rem;
+  height: 100%;
+  position: absolute;
+  top: 0.1rem;
+  left: 0.3rem;
+  right: 0.3rem;
+  background-image: url("images/pb_rocketbar.png");
+  background-repeat: no-repeat;
+  background-size: 2.5rem;
+}
+html[dir="ltr"] .appWindow.private > .chrome.maximized .pb-icon { background-position: left 0.8rem center; }
+html[dir="rtl"] .appWindow.private > .chrome.maximized .pb-icon { background-position: right 0.8rem center; }
+
+
+/* SSL Lock Icons in rocketbar */
+.chrome-combined.maximized .chrome-has-ssl-indicator .chrome-ssl-indicator {
+  padding-inline-start: 5.5rem;
+
+  background-repeat: no-repeat;
+  background-size: 3rem;
+  height: 3.2rem;
+}
+html[dir="ltr"] .chrome-combined.maximized .chrome-has-ssl-indicator .chrome-ssl-indicator {
+  background-position: left 3rem center;
+}
+html[dir="rtl"] .chrome-combined.maximized .chrome-has-ssl-indicator .chrome-ssl-indicator {
+  background-position: right 3rem center;
+}
+
+
+.private > .chrome-combined.maximized .chrome-has-ssl-indicator .chrome-ssl-indicator {
+  padding-inline-start: 6.5rem;
+}
+html[dir="ltr"] .private > .chrome-combined.maximized .chrome-has-ssl-indicator .chrome-ssl-indicator {
+  background-position: left 3.7rem top 0.1rem;
+}
+html[dir="rtl"] .private > .chrome-combined.maximized .chrome-has-ssl-indicator .chrome-ssl-indicator {
+  background-position: right 3.7rem top 0.1rem;
+}
+
+.chrome-plain .chrome-ssl-indicator {
+  display: none;
+
+  width: 1rem;
+
+  background: no-repeat center / 3rem content-box;
+}
+
+.chrome-ssl-indicator-ltr {
+  padding-right: .5rem; /* give some space between the indicator and the title */
+}
+
+.chrome-ssl-indicator-rtl {
+  padding-left: .5rem; /* give some space between the indicator and the title */
+  padding-right: 1rem; /* give some space between the indicator and the window's edge */
+}
+
+.chrome-plain:-moz-dir(ltr) .chrome-has-ssl-indicator .chrome-ssl-indicator-ltr,
+.chrome-plain:-moz-dir(rtl) .chrome-has-ssl-indicator .chrome-ssl-indicator-rtl {
+  display: unset;
+}
+
+.maximized .chrome-has-ssl-indicator[data-ssl="secure"] .chrome-ssl-indicator {
+  background-image: url("images/light/ssl.png");
+}
+
+.maximized .chrome-has-ssl-indicator[data-ssl="broken"] .chrome-ssl-indicator {
+  background-image: url("images/light/ssl_broken.png");
+}
+
+.site-icon {
+  width: 3.4rem;
+  height: 3.4rem;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-image: url('images/loading_icon_white.svg');
+  position: absolute;
+  /* The icon renderer adds 4px padding for getting a smoother
+     rounded icon. Reallocating to fit with the url bar
+  */
+  top: -.1rem;
+  offset-inline-start: -.1rem;
+}
+
+.light .site-icon,
+.light section.pin-dialog .pin-site-icon {
+  background-image: url('images/loading_icon_dark.svg');
+}
+
+.homescreen > .chrome .site-icon,
+.private > .chrome .site-icon {
+  display: none;
+}
+
+/* Handle urlbar sizing when back or forward buttons are disabled */
+.collapsible .chrome:not(.maximized) .back-button:not([disabled]) + .forward-button[disabled] + .urlbar,
+.collapsible .chrome:not(.maximized) .forward-button:not([disabled]) + .urlbar {
+  transform: scaleX(var(--rocketbar-scale));
+}
+
+.collapsible .chrome:not(.maximized) .back-button:not([disabled]) + .forward-button:not([disabled]) + .urlbar {
+  transform: scaleX(var(--rocketbar-scale));
+}
+
+
+/* Buttons */
+.controls button {
+  -moz-appearance: none;
+  border: none;
+  margin: 0;
+  padding: 0;
+  min-width: 4rem;
+  width: 4rem;
+  height: 4rem;
+  line-height: 4rem;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-color: transparent;
+  background-size: contain;
+  opacity: 1;
+  border-radius: 0;
+}
+html[dir="ltr"] .controls button { float: left; }
+html[dir="rtl"] .controls button { float: right; }
+
+/* Remove focus outline from button */
+.controls button::-moz-focus-inner {
+  border: 0;
+}
+
+.controls .reload-button,
+.controls .stop-button {
+  background-size: 3rem auto;
+  background-position: center center;
+  background-repeat: no-repeat;
+  position: absolute;
+  bottom: 0.1rem;
+  offset-inline-end: 0;
+  padding: 0 0.3rem;
+  width: 3rem;
+  height: 3rem;
+}
+
+.controls .reload-button::before,
+.controls .stop-button::before {
+  content: '';
+  position: relative;
+  offset-inline-end: 0.2rem;
+  display: block;
+  height: 2.4rem;
+  border-inline-start: .1rem solid rgba(0,0,0,0.05);
+}
+
+/* Vertically align butons outside of urlbar. */
+.controls > button {
+  position: relative;
+  top: -0.2rem;
+}
+
+.controls > button.menu-button,
+.controls > button.windows-button {
+  position: absolute;
+  offset-inline-end: 0;
+}
+
+.controls .reload-button[disabled],
+.loading .controls .reload-button {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.controls .stop-button {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.loading .controls .stop-button {
+  visibility: visible;
+  pointer-events: auto;
+}
+
+.controls .back-button[disabled],
+.controls .forward-button[disabled] {
+  display: none;
+}
+
+.chrome.maximized .controls .menu-button[disabled] {
+  opacity: 0.2;
+}
+
+.appWindow:not(.bar) > .chrome button {
+  opacity: 0;
+  transition: opacity 0.15s ease-in;
+  pointer-events: none;
+}
+
+.appWindow:not(.bar) > .chrome.maximized button {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+
+/* Default (dark) theme button styles */
+html[dir="ltr"] .controls .back-button { background-image: url("images/dark/left.png"); }
+html[dir="rtl"] .controls .back-button { background-image: url("images/dark/right.png"); }
+
+html[dir="ltr"] .controls .back-button:active { background-image: url("images/dark/left_active.png"); }
+html[dir="rtl"] .controls .back-button:active { background-image: url("images/dark/right_active.png"); }
+
+html[dir="ltr"] .controls .forward-button { background-image: url("images/dark/right.png"); }
+html[dir="rtl"] .controls .forward-button { background-image: url("images/dark/left.png"); }
+
+html[dir="ltr"] .controls .forward-button:active { background-image: url("images/dark/right_active.png"); }
+html[dir="rtl"] .controls .forward-button:active { background-image: url("images/dark/left_active.png"); }
+
+.controls .menu-button {
+  background-image: url("images/dark/options.png");
+}
+
+.controls .menu-button:active {
+  background-image: url("images/dark/options_active.png");
+}
+
+.controls .reload-button {
+  background-image: url("images/dark/reload.png");
+}
+
+.controls .reload-button:active {
+  background-image: url("images/dark/reload_active.png");
+}
+
+.controls .stop-button {
+  background-image: url("images/dark/stop.png");
+}
+
+.controls .stop-button:active {
+  background-image: url("images/dark/stop_active.png");
+}
+
+.controls .windows-button {
+  background-image: url('images/dark/windows.png');
+}
+
+.controls .windows-button:active {
+  background-image: url('images/dark/windows_active.png');
+}
+
+/* Light theme button styles */
+.light .controls .menu-button:active {
+  background-image: url("images/light/overflow_active.png");
+}
+
+html[dir="ltr"] .light .controls .back-button { background-image: url("images/light/left.png"); }
+html[dir="rtl"] .light .controls .back-button { background-image: url("images/light/right.png"); }
+
+html[dir="ltr"] .light .controls .back-button:active { background-image: url("images/light/left_active.png"); }
+html[dir="rtl"] .light .controls .back-button:active { background-image: url("images/light/right_active.png"); }
+
+html[dir="ltr"] .light .controls .forward-button { background-image: url("images/light/right.png"); }
+html[dir="rtl"] .light .controls .forward-button { background-image: url("images/light/left.png"); }
+
+html[dir="ltr"] .light .controls .forward-button:active { background-image: url("images/light/right_active.png"); }
+html[dir="rtl"] .light .controls .forward-button:active { background-image: url("images/light/left_active.png"); }
+
+.light .controls .menu-button {
+  background-image: url("images/light/options.png");
+}
+
+.light .controls .menu-button:active {
+  background-image: url("images/light/options_active.png");
+}
+
+.light .controls .reload-button {
+  background-image: url("images/light/reload.png");
+}
+
+.light .controls .reload-button:active {
+  background-image: url("images/light/reload_active.png");
+}
+
+.light .controls .stop-button {
+  background-image: url("images/light/stop.png");
+}
+
+.light .controls .stop-button:active {
+  background-image: url("images/light/stop_active.png");
+}
+
+.light .controls .windows-button {
+  background-image: url('images/light/windows.png');
+}
+
+.light .controls .windows-button:active {
+  background-image: url('images/light/windows_active.png');
+}
+
+.light .controls .menu-button:active {
+  background-image: url("images/light/overflow_active.png");
+}
+
+/* Overflow menu */
+
+gaia-overflow-menu button#new-window {
+  background-image: url("images/menu_new_window.png");
+}
+
+gaia-overflow-menu button#add-to-home {
+  background-image: url("images/menu_add_to_homescreen.png");
+}
+
+gaia-overflow-menu button#share {
+  background-image: url("images/menu_share.png");
+}
+
+/* Progress */
+.appWindow.collapsible > .chrome gaia-progress,
+.appWindow.scrollable > .chrome gaia-progress {
+  top: 7.3rem;
+}
+.appWindow.bar > .chrome gaia-progress,
+.appWindow.fullscreen-app > .chrome gaia-progress,
+.appWindow.popupWindow > .chrome gaia-progress,
+.appWindow.trustedWindow > .chrome gaia-progress {
+  top: 0;
+}
+
+/* App specifics */
+.appWindow:not(.collapsible) > .chrome:not(.maximized) .controls button {
+  display: none;
+}
+
+.appWindow:not(.collapsible) > .chrome:not(.maximized) .controls .urlbar {
+  width: calc(100% - 8rem);
+}
+
+.appWindow:not(.collapsible) > .chrome-combined .title {
+  width: calc(100%);
+}