Bug 1383660 - Let speech bubble of onboarding icon clickable. r=mossop draft
authorRex Lee <rexboy@mozilla.com>
Mon, 24 Jul 2017 18:56:17 +0800
changeset 615718 cfd4d9623b2aa978cef0b1209008306d339610d5
parent 615717 68b47274e8f82572d9c8ad2fcf0ce03c41fe35c5
child 639244 321c783f65c25f99e3e6ffa877d05bc7d01b3cb1
push id70436
push userbmo:rexboy@mozilla.com
push dateWed, 26 Jul 2017 08:24:30 +0000
reviewersmossop
bugs1383660
milestone56.0a1
Bug 1383660 - Let speech bubble of onboarding icon clickable. r=mossop MozReview-Commit-ID: Mmq5CZNdre
browser/extensions/onboarding/content/onboarding.css
--- a/browser/extensions/onboarding/content/onboarding.css
+++ b/browser/extensions/onboarding/content/onboarding.css
@@ -22,45 +22,47 @@
 #onboarding-overlay.onboarding-opened {
   display: block;
 }
 
 #onboarding-overlay-button {
   padding: 0;
   position: absolute;
   cursor: pointer;
-  top: 30px;
-  offset-inline-start: 30px;
+  top: 34px;
+  offset-inline-start: 34px;
   border: none;
   /* Set to none so no grey contrast background in the high-contrast mode */
   background: none;
 }
 
 #onboarding-overlay-button-icon {
   width: 36px;
+  vertical-align: top;
 }
 
 #onboarding-notification-icon::after,
 #onboarding-overlay-button::after {
   background: #5ce6e6;
-  position: absolute;
   font-size: 12px;
   border: 1px solid #fff;
   text-align: center;
   color: #10404a;
   box-sizing: content-box;
 }
 
 #onboarding-overlay-button::after {
   content: attr(aria-label);
-  top: -6px;
+  display: inline-block;
   offset-inline-start: 39px;
   border-radius: 22px;
   padding: 5px 8px;
-  min-width: 100px;
+  width: 110px;
+  margin-inline-start: 3px;
+  margin-top: -5px;
 }
 
 #onboarding-overlay-dialog,
 .onboarding-hidden {
   display: none;
 }
 
 .onboarding-close-btn {
@@ -183,17 +185,16 @@
 #onboarding-tour-list > li:hover {
   color: #0A84FF;
   /* With 1px transparent border, could see a border in the high-constrast mode */
   border: 1px solid transparent;
   /* Substract 1px for the 1px transparent or a 1px shift would happen */
   padding-inline-start: calc(var(--padding-inline-start) - 1px);
   padding-top: calc(var(--padding-top) - 1px);
   padding-bottom: calc(var(--padding-bottom) - 1px);
-  background-color: #fff;
 }
 
 /* Default browser tour */
 #onboarding-tour-is-default-browser-msg {
   font-size: 16px;
   line-height: 21px;
   float: inline-end;
   margin-inline-end: 26px;
@@ -472,16 +473,17 @@
 
 #onboarding-notification-icon:dir(rtl) {
   background-position: right 34px center;
 }
 
 #onboarding-notification-icon::after {
   --height: 22px;
   --vpadding: 3px;
+  position: absolute;
   content: attr(data-tooltip);
   top: 0;
   offset-inline-start: 73px;
   line-height: calc(var(--height) - var(--vpadding) * 2);
   border-radius: calc(var(--height) / 2);
   padding: var(--vpadding) 10px;
 }