Skip to content

GitLab

T
tangled
Commit f8cb5584 authored by edwardjung's avatar edwardjung Committed by Commit bot
Browse files
Options

Update network error template to new design 

BUG=414233

Review URL: https://codereview.chromium.org/545973003

Cr-Commit-Position: refs/heads/master@{#296209}
parent 423e7da0
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 2419 additions and 218 deletions
chrome/app/chromium_strings.grd
View file @ f8cb5584
......@@ -1269,6 +1269,13 @@ Signing in anyway will merge Chromium information like bookmarks, history, and o
Your computer is running an old version of Microsoft Windows that cannot process this website's security certificate. Because of this problem, Chromium can't tell whether the certificate came from <ph name="SITE">$1<ex>google.com</ex></ph> or from someone on your network pretending to be <ph name="SITE">$1<ex>google.com</ex></ph>. Please update your computer to a more recent version of Windows.
</message>
<!-- Offline interstitial -->
<if expr="not is_android and not is_ios">
<message name="IDS_ERRORPAGES_SUMMARY_INTERNET_DISCONNECTED" desc="Summary of the error page when the network connection failed. May be followed by platform dependent instructions.">
Chromium can’t display the webpage because your computer isn’t connected to the Internet.
</message>
</if>
<!-- OOBE -->
<if expr="chromeos">
<message name="IDS_INSTALLING_UPDATE" desc="Label shown on the updates installation screen during OOBE">
......
chrome/app/generated_resources.grd
View file @ f8cb5584
......@@ -8810,20 +8810,11 @@ Keep your key file in a safe place. You will need it to create new versions of y
<ph name="PRODUCT_NAME">&lt;span jscontent="productName"&gt;&lt;/span&gt;<ex>Google Chrome</ex></ph>
can't connect to it.
</message>
<message name="IDS_ERRORPAGES_SUMMARY_INTERNET_DISCONNECTED" desc="Summary of the error page when the network connection failed. May be followed by platform dependent instructions.">
<ph name="PRODUCT_NAME">&lt;span jscontent="productName"&gt;&lt;/span&gt;<ex>Google Chrome</ex></ph>
can't display the webpage because your computer isn't connected to the Internet.
</message>
<message name="IDS_ERRORPAGES_SUMMARY_INTERNET_DISCONNECTED_INSTRUCTIONS_TEMPLATE" desc="Template for the summary of the error page when the network connection failed, on platforms with instructions.">
<ph name="ERROR_DESCRIPTION_TEXT">
$1<ex>Google Chrome can't display the webpage because your computer isn't connected to the Internet.</ex>
</ph>
<ph name="LINE_BREAK">&lt;br /&gt;&lt;br /&gt;<ex>&lt;br /&gt;&lt;br /&gt;</ex></ph>
You can try to diagnose the problem by taking the following steps:
<ph name="LINE_BREAK">&lt;br /&gt;&lt;br /&gt;<ex>&lt;br /&gt;&lt;br /&gt;</ex></ph>
<ph name="LINE_BREAK">&lt;br /&gt;<ex>&lt;br /&gt;</ex></ph>
<ph name="PLATFORM_TEXT">
$2<ex>Goto the wrench menu and choose Fix It.</ex>
$1<ex>Goto the wrench menu and choose Fix It.</ex>
</ph>
</message>
</if>
......
chrome/app/google_chrome_strings.grd
View file @ f8cb5584
......@@ -1193,6 +1193,13 @@ Signing in anyway will merge Chrome information like bookmarks, history, and oth
Your computer is running an old version of Microsoft Windows that cannot process this website's security certificate. Because of this problem, Google Chrome can't tell whether the certificate came from <ph name="SITE">$1<ex>google.com</ex></ph> or from someone on your network pretending to be <ph name="SITE">$1<ex>google.com</ex></ph>. Please update your computer to a more recent version of Windows.
</message>
<!-- Offline interstitial -->
<if expr="not is_android and not is_ios">
<message name="IDS_ERRORPAGES_SUMMARY_INTERNET_DISCONNECTED" desc="Summary of the error page when the network connection failed. May be followed by platform dependent instructions.">
Google Chrome can’t display the webpage because your computer isn’t connected to the Internet.
</message>
</if>
<!-- OOBE -->
<if expr="chromeos">
<message name="IDS_INSTALLING_UPDATE" desc="Label shown on the updates installation screen during OOBE">
......
chrome/common/localized_error.cc
View file @ f8cb5584
......@@ -510,6 +510,7 @@ void LocalizedError::GetStrings(int error_code,
base::DictionaryValue* error_strings) {
bool rtl = LocaleIsRTL();
error_strings->SetString("textdirection", rtl ? "rtl" : "ltr");
webui::SetFontAndTextDirection(error_strings);
// Grab the strings and settings that depend on the error type. Init
// options with default values.
......@@ -556,8 +557,16 @@ void LocalizedError::GetStrings(int error_code,
error_strings->SetString("iconClass", icon_class);
base::DictionaryValue* summary = new base::DictionaryValue;
summary->SetString("msg",
l10n_util::GetStringUTF16(options.summary_resource_id));
// For offline show a summary message underneath the heading.
if (error_code == net::ERR_INTERNET_DISCONNECTED) {
error_strings->SetString("primaryParagraph",
l10n_util::GetStringUTF16(options.summary_resource_id));
} else {
// Set summary message in the details.
summary->SetString("msg",
l10n_util::GetStringUTF16(options.summary_resource_id));
}
summary->SetString("failedUrl", failed_url_string);
summary->SetString("hostName", net::IDNToUnicode(failed_url.host(),
accept_languages));
......@@ -611,12 +620,10 @@ void LocalizedError::GetStrings(int error_code,
IDS_ERRORPAGES_SUMMARY_INTERNET_DISCONNECTED_PLATFORM_VISTA;
}
#endif // defined(OS_WIN)
// Lead with the general error description, and suffix with the platform
// dependent portion of the summary section.
// Platform dependent portion of the summary section.
summary->SetString("msg",
l10n_util::GetStringFUTF16(
IDS_ERRORPAGES_SUMMARY_INTERNET_DISCONNECTED_INSTRUCTIONS_TEMPLATE,
l10n_util::GetStringUTF16(options.summary_resource_id),
l10n_util::GetStringUTF16(platform_string_id)));
}
#endif // defined(OS_MACOSX) || defined(OS_WIN)
......
chrome/renderer/resources/neterror.css
View file @ f8cb5584
......@@ -2,19 +2,6 @@
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */
body {
background-color: #E6E6E6;
font-family: Helvetica, Arial, sans-serif;
font-size: 10pt;
margin: 50px 40px 20px 40px;
}
#main-frame-error {
margin: auto;
max-width: 540px;
min-width: 200px;
}
/* Don't use the main frame div when the error is in a subframe. */
html[subframe] #main-frame-error {
display: none;
......@@ -25,31 +12,15 @@ html:not([subframe]) #sub-frame-error {
display: none;
}
#box {
background-color: #fbfbfb;
border: 1px solid #AAA;
border-bottom: 1px solid #888;
border-radius: 3px;
color: black;
<if expr="not is_android and not is_ios">
/* Not done on mobile for performance reasons. */
box-shadow: 0px 2px 2px #AAA;
</if>
}
#diagnose-button {
-webkit-margin-start: 0;
float: none;
margin-bottom: 10px;
margin-top: 20px;
}
#content-top #buttons,
#content-top h1 {
color: #666;
font-size: 1.5em;
font-weight: normal;
text-align: center;
margin: 10px 0 30px;
h1 {
-webkit-margin-before: 0;
}
h2 {
......@@ -74,14 +45,17 @@ a {
* renderer process, so embed the resource manually.
*/
content: -webkit-image-set(
url('../../app/theme/default_100_percent/common/error_network_generic.png') 1x,
url('../../app/theme/default_200_percent/common/error_network_generic.png') 2x);
url('default_100_percent/common/error_network_generic.png') 1x,
url('default_200_percent/common/error_network_generic.png') 2x);
height: 50px;
padding-top: 20px;
width: 41px;
}
.icon-offline {
content: -webkit-image-set(
url('../../app/theme/default_100_percent/common/error_network_offline.png') 1x,
url('../../app/theme/default_200_percent/common/error_network_offline.png') 2x);
url('default_100_percent/offline/100-error-offline.png') 1x,
url('default_200_percent/offline/200-error-offline.png') 2x);
}
#content-top {
......@@ -121,106 +95,6 @@ a {
overflow-wrap: break-word;
}
button {
-webkit-user-select: none;
border: 1px solid rgba(0, 0, 0, 0.25);
border-radius: 2px;
color: #444;
<if expr="not is_android">
/* iOS does not support linear-gradient without a prefix. */
background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
text-shadow: 0 1px 0 rgb(240, 240, 240);
</if>
<if expr="is_android">
/* Android uses flat background colors. */
background-color: #ededed;
font-weight: bold;
</if>
<if expr="not is_android and not is_ios">
/* Not done on mobile for performance reasons. */
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
inset 0 1px 2px rgba(255, 255, 255, 0.75);
</if>
}
button:hover {
border: 1px solid rgba(0, 0, 0, 0.3);
color: #000;
<if expr="not is_android">
background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
</if>
<if expr="is_android">
background-color: #f0f0f0;
</if>
<if expr="not is_android and not is_ios">
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12),
inset 0 1px 2px rgba(255, 255, 255, 0.95);
</if>
}
button:active {
border: 1px solid rgba(0, 0, 0, 0.3);
color: #444;
<if expr="not is_android">
background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
</if>
<if expr="is_android">
background-color: #e7e7e7;
</if>
<if expr="not is_android and not is_ios">
box-shadow: none;
</if>
}
.text-button {
margin: 0 5px;
min-height: 29px;
min-width: 65px;
padding: 7px 13px;
}
.blue-button {
color: #fff;
<if expr="not is_android">
background-image: -webkit-linear-gradient(#5d9aff, #5d9aff 38%, #5891f0);
border: 1px solid rgba(45, 102, 195, 1);
text-shadow: 0 1px 0 rgba(0,0,0,0.5);
</if>
<if expr="is_android">
background-color: rgb(39, 180, 231);
border: 1px solid rgb(0, 152, 206);
</if>
<if expr="not is_android and not is_ios">
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15),
inset 0 1px 2px rgba(255, 255, 255, 0.2);
</if>
}
.blue-button:hover {
color: #fff;
<if expr="not is_android">
background-image: -webkit-linear-gradient(#659efd, #659efd 38%, #6097f1);
border: 1px solid rgba(45, 102, 195, 1);
</if>
<if expr="not is_android and not is_ios">
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25),
inset 0 1px 2px rgba(255, 255, 255, 0.2);
</if>
}
.blue-button:active {
<if expr="not is_android">
background-image: -webkit-linear-gradient(#6095ed, #6095ed 38%, #6095ed);
border: 1px solid rgb(38, 84, 160);
</if>
<if expr="is_android">
background-color: rgb(0, 152, 206);
</if>
<if expr="not is_android and not is_ios">
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
</if>
}
#search-container {
/* Prevents a space between controls. */
display: flex;
......@@ -366,11 +240,6 @@ html[subframe] body {
text-decoration: underline;
}
#buttons {
padding-left: 20px;
padding-right: 20px;
}
/* Styles for platform dependent separation of controls and details button. */
.suggested-left > #control-buttons,
.suggested-right > #details-button {
......@@ -392,3 +261,54 @@ html[subframe] body {
display: block;
width: 100%;
}
/* Offline page */
.offline .icon {
height: 47px;
margin: 0 0 40px;
position: relative;
width: 44px;
}
.offline .interstitial-wrapper {
color: #2b2b2b;
font-size: 1em;
line-height: 1.55;
margin: 100px auto 0;
max-width: 600px;
width: 100%;
}
.offline .runner-container {
height: 150px;
max-width: 600px;
overflow: hidden;
position: absolute;
top: 10px;
width: 44px;
z-index: 2;
}
.offline .runner-canvas {
height: 150px;
max-width: 600px;
opacity: 1;
overflow: hidden;
position: absolute;
top: 0;
}
.offline .controller {
background: rgba(247,247,247, .1);
height: 100vh;
left: 0;
position: absolute;
top: 0;
width: 100vw;
z-index: 1;
}
#offline-resources {
display: none;
}
chrome/renderer/resources/neterror.html
View file @ f8cb5584
<!DOCTYPE html>
<html i18n-values="dir:textdirection">
<html i18n-values="dir:textdirection;.style.fontSize:fontsize">
<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="../../browser/resources/security_warnings/interstitial_v2.css">
<link rel="stylesheet" href="neterror.css">
<script src="neterror.js"></script>
<script src="offline.js"></script>
</head>
<body id="t">
<div id="main-frame-error">
<div id="box">
<div id="content-top">
<h1>
<div>
<img class="icon"
jseval="updateIconClass(this.classList, iconClass)">
</div>
<span i18n-content="heading"></span>
</h1>
<div id="buttons">
<div id="control-buttons">
<button id="reload-button"
class="blue-button text-button"
onclick="trackClick(this.trackingId);
reloadButtonClick(this.url);"
jsselect="reloadButton"
jsvalues=".url:reloadUrl; .trackingId:reloadTrackingId"
jscontent="msg"></button>
<button id="stale-load-button"
class="blue-button text-button"
onclick="loadStaleButtonClick()"
jsselect="staleLoadButton"
jscontent="msg" jsvalues="title:title"></button>
</div>
<button id="details-button" class="text-button"
onclick="detailsButtonClick(); toggleHelpBox()"
jsdisplay="details" jscontent="details"
jsvalues=".detailsText:details; .hideDetailsText:hideDetails;">
</a>
<body id="t" i18n-values=".style.fontFamily:fontfamily">
<div id="main-frame-error" class="interstitial-wrapper">
<img class="icon"
jseval="updateIconClass(this.classList, iconClass)">
<div id="main-message">
<h1 i18n-content="heading"></h1>
<p i18n-values=".innerHTML:primaryParagraph"></p>
<div id="buttons" class="nav-wrapper">
<div id="control-buttons">
<button id="reload-button"
class="blue-button text-button"
onclick="trackClick(this.trackingId);
reloadButtonClick(this.url);"
jsselect="reloadButton"
jsvalues=".url:reloadUrl; .trackingId:reloadTrackingId"
jscontent="msg"></button>
<button id="stale-load-button"
class="blue-button text-button"
onclick="loadStaleButtonClick()"
jsselect="staleLoadButton"
jscontent="msg" jsvalues="title:title"></button>
</div>
<button id="details-button" class="text-button small-link"
onclick="detailsButtonClick(); toggleHelpBox()"
jsdisplay="details" jscontent="details"
jsvalues=".detailsText:details; .hideDetailsText:hideDetails;">
</div>
<!-- Outer and inner divs are needed both for margins and sizing. -->
<div id="help-box-outer" class="hidden">
<div id="help-box-inner">
<div jsselect="summary">
<span jsvalues=".innerHTML:msg"></span>
</div>
<div class="suggestions" jsselect="suggestions">
<div class="suggestion-header" jsvalues=".innerHTML:header"></div>
<div class="suggestion-body" jsvalues=".innerHTML:body"></div>
</div>
<button class="text-button" id="diagnose-button"
onclick="diagnoseErrors()" jscontent="diagnose"
jsdisplay="diagnose"></button>
<div id="diagnose-frame" class="hidden"></div>
<form class="suggestions" jsdisplay="searchUrl"
jsvalues=".url:searchUrl; .trackingId:searchTrackingId"
onsubmit="trackClick(this.trackingId); return search(this.url);">
<div class="suggestion-header" jscontent="searchHeader"></div>
<div id="search-container">
<input type="text" name="q" id="search-box"
jsvalues=".value:searchTerms" />
<button type="submit" id="search-button" class="blue-button"
jsvalues="aria-label:searchHeader">
<img id="search-image">
</button>
</div>
</form>
<div class="error-code" jscontent="errorCode"></div>
</div>
<!-- Outer and inner divs are needed both for margins and sizing. -->
<div id="help-box-outer" class="hidden">
<div id="details">
<div jsselect="summary">
<span jsvalues=".innerHTML:msg"></span>
</div>
<div class="suggestions" jsselect="suggestions">
<div class="suggestion-header" jsvalues=".innerHTML:header"></div>
<div class="suggestion-body" jsvalues=".innerHTML:body"></div>
</div>
<button class="text-button" id="diagnose-button"
onclick="diagnoseErrors()" jscontent="diagnose"
jsdisplay="diagnose"></button>
<div id="diagnose-frame" class="hidden"></div>
<form class="suggestions" jsdisplay="searchUrl"
jsvalues=".url:searchUrl; .trackingId:searchTrackingId"
onsubmit="trackClick(this.trackingId); return search(this.url);">
<div class="suggestion-header" jscontent="searchHeader"></div>
<div id="search-container">
<input type="text" name="q" id="search-box"
jsvalues=".value:searchTerms" />
<button type="submit" id="search-button" class="blue-button"
jsvalues="aria-label:searchHeader">
<img id="search-image">
</button>
</div>
</form>
<div class="error-code" jscontent="errorCode"></div>
</div>
</div>
</div>
......@@ -80,5 +76,31 @@
jsvalues=".title:errorDetails">
<div id="sub-frame-error-details" jsvalues=".innerHTML:errorDetails"></div>
</div>
<div id="offline-resources">
<div id="offline-resources-1x">
<img id="1x-obstacle-large" src="default_100_percent/offline/100-obstacle-large-sprite.png">
<img id="1x-obstacle-small" src="default_100_percent/offline/100-obstacle-small-sprite.png">
<img id="1x-cloud" src="default_100_percent/offline/100-cloud.png">
<img id="1x-text" src="default_100_percent/offline/100-text-sprite.png">
<img id="1x-horizon" src="default_100_percent/offline/100-horizon.png">
<img id="1x-trex" src="default_100_percent/offline/100-offline-trex.png">
<img id="1x-restart" src="default_100_percent/offline/100-restart.png">
</div>
<div id="offline-resources-2x">
<img id="2x-obstacle-large" src="default_200_percent/offline/200-obstacle-large-sprite.png">
<img id="2x-obstacle-small" src="default_200_percent/offline/200-obstacle-small-sprite.png">
<img id="2x-cloud" src="default_200_percent/offline/200-cloud.png">
<img id="2x-text" src="default_200_percent/offline/200-text-sprite.png">
<img id="2x-horizon" src="default_200_percent/offline/200-horizon.png">
<img id="2x-trex" src="default_200_percent/offline/200-offline-trex.png">
<img id="2x-restart" src="default_200_percent/offline/200-restart.png">
</div>
<template id="audio-resources">
<audio id="offline-sound-press" src="sounds/button-press.mp3"></audio>
<audio id="offline-sound-hit" src="sounds/hit.mp3"></audio>
<audio id="offline-sound-reached" src="sounds/score-reached.mp3"></audio>
</template>
</div>
</body>
</html>
chrome/renderer/resources/neterror.js
View file @ f8cb5584
......@@ -126,5 +126,18 @@ function setButtonLayout() {
staleLoadButton.style.display == 'none') {
detailsButton.classList.add('singular');
}
// Hide the details button if there are no details to show.
if (templateData && templateData.summary && !templateData.summary.msg) {
document.getElementById('details-button').hidden = true;
document.getElementById('help-box-outer').style.display = 'block';
}
}
document.addEventListener('DOMContentLoaded', setButtonLayout);
document.addEventListener('DOMContentLoaded', function() {
setButtonLayout();
if (document.querySelector('.icon-offline')) {
document.body.classList.add('offline');
new Runner('.interstitial-wrapper');
}
});
chrome/renderer/resources/offline.js 0 → 100644
View file @ f8cb5584
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment