Bug 1369282 - Update the close button style in the onboarding overlay to fit the spec;r=Fischer,mossop,rexboy
authorgasolin <gasolin@gmail.com>
Wed, 07 Jun 2017 13:51:46 +0800
changeset 411099 e92dd6dae230f9ebff1c30d7168d08c5eaac5920
parent 411098 bc6756d41d8004124c4b266cbeec4f5d52d41bac
child 411100 a8b2d76d085c0f433fe1a21ffc34ac3882b9cc16
push id7391
push usermtabara@mozilla.com
push dateMon, 12 Jun 2017 13:08:53 +0000
treeherdermozilla-beta@2191d7f87e2e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersFischer, mossop, rexboy
bugs1369282
milestone55.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 1369282 - Update the close button style in the onboarding overlay to fit the spec;r=Fischer,mossop,rexboy MozReview-Commit-ID: 6uLfRFf6GB5
browser/extensions/onboarding/README.md
browser/extensions/onboarding/content/onboarding.css
browser/extensions/onboarding/content/onboarding.js
new file mode 100644
--- /dev/null
+++ b/browser/extensions/onboarding/README.md
@@ -0,0 +1,16 @@
+# Onboarding
+
+System addon to provide the onboarding overlay for user friendly tours.
+
+## Architecture
+
+Everytime `about:home` or `about:newtab` page is opened, onboarding overlay is injected into that page (if `browser.onboarding.enabled` preference is `true`).
+
+## Landing rules
+
+We would apply some rules:
+
+* Avoid `chrome://` in `onbaording.js` since onboarding is intented to be injected into a normal content process page.
+* All styles and ids should be formated as `onboarding-*` to avoid conflict with the origin page.
+* All strings in `locales` should be formated as `onboarding.*` for consistency.
+
--- a/browser/extensions/onboarding/content/onboarding.css
+++ b/browser/extensions/onboarding/content/onboarding.css
@@ -32,20 +32,31 @@
   offset-inline-start: 30px;
   background: url("img/overlay-icon.svg") no-repeat;
 }
 
 #onboarding-overlay-dialog {
   display: none;
 }
 
-#onboarding-tour-close-btn {
+#onboarding-overlay-close-btn {
   position: absolute;
   top: 15px;
   offset-inline-end: 15px;
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+  background-image: url(chrome://browser/skin/sidebar/close.svg);
+  background-position: center center;
+  background-repeat: no-repeat;
+  padding: 12px;
+}
+
+#onboarding-overlay-close-btn:hover {
+  background-color: rgba(204, 204, 204, 0.6);
 }
 
 #onboarding-overlay.opened > #onboarding-overlay-dialog {
   width: 1200px;
   height: 550px;
   background: #f5f5f7;
   border: 1px solid rgba(9, 6, 13, 0.1); /* #09060D, 0.1 opacity */
   position: relative;
--- a/browser/extensions/onboarding/content/onboarding.js
+++ b/browser/extensions/onboarding/content/onboarding.js
@@ -37,17 +37,17 @@ class Onboarding {
     // Destroy on unload. This is to ensure we remove all the stuff we left.
     // No any leak out there.
     this._window.addEventListener("unload", () => this.destroy());
   }
 
   handleEvent(evt) {
     switch (evt.target.id) {
       case "onboarding-overlay-icon":
-      case "onboarding-tour-close-btn":
+      case "onboarding-overlay-close-btn":
       // If the clicking target is directly on the outer-most overlay,
       // that means clicking outside the tour content area.
       // Let's toggle the overlay.
       case "onboarding-overlay":
         this.toggleOverlay();
         break;
     }
   }
@@ -64,17 +64,17 @@ class Onboarding {
   _renderOverlay() {
     let div = this._window.document.createElement("div");
     div.id = "onboarding-overlay";
     // Here we use `innerHTML` is for more friendly reading.
     // The security should be fine because this is not from an external input.
     // We're not shipping yet so l10n strings is going to be closed for now.
     div.innerHTML = `
       <div id="onboarding-overlay-dialog">
-        <button id="onboarding-tour-close-btn">X</button>
+        <span id="onboarding-overlay-close-btn"></span>
         <header>Getting started?</header>
         <nav>
           <ul></ul>
         </nav>
         <footer>
         </footer>
       </div>
     `;