Hung Renderer Dialog cleanup

Uses default background color.  Pads the favicons in the list.  Performs correct RTL processing.

BUG=99188
TEST=None


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

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

3 files changed, 41 insertions, 24 deletions

diff --git a/chrome/browser/resources/hung_renderer_dialog.css b/chrome/browser/resources/hung_renderer_dialog.css
index 8e829a0..ede9f52 100644
--- a/chrome/browser/resources/hung_renderer_dialog.css
+++ b/chrome/browser/resources/hung_renderer_dialog.css
@@ -4,7 +4,6 @@
  */
 
 html, body {
-  background-color: #EEE;
   height: 100%;
   margin: 0;
   overflow: hidden;
@@ -39,33 +38,20 @@ html, body {
 }
 
 #explanation {
+  -webkit-margin-end: 4px;
   margin-bottom: 4px;
-  margin-right: 4px;
   margin-top: 4px;
 }
 
 #tab-list-scroll-container {
+  -webkit-margin-end: 5px;
   background-color: white;
   border-style: solid;
   border-width: 1px;
   height: 100%;
-  margin-right: 5px;
   overflow-y: auto;
 }
 
-#buttons-table {
-  float: right;
-  margin-bottom: 8px;
-  margin-right: 8px;
-  margin-top: 20px;
-  width: auto;
-}
-
-#buttons-table > div {
-  padding: 3px;
-  width: 50%;
-}
-
 #tab-table {
   -webkit-margin-after: 0;
   -webkit-margin-before: 0;
@@ -81,18 +67,28 @@ html, body {
   display: block;
   height: 16px;
   line-height: 16px;
-  margin-bottom: 1px;
+  margin: 2px 2px 2px 2px;
 }
 
 html[dir=rtl] #tab-table li {
   background-position: 100% 50%;
 }
 
-#templates {
-  display: none;
+.action-area {
+  -webkit-box-align: center;
+  -webkit-box-orient: horizontal;
+  -webkit-box-pack: end;
+  display: -webkit-box;
+  padding: 12px;
 }
 
-button {
+.button-strip {
+  -webkit-box-orient: horizontal;
+  display: -webkit-box;
+}
+
+.button-strip > button {
+  -webkit-margin-start: 10px;
+  display: block;
   white-space: nowrap;
-  width: 100%;
 }
diff --git a/chrome/browser/resources/hung_renderer_dialog.html b/chrome/browser/resources/hung_renderer_dialog.html
index c52d75e..ec0f95d 100644
--- a/chrome/browser/resources/hung_renderer_dialog.html
+++ b/chrome/browser/resources/hung_renderer_dialog.html
@@ -38,9 +38,11 @@
         </div>
       </div>
       <div>
-        <div class="hbox" id="buttons-table">
-          <div><button id="kill" i18n-content="kill">Kill pages</button></div>
-          <div><button id="wait" i18n-content="wait">Wait</button></div>
+        <div class="action-area">
+          <div class="button-strip">
+            <button id="kill" i18n-content="kill"></button>
+            <button id="wait" i18n-content="wait"></button>
+          </div>
         </div>
       </div>
     </div>
diff --git a/chrome/browser/resources/hung_renderer_dialog.js b/chrome/browser/resources/hung_renderer_dialog.js
index b4e98fa..9df4fac 100644
--- a/chrome/browser/resources/hung_renderer_dialog.js
+++ b/chrome/browser/resources/hung_renderer_dialog.js
@@ -24,6 +24,23 @@ cr.define('hungRendererDialog', function() {
   }
 
   /**
+   * Reverses the order of child nodes. This is necessary because WebKit does
+   * not alter the tab order for elements that are visually reversed using
+   * -webkit-box-direction: reverse, and the button order is reversed for
+   * views.  See https://bugs.webkit.org/show_bug.cgi?id=62664 for more
+   * information.
+   * @param {HTMLElement} parent The parent node whose children are to be
+   *     reversed.
+   */
+  function reverseChildren(parent) {
+    var childNodes = parent.childNodes;
+    for (var i = childNodes.length - 1; i >= 0; i--)
+      parent.appendChild(childNodes[i]);
+  };
+
+  var forEach = Array.prototype.forEach.call.bind(Array.prototype.forEach);
+
+  /**
    * Inserts translated strings on loading.
    */
   function initialize() {
@@ -37,6 +54,8 @@ cr.define('hungRendererDialog', function() {
       closeWithResult(false);
     }
 
+    if (cr.isViews)
+      forEach(document.querySelectorAll('.button-strip'), reverseChildren);
     chrome.send('requestTabContentsList')
   }