Bug 1183932 - Update onboarding for Fx 40 with single slide. r=emtwo, f=flod, a=lmandel
authorMaxim Zhilyaev <mzhilyaev@mozilla.com>
Mon, 20 Jul 2015 13:56:00 -0400
changeset 281602 92dd75b29646dfa1f0c390e092b6e5b3c3688f3c
parent 281601 c9d4b8479814ef67e383a5cca8daaaf33a647a38
child 281603 49e585f3ab9c56fdb4f10839b6dc3769f280a71b
push id4932
push userjlund@mozilla.com
push dateMon, 10 Aug 2015 18:23:06 +0000
treeherdermozilla-beta@6dd5a4f5f745 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersemtwo, lmandel
bugs1183932
milestone41.0a2
Bug 1183932 - Update onboarding for Fx 40 with single slide. r=emtwo, f=flod, a=lmandel
browser/app/profile/firefox.js
browser/base/content/newtab/intro.js
browser/base/content/newtab/newTab.css
browser/base/content/newtab/newTab.xul
browser/base/content/test/newtab/browser_newtab_intro.js
browser/themes/shared/newtab/newTab.inc.css
testing/profiles/prefs_general.js
--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@@ -1676,19 +1676,16 @@ pref("prompts.tab_modal.enabled", true);
 pref("browser.panorama.animate_zoom", true);
 
 // Activates preloading of the new tab url.
 pref("browser.newtab.preload", true);
 
 // Remembers if the about:newtab intro has been shown
 pref("browser.newtabpage.introShown", false);
 
-// Remembers if the about:newtab update intro has been shown
-pref("browser.newtabpage.updateIntroShown", false);
-
 // Toggles the content of 'about:newtab'. Shows the grid when enabled.
 pref("browser.newtabpage.enabled", true);
 
 // number of rows of newtab grid
 pref("browser.newtabpage.rows", 3);
 
 // number of columns of newtab grid
 pref("browser.newtabpage.columns", 5);
--- a/browser/base/content/newtab/intro.js
+++ b/browser/base/content/newtab/intro.js
@@ -1,242 +1,90 @@
 #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_UPDATE_INTRO_SHOWN = "browser.newtabpage.updateIntroShown";
-
-// These consts indicate the type of intro/onboarding we show.
-const WELCOME = "welcome";
-const UPDATE = "update";
-
-// The maximum paragraph ID listed for 'newtab.intro.paragraph'
-// strings in newTab.properties
-const MAX_PARAGRAPH_ID = 9;
-
-const NUM_INTRO_PAGES = 3;
+const PREF_NEWTAB_ENHANCED = "browser.newtabpage.enhanced";
 
 let gIntro = {
   _nodeIDSuffixes: [
     "mask",
     "modal",
-    "numerical-progress",
     "text",
     "buttons",
-    "image",
     "header",
     "footer"
   ],
 
-  _imageTypes: {
-    COG : "cog",
-    PIN_REMOVE : "pin-remove",
-    SUGGESTED : "suggested"
-  },
-
-
-  /**
-   * The paragraphs & buttons to show on each page in the intros.
-   *
-   * _introPages.welcome and _introPages.update contain an array of
-   * indices of paragraphs to be used to lookup text in _paragraphs
-   * for each page of the intro.
-   *
-   * Similarly, _introPages.buttons is used to lookup text for buttons
-   * on each page of the intro.
-   */
-  _introPages: {
-    "welcome": [[0,1],[2,5],[4,3]],
-    "update": [[6,5],[4,3],[0,1]],
-    "buttons": [["skip", "continue"],["back", "next"],["back", "gotit"]],
-    "welcome-images": ["cog", "suggested", "pin-remove"],
-    "update-images": ["suggested", "pin-remove", "cog"]
-  },
-
   _paragraphs: [],
 
   _nodes: {},
 
-  _images: {},
-
   init: function() {
     for (let idSuffix of this._nodeIDSuffixes) {
       this._nodes[idSuffix] = document.getElementById("newtab-intro-" + idSuffix);
     }
-
-    let brand = Services.strings.createBundle("chrome://branding/locale/brand.properties");
-    this._brandShortName = brand.GetStringFromName("brandShortName");
-  },
-
-  _setImage: function(imageType) {
-    // Remove previously existing images, if any.
-    let currImageHolder = this._nodes.image;
-    while (currImageHolder.firstChild) {
-      currImageHolder.removeChild(currImageHolder.firstChild);
-    }
-
-    this._nodes.image.appendChild(this._images[imageType]);
   },
 
-  _goToPage: function(pageNum) {
-    this._currPage = pageNum;
-
-    this._nodes["numerical-progress"].innerHTML = `${this._bold(pageNum + 1)} / ${NUM_INTRO_PAGES}`;
-    this._nodes["numerical-progress"].setAttribute("page", pageNum);
-
-    // Set the page's image
-    let imageType = this._introPages[this._onboardingType + "-images"][pageNum];
-    this._setImage(imageType);
-
+  _showMessage: function() {
     // Set the paragraphs
     let paragraphNodes = this._nodes.text.getElementsByTagName("p");
-    let paragraphIDs = this._introPages[this._onboardingType][pageNum];
-    paragraphIDs.forEach((arg, index) => {
-      paragraphNodes[index].innerHTML = this._paragraphs[arg];
+
+    this._paragraphs.forEach((arg, index) => {
+      paragraphNodes[index].innerHTML = arg;
     });
 
-    // Set the buttons
-    let buttonNodes = this._nodes.buttons.getElementsByTagName("input");
-    let buttonIDs = this._introPages.buttons[pageNum];
-    buttonIDs.forEach((arg, index) => {
-      buttonNodes[index].setAttribute("value", newTabString("intro." + arg));
-    });
+    // Set the button
+    document.getElementById("newtab-intro-button").
+             setAttribute("value", newTabString("intro.gotit"));
   },
 
   _bold: function(str) {
-    return `<strong>${str}</strong>`
+    return `<strong>${str}</strong>`;
   },
 
   _link: function(url, text) {
     return `<a href="${url}" target="_blank">${text}</a>`;
   },
 
-  _span: function(text, className) {
-    return `<span class="${className}">${text}</span>`;
-  },
-
   _exitIntro: function() {
     this._nodes.mask.style.opacity = 0;
     this._nodes.mask.addEventListener("transitionend", () => {
       this._nodes.mask.style.display = "none";
     });
   },
 
-  _back: function() {
-    if (this._currPage == 0) {
-      // We're on the first page so 'back' means exit.
-      this._exitIntro();
-      return;
-    }
-    this._goToPage(this._currPage - 1);
-  },
-
-  _next: function() {
-    if (this._currPage == (NUM_INTRO_PAGES - 1)) {
-      // We're on the last page so 'next' means exit.
-      this._exitIntro();
-      return;
-    }
-    this._goToPage(this._currPage + 1);
-  },
-
-  _generateImages: function() {
-    Object.keys(this._imageTypes).forEach(type => {
-      let image = "";
-      let imageClass = "";
-      switch (this._imageTypes[type]) {
-        case this._imageTypes.COG:
-          // Copy the customize panel's subnodes over so that it can be styled
-          // appropriately for the intro.
-          image = document.createElementNS(HTML_NAMESPACE, "div");
-          image.classList.add("newtab-intro-image-customize");
-          let imageToCopy = document.getElementById("newtab-customize-panel").cloneNode(true);
-          while (imageToCopy.firstChild) {
-            image.appendChild(imageToCopy.firstChild);
-          }
-          break;
-        case this._imageTypes.PIN_REMOVE:
-          imageClass = "-hover";
-          // fall-through
-        case this._imageTypes.SUGGESTED:
-          image = document.createElementNS(HTML_NAMESPACE, "div");
-          image.classList.add("newtab-intro-cell-wrapper");
-
-          // Create the cell's inner HTML code.
-          image.innerHTML =
-            '<div class="newtab-intro-cell' + imageClass + '">' +
-            '  <div class="newtab-site newtab-intro-image-tile" type="sponsored" suggested="' + (imageClass ? "false" : "true") + '">' +
-            '    <span class="newtab-sponsored">' +
-                   newTabString(imageClass ? "sponsored.button" : "suggested.tag") + '</span>' +
-            '    <a class="newtab-link">' +
-            '      <span class="newtab-thumbnail"/>' +
-            '      <span class="newtab-title">mozilla.org</span>' +
-            '    </a>' +
-            '    <input type="button" class="newtab-control newtab-control-pin"/>' +
-            '    <input type="button" class="newtab-control newtab-control-block"/>' +
-            '  </div>' +
-            '</div>';
-            break;
-      }
-      this._images[this._imageTypes[type]] = image;
-    });
-  },
-
   _generateParagraphs: function() {
     let customizeIcon = '<input type="button" class="newtab-control newtab-customize"/>';
-
-    let substringMappings = {
-      "2": [this._link(TILES_PRIVACY_LINK, newTabString("privacy.link"))],
-      "4": [customizeIcon, this._bold(newTabString("intro.controls"))],
-      "6": [this._bold(newTabString("intro.paragraph6.remove")), this._bold(newTabString("intro.paragraph6.pin"))],
-      "7": [this._link(TILES_INTRO_LINK, newTabString("learn.link"))],
-      "8": [this._brandShortName, this._link(TILES_INTRO_LINK, newTabString("learn.link"))]
-    }
-
-    for (let i = 1; i <= MAX_PARAGRAPH_ID; i++) {
-      try {
-        let name = "intro.paragraph" + i + (i == 4 ? ".2" : "");
-        this._paragraphs.push(newTabString(name, substringMappings[i]));
-      } catch (ex) {
-        // Paragraph with this ID doesn't exist so continue
-      }
-    }
+    this._paragraphs.push(`${newTabString("intro.paragraph9")} ${newTabString("intro.paragraph7")}`);
+    this._paragraphs.push(
+        `${newTabString("intro.paragraph2", [this._link(TILES_PRIVACY_LINK, newTabString("privacy.link"))])}
+         ${newTabString("intro.paragraph4.2", [customizeIcon, this._bold(newTabString("intro.controls"))])}`);
   },
 
   showIfNecessary: function() {
     if (!Services.prefs.getBoolPref(PREF_INTRO_SHOWN)) {
-      this._onboardingType = WELCOME;
       this.showPanel();
-    } else if (!Services.prefs.getBoolPref(PREF_UPDATE_INTRO_SHOWN)) {
-      this._onboardingType = UPDATE;
-      this.showPanel();
+      Services.prefs.setBoolPref(PREF_INTRO_SHOWN, true);
     }
-    Services.prefs.setBoolPref(PREF_INTRO_SHOWN, true);
-    Services.prefs.setBoolPref(PREF_UPDATE_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._generateImages();
     }
-    this._goToPage(0);
+    this._showMessage();
 
     // Header text
-    let boldSubstr = this._onboardingType == WELCOME ? this._span(this._brandShortName, "bold") : "";
-    this._nodes.header.innerHTML = newTabString("intro.header." + this._onboardingType, [boldSubstr]);
+    this._nodes.header.innerHTML = newTabString("intro.header.update");
 
     // Footer links
-    let footerLinkNodes = this._nodes.footer.getElementsByTagName("li");
-    [this._link(TILES_INTRO_LINK, newTabString("learn.link2")),
-     this._link(TILES_PRIVACY_LINK, newTabString("privacy.link2")),
-    ].forEach((arg, index) => {
-      footerLinkNodes[index].innerHTML = arg;
-    });
+    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
@@ -692,59 +692,57 @@ input[type=button] {
   transition: opacity .5s linear;
   overflow: auto;
   display: none;
   text-align: center;
 }
 
 #newtab-intro-modal {
   font-family: "Helvetica";
-  height: 512px;
+  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;
-  min-width: 715px;
   position: relative;
   display: inline-block;
   top: 50%;
   transform: translateY(-50%);
 }
 
 #newtab-intro-header {
   font-size: 28px;
   color: #737980;
   text-align: center;
-  top: 50px;
+  top: 30px;
   position: relative;
   border-bottom: 2px solid #E0DFE0;
   padding-bottom: 10px;
   display: block;
-  margin: 0px auto;
+  margin: 0px 50px;
   font-weight: 100;
-  padding: 0px 15px;
+  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;
-  bottom: 0px;
   background-color: white;
   box-shadow: 0 -1px 4px -1px #EBEBEB;
   text-align: center;
   vertical-align: middle;
   line-height: 55px;
 }
 
 #newtab-intro-footer > ul {
@@ -759,118 +757,73 @@ input[type=button] {
   padding-right: 10px;
 }
 
 #newtab-intro-footer > ul > li > a {
   text-decoration: none;
   color: #4A90E2;
 }
 
-#newtab-intro-footer > ul > li > a:visited {
-  color: #171F26;
-}
-
-#newtab-intro-footer > ul > :first-child {
-  border-right: solid 1px #C1C1C1;
-}
-
 #newtab-intro-body {
-  height: 330px;
   position: relative;
   display: block;
-  top: 50px;
-  margin: 25px 50px 30px;
+  margin: 55px 50px 38px;
 }
 
 #newtab-intro-content > * {
   display: inline-block;
 }
 
 #newtab-intro-content {
-  height: 210px;
   position: relative;
 }
 
 #newtab-intro-buttons {
   text-align: center;
   vertical-align: middle;
-  position: absolute;
   display: block;
   bottom: 0px;
   width: 100%;
 }
 
 #newtab-intro-tile {
   width: 290px;
   height: 100%;
 }
 
 #newtab-intro-text {
   text-align: left;
   right: 0px;
-  width: 270px;
-}
-
-#newtab-intro-text,
-#newtab-intro-image {
   height: 100%;
-  right: 0px;
   font-size: 14px;
   line-height: 20px;
-  min-width: 270px;
-}
-
-#newtab-intro-image {
-  left: 0px;
-  right: auto;
-  float: left;
-  margin-right: 40px;
-}
-
-.newtab-intro-image-customize {
-  box-shadow: 3px 3px 5px #888;
-  margin-top: 0px;
-  background-color: #FFF;
-  float: left;
-  z-index: 101;
-  margin-top: -5px;
-  min-width: 270px;
-  padding: 0;
-}
-
-.newtab-intro-image-customize #newtab-customize-title {
-  display: block;
-  max-height: 40px;
-}
-
-.newtab-intro-image-customize #newtab-customize-panel-anchor {
-  display: none;
-}
-
-.newtab-intro-image-customize .newtab-customize-panel-item:not([selected]):hover {
-  background-color: inherit;
-  color: #7A7A7A;
-  background: none;
+  width: 460px;
 }
 
 #newtab-intro-text > p {
-  margin: 0 0 1em 0;
+  margin: 0 0 30px;
+}
+
+#newtab-intro-text > p > a {
+  text-decoration: none;
+  color: #4A90E2;
 }
 
 #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: 150px;
+  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;
@@ -881,56 +834,8 @@ input[type=button] {
   background-color: #4A90E2;
   color: #FFFFFF;
 }
 
 #newtab-intro-buttons > input:hover {
   background-color: #2C72E2;
   color: #FFFFFF;
 }
-
-#newtab-intro-progress {
-  position: absolute;
-  width: 100%;
-}
-
-#newtab-intro-numerical-progress {
-  text-align: center;
-  top: 15px;
-  position: relative;
-  font-size: 12px;
-  color: #424F5A;
-}
-
-#newtab-intro-graphical-progress {
-  text-align: left;
-  border-radius: 1.5px;
-  overflow: hidden;
-  position: relative;
-  margin: 10px auto 0px;
-  height: 3px;
-  top: 8px;
-  width: 35px;
-  background-color: #DCDCDC;
-}
-
-#indicator {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  display: inline-block;
-  width: 0%;
-  height: 4px;
-  background: none repeat scroll 0% 0% #FF9500;
-  transition: width 0.3s ease-in-out 0s;
-}
-
-#newtab-intro-numerical-progress[page="0"] + #newtab-intro-graphical-progress > #indicator {
-  width: 33%;
-}
-
-#newtab-intro-numerical-progress[page="1"] + #newtab-intro-graphical-progress > #indicator {
-  width: 66%;
-}
-
-#newtab-intro-numerical-progress[page="2"] + #newtab-intro-graphical-progress > #indicator {
-  width: 100%;
-}
--- a/browser/base/content/newtab/newTab.xul
+++ b/browser/base/content/newtab/newTab.xul
@@ -53,38 +53,30 @@
         </div>
     </div>
   </div>
 
   <div id="newtab-customize-overlay"></div>
 
   <div id="newtab-intro-mask">
     <div id="newtab-intro-modal">
-      <div id="newtab-intro-progress">
-        <div id="newtab-intro-numerical-progress"/>
-        <div id="newtab-intro-graphical-progress">
-          <span id="indicator"/>
-        </div>
-      </div>
       <div id="newtab-intro-header"/>
       <div id="newtab-intro-body">
         <div id="newtab-intro-content">
-          <div id="newtab-intro-image"/>
           <div id="newtab-intro-text">
             <p/><p/>
           </div>
         </div>
         <div id="newtab-intro-buttons">
-          <input type="button" onclick="gIntro._back()"/>
-          <input type="button" default="true" onclick="gIntro._next()"/>
+          <input id="newtab-intro-button" type="button" default="true" onclick="gIntro._exitIntro()"/>
         </div>
       </div>
       <div id="newtab-intro-footer">
         <ul>
-          <li/><li/>
+          <li id="newtab-intro-link"/>
         </ul>
       </div>
     </div>
   </div>
 
   <div id="newtab-scrollbox">
 
     <div id="newtab-vertical-margin">
--- a/browser/base/content/test/newtab/browser_newtab_intro.js
+++ b/browser/base/content/test/newtab/browser_newtab_intro.js
@@ -1,119 +1,46 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 const INTRO_PREF = "browser.newtabpage.introShown";
-const UPDATE_INTRO_PREF = "browser.newtabpage.updateIntroShown";
 const PRELOAD_PREF = "browser.newtab.preload";
 
 function runTests() {
   let origIntro = Services.prefs.getBoolPref(INTRO_PREF);
-  let origUpdateIntro = Services.prefs.getBoolPref(UPDATE_INTRO_PREF);
   let origPreload = Services.prefs.getBoolPref(PRELOAD_PREF);
   registerCleanupFunction(_ => {
     Services.prefs.setBoolPref(INTRO_PREF, origIntro);
-    Services.prefs.setBoolPref(INTRO_PREF, origUpdateIntro);
     Services.prefs.setBoolPref(PRELOAD_PREF, origPreload);
   });
 
   // Test with preload false
   Services.prefs.setBoolPref(INTRO_PREF, false);
-  Services.prefs.setBoolPref(UPDATE_INTRO_PREF, false);
   Services.prefs.setBoolPref(PRELOAD_PREF, false);
 
+  yield addNewTabPageTab();
   let intro;
-  let brand = Services.strings.createBundle("chrome://branding/locale/brand.properties");
-  let brandShortName = brand.GetStringFromName("brandShortName");
-
-  yield addNewTabPageTab();
   intro = getContentDocument().getElementById("newtab-intro-mask");
   is(intro.style.opacity, 1, "intro automatically shown on first opening");
   is(getContentDocument().getElementById("newtab-intro-header").innerHTML,
-     'Welcome to New Tab on <span xmlns="http://www.w3.org/1999/xhtml" class="bold">' + brandShortName + '</span>!', "we show the first-run intro.");
+     'New Tab got an update!', "we show intro.");
   is(Services.prefs.getBoolPref(INTRO_PREF), true, "newtab remembers that the intro was shown");
-  is(Services.prefs.getBoolPref(UPDATE_INTRO_PREF), true, "newtab avoids showing update if 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,
-     'Welcome to New Tab on <span xmlns="http://www.w3.org/1999/xhtml" class="bold">' + brandShortName + '</span>!', "we show the first-run intro.");
+     'New Tab got an update!', "we show intro.");
   is(Services.prefs.getBoolPref(INTRO_PREF), true, "newtab remembers that the intro was shown");
-  is(Services.prefs.getBoolPref(UPDATE_INTRO_PREF), true, "newtab avoids showing update if intro was shown");
-
-  // Test with first run true but update false
-  Services.prefs.setBoolPref(UPDATE_INTRO_PREF, false);
-
-  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 the update intro.");
-  is(Services.prefs.getBoolPref(INTRO_PREF), true, "INTRO_PREF stays true");
-  is(Services.prefs.getBoolPref(UPDATE_INTRO_PREF), true, "newtab remembers that the update intro was show");
-
-  // Test clicking the 'next' and 'back' buttons.
-  let buttons = getContentDocument().getElementById("newtab-intro-buttons").getElementsByTagName("input");
-  let progress = getContentDocument().getElementById("newtab-intro-numerical-progress");
-  let back = buttons[0];
-  let next = buttons[1];
-
-  is(progress.getAttribute("page"), 0, "we are on the first page");
-  is(intro.style.opacity, 1, "intro visible");
-
-
-  let createMutationObserver = function(fcn) {
-    return new Promise(resolve => {
-      let observer = new MutationObserver(function(mutations) {
-        fcn();
-        observer.disconnect();
-        resolve();
-      });
-      let config = { attributes: true, attributeFilter: ["style"], childList: true };
-      observer.observe(progress, config);
-    });
-  }
 
-  let p = createMutationObserver(function() {
-    is(progress.getAttribute("page"), 1, "we get to the 2nd page");
-    is(intro.style.opacity, 1, "intro visible");
-  });
-  next.click();
-  yield p.then(TestRunner.next);
-
-  p = createMutationObserver(function() {
-    is(progress.getAttribute("page"), 2, "we get to the 3rd page");
-    is(intro.style.opacity, 1, "intro visible");
-  });
-  next.click();
-  yield p.then(TestRunner.next);
+  let gotit = getContentDocument().getElementById("newtab-intro-button");
+  gotit.click();
 
-  p = createMutationObserver(function() {
-    is(progress.getAttribute("page"), 1, "go back to 2nd page");
-    is(intro.style.opacity, 1, "intro visible");
-  });
-  back.click();
-  yield p.then(TestRunner.next);
-
-  p = createMutationObserver(function() {
-    is(progress.getAttribute("page"), 0, "go back to 1st page");
-    is(intro.style.opacity, 1, "intro visible");
-  });
-  back.click();
-  yield p.then(TestRunner.next);
-
-
-  p = createMutationObserver(function() {
-    is(progress.getAttribute("page"), 0, "another back will 'skip tutorial'");
-    is(intro.style.opacity, 0, "intro exited");
-  });
-  back.click();
-  p.then(TestRunner.next);
+  is(intro.style.opacity, 0, "intro exited");
 }
--- a/browser/themes/shared/newtab/newTab.inc.css
+++ b/browser/themes/shared/newtab/newTab.inc.css
@@ -82,19 +82,17 @@
 #newtab-customize-button:-moz-any(:hover, :active, [active]) {
   background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 64, 32, 32);
   background-color: #FFFFFF;
   border: solid 1px #CCCCCC;
   border-radius: 2px;
 }
 
 /* CELLS */
-.newtab-cell,
-.newtab-intro-cell,
-.newtab-intro-cell-hover {
+.newtab-cell {
   background-color: rgba(255,255,255,.2);
   border-radius: 8px;
 }
 
 .newtab-cell:empty {
   outline: 2px dashed #c1c1c1;
   -moz-outline-radius: 8px;
 }
@@ -104,29 +102,22 @@
   border-radius: inherit;
   box-shadow: 0 1px 3px #c1c1c1;
   text-decoration: none;
   transition-property: top, left, opacity, box-shadow, background-color;
 }
 
 .newtab-cell:not([ignorehover]) .newtab-control:hover ~ .newtab-link,
 .newtab-cell:not([ignorehover]) .newtab-link:hover,
-.newtab-site[dragged],
-.newtab-intro-cell-hover .newtab-link {
+.newtab-site[dragged] {
   border: 2px solid white;
   box-shadow: 0 0 6px 2px #4cb1ff;
   margin: -2px;
 }
 
-.newtab-intro-cell .newtab-thumbnail,
-.newtab-intro-cell-hover .newtab-thumbnail {
-  background-color: #cae1f4;
-  background-image: url("chrome://browser/skin/newtab/whimsycorn.png");
-}
-
 .newtab-site[dragged] {
   transition-property: box-shadow, background-color;
   background-color: rgb(242,242,242);
 }
 
 /* LINKS */
 .newtab-link {
   border-radius: 10px;
--- a/testing/profiles/prefs_general.js
+++ b/testing/profiles/prefs_general.js
@@ -189,17 +189,16 @@ user_pref("browser.pagethumbnails.captur
 
 // Indicate that the download panel has been shown once so that whichever
 // download test runs first doesn't show the popup inconsistently.
 user_pref("browser.download.panel.shown", true);
 
 // Assume the about:newtab page's intro panels have been shown to not depend on
 // which test runs first and happens to open about:newtab
 user_pref("browser.newtabpage.introShown", true);
-user_pref("browser.newtabpage.updateIntroShown", true);
 
 // Tell the PBackground infrastructure to run a test at startup.
 user_pref("pbackground.testing", true);
 
 // Enable webapps testing mode, which bypasses native installation.
 user_pref("browser.webapps.testing", true);
 
 // Disable android snippets