Bug 1369282 - Update the close button style in the onboarding overlay to fit the spec;r=Fischer,mossop,rexboy

MozReview-Commit-ID: L1j6ECdtgHM

--HG--
extra : rebase_source : c052fd0679998428f8d2fb4696ef00ad5c8c7fcf

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`.

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>

browser/extensions/onboarding/content/onboarding.css

@@ -37,10 +37,21 @@
   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 {

browser/extensions/onboarding/content/onboarding.js

@@ -42,7 +42,7 @@ class Onboarding {
   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.
@@ -69,7 +69,7 @@ class Onboarding {
     // 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>