Bug 1369282 - Update the close button style in the onboarding overlay to fit the spec;r=Fischer,mossop,rexboy
☠☠ backed out by 757a3c336d6e ☠ ☠
authorgasolin <gasolin@gmail.com>
Wed, 07 Jun 2017 13:51:46 +0800
changeset 413377 5decd51af7a980c2b96c95bb9729610dabeb9d9d
parent 413376 d397d4c72d75d0510c277f1b6329a70bf2090388
child 413378 69f302e5caf1584341425d0eac6e4144dc3a3396
push id1490
push usermtabara@mozilla.com
push dateMon, 31 Jul 2017 14:08:16 +0000
treeherdermozilla-release@70e32e6bf15e [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: L1j6ECdtgHM
browser/extensions/onboarding/README.md
browser/extensions/onboarding/content/img/onboarding-close-icon.svg
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,20 @@
+# 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.
+
+## References
+
+Content process related change:
+* The `overlay-close.svg` comes from `browser/themes/shared/sidebar/close.svg`.
new file mode 100644
--- /dev/null
+++ b/browser/extensions/onboarding/content/img/onboarding-close-icon.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" d="M9.061,8l3.47-3.47A.75.75,0,0,0,11.47,3.47L8,6.939,4.53,3.47A.75.75,0,0,0,3.47,4.53L6.939,8,3.47,11.47A.75.75,0,1,0,4.53,12.53L8,9.061l3.47,3.47A.75.75,0,0,0,12.53,11.47Z"/>
+</svg>
--- 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(img/onboarding-close-icon.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>
     `;