Bug 1392469 - [Onboarding] remove fox icon and speech bubble from notification;r=fischer draft
authorgasolin <gasolin@gmail.com>
Tue, 22 Aug 2017 10:24:52 +0800
changeset 651963 62623030a1c2c5b7c5e9db8f6f4b7f240e570592
parent 651826 d1c70c20e7b52f7295411343e4dc5db8ee7c92b9
child 651964 07523b8b8230176b6bdee12320287187012519d2
push id75902
push userbmo:gasolin@mozilla.com
push dateThu, 24 Aug 2017 09:07:38 +0000
reviewersfischer
bugs1392469
milestone57.0a1
Bug 1392469 - [Onboarding] remove fox icon and speech bubble from notification;r=fischer MozReview-Commit-ID: BeaOswqNf4G
browser/extensions/onboarding/content/onboarding.css
browser/extensions/onboarding/content/onboarding.js
browser/extensions/onboarding/locales/en-US/onboarding.properties
browser/extensions/onboarding/test/browser/browser_onboarding_accessibility.js
--- a/browser/extensions/onboarding/content/onboarding.css
+++ b/browser/extensions/onboarding/content/onboarding.css
@@ -42,27 +42,23 @@
   transition: outline-offset 150ms;
 }
 
 #onboarding-overlay-button-icon {
   width: 36px;
   vertical-align: top;
 }
 
-#onboarding-notification-icon::after,
 #onboarding-overlay-button::after {
   background: #5ce6e6;
   font-size: 12px;
   border: 1px solid #fff;
   text-align: center;
   color: #10404a;
   box-sizing: content-box;
-}
-
-#onboarding-overlay-button::after {
   content: attr(aria-label);
   display: inline-block;
   offset-inline-start: 39px;
   border-radius: 22px;
   padding: 5px 12px;
   min-width: 100px;
   max-width: 140px;
   white-space: pre-line;
@@ -477,43 +473,16 @@
   transform: translateY(122px);
 }
 
 #onboarding-notification-bar.onboarding-opened {
   transition: none;
   transform: translateY(0px);
 }
 
-#onboarding-notification-icon {
-  height: 36px;
-  background: url("img/overlay-icon.svg") no-repeat;
-  background-size: 36px;
-  background-position: 34px;
-  padding-inline-start: 190px;
-  position: absolute;
-  offset-block-start: 50%;
-  transform: translateY(-50%);
-}
-
-#onboarding-notification-icon:dir(rtl) {
-  background-position: right 34px center;
-}
-
-#onboarding-notification-icon::after {
-  --height: 22px;
-  --vpadding: 3px;
-  position: absolute;
-  content: attr(aria-label);
-  top: 0;
-  offset-inline-start: 73px;
-  line-height: calc(var(--height) - var(--vpadding) * 2);
-  border-radius: calc(var(--height) / 2);
-  padding: var(--vpadding) 10px;
-}
-
 #onboarding-notification-close-btn {
   position: absolute;
   offset-block-start: 50%;
   offset-inline-end: 34px;
   transform: translateY(-50%);
 }
 
 #onboarding-notification-message-section {
@@ -559,18 +528,13 @@
   border: 1px solid transparent;
   border-radius: 0;
   padding: 10px 20px;
   font-size: 14px;
   color: #fff;
   min-width: 130px;
 }
 
-@media all and (max-width: 960px) {
-  #onboarding-notification-icon {
-    display: none;
-  }
-}
 @media all and (max-width: 720px) {
   #onboarding-notification-body {
     width: 340px;
   }
 }
--- a/browser/extensions/onboarding/content/onboarding.js
+++ b/browser/extensions/onboarding/content/onboarding.js
@@ -907,39 +907,30 @@ class Onboarding {
       this._notificationBar.classList.remove("onboarding-opened");
     }
   }
 
   _renderNotificationBar() {
     let footer = this._window.document.createElement("footer");
     footer.id = "onboarding-notification-bar";
     footer.setAttribute("aria-live", "polite");
-    footer.setAttribute("aria-labelledby", "onboarding-notification-icon")
+    footer.setAttribute("aria-labelledby", "onboarding-notification-tour-title")
     // We use `innerHTML` for more friendly reading.
     // The security should be fine because this is not from an external input.
     footer.innerHTML = `
-      <div id="onboarding-notification-icon" role="presentation"></div>
       <section id="onboarding-notification-message-section" role="presentation">
         <div id="onboarding-notification-tour-icon" role="presentation"></div>
         <div id="onboarding-notification-body" role="presentation">
           <h1 id="onboarding-notification-tour-title"></h1>
           <p id="onboarding-notification-tour-message"></p>
         </div>
         <button id="onboarding-notification-action-btn"></button>
       </section>
       <button id="onboarding-notification-close-btn" class="onboarding-close-btn"></button>
     `;
-    let toolTip = this._bundle.formatStringFromName(
-      this._tourType === "new" ? "onboarding.notification-icon-tool-tip" :
-                                 "onboarding.notification-icon-tooltip-updated",
-      [BRAND_SHORT_NAME], 1);
-
-    let icon = footer.querySelector("#onboarding-notification-icon");
-    icon.setAttribute("aria-label", toolTip);
-    icon.setAttribute("role", "presentation");
 
     let closeBtn = footer.querySelector("#onboarding-notification-close-btn");
     closeBtn.setAttribute("title",
       this._bundle.GetStringFromName("onboarding.notification-close-button-tooltip"));
     return footer;
   }
 
   hide() {
--- a/browser/extensions/onboarding/locales/en-US/onboarding.properties
+++ b/browser/extensions/onboarding/locales/en-US/onboarding.properties
@@ -1,18 +1,16 @@
 # 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/.
 # LOCALIZATION NOTE(onboarding.overlay-title2): This string will be used in the overlay title.
 onboarding.overlay-title2=Let’s get started
 onboarding.hidden-checkbox-label-text=Mark all as complete, and hide the tour
 #LOCALIZATION NOTE(onboarding.button.learnMore): this string is used as a button label, displayed near the message, and shared across all the onboarding notifications.
 onboarding.button.learnMore=Learn More
-# LOCALIZATION NOTE(onboarding.notification-icon-tool-tip): This string will be used to show the tooltip alongside the notification icon in the notification bar. %S is brandShortName.
-onboarding.notification-icon-tool-tip=New to %S?
 # LOCALIZATION NOTE(onboarding.overlay-icon-tooltip2): This string will be used
 # to show the tooltip alongside the notification icon in the overlay tour. %S is
 # brandShortName. The tooltip is designed to show in two lines. Please use \n to
 # do appropriate line breaking.
 onboarding.overlay-icon-tooltip2=New to %S?\nLet’s get started.
 # LOCALIZATION NOTE(onboarding.overlay-icon-tooltip-updated2): %S is
 # brandShortName. The tooltip is designed to show in two lines. Please use \n to
 # do appropriate line breaking.
--- a/browser/extensions/onboarding/test/browser/browser_onboarding_accessibility.js
+++ b/browser/extensions/onboarding/test/browser/browser_onboarding_accessibility.js
@@ -37,27 +37,24 @@ add_task(async function test_onboarding_
   let tab = await openTab(ABOUT_NEWTAB_URL);
   await promiseOnboardingOverlayLoaded(tab.linkedBrowser);
   await promiseTourNotificationOpened(tab.linkedBrowser);
 
   info("Test accessibility and semantics of the notification bar");
   await ContentTask.spawn(tab.linkedBrowser, {}, function() {
     let doc = content.document;
     let footer = doc.getElementById("onboarding-notification-bar");
-    let icon = doc.getElementById("onboarding-notification-icon")
+
+    is(footer.getAttribute("aria-labelledby"), doc.getElementById("onboarding-notification-tour-title").id,
+      "Notification bar should be labelled by the notification tour title text");
 
     is(footer.getAttribute("aria-live"), "polite",
       "Notification bar should be a live region");
-    is(footer.getAttribute("aria-labelledby"), icon.id,
-      "Notification bar should be labelled by the notification icon text");
-    ok(icon.getAttribute("aria-label"),
-      "Notification icon should have a text alternative");
     // Presentational elements
     [
-      "onboarding-notification-icon",
       "onboarding-notification-message-section",
       "onboarding-notification-tour-icon",
       "onboarding-notification-body"
     ].forEach(id =>
       is(doc.getElementById(id).getAttribute("role"), "presentation",
         "Element is only used for presentation"));
   });