Add arcade mode to chrome://dino

components/neterror/resources/neterror.css

 /* Copyright 2013 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. */
 
 /* Don't use the main frame div when the error is in a subframe. */
 html[subframe] #main-frame-error {
   display: none;
 }
 
 /* Don't use the subframe error div when the error is in a main frame. */
@@ skipping 444 matching lines @@
 
   .interstitial-wrapper {
     margin-top: 5%;
   }
 
   .nav-wrapper {
     margin-top: 30px;
   }
 }
 
-@media (min-width: 600px) and (max-width: 736px) and (orientation: landscape) {

[mmenke, 2017/07/05 18:51:28]

Why are you removing this?

[edwardjung, 2017/07/06 19:33:19]

Centre aligning the container makes more sense for this subset of widths. It was
off balance when the container width is 600px. It also fixes the snap that
occurs when resizing the window into these sizes.

-  .offline .interstitial-wrapper {
-    margin-left: 0;
-    margin-right: 0;
-  }
-}
-
 @media (min-width: 420px) and (max-width: 736px) and
        (min-height: 240px) and (max-height: 420px) and
        (orientation:landscape) {
   .interstitial-wrapper {
     margin-bottom: 100px;
   }
 }
 
 @media (min-height: 240px) and (orientation: landscape) {
   .offline .interstitial-wrapper {
@@ skipping 25 matching lines @@
     overflow: inherit;
     padding: 0 8px;
   }
 }
 
 @media (max-width: 120px) {
   button {
     width: auto;
   }
 }
+
+.arcade-mode {

[mmenke, 2017/07/05 18:51:28]

Is this needed?  It seems like the next block applies overflow:hidden to this
anyways.

[edwardjung, 2017/07/06 19:33:19]

Done.

+  overflow: hidden;
+}
+
+.arcade-mode,
+.arcade-mode .runner-container,
+.arcade-mode .runner-canvas {
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.arcade-mode #buttons,
+.arcade-mode #main-content {
+  opacity: 0;
+  overflow: hidden;

[mmenke, 2017/07/05 18:51:29]

I assume there's a reason we aren't just using display:none for these?

[edwardjung, 2017/07/06 19:33:19]

With display none: you can't transition out the elements as it removes them from
the DOM immediately.

+}
+
+.arcade-mode .interstitial-wrapper {
+  height: 100vh;

[mmenke, 2017/07/05 18:51:29]

vh?  Is that a typo, or does it mean something?

[edwardjung, 2017/07/06 19:33:19]

Not a typo, a new proportional unit referring to viewport height. Just using
100% doesn't cover the whole screen / window.

+  max-width: 100%;
+  overflow: hidden;
+}
+
+.arcade-mode .runner-container {
+  left: 0;
+  margin: auto;
+  right: 0;
+  transform-origin: top center;
+  transition: transform 250ms cubic-bezier(0.4, 0.0, 1, 1) .4s;
+  z-index: 2;
+}