[web] Get the size from visualviewport instead of window.innerHeight/innerW… (#13462)

* get the size from visualviewport instead of window.innerHeight/innerWidth.

* merging 2 if statements to one.

* add more comments

lib/web_ui/lib/src/engine/dom_renderer.dart

@@ -393,12 +393,21 @@ flt-glass-pane * {
     // is 1.0.
     window.debugOverrideDevicePixelRatio(1.0);
 
-    if (browserEngine == BrowserEngine.webkit) {
+    if (html.window.visualViewport == null &&
+        browserEngine == BrowserEngine.webkit) {
       // Safari sometimes gives us bogus innerWidth/innerHeight values when the
       // page loads. When it changes the values to correct ones it does not
       // notify of the change via `onResize`. As a workaround, we setup a
       // temporary periodic timer that polls innerWidth and triggers the
       // resizeListener so that the framework can react to the change.
+      //
+      // Safari 13 has implemented visualViewport API so it doesn't need this
+      // timer.
+      //
+      // VisualViewport API is not enabled in Firefox as well. On the other hand
+      // Firefox returns correct values for innerHeight, innerWidth.
+      // Firefox also triggers html.window.onResize therefore we don't need this
+      // timer setup for Firefox.
       final int initialInnerWidth = html.window.innerWidth;
       // Counts how many times we checked screen size. We check up to 5 times.
       int checkCount = 0;
@@ -422,7 +431,12 @@ flt-glass-pane * {
       html.document.head.append(_canvasKitScript);
     }
 
-    _resizeSubscription = html.window.onResize.listen(_metricsDidChange);
+    if (html.window.visualViewport != null) {
+      _resizeSubscription =
+          html.window.visualViewport.onResize.listen(_metricsDidChange);
+    } else {
+      _resizeSubscription = html.window.onResize.listen(_metricsDidChange);
+    }
   }
 
   /// Called immediately after browser window metrics change.

lib/web_ui/lib/src/engine/window.dart

@@ -51,9 +51,15 @@ class EngineWindow extends ui.Window {
     }());
 
     if (!override) {
-      final double windowInnerWidth = html.window.innerWidth * devicePixelRatio;
-      final double windowInnerHeight =
-          html.window.innerHeight * devicePixelRatio;
+      double windowInnerWidth;
+      double windowInnerHeight;
+      if (html.window.visualViewport != null) {
+        windowInnerWidth = html.window.visualViewport.width * devicePixelRatio;
+        windowInnerHeight = html.window.visualViewport.height * devicePixelRatio;
+      } else {
+        windowInnerWidth = html.window.innerWidth * devicePixelRatio;
+        windowInnerHeight = html.window.innerHeight * devicePixelRatio;
+      }
       if (windowInnerWidth != _lastKnownWindowInnerWidth ||
           windowInnerHeight != _lastKnownWindowInnerHeight) {
         _lastKnownWindowInnerWidth = windowInnerWidth;

lib/web_ui/test/dom_renderer_test.dart

@@ -98,6 +98,14 @@ void main() {
     renderer.attachBeforeElement(parent, childD, childC);
     expect(parent.innerHtml, '<a></a><b></b><c></c><d></d>');
   });
+
+  test('inneheight/innerWidth are equal to visualViewport height and width', () {
+    if (html.window.visualViewport != null) {
+      expect(html.window.visualViewport.width, html.window.innerWidth);
+      expect(html.window.visualViewport.height, html.window.innerHeight);
+    }
+  });
+
   test('replaces viewport meta tags during style reset', () {
     final html.MetaElement existingMeta = html.MetaElement()
       ..name = 'viewport'