Bug 1229636 - Remove new tab first time use message. r?gijs draft
authorJared Wein <jwein@mozilla.com>
Fri, 08 Jan 2016 17:29:25 -0500
changeset 320171 eb0a8df76807252de86a57c40490a0250b8b375c
parent 320165 ea01aa74be131267e98f034d115df035bd86cd9d
child 512699 4ffa033373223c79f4e82bfd175382393ff1fd1d
push id9147
push userjwein@mozilla.com
push dateFri, 08 Jan 2016 22:29:52 +0000
reviewersgijs
bugs1229636
milestone46.0a1
Bug 1229636 - Remove new tab first time use message. r?gijs
browser/base/content/newtab/intro.js
browser/base/content/newtab/newTab.css
browser/base/content/newtab/newTab.js
browser/base/content/newtab/newTab.xhtml
browser/base/content/newtab/page.js
browser/base/content/test/newtab/browser.ini
browser/base/content/test/newtab/browser_newtab_intro.js
deleted file mode 100644
--- a/browser/base/content/newtab/intro.js
+++ /dev/null
@@ -1,95 +0,0 @@
-#ifdef 0
-/* 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/. */
-#endif
-
-const PREF_INTRO_SHOWN = "browser.newtabpage.introShown";
-const PREF_NEWTAB_ENHANCED = "browser.newtabpage.enhanced";
-
-var gIntro = {
-  _nodeIDSuffixes: [
-    "mask",
-    "modal",
-    "text",
-    "buttons",
-    "header",
-    "footer"
-  ],
-
-  _paragraphs: [],
-
-  _nodes: {},
-
-  init: function() {
-    for (let idSuffix of this._nodeIDSuffixes) {
-      this._nodes[idSuffix] = document.getElementById("newtab-intro-" + idSuffix);
-    }
-  },
-
-  _showMessage: function() {
-    // Set the paragraphs
-    let paragraphNodes = this._nodes.text.getElementsByTagName("p");
-
-    this._paragraphs.forEach((arg, index) => {
-      paragraphNodes[index].innerHTML = arg;
-    });
-
-    // Set the button
-    document.getElementById("newtab-intro-button").
-             setAttribute("value", newTabString("intro.gotit"));
-  },
-
-  _bold: function(str) {
-    return `<strong>${str}</strong>`;
-  },
-
-  _link: function(url, text) {
-    return `<a href="${url}" target="_blank">${text}</a>`;
-  },
-
-  _exitIntro: function() {
-    this._nodes.mask.style.opacity = 0;
-    this._nodes.mask.addEventListener("transitionend", () => {
-      this._nodes.mask.style.display = "none";
-    });
-  },
-
-  _generateParagraphs: function() {
-    let customizeIcon = '<input type="button" class="newtab-control newtab-customize"/>';
-    this._paragraphs.push(newTabString("intro1.paragraph1"));
-    this._paragraphs.push(newTabString("intro1.paragraph2",
-                            [
-                              this._link(TILES_PRIVACY_LINK, newTabString("privacy.link")),
-                              customizeIcon
-                            ]));
-  },
-
-  showIfNecessary: function() {
-    if (!Services.prefs.getBoolPref(PREF_NEWTAB_ENHANCED)) {
-      return;
-    }
-    if (!Services.prefs.getBoolPref(PREF_INTRO_SHOWN)) {
-      this.showPanel();
-      Services.prefs.setBoolPref(PREF_INTRO_SHOWN, true);
-    }
-  },
-
-  showPanel: function() {
-    this._nodes.mask.style.display = "block";
-    this._nodes.mask.style.opacity = 1;
-
-    if (!this._paragraphs.length) {
-      // It's our first time showing the panel. Do some initial setup
-      this._generateParagraphs();
-    }
-    this._showMessage();
-
-    // Header text
-    this._nodes.header.innerHTML = newTabString("intro.header.update");
-
-    // Footer links
-    let footerLinkNode = document.getElementById("newtab-intro-link");
-    footerLinkNode.innerHTML = this._link(TILES_INTRO_LINK, newTabString("learn.link2"))
-  },
-};
--- a/browser/base/content/newtab/newTab.css
+++ b/browser/base/content/newtab/newTab.css
@@ -124,34 +124,23 @@ input[type=button] {
 
 /*
  * If you change the sizes here, make sure you
  * change the preferences:
  * toolkit.pageThumbs.minWidth
  * toolkit.pageThumbs.minHeight
  */
 /* CELLS */
-.newtab-cell,
-.newtab-intro-cell,
-.newtab-intro-cell-hover {
+.newtab-cell {
   display: -moz-box;
   height: 210px;
   margin: 20px 10px 35px;
   width: 290px;
 }
 
-.newtab-intro-cell-wrapper {
-  margin-top: -12px;
-}
-
-.newtab-intro-cell,
-.newtab-intro-cell-hover {
-  margin: 0;
-}
-
 /* SITES */
 .newtab-site {
   position: relative;
   -moz-box-flex: 1;
   transition: 100ms ease-out;
   transition-property: top, left, opacity;
 }
 
@@ -299,18 +288,17 @@ input[type=button] {
 .newtab-control {
   position: absolute;
   top: 4px;
   opacity: 0;
   transition: opacity 100ms ease-out;
 }
 
 .newtab-control:-moz-focusring,
-.newtab-cell:not([ignorehover]) > .newtab-site:hover > .newtab-control,
-.newtab-intro-cell-hover .newtab-control {
+.newtab-cell:not([ignorehover]) > .newtab-site:hover > .newtab-control {
   opacity: 1;
 }
 
 .newtab-control[dragged] {
   opacity: 0 !important;
 }
 
 @media (-moz-touch-enabled) {
@@ -581,21 +569,16 @@ input[type=button] {
   background-position: right 15px center;
 }
 
 .newtab-customize-complex-option:hover > .selectable:not([selected]):-moz-locale-dir(rtl),
 .selectable:not([selected]):hover:-moz-locale-dir(rtl) {
   background-position: right 15px center;
 }
 
-.newtab-intro-image-customize .newtab-customize-panel-item,
-.newtab-intro-image-customize .newtab-customize-complex-option {
-  max-width: 100%;
-}
-
 .newtab-customize-panel-item:not([selected]),
 .newtab-customize-panel-subitem:not([selected]){
   color: #7A7A7A;
 }
 
 .newtab-customize-panel-item:not([selected]):hover {
   color: #FFFFFF;
   background-color: #4A90E2
@@ -657,180 +640,8 @@ input[type=button] {
   -moz-padding-start: 40px;
   border-top: 1px solid threedshadow;
 }
 
 .contentSearchSuggestionTable {
   font: message-box;
   font-size: 16px;
 }
-
-/**
- * Onboarding styling
- */
-
- #newtab-intro-mask {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: #424F5A;
-  z-index:102;
-  background-color: rgba(66,79,90,0.95);
-  transition: opacity .5s linear;
-  overflow: auto;
-  display: none;
-  text-align: center;
-}
-
-#newtab-intro-modal {
-  font-family: "Helvetica";
-  max-height: 800px;
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  margin: auto;
-  background: linear-gradient(#FFFFFF, #F9F9F9);
-  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7);
-  border-radius: 8px 8px 0px 0px;
-  position: relative;
-  display: inline-block;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-#newtab-intro-header {
-  font-size: 28px;
-  color: #737980;
-  text-align: center;
-  top: 30px;
-  position: relative;
-  border-bottom: 2px solid #E0DFE0;
-  padding-bottom: 10px;
-  display: block;
-  margin: 0px 50px;
-  font-weight: 100;
-  padding: 0px 15px 10px;
-}
-
-#newtab-intro-header .bold {
-  font-weight: 500;
-  color: #343F48;
-}
-
-#newtab-intro-footer {
-  width: 100%;
-  height: 55px;
-  margin: 0px auto;
-  display: block;
-  position: absolute;
-  background-color: white;
-  box-shadow: 0 -1px 4px -1px #EBEBEB;
-  text-align: center;
-  vertical-align: middle;
-  line-height: 55px;
-}
-
-#newtab-intro-footer > ul {
-  list-style-type: none;
-  margin: 0px;
-  padding: 0px;
-}
-
-#newtab-intro-footer > ul > li {
-  display: inline;
-  padding-left: 10px;
-  padding-right: 10px;
-}
-
-#newtab-intro-footer > ul > li > a {
-  text-decoration: none;
-  color: #4A90E2;
-}
-
-#newtab-intro-footer > ul > li > a:hover {
-  color: #000000;
-}
-
-#newtab-intro-body {
-  position: relative;
-  display: block;
-  margin: 55px 50px 38px;
-}
-
-#newtab-intro-content > * {
-  display: inline-block;
-}
-
-#newtab-intro-content {
-  position: relative;
-}
-
-#newtab-intro-buttons {
-  text-align: center;
-  vertical-align: middle;
-  display: block;
-  bottom: 0px;
-  width: 100%;
-}
-
-#newtab-intro-tile {
-  width: 290px;
-  height: 100%;
-}
-
-#newtab-intro-text {
-  text-align: left;
-  right: 0px;
-  height: 100%;
-  font-size: 14px;
-  line-height: 20px;
-  width: 460px;
-}
-
-#newtab-intro-text > p {
-  margin: 0 0 30px;
-}
-
-#newtab-intro-text > p > a {
-  text-decoration: none;
-  color: #4A90E2;
-}
-
-#newtab-intro-text > p > a:hover {
-  color: #000000;
-}
-
-#newtab-intro-text .newtab-control {
-  background-size: 18px auto;
-  height: 18px;
-  width: 18px;
-  vertical-align: middle;
-  opacity: 1;
-  position: inherit;
-  pointer-events: none;
-}
-
-#newtab-intro-buttons > input {
-  min-width: 120px;
-  height: 50px;
-  margin: 0px 5px;
-  vertical-align: bottom;
-  border-radius: 2px;
-  border: solid 1px #2C72E2;
-  background-color: #FFFFFF;
-  color: #4A90E2;
-  -moz-user-focus: normal;
-  padding: 0px 10px;
-}
-
-#newtab-intro-buttons > input[default] {
-  background-color: #4A90E2;
-  color: #FFFFFF;
-}
-
-#newtab-intro-buttons > input:hover {
-  background-color: #2C72E2;
-  color: #FFFFFF;
-}
--- a/browser/base/content/newtab/newTab.js
+++ b/browser/base/content/newtab/newTab.js
@@ -61,12 +61,11 @@ const TILES_PRIVACY_LINK = "https://www.
 #include dragDataHelper.js
 #include drop.js
 #include dropTargetShim.js
 #include dropPreview.js
 #include updater.js
 #include undo.js
 #include search.js
 #include customize.js
-#include intro.js
 
 // Everything is loaded. Initialize the New Tab Page.
 gPage.init();
--- a/browser/base/content/newtab/newTab.xhtml
+++ b/browser/base/content/newtab/newTab.xhtml
@@ -48,68 +48,44 @@
           </div>
           <div id="newtab-customize-learn" class="newtab-customize-panel-item">
             <label>&newtab.customize.cog.learn;</label>
           </div>
         </div>
     </div>
   </div>
 
-  <div id="newtab-intro-mask">
-    <div id="newtab-intro-modal">
-      <div id="newtab-intro-header"/>
-      <div id="newtab-intro-body">
-        <div id="newtab-intro-content">
-          <div id="newtab-intro-text">
-            <p/><p/>
-          </div>
-        </div>
-        <div id="newtab-intro-buttons">
-          <input id="newtab-intro-button" type="button" default="true" onclick="gIntro._exitIntro()"/>
-        </div>
-      </div>
-      <div id="newtab-intro-footer">
-        <ul>
-          <li id="newtab-intro-link"/>
-        </ul>
+  <div id="newtab-vertical-margin">
+    <div id="newtab-margin-top"/>
+    <div id="newtab-margin-undo-container">
+      <div id="newtab-undo-container" undo-disabled="true">
+        <label id="newtab-undo-label">&newtab.undo.removedLabel;</label>
+        <button id="newtab-undo-button" tabindex="-1"
+                class="newtab-undo-button">&newtab.undo.undoButton;</button>
+        <button id="newtab-undo-restore-button" tabindex="-1"
+                class="newtab-undo-button">&newtab.undo.restoreButton;</button>
+        <button id="newtab-undo-close-button" tabindex="-1" title="&newtab.undo.closeTooltip;"/>
       </div>
     </div>
-  </div>
-
-    <div id="newtab-vertical-margin">
-      <div id="newtab-margin-top"/>
-        <div id="newtab-margin-undo-container">
-          <div id="newtab-undo-container" undo-disabled="true">
-            <label id="newtab-undo-label">&newtab.undo.removedLabel;</label>
-            <button id="newtab-undo-button" tabindex="-1"
-                    class="newtab-undo-button">&newtab.undo.undoButton;</button>
-            <button id="newtab-undo-restore-button" tabindex="-1"
-                    class="newtab-undo-button">&newtab.undo.restoreButton;</button>
-            <button id="newtab-undo-close-button" tabindex="-1" title="&newtab.undo.closeTooltip;"/>
-          </div>
-        </div>
 
-      <div id="newtab-search-container">
-        <div id="newtab-search-form">
-          <div id="newtab-search-icon"/>
-          <input type="text" name="q" value="" id="newtab-search-text"
-                 aria-label="&contentSearchInput.label;" maxlength="256" dir="auto"/>
-          <input id="newtab-search-submit" type="button" value=""
-                 aria-label="&contentSearchSubmit.label;"/>
-        </div>
+    <div id="newtab-search-container">
+      <div id="newtab-search-form">
+        <div id="newtab-search-icon"/>
+        <input type="text" name="q" value="" id="newtab-search-text"
+             aria-label="&contentSearchInput.label;" maxlength="256" dir="auto"/>
+        <input id="newtab-search-submit" type="button" value=""
+             aria-label="&contentSearchSubmit.label;"/>
       </div>
+    </div>
 
-      <div id="newtab-horizontal-margin">
-        <div class="newtab-side-margin"/>
-
-        <div id="newtab-grid">
-        </div>
-
-        <div class="newtab-side-margin"/>
+    <div id="newtab-horizontal-margin">
+      <div class="newtab-side-margin"/>
+      <div id="newtab-grid">
       </div>
-
-      <div id="newtab-margin-bottom"/>
+      <div class="newtab-side-margin"/>
+    </div>
+    <div id="newtab-margin-bottom"/>
   </div>
-      <input id="newtab-customize-button" type="button" dir="&locale.dir;" title="&newtab.customize.title;"/>
+  <input id="newtab-customize-button" type="button" dir="&locale.dir;" title="&newtab.customize.title;"/>
 </body>
 <script type="text/javascript;version=1.8" src="chrome://browser/content/contentSearchUI.js"/>
 <script type="text/javascript;version=1.8" src="chrome://browser/content/newtab/newTab.js"/>
 </html>
--- a/browser/base/content/newtab/page.js
+++ b/browser/base/content/newtab/page.js
@@ -31,35 +31,31 @@ var gPage = {
     let enabled = gAllPages.enabled;
     if (enabled)
       this._init();
 
     this._updateAttributes(enabled);
 
     // Initialize customize controls.
     gCustomize.init();
-
-    // Initialize intro panel.
-    gIntro.init();
   },
 
   /**
    * Listens for notifications specific to this page.
    */
   observe: function Page_observe(aSubject, aTopic, aData) {
     if (aTopic == "nsPref:changed") {
       gCustomize.updateSelected();
 
       let enabled = gAllPages.enabled;
       this._updateAttributes(enabled);
 
       // Update thumbnails to the new enhanced setting
       if (aData == "browser.newtabpage.enhanced") {
         this.update();
-        gIntro.showIfNecessary();
       }
 
       // Initialize the whole page if we haven't done that, yet.
       if (enabled) {
         this._init();
       } else {
         gUndoDialog.hide();
       }
@@ -250,19 +246,16 @@ var gPage = {
     } else {
       addEventListener("load", this);
     }
   },
 
   onPageVisibleAndLoaded() {
     // Send the index of the last visible tile.
     this.reportLastVisibleTileIndex();
-
-    // Show the panel now that anchors are sized
-    gIntro.showIfNecessary();
   },
 
   reportLastVisibleTileIndex() {
     let cwu = window.QueryInterface(Ci.nsIInterfaceRequestor)
                     .getInterface(Ci.nsIDOMWindowUtils);
 
     let rect = cwu.getBoundsWithoutFlushing(gGrid.node);
     let nodes = cwu.nodesFromRect(rect.left, rect.top, 0, rect.width,
--- a/browser/base/content/test/newtab/browser.ini
+++ b/browser/base/content/test/newtab/browser.ini
@@ -23,17 +23,16 @@ skip-if = (os == 'mac' && os_version == 
 [browser_newtab_disable.js]
 [browser_newtab_drag_drop.js]
 skip-if = os == "win" || (os == 'mac' && os_version == '10.10') # Bug 1152810 - can't do simulateDrop(0,0) on Windows; Bug 1122478 - newtab drag-drop tests fail on OS X 10.10
 [browser_newtab_drag_drop_ext.js]
 skip-if = (os == 'mac' && os_version == '10.10') # bug 1122478 - newtab drag-drop tests fail on OS X 10.10
 [browser_newtab_drop_preview.js]
 [browser_newtab_enhanced.js]
 [browser_newtab_focus.js]
-[browser_newtab_intro.js]
 [browser_newtab_perwindow_private_browsing.js]
 [browser_newtab_reportLinkAction.js]
 [browser_newtab_reflow_load.js]
 support-files =
   content-reflows.js
 [browser_newtab_search.js]
 support-files =
   searchEngineNoLogo.xml
deleted file mode 100644
--- a/browser/base/content/test/newtab/browser_newtab_intro.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-const INTRO_PREF = "browser.newtabpage.introShown";
-const PRELOAD_PREF = "browser.newtab.preload";
-
-function runTests() {
-  let origIntro = Services.prefs.getBoolPref(INTRO_PREF);
-  let origPreload = Services.prefs.getBoolPref(PRELOAD_PREF);
-  registerCleanupFunction(_ => {
-    Services.prefs.setBoolPref(INTRO_PREF, origIntro);
-    Services.prefs.setBoolPref(PRELOAD_PREF, origPreload);
-  });
-
-  // Test with preload false
-  Services.prefs.setBoolPref(INTRO_PREF, false);
-  Services.prefs.setBoolPref(PRELOAD_PREF, false);
-
-  yield addNewTabPageTab();
-  let intro;
-  intro = getContentDocument().getElementById("newtab-intro-mask");
-  is(intro.style.opacity, 1, "intro automatically shown on first opening");
-  is(getContentDocument().getElementById("newtab-intro-header").innerHTML,
-     'New Tab got an update!', "we show intro.");
-  is(Services.prefs.getBoolPref(INTRO_PREF), true, "newtab remembers that the intro was shown");
-
-  yield addNewTabPageTab();
-  intro = getContentDocument().getElementById("newtab-intro-mask");
-  is(intro.style.opacity, 0, "intro not shown on second opening");
-
-  // Test with preload true
-  Services.prefs.setBoolPref(INTRO_PREF, false);
-  Services.prefs.setBoolPref(PRELOAD_PREF, true);
-
-  yield addNewTabPageTab();
-  intro = getContentDocument().getElementById("newtab-intro-mask");
-  is(intro.style.opacity, 1, "intro automatically shown on preloaded opening");
-  is(getContentDocument().getElementById("newtab-intro-header").innerHTML,
-     'New Tab got an update!', "we show intro.");
-  is(Services.prefs.getBoolPref(INTRO_PREF), true, "newtab remembers that the intro was shown");
-
-  let gotit = getContentDocument().getElementById("newtab-intro-button");
-  gotit.click();
-
-  is(intro.style.opacity, 0, "intro exited");
-}