Decouple VR Shell DPR and CSS size from Physical Displays.

chrome/browser/resources/vr_shell/vr_shell_ui.js

Index: chrome/browser/resources/vr_shell/vr_shell_ui.js
diff --git a/chrome/browser/resources/vr_shell/vr_shell_ui.js b/chrome/browser/resources/vr_shell/vr_shell_ui.js
index 68e9d935e90b6d19f4362d2e5fb4ecc6de2c6568..3964a82b6432da48320cf7b5f9b9966fe8382f8d 100644
--- a/chrome/browser/resources/vr_shell/vr_shell_ui.js
+++ b/chrome/browser/resources/vr_shell/vr_shell_ui.js
@@ -10,9 +10,11 @@ var vrShellUi = (function() {
 
   let uiRootElement = document.querySelector('#ui');
   let uiStyle = window.getComputedStyle(uiRootElement);
-  let scaleFactor = uiStyle.getPropertyValue('--scaleFactor');
   /** @const */ var ANIM_DURATION = 150;
 
+  // This value should match the one in VrShellImpl.java
+  /** @const */ var UI_DPR = 1.2;
+
   function getStyleFloat(style, property) {
     let value = parseFloat(style.getPropertyValue(property));
     return isNaN(value) ? 0 : value;
@@ -70,8 +72,7 @@ var vrShellUi = (function() {
       let pixelHeight = Math.ceil(rect.bottom) - pixelY;
 
       let element = new api.UiElement(pixelX, pixelY, pixelWidth, pixelHeight);
-      element.setSize(scaleFactor * pixelWidth / 1000,
-          scaleFactor * pixelHeight / 1000);
+      element.setSize(pixelWidth / 1000, pixelHeight / 1000);
 
       // Pull additional custom properties from CSS.
       let style = window.getComputedStyle(domElement);
@@ -414,6 +415,9 @@ var vrShellUi = (function() {
       this.controls.setEnabled(mode == api.Mode.STANDARD && !menuMode);
       this.omnibox.setEnabled(mode == api.Mode.STANDARD && !menuMode);
       this.secureOriginWarnings.setEnabled(mode == api.Mode.WEB_VR);
+
+      api.setUiCssSize(uiRootElement.clientWidth, uiRootElement.clientHeight,
+          UI_DPR);
     }
 
     setSecureOrigin(secure) {