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:

committed by
Chromium LUCI CQ

parent
5eda2a54cc
commit
5e1ccb51ca
components
neterror
resources
security_interstitials
core
common
resources
@@ -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 {
|
||||||
|
Reference in New Issue
Block a user