ntp: round some pixel values that are set by javascript

this reduces the number of subpixel display errors

BUG=130112
TEST=the most visited page tile borders are normal (i.e. exactly 1 px) more often

Review URL: https://chromiumcodereview.appspot.com/10444068

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

5 files changed, 42 insertions, 26 deletions

diff --git a/chrome/browser/resources/ntp4/apps_page.js b/chrome/browser/resources/ntp4/apps_page.js
index c17b9cb..6a41162 100644
--- a/chrome/browser/resources/ntp4/apps_page.js
+++ b/chrome/browser/resources/ntp4/apps_page.js
@@ -439,7 +439,7 @@ cr.define('ntp', function() {
     setBounds: function(size, x, y) {
       var imgSize = size * APP_IMG_SIZE_FRACTION;
       this.appImgContainer_.style.width = this.appImgContainer_.style.height =
-          this.useSmallIcon_ ? '16px' : imgSize + 'px';
+          toCssPx(this.useSmallIcon_ ? 16 : imgSize);
       if (this.useSmallIcon_) {
         // 3/4 is the ratio of 96px to 128px (the used height and full height
         // of icons in apps).
@@ -447,16 +447,16 @@ cr.define('ntp', function() {
         // The -2 is for the div border to improve the visual alignment for the
         // icon div.
         this.imgDiv_.style.width = this.imgDiv_.style.height =
-            (iconSize - 2) + 'px';
+            toCssPx(iconSize - 2);
         // Margins set to get the icon placement right and the text to line up.
         this.imgDiv_.style.marginTop = this.imgDiv_.style.marginBottom =
-            ((imgSize - iconSize) / 2) + 'px';
+            toCssPx((imgSize - iconSize) / 2);
       }
 
-      this.style.width = this.style.height = size + 'px';
-      this.style.left = x + 'px';
-      this.style.right = x + 'px';
-      this.style.top = y + 'px';
+      this.style.width = this.style.height = toCssPx(size);
+      this.style.left = toCssPx(x);
+      this.style.right = toCssPx(x);
+      this.style.top = toCssPx(y);
 
       if (this.currentBubbleShowing_)
         this.currentBubbleShowing_.resizeAndReposition();
diff --git a/chrome/browser/resources/ntp4/most_visited_page.js b/chrome/browser/resources/ntp4/most_visited_page.js
index 297067a..8b005b9 100644
--- a/chrome/browser/resources/ntp4/most_visited_page.js
+++ b/chrome/browser/resources/ntp4/most_visited_page.js
@@ -200,12 +200,12 @@ cr.define('ntp', function() {
      *     animate.
      */
     setBounds: function(size, x, y) {
-      this.style.width = size + 'px';
-      this.style.height = heightForWidth(size) + 'px';
+      this.style.width = toCssPx(size);
+      this.style.height = toCssPx(heightForWidth(size));
 
-      this.style.left = x + 'px';
-      this.style.right = x + 'px';
-      this.style.top = y + 'px';
+      this.style.left = toCssPx(x);
+      this.style.right = toCssPx(x);
+      this.style.top = toCssPx(y);
     },
 
     /**
diff --git a/chrome/browser/resources/ntp4/new_tab.js b/chrome/browser/resources/ntp4/new_tab.js
index 4c9986c..f51cc1c 100644
--- a/chrome/browser/resources/ntp4/new_tab.js
+++ b/chrome/browser/resources/ntp4/new_tab.js
@@ -612,3 +612,5 @@ cr.define('ntp', function() {
 });
 
 document.addEventListener('DOMContentLoaded', ntp.onLoad);
+
+var toCssPx = cr.ui.toCssPx;
diff --git a/chrome/browser/resources/ntp4/tile_page.js b/chrome/browser/resources/ntp4/tile_page.js
index 0b14833..33baa7f 100644
--- a/chrome/browser/resources/ntp4/tile_page.js
+++ b/chrome/browser/resources/ntp4/tile_page.js
@@ -92,9 +92,9 @@ cr.define('ntp', function() {
      */
     moveTo: function(x, y) {
       // left overrides right in LTR, and right takes precedence in RTL.
-      this.style.left = x + 'px';
-      this.style.right = x + 'px';
-      this.style.top = y + 'px';
+      this.style.left = toCssPx(x);
+      this.style.right = toCssPx(x);
+      this.style.top = toCssPx(y);
     },
 
     /**
@@ -148,8 +148,8 @@ cr.define('ntp', function() {
       }
 
       this.dragClone.hidden = false;
-      this.dragClone.style.left = (e.x - this.dragOffsetX) + 'px';
-      this.dragClone.style.top = (e.y - this.dragOffsetY) + 'px';
+      this.dragClone.style.left = toCssPx(e.x - this.dragOffsetX);
+      this.dragClone.style.top = toCssPx(e.y - this.dragOffsetY);
     },
 
     /**
@@ -184,11 +184,13 @@ cr.define('ntp', function() {
               this.firstChild.offsetLeft;
           var contentDiffY = this.dragClone.firstChild.offsetTop -
               this.firstChild.offsetTop;
-          this.dragClone.style.left = (this.gridX + this.parentNode.offsetLeft -
-              contentDiffX) + 'px';
+          this.dragClone.style.left =
+              toCssPx(this.gridX + this.parentNode.offsetLeft -
+                         contentDiffX);
           this.dragClone.style.top =
-              (this.gridY + this.parentNode.getBoundingClientRect().top -
-              contentDiffY) + 'px';
+              toCssPx(this.gridY +
+                         this.parentNode.getBoundingClientRect().top -
+                         contentDiffY);
         } else if (this.dragClone.hidden) {
           this.finalizeDrag_();
         } else {
@@ -1006,14 +1008,13 @@ cr.define('ntp', function() {
         this.topMarginIsForWide_ = layout.wide;
       if (this.topMarginIsForWide_ != layout.wide) {
         this.animatedTopMarginPx_ += newMargin - this.topMarginPx_;
-        this.topMargin_.style.marginBottom =
-            this.animatedTopMarginPx_ + 'px';
+        this.topMargin_.style.marginBottom = toCssPx(this.animatedTopMarginPx_);
       }
 
       this.topMarginIsForWide_ = layout.wide;
       this.topMarginPx_ = newMargin;
       this.topMargin_.style.marginTop =
-          (this.topMarginPx_ - this.animatedTopMarginPx_) + 'px';
+          toCssPx(this.topMarginPx_ - this.animatedTopMarginPx_);
     },
 
     /**
diff --git a/chrome/browser/resources/shared/js/cr/ui.js b/chrome/browser/resources/shared/js/cr/ui.js
index ea286b2..409b443 100644
--- a/chrome/browser/resources/shared/js/cr/ui.js
+++ b/chrome/browser/resources/shared/js/cr/ui.js
@@ -1,4 +1,4 @@
-// Copyright (c) 2010 The Chromium Authors. All rights reserved.
+// Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
@@ -153,9 +153,22 @@ cr.define('cr.ui', function() {
     limit();
   }
 
+  /**
+   * Takes a number and spits out a value CSS will be happy with. To avoid
+   * subpixel layout issues, the value is rounded to the nearest integral value.
+   * @param {number} pixels The number of pixels.
+   * @return {string} e.g. '16px'.
+   */
+  function toCssPx(pixels) {
+    if (!window.isFinite(pixels))
+      console.error('Pixel value is not a number: ' + pixels);
+    return Math.round(pixels) + 'px';
+  }
+
   return {
     decorate: decorate,
     define: define,
-    limitInputWidth: limitInputWidth
+    limitInputWidth: limitInputWidth,
+    toCssPx: toCssPx,
   };
 });