Fix chrome://extensions checkboxes

1. fix vertical alignment
2. fix text overlap in Hindi
3. fix text measuring function for Hindi (so the checkbox stays in one place when you check and uncheck it)

BUG=411805

Review URL: https://codereview.chromium.org/557553002

Cr-Commit-Position: refs/heads/master@{#293862}

2 files changed, 5 insertions, 3 deletions

diff --git a/chrome/browser/resources/extensions/extensions.css b/chrome/browser/resources/extensions/extensions.css
index 28a6abd..c11083b 100644
--- a/chrome/browser/resources/extensions/extensions.css
+++ b/chrome/browser/resources/extensions/extensions.css
@@ -360,10 +360,9 @@ html[dir=rtl] .extension-commands-config {
   -webkit-transition: opacity 200ms;
   height: 22px;
   opacity: 0.8;
-  position: absolute;
+  position: relative;
   right: 0;
-  top: 3px;
-  vertical-align: middle;
+  top: 6px;
 }
 
 html[dir='rtl'] #extension-settings .trash {
diff --git a/chrome/browser/resources/extensions/extensions.js b/chrome/browser/resources/extensions/extensions.js
index 3b929f7..ca186f2 100644
--- a/chrome/browser/resources/extensions/extensions.js
+++ b/chrome/browser/resources/extensions/extensions.js
@@ -432,12 +432,15 @@ cr.define('extensions', function() {
     var measuringDiv = $('font-measuring-div');
     measuringDiv.textContent =
         loadTimeData.getString('extensionSettingsEnabled');
+    measuringDiv.className = 'enabled-text';
     var pxWidth = measuringDiv.clientWidth + trashWidth;
     measuringDiv.textContent =
         loadTimeData.getString('extensionSettingsEnable');
+    measuringDiv.className = 'enable-text';
     pxWidth = Math.max(measuringDiv.clientWidth + trashWidth, pxWidth);
     measuringDiv.textContent =
         loadTimeData.getString('extensionSettingsDeveloperMode');
+    measuringDiv.className = '';
     pxWidth = Math.max(measuringDiv.clientWidth, pxWidth);
 
     var style = document.createElement('style');