Bug 1368437 - Search suggestions hint doesn't scale well with the window size. r=past draft
authorMarco Bonardo <mbonardo@mozilla.com>
Thu, 01 Jun 2017 18:11:03 +0200
changeset 587777 dc7b30343246a7466cc23c58ba6b32734c657056
parent 586973 7b8937970f9ca85db88cb2496f2112175fd847c8
child 631357 a0e958c2f43b40fb965cba595f9d23c4d34170b0
push id61801
push usermak77@bonardo.net
push dateThu, 01 Jun 2017 16:13:46 +0000
reviewerspast
bugs1368437
milestone55.0a1
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;