Decouple VR Shell DPR and CSS size from Physical Displays.

chrome/browser/resources/vr_shell/vr_shell_ui.css

 /* Copyright 2016 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
 html {
   background-color: rgba(255, 255, 255, 0);
 }
 
 #ui {
-  --scaleFactor: 4;
   left: 0;
+  max-width: 1920px;
   position: absolute;
   top: 0;
-  transform: scale(0.25, 0.25);
   transform-origin: left top;
-  width: 400%;
 }
 
 /* This class manages the position of elements on the texture page.
  * Each UI element should have a bounding div of this class. */
 .ui-element {
   float: left;
   margin: 2px;
 }
 
 .webvr-message-box {
   align-items: center;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
 
 /* Permanent security warning for WebVR. */
 #webvr-not-secure-permanent {

[bshe, 2016/11/30 23:00:46]

nit: remove this empty selector

[mthiesse, 2016/11/30 23:25:05]

Done.

-  height: 128px;
-  width: 512px;
 }
 
 #webvr-not-secure-permanent .webvr-not-secure-icon {
   display: inline-block;
   margin: 20px 0;
   vertical-align: middle;
 }
 
 #webvr-not-secure-permanent .webvr-string {
   display: inline-block;
   margin: 20px 10.5px;
   vertical-align: middle;
 }
 
-/* This is a single-line (nowrap) short message. The width has some elasticity
- * for translations, and the underlying string had a request to translators
- * to keep it short. The maximum is based on the fixed-size container DIV,
- * excess will be clipped. There's space for about twice the length of the
- * English "Not secure" message. */
+/* This is a single-line (nowrap) short message. The width is elastic for
+ * translations, and the underlying string had a request to translators
+ * to keep it short. */
 #webvr-not-secure-permanent .webvr-box {
   background-color: white;
   border-radius: 6px;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
   box-sizing: border-box;
   color: #444;
   font-size: 26px;
   height: 78px;
-  max-width: 472px;
   min-width: 226px;
   overflow: hidden;
   padding: 0 20px;
   white-space: nowrap;
 }
 
 /* Transient security warning for WebVR. */
 #webvr-not-secure-transient {

[bshe, 2016/11/30 23:00:46]

ditto

[mthiesse, 2016/11/30 23:25:05]

Done.

-  height: 256px;
-  width: 512px;
 }
 
-/* This uses fixed width but the height has some elasticity for translations.
- * The maximum is based on the fixed-size container DIV, excess will be
- * clipped. */
+/* This uses fixed width but the height is elastic for translations. */
 #webvr-not-secure-transient > div {
   background-color: rgba(26, 26, 26, 0.8);
   border-radius: 6px;
   box-sizing: border-box;
   color: white;
   display: flex;
   flex-direction: column;
   font-size: 26px;
   justify-content: center;
   line-height: 1.4;
-  max-height: 210px;
   min-height: 160px;
   overflow: hidden;
   padding: 20px;
   text-align: center;
   width: 512px;
 }
 
 .round-button .button {
   background-color: #eee;
   background-position: center;
@@ skipping 35 matching lines @@
   background-color: #555;
   color: white;
   font-size: 24px;
   padding: 12px;
 }
 
 #omni-container {
   --tranX: 0;
   --tranY: -0.65;
   --tranZ: -1.2;
+  height: 164px;
+  overflow: hidden;
+  width: 512px;
 }
 
 #omni {
   align-items: center;
   background-color: rgba(255, 255, 255, 0.9);
   border-radius: 100px;
   box-sizing: border-box;
   display: flex;
   height: 104px;
   justify-content: center;
   margin-bottom: 60px;
   margin-top: 0;
   opacity: 1;
+  overflow: hidden;
   transition: opacity 500ms ease, margin-top 500ms ease;
   white-space: nowrap;
   width: 512px;
 }
 
 #omni-content {
   align-items: center;
   display: flex;
   max-width: 448px;
 }
@@ skipping 25 matching lines @@
   border: 4px solid rgb(86, 203, 255);
 }
 
 #omni.idle {
   background-color: #ececec;
 }
 
 #omni.idle #domain {
   color: black;
 }