Bug 1368437 - Search suggestions hint doesn't scale well with the window size. r=past
MozReview-Commit-ID: ElYkOYm6C5W
--- 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;