Merge 192381 "History: Add tablet specific layout."

> History: Add tablet specific layout.
> 
> A recent change (http://crrev.com/191816) made the history page much
> more usable on mobile devices, but the layout was suboptimal for
> tablets. This CL uses a design similar to Other Devices for screen
> widths greater than 720px.
> 
> Also fixed a small alignment issue when the history page is empty.
> 
> BUG=226045,225872
> 
> Review URL: https://codereview.chromium.org/13483004

TBR=dubroy@chromium.org
Review URL: https://codereview.chromium.org/13749018

git-svn-id: svn://svn.chromium.org/chrome/branches/1453/src@192913 0039d316-1c4b-4281-b951-d872f2087c98

2 files changed, 56 insertions, 30 deletions

diff --git a/chrome/browser/resources/history/history.js b/chrome/browser/resources/history/history.js
index 5617a12..f925b69 100644
--- a/chrome/browser/resources/history/history.js
+++ b/chrome/browser/resources/history/history.js
@@ -1216,9 +1216,9 @@ HistoryView.prototype.displayResults_ = function(doneLoading) {
 
     var searchResults = createElementWithClassName('ol', 'search-results');
     if (results.length == 0 && doneLoading) {
-      var noSearchResults = document.createElement('div');
+      var noSearchResults = searchResults.appendChild(
+          createElementWithClassName('div', 'no-results-message'));
       noSearchResults.textContent = loadTimeData.getString('noSearchResults');
-      searchResults.appendChild(noSearchResults);
     } else {
       for (var i = 0, visit; visit = results[i]; i++) {
         if (!visit.isRendered) {
@@ -1250,7 +1250,7 @@ HistoryView.prototype.displayResults_ = function(doneLoading) {
 
     if (results.length == 0 && doneLoading) {
       var noResults = resultsFragment.appendChild(
-          document.createElement('div'));
+          createElementWithClassName('div', 'no-results-message'));
       noResults.textContent = loadTimeData.getString('noResults');
       this.resultDiv_.appendChild(resultsFragment);
       this.updateNavBar_();
@@ -1494,8 +1494,8 @@ function load() {
     var resultsDisplay = $('results-display');
     resultsDisplay.parentNode.insertBefore($('search-field'), resultsDisplay);
 
-    // Move the button to the bottom of the page.
-    document.querySelector('.page').appendChild($('clear-browsing-data'));
+    // Move the button to the bottom of the body.
+    document.body.appendChild($('clear-browsing-data'));
 
     window.addEventListener('resize', function(e) {
       // Don't show the Clear Browsing Data button when the soft keyboard is up.
diff --git a/chrome/browser/resources/history/history_mobile.css b/chrome/browser/resources/history/history_mobile.css
index 76de665..ea6c362 100644
--- a/chrome/browser/resources/history/history_mobile.css
+++ b/chrome/browser/resources/history/history_mobile.css
@@ -56,6 +56,8 @@ h3 {
   background-repeat: no-repeat;
   background-size: 32px;
   border: 0;
+  line-height: 1.5;
+  margin-top: 16px;
   width: 100%;
 }
 
@@ -64,18 +66,20 @@ body:not(.has-results) #search-field:not(:valid) {
   display: none;
 }
 
-body:not(.has-results) .search-results {
+.no-results-message {
   margin-bottom: 1em;
-  margin-top: 1em;
   padding-left: 16px;
   padding-right: 16px;
 }
 
+.search-results .no-results-message {
+  margin-top: 1em;
+}
+
 #notification-bar.alone {
   float: none;
   font-size: 75%;
-  line-height: 1;
-  margin: 0 0 16px 0;
+  margin: 0;
   padding-bottom: 0;
   padding-top: 0;
 }
@@ -127,11 +131,7 @@ h3,
 .entry-box,
 #search-field,
 #results-pagination button {
-  height: 50px;
-}
-
-#search-field {
-  line-height: 1.5;
+  height: 60px;
 }
 
 input {
@@ -181,8 +181,16 @@ input {
 }
 
 .entry .title-and-domain {
-  -webkit-padding-start: 40px;
+  -webkit-flex: auto;
+  -webkit-flex-flow: column;
+  -webkit-padding-start: 48px;
   background-size: 32px;
+  line-height: 1.3;
+}
+
+.entry .domain {
+  -webkit-padding-start: 0;
+  font-size: 14px;
 }
 
 #older-button {
@@ -193,28 +201,46 @@ input {
   -webkit-padding-start: 16px;
 }
 
+#loading-spinner {
+  margin-top: 16px;
+}
+
 @media only screen and (max-width:600px) {
 
-.entry .title-and-domain {
-  -webkit-flex: auto;
-  -webkit-flex-flow: column;
-  -webkit-padding-start: 48px;
-  line-height: 1.3;
+/* Omit the time on very small screens. */
+.entry .time {
+  display: none;
 }
 
-.entry .domain {
-  -webkit-padding-start: 0;
-  font-size: 14px;
+} /* @media only screen and (max-width:600px) */
+
+@media only screen and (min-width:720px) {
+
+body {
+  margin-bottom: 76px;
 }
 
-.entry .time {
-  display: none;
+h3,
+.entry,
+#search-field {
+  border: 1px solid rgb(220, 220, 220);
 }
 
-.entry-box,
-#search-field,
-#results-pagination button {
-  height: 60px;
+h3 {
+  margin-top: 30px;
 }
 
-} /* @media only screen and (max-width:600px) */
+.page {
+  margin: 0 auto;
+  max-width: 718px;
+}
+
+h1,
+#notification-bar,
+#loading-spinner,
+.no-results-message {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+} /* @media only screen and (max-width:720px) */