Bug 1383660 - Let speech bubble of onboarding icon clickable. r=mossop
authorRex Lee <rexboy@mozilla.com>
Mon, 24 Jul 2017 18:56:17 +0800
changeset 422177 08a4bab2247ad15c8ba3da16b727b28996278117
parent 422176 965f1bcd6d74c9daa329034a33d096a90cecc651
child 422178 b01c620827b9bbe3024d226f9804833a3e856265
push id1517
push userjlorenzo@mozilla.com
push dateThu, 14 Sep 2017 16:50:54 +0000
treeherdermozilla-release@3b41fd564418 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmossop
bugs1383660
milestone56.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 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;
 }