NNTP: Use checkbox menu items in the options menu to control which sections to show.

I also changed to use black text on white for the menu.

BUG=None

TEST=Hide and show the different sections on new tab page and makes
sure that the checkbox is correctly synced with the state.

Review URL: http://codereview.chromium.org/174035

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@23750 0039d316-1c4b-4281-b951-d872f2087c98

3 files changed, 37 insertions, 16 deletions

diff --git a/chrome/browser/resources/new_new_tab.css b/chrome/browser/resources/new_new_tab.css
index 6fab207..c2ce487 100644
--- a/chrome/browser/resources/new_new_tab.css
+++ b/chrome/browser/resources/new_new_tab.css
@@ -415,11 +415,11 @@ html[dir='rtl'] .item {
 }
 
 .window-menu {
-  color: rgb(75, 140, 220);
   position: absolute;
   display: none;
   border: 1px solid #999;
   -webkit-box-shadow: 2px 2px 3px hsla(0, 0%, 0%, .3);
+  color: black;
   background-color: hsla(213, 0%, 100%, .95);
   left: 0;
   white-space: nowrap;
@@ -631,6 +631,28 @@ html[dir='rtl'] #option-menu {
   color: white;
 }
 
+#option-menu > [command='show']:before,
+#option-menu > [command='hide']:before {
+  display: inline-block;
+  width: 12px;
+  content: '\00a0'; /* non breaking space */
+  background-position: 0 50%;
+  background-repeat: no-repeat;
+}
+
+html[dir='rtl'] #option-menu > [command='show']:before,
+html[dir='rtl'] #option-menu > [command='hide']:before {
+  background-position-x: 100%;
+}
+
+#option-menu > [command='hide']:before {
+  background-image: url(chrome://theme/newtab_checkbox_black);
+}
+
+#option-menu > [selected][command='hide']:before {
+  background-image: url(chrome://theme/newtab_checkbox_white);
+}
+
 /* Hard code thumbnail positions to improve initial layout speed */
 #t0, #t4,
 html[dir='rtl'] #t3,
diff --git a/chrome/browser/resources/new_new_tab.html b/chrome/browser/resources/new_new_tab.html
index e6ae26a..be546a0 100644
--- a/chrome/browser/resources/new_new_tab.html
+++ b/chrome/browser/resources/new_new_tab.html
@@ -69,16 +69,8 @@ document.write('<link id="themecss" rel="stylesheet" ' +
               i18n-values="title:pagedisplaytooltip"></div>
 
   <div id="option-menu" class="window-menu">
-    <div command="show" section="THUMB" i18n-content="showthumbnails"
-         style="display:none"></div>
-    <div command="hide" section="THUMB" i18n-content="hidethumbnails"></div>
-    <div command="show" section="LIST" i18n-content="showlist"></div>
-    <div command="hide" section="LIST" i18n-content="hidelist"
-         style="display:none"></div>
-    <div command="show" section="RECENT" i18n-content="showrecentlyclosedtabs"
-         style="display:none"></div>
-    <div command="hide" section="RECENT"
-         i18n-content="hiderecentlyclosedtabs"></div>
+    <div command="hide" section="THUMB" i18n-content="mostvisited"></div>
+    <div command="hide" section="RECENT" i18n-content="recentlyclosed"></div>
     <hr>
     <div command="clear-all-blacklisted"
          i18n-content="restorethumbnails"></div>
diff --git a/chrome/browser/resources/new_new_tab.js b/chrome/browser/resources/new_new_tab.js
index a9579b1..d82976a 100644
--- a/chrome/browser/resources/new_new_tab.js
+++ b/chrome/browser/resources/new_new_tab.js
@@ -832,11 +832,19 @@ function updateOptionMenu() {
     var item = menuItems[i];
     var command = item.getAttribute('command');
     if (command == 'show' || command == 'hide') {
-      var show = command == 'show';
       var section = Section[item.getAttribute('section')];
-      // Hide show items if already shown. Hide hide items if already hidden.
-      var hideMenuItem = show == !!(shownSections & section);
-      item.style.display = hideMenuItem ? 'none' : '';
+      var visible;
+      if (section == Section.THUMB || section == Section.LIST) {
+        visible = shownSections & Section.THUMB || shownSections & Section.LIST;
+        // If visible we need to make sure we are hiding the visible section.
+        if (visible) {
+          item.setAttribute('section',
+                            shownSections & Section.THUMB ? 'THUMB' : 'LIST');
+        }
+      } else {
+        visible = shownSections & section;
+      }
+      item.setAttribute('command', visible ? 'hide' : 'show');
     }
   }
 }
@@ -1465,7 +1473,6 @@ var dnd = {
         mostVisited.layout();
         self.dragItem = null;
       }, 10);
-
     }
   },