Bug 1368437 - Search suggestions hint doesn't scale well with the window size. r=past
authorMarco Bonardo <mbonardo@mozilla.com>
Thu, 01 Jun 2017 18:11:03 +0200
changeset 410264 d697cd9de8d38e38292b79834c8889c0eb05a3cb
parent 410263 cc357ab60147e3d1beead37a5f14f1a4c797665e
child 410265 3b1dcffbad51682211afbf018ccf2912bb1c1bea
child 410304 bfaf3cbb87d5918fc2c1017a00de2294ec8262fb
push id7391
push usermtabara@mozilla.com
push dateMon, 12 Jun 2017 13:08:53 +0000
treeherdermozilla-beta@2191d7f87e2e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspast
bugs1368437
milestone55.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 1368437 - Search suggestions hint doesn't scale well with the window size. r=past MozReview-Commit-ID: ElYkOYm6C5W
browser/themes/shared/urlbarSearchSuggestionsNotification.inc.css
--- a/browser/themes/shared/urlbarSearchSuggestionsNotification.inc.css
+++ b/browser/themes/shared/urlbarSearchSuggestionsNotification.inc.css
@@ -1,15 +1,21 @@
 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] {
   border-bottom: 1px solid var(--panel-separator-color);
   padding-inline-start: 0;
   padding-inline-end: 6px;
   min-height: 3em;
 }
 
+/* Limit the size of the hidden description, since a deck takes the size of the biggest child */
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][selectedIndex="0"] #search-suggestions-hint,
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][selectedIndex="1"] #search-suggestions-question {
+  max-height: 5em;
+}
+
 /* Opt-in notification */
 
 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-opt-in"] {
   padding: 6px 0;
   padding-inline-start: 44px;
   background-color: hsla(210, 4%, 10%, 0.07);
   background-image: url("chrome://browser/skin/info.svg");
   background-clip: padding-box;
@@ -56,16 +62,24 @@
 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button[anonid="search-suggestions-notification-enable"]:hover {
   background-color: hsl(93, 82%, 40%);
 }
 
 /* Opt-out hint */
 
 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-opt-out"] {
   font: message-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-box"] {
+  flex-basis: 100%;
 }
 
 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-box"] > description {
   margin: auto;
   padding: 4px 8px;
   background-color: #ffeebe;
   border: 1px solid #ffdf81;
   border-radius: 4px;
@@ -83,16 +97,17 @@
 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] > hbox[anonid="search-suggestions-opt-out"] > .ac-site-icon {
   transform: scale(0);
   animation-name: search-suggestions-hint-grow;
   animation-duration: 500ms;
   animation-delay: 500ms;
   animation-iteration-count: 1;
   animation-timing-function: ease-in-out;
   animation-fill-mode: forwards;
+  min-width: 16px;
 }
 
 @keyframes search-suggestions-hint-grow {
   0%   { transform: scale(0); }
   40%  { transform: scale(1.5); }
   60%  { transform: scale(1); }
   80%  { transform: scale(1.25); }
   100% { transform: scale(1); }
@@ -108,16 +123,23 @@
   width: 0;
   animation-name: search-suggestions-hint-typing;
   animation-duration: 500ms;
   animation-delay: 750ms;
   animation-iteration-count: 1;
   animation-fill-mode: forwards;
 }
 
+@media all and (max-width: 800px) {
+  /* Hide the typing animation block */
+  #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-typing"] {
+    display: none;
+  }
+}
+
 @keyframes search-suggestions-hint-typing {
   from { width: 0; }
   to   { width: 8ch; }
 }
 
 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-box"] {
   opacity: 0;
   animation-duration: 250ms;