ntp4: some appearance fixes

1. make drag-over state match hover state for page switchers and nav dots
2. make recently closed text and arrow a hardcoded color (looks fine on a variety of themes; matches nav dot text)
3. don't show pulse for right click on apps

BUG=none
TEST=manual

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

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

chrome/browser/resources/ntp4/apps_page.css

@@ -9,7 +9,7 @@
   -webkit-transition: -webkit-transform 0.1s;
 }
 
-.app:active,
+.app:active:not(.right-mouse-down),
 .dragging .app,
 .drag-representation .app {
   /* Don't animate the initial scaling.  */
@@ -17,6 +17,12 @@
   -webkit-transform: scale(1.1);
 }
 
+/* Active gets applied right before .right-mouse-down, so to avoid flicker
+ * we need to make the scale go back to normal without an animation. */
+.app.right-mouse-down {
+  -webkit-transition-duration: 0;
+}
+
 .app-contents > span {
   cursor: pointer;
   display: block;

chrome/browser/resources/ntp4/apps_page.js

@@ -227,6 +227,8 @@ cr.define('ntp4', function() {
       this.isStore_ = this.appData_.is_webstore;
       if (this.isStore_)
         this.createAppsPromoExtras_();
+
+      this.addEventListener('mousedown', this.onMousedown_, true);
     },
 
     /**
@@ -331,6 +333,19 @@ cr.define('ntp4', function() {
       e.preventDefault();
     },
 
+    /**
+     * Handler for mousedown on the App. Adds a class that allows us to
+     * not display as :active for right clicks (specifically, don't pulse
+     * on right click).
+     * @param {Event} e The mousedown event.
+     */
+    onMousedown_: function(e) {
+      if (e.button == 2)
+        this.classList.add('right-mouse-down');
+      else
+        this.classList.remove('right-mouse-down');
+    },
+
     /**
      * The data and preferences for this app.
      * @type {Object}

chrome/browser/resources/ntp4/drag_wrapper.js

@@ -38,7 +38,7 @@ var DragWrapper = (function() {
      * is incremented by |onDragEnter_| and decremented by |onDragLeave_|. This
      * is necessary because dragging over child widgets will fire additional
      * enter and leave events on |this|. A non-zero value does not necessarily
-     * indicate that |isCurrentDragTarget_| is true.
+     * indicate that |isCurrentDragTarget()| is true.
      * @type {number}
      * @private
      */
@@ -48,11 +48,9 @@ var DragWrapper = (function() {
      * Whether the tile page is currently being dragged over with data it can
      * accept.
      * @type {boolean}
-     * @private
      */
-    isCurrentDragTarget_: false,
     get isCurrentDragTarget() {
-      return this.isCurrentDragTarget_;
+      return this.target_.classList.contains('drag-target');
     },
 
     /**
@@ -63,7 +61,7 @@ var DragWrapper = (function() {
     onDragEnter_: function(e) {
       if (++this.dragEnters_ == 1) {
         if (this.handler_.shouldAcceptDrag(e)) {
-          this.isCurrentDragTarget_ = true;
+          this.target_.classList.add('drag-target');
           this.handler_.doDragEnter(e);
         }
       } else {
@@ -82,7 +80,7 @@ var DragWrapper = (function() {
      * @private
      */
     onDragOver_: function(e) {
-      if (!this.isCurrentDragTarget_)
+      if (!this.target_.classList.contains('drag-target'))
         return;
       this.handler_.doDragOver(e);
     },
@@ -94,9 +92,9 @@ var DragWrapper = (function() {
      */
     onDrop_: function(e) {
       this.dragEnters_ = 0;
-      if (!this.isCurrentDragTarget_)
+      if (!this.target_.classList.contains('drag-target'))
         return;
-      this.isCurrentDragTarget_ = false;
+      this.target_.classList.remove('drag-target');
       this.handler_.doDrop(e);
     },
 
@@ -109,7 +107,7 @@ var DragWrapper = (function() {
       if (--this.dragEnters_ > 0)
         return;
 
-      this.isCurrentDragTarget_ = false;
+      this.target_.classList.remove('drag-target');
       this.handler_.doDragLeave();
     },
   };

chrome/browser/resources/ntp4/nav_dot.css

@@ -73,7 +73,9 @@
   color: #7f7f7f;
 }
 
-.dot:focus .selection-bar, .dot:hover .selection-bar {
+.dot:focus .selection-bar,
+.dot:hover .selection-bar,
+.dot.drag-target .selection-bar {
   border-color: #b2b2b2;
 }
 

chrome/browser/resources/ntp4/new_tab.css

@@ -218,6 +218,7 @@ html[dir='rtl'] #attribution {
   -webkit-transition: width 150ms, right 150ms, background-color 150ms;
 }
 
-.page-switcher:hover {
+.page-switcher:hover,
+.page-switcher.drag-target {
   background-color: rgba(0, 0, 0, 0.2);
 }

chrome/browser/resources/ntp4/new_tab_theme.css

@@ -30,12 +30,6 @@ body {
   color: $8; /* COLOR_NTP_TEXT */
 }
 
-.app:hover > a,
-.app.dragging > a {
-  color: $12; /* COLOR_NTP_SECTION_TEXT */
-  background-color: $10; /* COLOR_NTP_SECTION */;
-}
-
 .tile-page-scrollbar {
   background-color: $21; /* COLOR_NTP_TEXT_LIGHT */
 }
@@ -54,15 +48,6 @@ body {
   background-color: $2; /* COLOR_NTP_BACKGROUND */
 }
 
-.tile-page-title,
-#footer-content span {
-  color: $21; /* COLOR_NTP_TEXT_LIGHT */
-}
-
-.disclosure-triangle {
-  background-color: $8 /* COLOR_NTP_TEXT */
-}
-
 /* Bookmarks ******************************************************************/
 
 .bookmark,

chrome/browser/resources/ntp4/recently_closed.css

@@ -6,6 +6,7 @@
 #recently-closed-menu-button {
   background: none;
   border: 0;
+  color: #7F7F7F;
   display: block;
   font-size: 9pt;
   font-weight: bold;
@@ -65,6 +66,7 @@ html[dir='rtl'] .recent-menu-item {
 }
 
 .disclosure-triangle {
+  background-color: #7F7F7F;
   display: inline-block;
   height: 9px;
   width: 9px;