0

Fix dino runner initialization to not happen in subframes

+ introducing isSubFrame variable for better conditionals handling.
+ updateIconClass refactored to:
  * not to have game initialization under implicit condition
  * do not use additional undocumented property on classList object
  * decide which icon element to modify based on isSubFrame flag
  * keep only base 'icon' class and one that were passed in argument
+ updateIconClass call removed from jseval attribute in templates,
to callback that run on document loads and updates
+ game initialization moved to callback that run on document loads
and updates under proper conditions
+ neterror class is permanently added to body
+ `.offline button` removed since `offline` classname is used for
gaming styling only

Bug: 1223340
Change-Id: Id34e21d9b6129e7c4da11d95f4c0b5b79eb58939
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2987982
Reviewed-by: Edward Jung (EMEA) <edwardjung@chromium.org>
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Commit-Queue: Edward Jung (EMEA) <edwardjung@chromium.org>
Cr-Commit-Position: refs/heads/master@{#897867}
This commit is contained in:
Aleksei Gurianov
2021-07-01 20:16:30 +00:00
committed by Chromium LUCI CQ
parent 5eda2a54cc
commit 5e1ccb51ca
3 changed files with 23 additions and 32 deletions
components
neterror
security_interstitials
core

@@ -18,11 +18,10 @@
<script src="error_page_controller_ios.js"></script> <script src="error_page_controller_ios.js"></script>
</if> </if>
</head> </head>
<body id="t" style="font-family: $i18n{fontfamily}; font-size: $i18n{fontsize}"> <body id="t" class="neterror" style="font-family: $i18n{fontfamily}; font-size: $i18n{fontsize}">
<div id="main-frame-error" class="interstitial-wrapper"> <div id="main-frame-error" class="interstitial-wrapper">
<div id="main-content"> <div id="main-content">
<div class="icon" <div class="icon"></div>
jseval="updateIconClass(this.classList, iconClass)" alt=""></div>
<div id="main-message"> <div id="main-message">
<h1> <h1>
<span jsselect="heading" jsvalues=".innerHTML:msg"></span> <span jsselect="heading" jsvalues=".innerHTML:msg"></span>
@@ -128,8 +127,7 @@
<div id="sub-frame-error"> <div id="sub-frame-error">
<!-- Show details when hovering over the icon, in case the details are <!-- Show details when hovering over the icon, in case the details are
hidden because they're too large. --> hidden because they're too large. -->
<div class="icon" <div class="icon"></div>
jseval="updateIconClass(this.classList, iconClass)"></div>
<div id="sub-frame-error-details" jsselect="summary" jsvalues=".innerHTML:msg"></div> <div id="sub-frame-error-details" jsselect="summary" jsvalues=".innerHTML:msg"></div>
</div> </div>

@@ -65,8 +65,10 @@ function diagnoseErrors() {
// easier to support platforms that load the error page via different // easier to support platforms that load the error page via different
// mechanisms (Currently just iOS). We also use the subframe style for portals // mechanisms (Currently just iOS). We also use the subframe style for portals
// as they are embedded like subframes and can't be interacted with by the user. // as they are embedded like subframes and can't be interacted with by the user.
let isSubFrame = false;
if (window.top.location !== window.location || window.portalHost) { if (window.top.location !== window.location || window.portalHost) {
document.documentElement.setAttribute('subframe', ''); document.documentElement.setAttribute('subframe', '');
isSubFrame = true;
} }
// Re-renders the error page using |strings| as the dictionary of values. // Re-renders the error page using |strings| as the dictionary of values.
@@ -77,38 +79,20 @@ function updateForDnsProbe(strings) {
onDocumentLoadOrUpdate(); onDocumentLoadOrUpdate();
} }
// Given the classList property of an element, adds an icon class to the list // Adds an icon class to the list and removes classes previously set.
// and removes the icon class previously set with this method. Previous value function updateIconClass(newClass) {
// stored in 'last_icon_class' property of passed classList for future reference. const frameSelector = isSubFrame ? '#sub-frame-error' : '#main-frame-error';
// Initializes Dino Runner instance in case 'icon-offline' class was set. const iconEl = document.querySelector(frameSelector + ' .icon');
function updateIconClass(classList, newClass) {
let oldClass;
if (classList.hasOwnProperty('last_icon_class')) { if (iconEl.classList.contains(newClass)) {
oldClass = classList['last_icon_class']; return;
if (oldClass === newClass) {
return;
}
} }
classList.add(newClass); iconEl.className = 'icon ' + newClass;
if (oldClass !== undefined) {
classList.remove(oldClass);
}
classList['last_icon_class'] = newClass;
if (newClass === 'icon-offline') {
document.firstElementChild.classList.add('offline');
new Runner('.interstitial-wrapper');
} else {
document.body.classList.add('neterror');
}
} }
// Implements button clicks. This function is needed during the transition // Implements button clicks. This function is needed during the transition
// between implementing these in trunk chromium and implementing them in // between implementing these in trunk chromium and implementing them in iOS.
// iOS.
function reloadButtonClick(url) { function reloadButtonClick(url) {
if (window.errorPageController) { if (window.errorPageController) {
errorPageController.reloadButtonClick(); errorPageController.reloadButtonClick();
@@ -359,6 +343,16 @@ function onDocumentLoadOrUpdate() {
const controlButtonDiv = document.getElementById('control-buttons'); const controlButtonDiv = document.getElementById('control-buttons');
controlButtonDiv.hidden = controlButtonDiv.hidden =
offlineContentVisible || !(reloadButtonVisible || downloadButtonVisible); offlineContentVisible || !(reloadButtonVisible || downloadButtonVisible);
const iconClass = loadTimeData.valueExists('iconClass') &&
loadTimeData.getValue('iconClass');
updateIconClass(iconClass);
if (!isSubFrame && iconClass === 'icon-offline') {
document.documentElement.classList.add('offline');
new Runner('.interstitial-wrapper');
}
} }
function onDocumentLoad() { function onDocumentLoad() {

@@ -26,7 +26,6 @@ button {
.lookalike-url button, .lookalike-url button,
.main-frame-blocked button, .main-frame-blocked button,
.neterror button, .neterror button,
.offline button,
.pdf button, .pdf button,
.ssl button, .ssl button,
.safe-browsing-billing button { .safe-browsing-billing button {