Bug 1138818 - Part 2 - Add onboarding images. r=adw
☠☠ backed out by 9c709ae78ec4 ☠ ☠
authorMarina Samuel <msamuel@mozilla.com>
Fri, 08 May 2015 12:38:58 -0700
changeset 274520 cb5842311d437dfda46ab9f20bc0e046d2f5a14b
parent 274519 5b45e43dec405b2d8ea561e523011c4fcd4c695d
child 274521 70121f99d5f1b26715daf4c635c8ed317e0973ea
push id863
push userraliiev@mozilla.com
push dateMon, 03 Aug 2015 13:22:43 +0000
treeherdermozilla-release@f6321b14228d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersadw
bugs1138818
milestone40.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 1138818 - Part 2 - Add onboarding images. r=adw
browser/base/content/newtab/intro.js
browser/base/content/newtab/newTab.css
browser/themes/linux/jar.mn
browser/themes/osx/jar.mn
browser/themes/shared/newtab/newTab.inc.css
browser/themes/windows/jar.mn
--- a/browser/base/content/newtab/intro.js
+++ b/browser/base/content/newtab/intro.js
@@ -44,59 +44,85 @@ let gIntro = {
   _nodeIDSuffixes: [
     "panel",
     "what",
     "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,3],[4,5]],
     "update": [[6,5],[4,3],[0,1]],
-    "buttons": [["skip", "continue"],["back", "next"],["back", "gotit"]]
+    "buttons": [["skip", "continue"],["back", "next"],["back", "gotit"]],
+    "welcome-images": ["cog", "pin-remove", "suggested"],
+    "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);
     }
 
     if (DirectoryLinksProvider.locale != "en-US") {
       this._nodes.what.style.display = "block";
       this._nodes.panel.addEventListener("popupshowing", e => this._setUpPanel());
       this._nodes.panel.addEventListener("popuphidden", e => this._hidePanel());
       this._nodes.what.addEventListener("click", e => this.showPanel());
     }
   },
 
+  _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);
+
     // 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];
     });
 
     // Set the buttons
@@ -139,16 +165,53 @@ let gIntro = {
     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:
+          image = document.getElementById("newtab-customize-panel2").cloneNode(true);
+          image.removeAttribute("hidden");
+          image.removeAttribute("type");
+          image.classList.add("newtab-intro-image-customize");
+          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">' +
+            '    <a class="newtab-link">' +
+            '      <span class="newtab-thumbnail"/>' +
+            '      <span class="newtab-title">Example Title</span>' +
+            '    </a>' +
+            '    <input type="button" class="newtab-control newtab-control-pin"/>' +
+            '    <input type="button" class="newtab-control newtab-control-block"/>' + (imageClass ? "" :
+            '    <span class="newtab-sponsored">SUGGESTED</span>') +
+            '  </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(this._newTabString("intro.controls"))],
       "6": [this._bold(this._newTabString("intro.remove")), this._bold(this._newTabString("intro.pin"))],
       "7": [this._link(TILES_INTRO_LINK, newTabString("learn.link"))],
@@ -202,16 +265,17 @@ let gIntro = {
     }
 
     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);
 
     // Header text
     let boldSubstr = this._onboardingType == WELCOME ? this._span(this._newTabString("intro.firefox"), "bold") : "";
     this._nodes.header.innerHTML = this._newTabString("intro.header." + this._onboardingType, [boldSubstr]);
 
     // Footer links
--- a/browser/base/content/newtab/newTab.css
+++ b/browser/base/content/newtab/newTab.css
@@ -153,23 +153,34 @@ input[type=button] {
 }
 
 #newtab-grid[locked],
 #newtab-grid[page-disabled] {
   pointer-events: none;
 }
 
 /* CELLS */
-.newtab-cell {
+.newtab-cell,
+.newtab-intro-cell,
+.newtab-intro-cell-hover {
   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;
 }
 
@@ -302,17 +313,18 @@ 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-cell:not([ignorehover]) > .newtab-site:hover > .newtab-control,
+.newtab-intro-cell-hover .newtab-control {
   opacity: 1;
 }
 
 .newtab-control[dragged] {
   opacity: 0 !important;
 }
 
 @media (-moz-touch-enabled) {
@@ -554,43 +566,48 @@ input[type=button] {
 .newtab-search-panel-engine > label,
 #newtab-search-manage > label,
 .newtab-customize-complex-option {
   padding: 0;
   margin: 0;
   cursor: pointer;
 }
 
+.newtab-customize-panel-item,
+.newtab-customize-complex-option {
+  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
 }
 
 .newtab-customize-complex-option:hover > .selectable:not([selected]),
 .selectable:not([selected]):hover {
   background: url("chrome://global/skin/menu/shared-menu-check-hover.svg") no-repeat #FFFFFF;
   background-size: 16px 16px;
-  background-position: 15px 20px;
+  background-position: 15px 15px;
   color: #171F26;
 }
 
 .newtab-customize-complex-option:hover > .selectable:not([selected]) + .newtab-customize-panel-subitem {
   background-color: #FFFFFF;
 }
 
 .newtab-customize-panel-item[selected],
 .newtab-search-panel-engine[selected] {
   background: url("chrome://global/skin/menu/shared-menu-check-active.svg") no-repeat transparent;
   background-size: 16px 16px;
-  background-position: 15px 20px;
+  background-position: 15px 15px;
   color: black;
   font-weight: 600;
 }
 
 .newtab-customize-panel-subitem > .checkbox {
   width: 18px;
   height: 18px;
   background-color: #FFFFFF;
@@ -602,28 +619,28 @@ input[type=button] {
   background-size: 9px 9px;
   background-position: center;
   color: #333333;
 }
 
 .newtab-customize-panel-subitem {
   font-size: 12px;
   padding-left: 40px;
-  padding-bottom: 20px;
+  padding-bottom: 15px;
   border-bottom: 1px solid threedshadow;
 }
 
 .newtab-customize-panel-subitem > label {
   padding-left: 10px;
 }
 
 .newtab-customize-panel-superitem {
   line-height: 14px;
   border-bottom: medium none !important;
-  padding: 20px 0px 10px 40px;
+  padding: 15px 0px 10px 40px;
 }
 
 .searchSuggestionTable {
   font: message-box;
   font-size: 16px;
 }
 
 /**
@@ -741,23 +758,45 @@ input[type=button] {
   line-height: 90px;
 }
 
 #newtab-intro-tile {
   width: 290px;
   height: 100%;
 }
 
-#newtab-intro-text {
+#newtab-intro-text,
+#newtab-intro-image {
   height: 100%;
   width: 270px;
   right: 0px;
   position: absolute;
   font-size: 14px;
   line-height: 20px;
+  margin-top: -12px;
+}
+
+#newtab-intro-image {
+  left: 0px;
+  right: auto;
+}
+
+.newtab-intro-image-tile {
+}
+
+.newtab-intro-image-customize {
+  display: block;
+  box-shadow: 3px 3px 5px #888;
+  margin: 0 !important;
+}
+
+.newtab-intro-image-customize .newtab-customize-panel-item:not([selected]):hover {
+  background-color: inherit;
+  color: #7A7A7A;
+  background: none;
 }
 
 #newtab-intro-text > p {
   margin: 0 0 1em 0;
 }
 
 #newtab-intro-text .newtab-control {
   background-size: 18px auto;
--- a/browser/themes/linux/jar.mn
+++ b/browser/themes/linux/jar.mn
@@ -141,16 +141,17 @@ browser.jar:
   skin/classic/browser/downloads/download-summary.png (downloads/download-summary.png)
   skin/classic/browser/downloads/downloads.css        (downloads/downloads.css)
   skin/classic/browser/feeds/feedIcon.png             (feeds/feedIcon.png)
   skin/classic/browser/feeds/feedIcon16.png           (feeds/feedIcon16.png)
   skin/classic/browser/feeds/subscribe.css            (feeds/subscribe.css)
   skin/classic/browser/feeds/subscribe-ui.css         (feeds/subscribe-ui.css)
 * skin/classic/browser/newtab/newTab.css              (newtab/newTab.css)
   skin/classic/browser/newtab/controls.svg            (../shared/newtab/controls.svg)
+  skin/classic/browser/newtab/whimsycorn.png          (../shared/newtab/whimsycorn.png)
   skin/classic/browser/panic-panel/header.png         (../shared/panic-panel/header.png)
   skin/classic/browser/panic-panel/header-small.png   (../shared/panic-panel/header-small.png)
   skin/classic/browser/panic-panel/icons.png          (../shared/panic-panel/icons.png)
   skin/classic/browser/places/bookmarksMenu.png       (places/bookmarksMenu.png)
   skin/classic/browser/places/bookmarksToolbar.png    (places/bookmarksToolbar.png)
   skin/classic/browser/places/bookmarksToolbar-menuPanel.png (places/bookmarksToolbar-menuPanel.png)
   skin/classic/browser/places/bookmarks-notification-finish.png  (places/bookmarks-notification-finish.png)
   skin/classic/browser/places/bookmarks-menu-arrow.png           (places/bookmarks-menu-arrow.png)
--- a/browser/themes/osx/jar.mn
+++ b/browser/themes/osx/jar.mn
@@ -226,16 +226,17 @@ browser.jar:
   skin/classic/browser/downloads/download-summary@2x.png    (downloads/download-summary@2x.png)
   skin/classic/browser/downloads/downloads.css              (downloads/downloads.css)
   skin/classic/browser/feeds/subscribe.css                  (feeds/subscribe.css)
   skin/classic/browser/feeds/subscribe-ui.css               (feeds/subscribe-ui.css)
   skin/classic/browser/feeds/feedIcon.png                   (feeds/feedIcon.png)
   skin/classic/browser/feeds/feedIcon16.png                 (feeds/feedIcon16.png)
 * skin/classic/browser/newtab/newTab.css                    (newtab/newTab.css)
   skin/classic/browser/newtab/controls.svg                  (../shared/newtab/controls.svg)
+  skin/classic/browser/newtab/whimsycorn.png                (../shared/newtab/whimsycorn.png)
   skin/classic/browser/setDesktopBackground.css
   skin/classic/browser/monitor.png
   skin/classic/browser/monitor_16-10.png
   skin/classic/browser/panic-panel/header.png               (../shared/panic-panel/header.png)
   skin/classic/browser/panic-panel/header@2x.png            (../shared/panic-panel/header@2x.png)
   skin/classic/browser/panic-panel/header-small.png         (../shared/panic-panel/header-small.png)
   skin/classic/browser/panic-panel/header-small@2x.png      (../shared/panic-panel/header-small@2x.png)
   skin/classic/browser/panic-panel/icons.png                (../shared/panic-panel/icons.png)
--- a/browser/themes/shared/newtab/newTab.inc.css
+++ b/browser/themes/shared/newtab/newTab.inc.css
@@ -82,17 +82,19 @@
 #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-cell,
+.newtab-intro-cell,
+.newtab-intro-cell-hover {
   background-color: rgba(255,255,255,.2);
   border-radius: 8px;
 }
 
 .newtab-cell:empty {
   outline: 2px dashed #c1c1c1;
   -moz-outline-radius: 8px;
 }
@@ -101,22 +103,29 @@
 .newtab-site {
   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-site:hover,
-.newtab-site[dragged] {
+.newtab-site[dragged],
+.newtab-intro-cell-hover {
   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: 6px;
--- a/browser/themes/windows/jar.mn
+++ b/browser/themes/windows/jar.mn
@@ -182,16 +182,17 @@ browser.jar:
         skin/classic/browser/feeds/feedIcon.png                      (feeds/feedIcon.png)
         skin/classic/browser/feeds/feedIcon16.png                    (feeds/feedIcon16.png)
         skin/classic/browser/feeds/feedIcon-XP.png                   (feeds/feedIcon-XP.png)
         skin/classic/browser/feeds/feedIcon16-XP.png                 (feeds/feedIcon16-XP.png)
         skin/classic/browser/feeds/subscribe.css                     (feeds/subscribe.css)
         skin/classic/browser/feeds/subscribe-ui.css                  (feeds/subscribe-ui.css)
 *       skin/classic/browser/newtab/newTab.css                       (newtab/newTab.css)
         skin/classic/browser/newtab/controls.svg                     (../shared/newtab/controls.svg)
+        skin/classic/browser/newtab/whimsycorn.png                   (../shared/newtab/whimsycorn.png)
         skin/classic/browser/panic-panel/header.png                  (../shared/panic-panel/header.png)
         skin/classic/browser/panic-panel/header-small.png            (../shared/panic-panel/header-small.png)
         skin/classic/browser/panic-panel/icons.png                   (../shared/panic-panel/icons.png)
         skin/classic/browser/places/places.css                       (places/places.css)
 *       skin/classic/browser/places/organizer.css                    (places/organizer.css)
         skin/classic/browser/places/bookmark.png                     (places/bookmark.png)
         skin/classic/browser/places/bookmark-XP.png                  (places/bookmark-XP.png)
         skin/classic/browser/places/query.png                        (places/query.png)