[iOS] Hopefully finally fix visibility of Clear Browsing Data button.

Implement an iOS-specific JavaScript solution for hiding the Clear
Browsing Data button when the keyboard is visible. The current media
query-based solution doesn't work in all cases, and it seems that a
pure CSS solution is not possible.

BUG=305740
TEST=Open chrome://history, and check that the Clear Browsing Data
button is never visible when the keyboard is open, for all devices
and orientations.

R=sergiu@chromium.org

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

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

2 files changed, 20 insertions, 18 deletions

diff --git a/chrome/browser/resources/history/history.js b/chrome/browser/resources/history/history.js
index 4c7566a..15884ee 100644
--- a/chrome/browser/resources/history/history.js
+++ b/chrome/browser/resources/history/history.js
@@ -1569,6 +1569,22 @@ function load() {
     });
     searchField.focus();
   }
+
+<if expr="is_ios">
+  function checkKeyboardVisibility() {
+    // Figure out the real height based on the orientation, becauase
+    // screen.width and screen.height don't update after rotation.
+    var screenHeight = window.orientation % 180 ? screen.width : screen.height;
+
+    // Assume that the keyboard is visible if more than 30% of the screen is
+    // taken up by window chrome.
+    var isKeyboardVisible = (window.innerHeight / screenHeight) < 0.7;
+
+    document.body.classList.toggle('ios-keyboard-visible', isKeyboardVisible);
+  }
+  window.addEventListener('orientationchange', checkKeyboardVisibility);
+  window.addEventListener('resize', checkKeyboardVisibility);
+</if> /* is_ios */
 }
 
 /**
diff --git a/chrome/browser/resources/history/history_mobile.css b/chrome/browser/resources/history/history_mobile.css
index 79335f8..df6d6e1 100644
--- a/chrome/browser/resources/history/history_mobile.css
+++ b/chrome/browser/resources/history/history_mobile.css
@@ -307,25 +307,11 @@ input {
 } /* @media only screen and (max-width:720px) */
 
 <if expr="is_ios">
-/* Ensure that the Clear Browsing Data button is hidden when the keyboard is
-   visible. The cutoff values are chosen to be compatible with all known device
-   aspect ratios. */
-
-@media only screen and (min-aspect-ratio: 6/5) and (max-aspect-ratio: 3/2) {
-  #clear-browsing-data {
-    display: none;
-  }
-  #scrolling-container {
-    bottom: 0;
-  }
+.ios-keyboard-visible #clear-browsing-data {
+  display: none;
 }
 
-@media only screen and (min-aspect-ratio: 3/1) {
-  #clear-browsing-data {
-    display: none;
-  }
-  #scrolling-container {
-    bottom: 0;
-  }
+.ios-keyboard-visible #scrolling-container {
+  bottom: 0;
 }
 </if> /* is_ios */