diff options
Diffstat (limited to 'chromium/components/neterror')
4 files changed, 90 insertions, 20 deletions
diff --git a/chromium/components/neterror/resources/neterror.css b/chromium/components/neterror/resources/neterror.css index 4649cd82bbb..c7cd42e70cc 100644 --- a/chromium/components/neterror/resources/neterror.css +++ b/chromium/components/neterror/resources/neterror.css @@ -462,13 +462,6 @@ html[subframe] body { } } -@media (min-width: 600px) and (max-width: 736px) and (orientation: landscape) { - .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) { @@ -514,3 +507,31 @@ html[subframe] body { width: auto; } } + +.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; +} + +.arcade-mode .interstitial-wrapper { + height: 100vh; + 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; +} diff --git a/chromium/components/neterror/resources/neterror.html b/chromium/components/neterror/resources/neterror.html index 3851e4fee73..615d17162ed 100644 --- a/chromium/components/neterror/resources/neterror.html +++ b/chromium/components/neterror/resources/neterror.html @@ -1,18 +1,19 @@ <!doctype html> -<html i18n-values="dir:textdirection;lang:language"> +<html dir="$i18n{textdirection}" lang="$i18n{language}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> - <title i18n-content="title"></title> - <link rel="stylesheet" href="../../../components/security_interstitials/core/browser/resources/interstitial_common.css"> - <link rel="stylesheet" href="../../../components/security_interstitials/core/browser/resources/interstitial_v2.css"> + <title>$i18n{title}</title> + <link rel="stylesheet" href="../../../components/security_interstitials/core/common/resources/interstitial_core.css"> + <link rel="stylesheet" href="../../../components/security_interstitials/core/common/resources/interstitial_common.css"> <link rel="stylesheet" href="neterror.css"> - <script src="../../../components/security_interstitials/core/browser/resources/interstitial_v2_mobile.js"></script> + <script src="../../../components/security_interstitials/core/common/resources/interstitial_common.js"></script> + <script src="../../../components/security_interstitials/core/common/resources/interstitial_mobile_nav.js"></script> <script src="neterror.js"></script> <script src="offline.js"></script> </head> -<body id="t" i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize"> +<body id="t" style="font-family: $i18n{fontfamily}; font-size: $i18n{fontsize}"> <div id="main-frame-error" class="interstitial-wrapper"> <div id="main-content"> <div class="icon" diff --git a/chromium/components/neterror/resources/neterror.js b/chromium/components/neterror/resources/neterror.js index 16175091a1d..a7bc93484b3 100644 --- a/chromium/components/neterror/resources/neterror.js +++ b/chromium/components/neterror/resources/neterror.js @@ -4,19 +4,19 @@ function toggleHelpBox() { var helpBoxOuter = document.getElementById('details'); - helpBoxOuter.classList.toggle('hidden'); + helpBoxOuter.classList.toggle(HIDDEN_CLASS); var detailsButton = document.getElementById('details-button'); - if (helpBoxOuter.classList.contains('hidden')) + if (helpBoxOuter.classList.contains(HIDDEN_CLASS)) detailsButton.innerText = detailsButton.detailsText; else detailsButton.innerText = detailsButton.hideDetailsText; // Details appears over the main content on small screens. if (mobileNav) { - document.getElementById('main-content').classList.toggle('hidden'); + document.getElementById('main-content').classList.toggle(HIDDEN_CLASS); var runnerContainer = document.querySelector('.runner-container'); if (runnerContainer) { - runnerContainer.classList.toggle('hidden'); + runnerContainer.classList.toggle(HIDDEN_CLASS); } } } diff --git a/chromium/components/neterror/resources/offline.js b/chromium/components/neterror/resources/offline.js index ed3582f278d..f7235b3b8a1 100644 --- a/chromium/components/neterror/resources/offline.js +++ b/chromium/components/neterror/resources/offline.js @@ -22,7 +22,7 @@ function Runner(outerContainerId, opt_config) { this.snackbarEl = null; this.config = opt_config || Runner.config; - + // Logical dimensions of the container. this.dimensions = Runner.defaultDimensions; this.canvas = null; @@ -96,6 +96,9 @@ var IS_MOBILE = /Android/.test(window.navigator.userAgent) || IS_IOS; /** @const */ var IS_TOUCH_ENABLED = 'ontouchstart' in window; +/** @const */ +var ARCADE_MODE_URL = 'chrome://dino/'; + /** * Default game configuration. * @enum {number} @@ -121,7 +124,9 @@ Runner.config = { MOBILE_SPEED_COEFFICIENT: 1.2, RESOURCE_TEMPLATE_ID: 'audio-resources', SPEED: 6, - SPEED_DROP_COEFFICIENT: 3 + SPEED_DROP_COEFFICIENT: 3, + ARCADE_MODE_INITIAL_TOP_POSITION: 35, + ARCADE_MODE_TOP_POSITION_PERCENT: 0.1 }; @@ -140,6 +145,7 @@ Runner.defaultDimensions = { * @enum {string} */ Runner.classes = { + ARCADE_MODE: 'arcade-mode', CANVAS: 'runner-canvas', CONTAINER: 'runner-container', CRASHED: 'crashed', @@ -225,7 +231,6 @@ Runner.events = { LOAD: 'load' }; - Runner.prototype = { /** * Whether the easter egg has been disabled. CrOS enterprise enrolled devices. @@ -418,6 +423,12 @@ Runner.prototype = { boxStyles.paddingLeft.length - 2)); this.dimensions.WIDTH = this.outerContainerEl.offsetWidth - padding * 2; + if (this.isArcadeMode()) { + this.dimensions.WIDTH = Math.min(DEFAULT_WIDTH, this.dimensions.WIDTH); + if (this.activated) { + this.setArcadeModeContainerScale(); + } + } // Redraw the elements back onto the canvas. if (this.canvas) { @@ -486,6 +497,9 @@ Runner.prototype = { * Update the game status to started. */ startGame: function() { + if (this.isArcadeMode()) { + this.setArcadeMode(); + } this.runningTime = 0; this.playingIntro = false; this.tRex.playingIntro = false; @@ -826,6 +840,40 @@ Runner.prototype = { }, /** + * Whether the game should go into arcade mode. + * @return {boolean} + */ + isArcadeMode: function() { + return document.title == ARCADE_MODE_URL; + }, + + /** + * Hides offline messaging for a fullscreen game only experience. + */ + setArcadeMode: function() { + document.body.classList.add(Runner.classes.ARCADE_MODE); + this.setArcadeModeContainerScale(); + }, + + /** + * Sets the scaling for arcade mode. + */ + setArcadeModeContainerScale: function() { + var windowHeight = window.innerHeight; + var scaleHeight = windowHeight / this.dimensions.HEIGHT; + var scaleWidth = window.innerWidth / this.dimensions.WIDTH; + var scale = Math.max(1, Math.min(scaleHeight, scaleWidth)); + var scaledCanvasHeight = this.dimensions.HEIGHT * scale; + // Positions the game container at 10% of the available vertical window + // height minus the game container height. + var translateY = Math.max(0, (windowHeight - scaledCanvasHeight - + Runner.config.ARCADE_MODE_INITIAL_TOP_POSITION) * + Runner.config.ARCADE_MODE_TOP_POSITION_PERCENT); + this.containerEl.style.transform = 'scale(' + scale + ') translateY(' + + translateY + 'px)'; + }, + + /** * Pause the game if the tab is not in focus. */ onVisibilityChange: function(e) { |