Bug 1158859 - Update newtab cog menu styling. r=adw
authorMarina Samuel <msamuel@mozilla.com>
Fri, 08 May 2015 11:54:23 -0700
changeset 274518 ff746c53035c410f63563d0795b798881e76994a
parent 274517 90bfa486922aabc91b1fd6e84c899ab3bdea7f92
child 274519 5b45e43dec405b2d8ea561e523011c4fcd4c695d
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
bugs1158859
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 1158859 - Update newtab cog menu styling. r=adw
browser/base/content/newtab/customize.js
browser/base/content/newtab/newTab.css
browser/base/content/newtab/newTab.xul
browser/base/content/test/newtab/browser_newtab_block.js
browser/base/content/test/newtab/browser_newtab_enhanced.js
browser/locales/en-US/chrome/browser/newTab.dtd
browser/themes/shared/newtab/newTab.inc.css
toolkit/themes/linux/global/jar.mn
toolkit/themes/osx/global/jar.mn
toolkit/themes/shared/menu-check-active.svg
toolkit/themes/shared/menu-check-black.svg
toolkit/themes/shared/menu-check-hover.svg
toolkit/themes/windows/global/jar.mn
--- a/browser/base/content/newtab/customize.js
+++ b/browser/base/content/newtab/customize.js
@@ -6,56 +6,84 @@
 
 let gCustomize = {
   _nodeIDSuffixes: [
     "blank",
     "button",
     "classic",
     "enhanced",
     "panel",
+    "overlay",
+    "learn"
   ],
 
   _nodes: {},
 
   init: function() {
     for (let idSuffix of this._nodeIDSuffixes) {
       this._nodes[idSuffix] = document.getElementById("newtab-customize-" + idSuffix);
     }
 
     this._nodes.button.addEventListener("click", e => this.showPanel());
     this._nodes.blank.addEventListener("click", e => {
       gAllPages.enabled = false;
     });
     this._nodes.classic.addEventListener("click", e => {
       gAllPages.enabled = true;
-      gAllPages.enhanced = false;
+
+      if (this._nodes.enhanced.getAttribute("selected")) {
+        gAllPages.enhanced = true;
+      } else {
+        gAllPages.enhanced = false;
+      }
     });
     this._nodes.enhanced.addEventListener("click", e => {
-      gAllPages.enabled = true;
-      gAllPages.enhanced = true;
+      if (!gAllPages.enabled) {
+        gAllPages.enabled = true;
+        return;
+      }
+      gAllPages.enhanced = !gAllPages.enhanced;
+    });
+    this._nodes.learn.addEventListener("click", e => {
+      window.open(TILES_INTRO_LINK,'new_window');
+      this._onHidden();
     });
 
     this.updateSelected();
   },
 
+  _onHidden: function() {
+    let nodes = gCustomize._nodes;
+    nodes.overlay.addEventListener("transitionend", function onTransitionEnd() {
+      nodes.overlay.removeEventListener("transitionend", onTransitionEnd);
+      nodes.overlay.style.display = "none";
+    });
+    nodes.overlay.style.opacity = 0;
+    nodes.panel.removeEventListener("popuphidden", gCustomize._onHidden);
+    nodes.panel.hidden = true;
+    nodes.button.removeAttribute("active");
+  },
+
   showPanel: function() {
+    this._nodes.overlay.style.display = "block";
+    setTimeout(() => {
+      // Wait for display update to take place, then animate.
+      this._nodes.overlay.style.opacity = 0.8;
+    }, 0);
+
     let nodes = this._nodes;
     let {button, panel} = nodes;
     if (button.hasAttribute("active")) {
       return Promise.resolve(nodes);
     }
 
     panel.hidden = false;
     panel.openPopup(button);
     button.setAttribute("active", true);
-    panel.addEventListener("popuphidden", function onHidden() {
-      panel.removeEventListener("popuphidden", onHidden);
-      panel.hidden = true;
-      button.removeAttribute("active");
-    });
+    panel.addEventListener("popuphidden", this._onHidden);
 
     return new Promise(resolve => {
       panel.addEventListener("popupshown", function onShown() {
         panel.removeEventListener("popupshown", onShown);
         resolve(nodes);
       });
     });
   },
@@ -67,10 +95,14 @@ let gCustomize = {
       let node = this._nodes[id];
       if (id == selected) {
         node.setAttribute("selected", true);
       }
       else {
         node.removeAttribute("selected");
       }
     });
+    if (selected == "enhanced") {
+      // If enhanced is selected, so is classic (since enhanced is a subitem of classic)
+      this._nodes.classic.setAttribute("selected", true);
+    }
   },
 };
--- a/browser/base/content/newtab/newTab.css
+++ b/browser/base/content/newtab/newTab.css
@@ -35,34 +35,35 @@ input[type=button] {
 #newtab-undo-container[undo-disabled] {
   opacity: 0;
   pointer-events: none;
 }
 
 /* CUSTOMIZE */
 #newtab-customize-button {
   position: absolute;
-  top: 6px;
-  right: 6px;
+  top: 10px;
+  right: 20px;
+  z-index: 101;
 }
 
 #newtab-customize-button:-moz-locale-dir(rtl) {
-  left: 6px;
+  left: 20px;
   right: auto;
 }
 
 #newtab-intro-what {
   cursor: pointer;
   position: absolute;
-  right: 55px;
-  top: 15px;
+  right: 70px;
+  top: 20px;
 }
 
 #newtab-intro-what:-moz-locale-dir(rtl) {
-  left: 55px;
+  left: 70px;
   right: auto;
 }
 
 #newtab-scrollbox[page-disabled] #newtab-intro-what {
   display: none;
 }
 
 #newtab-intro-panel {
@@ -482,59 +483,144 @@ input[type=button] {
 }
 
 #newtab-search-text + #newtab-search-submit:hover:active {
   box-shadow: 0 1px 1px hsla(211,79%,6%,.1) inset,
               0 0 1px hsla(211,79%,6%,.2) inset;
   transition-duration: 0ms;
 }
 
+#newtab-customize-overlay {
+  opacity: 0;
+  display: none;
+  width: 100%;
+  height: 100%;
+  background: #F9F9F9;
+  z-index: 100;
+  position: fixed;
+  transition: opacity .07s linear;
+}
+
+#newtab-customize-panel {
+  z-index: 101;
+  margin-top: -5px;
+  min-width: 270px;
+}
+
+#newtab-customize-title {
+  color: #7A7A7A;
+  font-size: 14px;
+  background-color: #FFFFFF;
+  height: 52px;
+  line-height: 52px;
+  padding-left: 15px;
+  font-weight: 600;
+  text-transform: uppercase;
+  cursor: default;
+  border-radius: 5px 5px 0px 0px;
+}
+
+#newtab-customize-title > label {
+  cursor: default;
+}
+
 #newtab-customize-panel > .panel-arrowcontainer > .panel-arrowcontent,
 #newtab-search-panel > .panel-arrowcontainer > .panel-arrowcontent {
   padding: 0;
 }
 
 .newtab-customize-panel-item,
 .newtab-search-panel-engine,
 #newtab-search-manage {
-  padding: 10px 10px 10px 25px;
+  line-height: 54px;
+  padding-left: 40px;
+  font-size: 14px;
+  cursor: pointer;
 }
 
 .newtab-customize-panel-item:not(:last-child),
 .newtab-search-panel-engine {
   border-bottom: 1px solid threedshadow;
 }
 
 .newtab-search-panel-engine > image {
   -moz-margin-end: 8px;
   width: 16px;
   height: 16px;
   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
 }
 
+.newtab-customize-panel-subitem > label,
 .newtab-customize-panel-item > label,
 .newtab-search-panel-engine > label,
-#newtab-search-manage > label {
+#newtab-search-manage > label,
+.newtab-customize-complex-option {
   padding: 0;
   margin: 0;
+  cursor: pointer;
+}
+
+.newtab-customize-panel-item:not([selected]),
+.newtab-customize-panel-subitem:not([selected]){
+  color: #7A7A7A;
 }
 
-.newtab-customize-panel-item:not([selected]) {
-  color: #919191;
+.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;
+  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.png") center left 4px no-repeat transparent;
+  background: url("chrome://global/skin/menu/shared-menu-check-active.svg") no-repeat transparent;
   background-size: 16px 16px;
+  background-position: 15px 20px;
+  color: black;
+  font-weight: 600;
+}
+
+.newtab-customize-panel-subitem > .checkbox {
+  width: 18px;
+  height: 18px;
+  background-color: #FFFFFF;
+  border: solid 1px threedshadow;
 }
 
-@media (min-resolution: 2dppx) {
-  .newtab-customize-panel-item[selected],
-  .newtab-search-panel-engine[selected] {
-    background-image: url("chrome://global/skin/menu/shared-menu-check@2x.png");
-  }
+.newtab-customize-panel-subitem[selected] > .checkbox {
+  background: url("chrome://global/skin/menu/shared-menu-check-black.svg") no-repeat #FFFFFF;
+  background-size: 9px 9px;
+  background-position: center;
+  color: #333333;
+}
+
+.newtab-customize-panel-subitem {
+  font-size: 12px;
+  padding-left: 40px;
+  padding-bottom: 20px;
+  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;
 }
 
 .searchSuggestionTable {
   font: message-box;
   font-size: 16px;
 }
--- a/browser/base/content/newtab/newTab.xul
+++ b/browser/base/content/newtab/newTab.xul
@@ -17,38 +17,49 @@
   <!ENTITY % browserDTD SYSTEM "chrome://browser/locale/browser.dtd">
   %browserDTD;
 ]>
 
 <xul:window id="newtab-window" xmlns="http://www.w3.org/1999/xhtml"
             xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
             title="&newtab.pageTitle;">
 
+  <div id="newtab-customize-overlay"></div>
+
   <xul:panel id="newtab-intro-panel" orient="vertical" type="arrow"
              noautohide="true" hidden="true">
     <h1>&newtab.intro.header;</h1>
   </xul:panel>
 
   <xul:panel id="newtab-search-panel" orient="vertical" type="arrow"
              noautohide="true" hidden="true">
     <xul:hbox id="newtab-search-manage">
       <xul:label>&changeSearchSettings.button;</xul:label>
     </xul:hbox>
   </xul:panel>
 
   <xul:panel id="newtab-customize-panel" orient="vertical" type="arrow"
              noautohide="true" hidden="true">
-    <xul:hbox id="newtab-customize-enhanced" class="newtab-customize-panel-item">
-      <xul:label>&newtab.customize.suggested;</xul:label>
+    <xul:hbox id="newtab-customize-title" class="newtab-customize-panel-item">
+      <xul:label>&newtab.customize.cog.title;</xul:label>
     </xul:hbox>
-    <xul:hbox id="newtab-customize-classic" class="newtab-customize-panel-item">
-      <xul:label>&newtab.customize.topsites;</xul:label>
+    <xul:vbox class="newtab-customize-complex-option">
+      <xul:hbox id="newtab-customize-classic" class="newtab-customize-panel-superitem newtab-customize-panel-item selectable">
+        <xul:label>&newtab.customize.classic;</xul:label>
+      </xul:hbox>
+      <xul:hbox id="newtab-customize-enhanced" class="newtab-customize-panel-subitem">
+        <xul:label class="checkbox"></xul:label>
+        <xul:label>&newtab.customize.cog.enhanced;</xul:label>
+      </xul:hbox>
+    </xul:vbox>
+    <xul:hbox id="newtab-customize-blank" class="newtab-customize-panel-item selectable">
+      <xul:label>&newtab.customize.blank2;</xul:label>
     </xul:hbox>
-    <xul:hbox id="newtab-customize-blank" class="newtab-customize-panel-item">
-      <xul:label>&newtab.customize.blank2;</xul:label>
+    <xul:hbox id="newtab-customize-learn" class="newtab-customize-panel-item">
+      <xul:label>&newtab.customize.cog.learn;</xul:label>
     </xul:hbox>
   </xul:panel>
 
   <div id="newtab-scrollbox">
 
     <div id="newtab-vertical-margin">
 
       <div id="newtab-margin-top"/>
--- a/browser/base/content/test/newtab/browser_newtab_block.js
+++ b/browser/base/content/test/newtab/browser_newtab_block.js
@@ -24,16 +24,17 @@ function runTests() {
   NewTabUtils.isTopPlacesSite = (site) => false;
 
   // we remove sites and expect the gaps to be filled as long as there still
   // are some sites available
   yield setLinks("0,1,2,3,4,5,6,7,8,9");
   setPinnedLinks("");
 
   yield addNewTabPageTab();
+  yield customizeNewTabPage("enhanced"); // Toggle enhanced off
   checkGrid("0,1,2,3,4,5,6,7,8");
 
   yield blockCell(4);
   checkGrid("0,1,2,3,5,6,7,8,9");
 
   yield blockCell(4);
   checkGrid("0,1,2,3,6,7,8,9,");
 
@@ -74,17 +75,17 @@ function runTests() {
 
   yield blockCell(0);
   checkGrid("1,2,3,4,5,6,7,9,8p");
 
   // Test that blocking the targeted site also removes its associated suggested tile
   NewTabUtils.isTopPlacesSite = origIsTopPlacesSite;
   yield restore();
   yield setLinks("0,1,2,3,4,5,6,7,8,9");
+  yield customizeNewTabPage("enhanced"); // Toggle enhanced on
   yield addNewTabPageTab();
-  yield customizeNewTabPage("enhanced");
   checkGrid("http://suggested.com/,0,1,2,3,4,5,6,7,8,9");
 
   yield blockCell(1);
   yield addNewTabPageTab();
   checkGrid("1,2,3,4,5,6,7,8,9");
   DirectoryLinksProvider.getFrecentSitesName = origGetFrecentSitesName;
 }
--- a/browser/base/content/test/newtab/browser_newtab_enhanced.js
+++ b/browser/base/content/test/newtab/browser_newtab_enhanced.js
@@ -50,26 +50,27 @@ function runTests() {
   }
 
   // Make the page have a directory link, enhanced link, and history link
   yield setLinks("-1");
 
   // Test with enhanced = false
   yield addNewTabPageTab();
   yield customizeNewTabPage("classic");
+  yield customizeNewTabPage("enhanced"); // Toggle enhanced off
   let {type, enhanced, title} = getData(0);
   isnot(type, "enhanced", "history link is not enhanced");
   is(enhanced, "", "history link has no enhanced image");
   is(title, "example.com");
 
   is(getData(1), null, "there is only one link and it's a history link");
 
   // Test with enhanced = true
   yield addNewTabPageTab();
-  yield customizeNewTabPage("enhanced");
+  yield customizeNewTabPage("enhanced"); // Toggle enhanced on
   ({type, enhanced, title} = getData(0));
   is(type, "organic", "directory link is organic");
   isnot(enhanced, "", "directory link has enhanced image");
   is(title, "title1");
 
   ({type, enhanced, title} = getData(1));
   is(type, "enhanced", "history link is enhanced");
   isnot(enhanced, "", "history link has enhanced image");
@@ -89,17 +90,17 @@ function runTests() {
   is(type, "organic", "directory link is organic");
   isnot(enhanced, "", "directory link has enhanced image");
   is(title, "title1");
 
   is(getData(2), null, "directory link pushed out by pinned history link");
 
   // Test pinned link with enhanced = false
   yield addNewTabPageTab();
-  yield customizeNewTabPage("classic");
+  yield customizeNewTabPage("enhanced"); // Toggle enhanced off
   ({type, enhanced, title} = getData(0));
   isnot(type, "enhanced", "history link is not enhanced");
   is(enhanced, "", "history link has no enhanced image");
   is(title, "example.com");
 
   is(getData(1), null, "directory link still pushed out by pinned history link");
 
   ok(getContentDocument().getElementById("newtab-intro-what"),
@@ -111,17 +112,16 @@ function runTests() {
 
   // Test that a suggested tile is not enhanced by a directory tile
   let origIsTopPlacesSite = NewTabUtils.isTopPlacesSite;
   NewTabUtils.isTopPlacesSite = () => true;
   yield setLinks("-1,2,3,4,5,6,7,8");
 
   // Test with enhanced = false
   yield addNewTabPageTab();
-  yield customizeNewTabPage("classic");
   ({type, enhanced, title} = getData(0));
   isnot(type, "enhanced", "history link is not enhanced");
   is(enhanced, "", "history link has no enhanced image");
   is(title, "example.com");
 
   isnot(getData(7), null, "there are 8 history links");
   is(getData(8), null, "there are 8 history links");
 
--- a/browser/locales/en-US/chrome/browser/newTab.dtd
+++ b/browser/locales/en-US/chrome/browser/newTab.dtd
@@ -1,14 +1,18 @@
 <!-- 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/. -->
 
 <!-- These strings are used in the about:newtab page -->
 <!ENTITY newtab.pageTitle "New Tab">
+<!ENTITY newtab.customize.classic "Show your top sites">
+<!ENTITY newtab.customize.cog.enhanced "Include suggested sites">
+<!ENTITY newtab.customize.cog.title "New Tab Controls">
+<!ENTITY newtab.customize.cog.learn "Learn about New Tab">
 <!ENTITY newtab.customize.title "Customize your New Tab page">
 <!ENTITY newtab.customize.suggested "Show suggested and your top sites">
 <!ENTITY newtab.customize.topsites "Show your top sites">
 <!ENTITY newtab.customize.blank2 "Show blank page">
 <!ENTITY newtab.customize.what "What is this page?">
 <!ENTITY newtab.intro.header "What is this page?">
 <!ENTITY newtab.undo.removedLabel "Thumbnail removed.">
 <!ENTITY newtab.undo.undoButton "Undo.">
--- a/browser/themes/shared/newtab/newTab.inc.css
+++ b/browser/themes/shared/newtab/newTab.inc.css
@@ -59,26 +59,36 @@
 
 #newtab-undo-close-button:-moz-focusring {
   outline: 1px dotted;
 }
 
 /* CUSTOMIZE */
 #newtab-customize-button,
 .newtab-customize {
-  background-color: transparent;
   background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 32, 32, 0);
   background-size: 28px;
+  height: 38px;
+  width: 38px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-color: transparent;
   border: none;
+}
+
+.newtab-customize {
   height: 28px;
   width: 28px;
 }
 
 #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 {
   background-color: rgba(255,255,255,.2);
   border-radius: 8px;
 }
 
--- a/toolkit/themes/linux/global/jar.mn
+++ b/toolkit/themes/linux/global/jar.mn
@@ -50,16 +50,19 @@ toolkit.jar:
 +  skin/classic/global/icons/panelarrow-horizontal.svg         (icons/panelarrow-horizontal.svg)
 +  skin/classic/global/icons/panelarrow-vertical.svg           (icons/panelarrow-vertical.svg)
 +  skin/classic/global/icons/resizer.png                       (icons/resizer.png)
 +  skin/classic/global/icons/sslWarning.png                    (icons/sslWarning.png)
 +  skin/classic/global/icons/warning.svg                       (../../shared/incontent-icons/warning.svg)
 +  skin/classic/global/icons/webapps-16.png                    (icons/webapps-16.png)
 +  skin/classic/global/icons/webapps-64.png                    (icons/webapps-64.png)
    skin/classic/global/menu/shared-menu-check.png              (../../shared/menu-check.png)
+   skin/classic/global/menu/shared-menu-check-active.svg       (../../shared/menu-check-active.svg)
+   skin/classic/global/menu/shared-menu-check-black.svg        (../../shared/menu-check-black.svg)
+   skin/classic/global/menu/shared-menu-check-hover.svg        (../../shared/menu-check-hover.svg)
 *  skin/classic/global/in-content/common.css                   (in-content/common.css)
 *  skin/classic/global/in-content/info-pages.css               (in-content/info-pages.css)
    skin/classic/global/in-content/check.svg                    (../../shared/in-content/check.svg)
    skin/classic/global/in-content/check-partial.svg            (../../shared/in-content/check-partial.svg)
    skin/classic/global/in-content/dropdown.svg                 (../../shared/in-content/dropdown.svg)
    skin/classic/global/in-content/help-glyph.svg               (../../shared/in-content/help-glyph.svg)
    skin/classic/global/in-content/radio.svg                    (../../shared/in-content/radio.svg)
 +  skin/classic/global/toolbar/spring.png                      (toolbar/spring.png)
--- a/toolkit/themes/osx/global/jar.mn
+++ b/toolkit/themes/osx/global/jar.mn
@@ -180,16 +180,19 @@ toolkit.jar:
   skin/classic/global/media/volume-empty.png                         (media/volume-empty.png)
   skin/classic/global/media/volume-empty@2x.png                      (media/volume-empty@2x.png)
   skin/classic/global/media/volume-full.png                          (media/volume-full.png)
   skin/classic/global/media/volume-full@2x.png                       (media/volume-full@2x.png)
   skin/classic/global/media/clicktoplay-bgtexture.png                (media/clicktoplay-bgtexture.png)
   skin/classic/global/media/videoClickToPlayButton.svg               (media/videoClickToPlayButton.svg)
   skin/classic/global/menu/shared-menu-check.png                     (../../shared/menu-check.png)
   skin/classic/global/menu/shared-menu-check@2x.png                  (../../shared/menu-check@2x.png)
+  skin/classic/global/menu/shared-menu-check-active.svg              (../../shared/menu-check-active.svg)
+  skin/classic/global/menu/shared-menu-check-black.svg               (../../shared/menu-check-black.svg)
+  skin/classic/global/menu/shared-menu-check-hover.svg               (../../shared/menu-check-hover.svg)
 * skin/classic/global/in-content/common.css                          (in-content/common.css)
 * skin/classic/global/in-content/info-pages.css                      (in-content/info-pages.css)
   skin/classic/global/in-content/check.svg                           (../../shared/in-content/check.svg)
   skin/classic/global/in-content/check-partial.svg                   (../../shared/in-content/check-partial.svg)
   skin/classic/global/in-content/dropdown.svg                        (../../shared/in-content/dropdown.svg)
   skin/classic/global/in-content/help-glyph.svg                      (../../shared/in-content/help-glyph.svg)
   skin/classic/global/in-content/radio.svg                           (../../shared/in-content/radio.svg)
   skin/classic/global/reader/RM-Add-24x24.svg                        (../../shared/reader/RM-Add-24x24.svg)
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/shared/menu-check-active.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
+<polygon fill="#4A90E2" points="7.1,15.5 0.5,10.8 2.2,8.3 6.3,11.2 13,0.5 15.5,2.2 "/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/shared/menu-check-black.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 9 9" enable-background="new 0 0 9 9" xml:space="preserve">
+<polygon points="4,9 0,6.2 1,4.7 3.5,6.4 7.5,0 9,1 "/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/shared/menu-check-hover.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 9 9" enable-background="new 0 0 9 9" xml:space="preserve">
+<polygon fill="#CCCCCC" points="4,9 0,6.2 1,4.7 3.5,6.4 7.5,0 9,1 "/>
+</svg>
--- a/toolkit/themes/windows/global/jar.mn
+++ b/toolkit/themes/windows/global/jar.mn
@@ -155,16 +155,19 @@ toolkit.jar:
         skin/classic/global/media/throbber.png                   (media/throbber.png)
         skin/classic/global/media/stalled.png                    (media/stalled.png)
         skin/classic/global/media/volume-empty.png               (media/volume-empty.png)
         skin/classic/global/media/volume-full.png                (media/volume-full.png)
         skin/classic/global/media/error.png                      (media/error.png)
         skin/classic/global/media/clicktoplay-bgtexture.png      (media/clicktoplay-bgtexture.png)
         skin/classic/global/media/videoClickToPlayButton.svg     (media/videoClickToPlayButton.svg)
         skin/classic/global/menu/shared-menu-check.png           (../../shared/menu-check.png)
+        skin/classic/global/menu/shared-menu-check-active.svg    (../../shared/menu-check-active.svg)
+        skin/classic/global/menu/shared-menu-check-black.svg     (../../shared/menu-check-black.svg)
+        skin/classic/global/menu/shared-menu-check-hover.svg     (../../shared/menu-check-hover.svg)
 *       skin/classic/global/in-content/common.css                (in-content/common.css)
 *       skin/classic/global/in-content/info-pages.css            (in-content/info-pages.css)
         skin/classic/global/in-content/check.svg                 (../../shared/in-content/check.svg)
         skin/classic/global/in-content/check-partial.svg         (../../shared/in-content/check-partial.svg)
         skin/classic/global/in-content/dropdown.svg              (../../shared/in-content/dropdown.svg)
         skin/classic/global/in-content/help-glyph.svg            (../../shared/in-content/help-glyph.svg)
         skin/classic/global/in-content/radio.svg                 (../../shared/in-content/radio.svg)
         skin/classic/global/printpreview/arrow-left.png          (printpreview/arrow-left.png)