Merge pull request #17858 from DouglasSherk/971446-keyboard-bubbles

Bug 971446 - [Demo Keyboard][Keyboard] Add a very slight delay to text bubbles disappearing. r=rudyl

apps/keyboard/style/keyboard.css

@@ -94,6 +94,9 @@ button::-moz-focus-inner {
   font-family: sans-serif;
   border: none;
   background: none;
+
+  /* Delay hiding the highlighting long enough to make sure the user sees it. */
+  transition: background-color 0s ease-in 0.01s;
 }
 
 /* Visible keys */
@@ -119,6 +122,9 @@ button::-moz-focus-inner {
   text-align: center;
   border-right: 0.1rem solid #525b5e;
   border-left: 0.1rem solid transparent;
+
+  /* Delay hiding the highlighting long enough to make sure the user sees it. */
+  transition: color 0s ease-in 0.01s;
 }
 
 .popup {
@@ -134,12 +140,17 @@ button::-moz-focus-inner {
   background-color: #00aacc;
   visibility: hidden;
 
+  /* Delay hiding the bubble long enough to make sure the user sees it. */
+  transition: visibility 0s ease-in 0.01s;
+
   /* To override the text-align in .float-key-first and .float-key-last */
   text-align: center;
 }
 
 .keyboard-key.highlighted {
   background-color: #4a5255;
+
+  transition-delay: 0s;
 }
 
 .keyboard-key:last-child > .visual-wrapper > .key-element {
@@ -148,12 +159,16 @@ button::-moz-focus-inner {
 
 .keyboard-key.highlighted > .visual-wrapper > .key-element {
   color: #00caf2;
+
+  transition-delay: 0s;
 }
 
 /* Show the bubble text when the button is highlighted. */
 .keyboard-key.highlighted > .visual-wrapper > .popup {
   z-index: 1;
   visibility: visible;
+
+  transition-delay: 0s;
 }
 
 /* Special rules for lowercase and uppercase popups */

dev_apps/demo-keyboard/style/keyboard.css

@@ -167,6 +167,8 @@ body {
   padding: 0;
   background-color: black;
 
+  transition: 0s visibility ease-in 0.01s;
+
   z-index: 11;
   visibility: hidden;
   opacity: 0.25;
@@ -177,7 +179,6 @@ body {
 
   position: absolute;
   display: block;
-  visibility: hidden;
 
   top: -5.6rem;
   left: calc(50% - 2.8rem);
@@ -189,13 +190,27 @@ body {
   border-radius: 50%;
   background-color: #00aacc;
 
+  /*
+   * Delay hiding of the bubble by 0.01s, which is long enough to make sure that
+   * it shows up but doesn't feel laggy.
+   */
+  transition: 0s visibility ease-in 0.01s;
+
   z-index: 12;
+  visibility: hidden;
 }
 
-.key.altshown, .key:not(.specialkey).touched::after, .key:not(.specialkey).touched::before {
+.key.altshown {
   visibility: initial;
 }
 
+.key:not(.specialkey).touched::after, .key:not(.specialkey).touched::before {
+  visibility: initial;
+
+  /* Override the 0.01s delay to make sure that the effect appears instantly. */
+  transition-delay: 0s;
+}
+
 /*
  * If a row has 10 or more keys in it, then the popup for the first and last
  * keys can't be centered over the key and have to be offset a bit.