Print Preview: Fixing checkmark position on Mac.

Also adding util function to set the 'os' and 'toolkit' attributes of <html>, so that all WebUI pages can use platform specific css rules. BUG=85612 TEST=Open print preview on Mac, examine checkmark position. Review URL: http://codereview.chromium.org/7111058 git-svn-id: svn://svn.chromium.org/chrome/trunk/src@89181 0039d316-1c4b-4281-b951-d872f2087c98
marcosholgado · Jun 15, 2011 · 10d9994 · 10d9994
1 parent 527f8b5
commit 10d9994
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 13 deletions.
diff --git a/chrome/browser/resources/options/options.js b/chrome/browser/resources/options/options.js
@@ -197,18 +197,8 @@ function load() {
   }
 
   // Allow platform specific CSS rules.
-  if (cr.isMac)
-    document.documentElement.setAttribute('os', 'mac');
-  if (cr.isWindows)
-    document.documentElement.setAttribute('os', 'windows');
-  if (cr.isChromeOS)
-    document.documentElement.setAttribute('os', 'chromeos');
-  if (cr.isLinux) {
-    document.documentElement.setAttribute('os', 'linux');
-    document.documentElement.setAttribute('toolkit', 'gtk');
-  }
-  if (cr.isViews)
-    document.documentElement.setAttribute('toolkit', 'views');
+  enablePlatformSpecificCSSRules();
+
   if (navigator.plugins['Shockwave Flash'])
     document.documentElement.setAttribute('hasFlashPlugin', '');
 

diff --git a/chrome/browser/resources/print_preview.css b/chrome/browser/resources/print_preview.css
@@ -323,10 +323,13 @@ input[type='checkbox']:checked:before {
   content: url('./print_preview/checkmark.png');
   height: 16px;
   left: 2px;
-  opacity: 1;
   position: absolute;
 }
 
+html[os=mac] input[type='checkbox']:checked:before {
+  top: 2px;
+}
+
 input[type='radio'] {
   -webkit-box-shadow: inset 0 1px 2px white,
                       0 1px 2px rgba(0, 0, 0, .2);

diff --git a/chrome/browser/resources/print_preview.html b/chrome/browser/resources/print_preview.html
@@ -7,6 +7,7 @@
 <link rel="stylesheet" href="webui.css">
 <link rel="stylesheet" href="print_preview.css">
 <script src="chrome://resources/js/local_strings.js"></script>
+<script src="chrome://resources/js/cr.js"></script>
 <script src="chrome://resources/js/util.js"></script>
 <script src="print_preview.js"></script>
 <script src="print_preview_animations.js"></script>

diff --git a/chrome/browser/resources/print_preview.js b/chrome/browser/resources/print_preview.js
@@ -50,6 +50,8 @@ var isTabHidden = false;
  * the printer list.
  */
 function onLoad() {
+  enablePlatformSpecificCSSRules();
+
   $('system-dialog-link').addEventListener('click', showSystemDialog);
   $('cancel-button').addEventListener('click', handleCancelButtonClick);
 

diff --git a/chrome/browser/resources/shared/js/util.js b/chrome/browser/resources/shared/js/util.js
@@ -11,6 +11,25 @@ const global = this;
 // TODO(estade): This should be removed and calls replaced with cr.isMac
 const IS_MAC = /^Mac/.test(navigator.platform);
 
+/**
+ * Sets the os and toolkit attributes in the <html> element so that platform
+ * specific css rules can be applied.
+ */
+function enablePlatformSpecificCSSRules() {
+  if (cr.isMac)
+    document.documentElement.setAttribute('os', 'mac');
+  if (cr.isWindows)
+    document.documentElement.setAttribute('os', 'windows');
+  if (cr.isChromeOS)
+    document.documentElement.setAttribute('os', 'chromeos');
+  if (cr.isLinux) {
+    document.documentElement.setAttribute('os', 'linux');
+    document.documentElement.setAttribute('toolkit', 'gtk');
+  }
+  if (cr.isViews)
+    document.documentElement.setAttribute('toolkit', 'views');
+}
+
 /**
  * Alias for document.getElementById.
  * @param {string} id The ID of the element to find.