History: Use old (2009) flexbox syntax to fix history page on iOS.

iOS does not support the latest flexbox syntax, only the syntax from the
2009 working draft: http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/.

BUG=228831
TEST=Open chrome://history (desktop, Android, iOS) and verify that the
layout looks ok.

R=jhawkins@chromium.org

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

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

2 files changed, 32 insertions, 8 deletions

diff --git a/chrome/browser/resources/history/history.js b/chrome/browser/resources/history/history.js
index 0f0eeb7..620ba13 100644
--- a/chrome/browser/resources/history/history.js
+++ b/chrome/browser/resources/history/history.js
@@ -168,8 +168,7 @@ Visit.prototype.getResultDOM = function(propertyBag) {
   titleAndDomainWrapper.appendChild(domain);
 
   if (isMobileVersion()) {
-    var removeButton = createElementWithClassName('button', 'remove-entry');
-    removeButton.classList.add('custom-appearance');
+    var removeButton = createElementWithClassName('div', 'remove-entry');
     removeButton.addEventListener('click', function(e) {
       self.removeFromHistory();
       e.stopPropagation();
@@ -1537,9 +1536,11 @@ function load() {
       historyView.positionNotificationBar.bind(historyView));
 
   if (isMobileVersion()) {
-    // Move the search box out of the header.
-    var resultsDisplay = $('results-display');
-    resultsDisplay.parentNode.insertBefore($('search-field'), resultsDisplay);
+    if (searchField) {
+      // Move the search box out of the header.
+      var resultsDisplay = $('results-display');
+      resultsDisplay.parentNode.insertBefore($('search-field'), resultsDisplay);
+    }
 
     // Move the button to the bottom of the body.
     document.body.appendChild($('clear-browsing-data'));
diff --git a/chrome/browser/resources/history/history_mobile.css b/chrome/browser/resources/history/history_mobile.css
index 8b0daf0..a9c402a 100644
--- a/chrome/browser/resources/history/history_mobile.css
+++ b/chrome/browser/resources/history/history_mobile.css
@@ -95,8 +95,7 @@ body:not(.has-results) #search-field:not(:valid) {
   -webkit-padding-end: 0;
 }
 
-button.remove-entry {
-  -webkit-margin-start: auto;
+.remove-entry {
   background: url('../../../../ui/webui/resources/images/2x/x-thin.png')
       no-repeat center center;
   background-size: 13px;
@@ -109,7 +108,7 @@ button.remove-entry {
   width: 45px;
 }
 
-button.remove-entry:active {
+.remove-entry:active {
   opacity: 1.0;
 }
 
@@ -165,6 +164,13 @@ input {
   margin: 0;
 }
 
+<if expr="pp_ifdef('ios')">
+/* Add extra spacing caused by the missing search bar on iOS. */
+h3:first-of-type {
+  margin-top: 16px;
+}
+</if>
+
 /* Fade out the entry-box, rather than its parent node, so that the dividing
    line between entries doesn't fade out. */
 .entry.fade-out .entry-box {
@@ -209,6 +215,23 @@ input {
   margin-top: 16px;
 }
 
+<if expr="pp_ifdef('ios')">
+/* iOS does not support the latest flexbox syntax, only the 2009 working draft
+   syntax (http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/). */
+.entry-box,
+.site-domain-wrapper {
+  -wekbit-box-align: center;
+  display: -webkit-box;
+}
+
+.entry .title-and-domain {
+  -webkit-box-flex: 1;
+  -webkit-box-orient: vertical;
+  -webkit-box-pack: center;
+  display: -webkit-box;
+}
+</if>
+
 @media only screen and (max-width:600px) {
 
 /* Omit the time on very small screens. */