Bug 1328868 - Part 10 - Make about:config handle text zoom changes a bit more gracefully. r?sebastian draft
authorJan Henning <jh+bugzilla@buttercookie.de>
Sat, 18 Feb 2017 15:50:08 +0100
changeset 551360 65e89d74e0fa7fcdc62ebe0e66208777ce507d38
parent 551359 adf124185a25ed8795334c94602cc61a41d05f72
child 621528 40b08b9805fc539d3413d37126016ddda49c9b9c
push id51034
push usermozilla@buttercookie.de
push dateSat, 25 Mar 2017 19:48:16 +0000
reviewerssebastian
bugs1328868
milestone55.0a1
Bug 1328868 - Part 10 - Make about:config handle text zoom changes a bit more gracefully. r?sebastian This means scaling the the size of the images used for buttons and making sure that at large magnifications, the toolbar's text input properly moves into its own line instead of simply overlapping the preference immediately below. We also want to make sure that the text on any buttons remains vertically centred. MozReview-Commit-ID: 7rUf1tucAzL
mobile/android/themes/core/config.css
--- a/mobile/android/themes/core/config.css
+++ b/mobile/android/themes/core/config.css
@@ -9,18 +9,19 @@ body {
     background-color: #ced7de;
     -moz-user-select: none;
     font-family: "Clear Sans",sans-serif;
     -moz-text-size-adjust: none;
 }
 
 .toolbar {
     width: 100%;
-    height: 3em;
-    position: fixed;
+    min-height: 3em;
+    display: flow-root;
+    position: sticky;
     top: 0;
     left: 0;
     z-index: 10;
     box-shadow: 0 0 3px #444;
     background-color: #ced7de;
     color: #000000;
     font-weight: bold;
     border-bottom: 2px solid;
@@ -29,17 +30,17 @@ body {
 
 .toolbar-container {
     max-width: 40em;
     margin-left: auto;
     margin-right: auto;
 }
 
 #filter-container {
-    margin: 0.5em;
+    margin: 0.375em;
     height: 2em;
     border: 1px solid transparent;
     border-image-source: url("chrome://browser/skin/images/textfield.png");
     border-image-slice: 1 1 3 1;
     border-image-width: 1px 1px 3px 1px;
     overflow: hidden;
     display: flex;
     flex-direction: row;
@@ -73,42 +74,42 @@ body {
     min-width: 3em;
     box-sizing: border-box;
     opacity: 0.75;
 }
 
 #new-pref-toggle-button {
     background-position: center center;
     background-image: url("chrome://browser/skin/images/config-plus.png");
-    background-size: 48px 48px;
-    height: 48px;
-    width: 48px;
+    background-size: 3em 3em;
+    height: 3em;
+    width: 3em;
     display: inline-block;
     outline-style: none;
     float: left;
 }
 
 #new-pref-toggle-button:dir(rtl) {
     float: right;
 }
 
 #filter-search-button {
     background-image: url("chrome://browser/skin/images/search.png");
-    background-size: 32px 32px;
-    height: 32px;
-    width: 32px;
+    background-size: 2em 2em;
+    height: 2em;
+    width: 2em;
     display: inline-block;
     outline-style: none;
 }
 
 #filter-input-clear-button {
     background-image: url("chrome://browser/skin/images/search-clear-30.png");
-    background-size: 32px 32px;
-    height: 32px;
-    width: 32px;
+    background-size: 2em 2em;
+    height: 2em;
+    width: 2em;
     display: inline-block;
     outline-style: none;
 }
 
 #filter-input[value=""] + #filter-input-clear-button {
     display: none;
 }
 
@@ -119,17 +120,16 @@ body {
     float: right;
 }
 
 #content {
     position: relative;
     margin: 0;
     margin-left: auto;
     margin-right: auto;
-    padding-top: 3em;
     padding-left: 0;
     padding-right: 0;
     min-height: 100%;
     max-width: 40em;
 }
 
 ul {
     list-style-position: inside;
@@ -267,18 +267,19 @@ li {
     color: #d3d3d3;
 }
 
 .pref-item.selected {
     background-color: rgba(0,0,255,0.05);
 }
 
 .pref-button {
-    display: inline-block;
+    display: inline-flex;
     box-sizing: border-box;
+    align-items: center;
     text-align: center;
     padding: 10px 1em;
     border-left: 1px solid rgba(0,0,0,0.1);
     opacity: 0;
     transition-property: opacity;
     transition-duration: 500ms;
 }
 
@@ -299,22 +300,24 @@ li {
 }
 
 .pref-button[disabled] {
     display: none;
 }
 
 .pref-button.up {
     background-image: url("chrome://browser/skin/images/arrowup-16.png");
+    background-size: 1em 1em;
     background-position: center center;
     background-repeat: no-repeat;
 }
 
 .pref-button.down {
     background-image: url("chrome://browser/skin/images/arrowdown-16.png");
+    background-size: 1em 1em;
     background-position: center center;
     background-repeat: no-repeat;
 }
 
 #prefs-shield {
     width: 100%;
     height: 100%;
     background-color: rgba(0,0,0,0.5);