Skip to content

GitLab

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

Update SSL/malware/net error interstitial design 

+ On small screens the navigation buttons are anchored to the bottom of the screen.
+ Tweaks to the text colour
+ Change button styling of safe browsing page

BUG=422882

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

Cr-Commit-Position: refs/heads/master@{#313910}
parent 6469449b
Hide whitespace changes
Inline Side-by-side
Showing with 514 additions and 107 deletions
chrome/browser/resources/chromeos/neterror.js
View file @ c2e35628
......@@ -3,7 +3,7 @@
// found in the LICENSE file.
function toggleHelpBox() {
var helpBoxOuter = $('help-box-outer');
var helpBoxOuter = $('details');
helpBoxOuter.classList.toggle('hidden');
var detailsButton = $('details-button');
if (helpBoxOuter.classList.contains('hidden')) {
......
chrome/browser/resources/chromeos/offline_net_load.html
View file @ c2e35628
<!doctype html>
<html i18n-values="dir:textdirection;.style.fontSize:fontsize;lang:language">
<html i18n-values="dir:textdirection;lang:language">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,
......@@ -31,20 +31,17 @@
jsdisplay="details"></button>
</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 id="diagnose-button" onclick="diagnoseErrors()"
jscontent="diagnose" jsdisplay="diagnose"></button>
<div class="error-code" jscontent="errorCode"></div>
<div id="details" class="hidden">
<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 id="diagnose-button" onclick="diagnoseErrors()"
jscontent="diagnose" jsdisplay="diagnose"></button>
<div class="error-code" jscontent="errorCode"></div>
</div>
</div>
<div id="sub-frame-error">
......
chrome/browser/resources/security_warnings/interstitial_v2.css
View file @ c2e35628
......@@ -14,7 +14,7 @@ a {
body {
background-color: #f7f7f7;
color: #585858;
color: #646464;
}
body.safe-browsing {
......@@ -50,6 +50,10 @@ button:hover {
box-shadow: 0 1px 3px rgba(0, 0, 0, .50);
}
#debugging {
overflow: auto;
}
.debugging-content {
line-height: 1em;
margin-bottom: 0;
......@@ -69,18 +73,33 @@ button:hover {
margin-top: 20px;
}
#details-button {
background: inherit;
border: 0;
float: none;
margin: -6px 0 0;
padding: 0;
text-decoration: underline;
}
#details-button:hover {
box-shadow: inherit;
}
#error-code {
color: black;
font-size: .825em;
opacity: .35;
text-transform: uppercase;
}
#error-debugging-info {
font-size: 0.8em;
overflow: auto;
}
h1 {
color: #585858;
color: #333;
font-size: 1.6em;
font-weight: normal;
line-height: 1.25em;
......@@ -97,6 +116,7 @@ h2 {
}
html {
-webkit-text-size-adjust: 100%;
font-size: 125%;
}
......@@ -147,13 +167,11 @@ input[type=checkbox] {
}
.safe-browsing button {
background-color: rgb(206, 52, 38);
border: 1px solid white;
background-color: rgba(255, 255, 255, .15);
}
.safe-browsing button:active {
background-color: rgb(206, 52, 38);
border-color: rgba(255, 255, 255, .6);
background-color: rgba(255, 255, 255, .25);
}
.safe-browsing button:hover {
......@@ -207,7 +225,7 @@ input[type=checkbox] {
width: 14px;
}
.styled-checkbox label::after {
.styled-checkbox .checkbox-tick {
background: transparent;
border: 2px solid white;
border-right-width: 0;
......@@ -222,7 +240,7 @@ input[type=checkbox] {
width: 9px;
}
.styled-checkbox input[type=checkbox]:checked + label::after {
.styled-checkbox input[type=checkbox]:checked ~ .checkbox-tick {
opacity: 1;
}
......@@ -238,11 +256,14 @@ input[type=checkbox] {
}
}
@media (max-width: 400px) {
@media (max-width: 420px) {
button,
[dir='rtl'] button {
[dir='rtl'] button,
.small-link {
float: none;
font-size: 1em;
font-size: .825em;
font-weight: 400;
text-transform: uppercase;
width: 100%;
}
......@@ -256,7 +277,6 @@ input[type=checkbox] {
#details-button {
display: block;
padding-top: 14px;
text-align: center;
width: 100%;
}
......@@ -272,8 +292,345 @@ input[type=checkbox] {
.nav-wrapper {
margin-top: 30px;
}
}
/**
* Mobile specific styling.
* Navigation buttons are anchored to the bottom of the screen.
* Details message replaces the top content in its own scrollable area.
*/
@media (max-width: 420px) and (orientation: portrait) {
#details-button {
border: 0;
margin: 20px 0 0;
}
}
/* Fixed nav. */
@media (min-width:320px) and (max-width: 420px) and
(min-height: 400px) and (orientation:portrait),
(min-width: 421px) and (max-width: 736px) and (min-height: 240px) and
(max-height: 420px) and (orientation:landscape) {
body:not(.offline) .nav-wrapper {
background: #f7f7f7;
bottom: 0;
left: 0;
position: fixed;
z-index: 1;
}
body.safe-browsing .nav-wrapper {
background: rgb(206, 52, 38);
}
}
@media (max-width: 420px) and (orientation: portrait),
(max-width: 736px) and (max-height: 420px) and (orientation: landscape) {
body {
margin: 0 auto;
}
button,
[dir='rtl'] button,
button.small-link {
font-family: Roboto-Regular,Helvetica;
font-size: .933em;
font-weight: 600;
text-transform: uppercase;
}
.nav-wrapper {
box-sizing: border-box;
padding: 16px 24px 8px;
width: 100%;
}
#details {
box-sizing: border-box;
height: auto;
margin: 0;
opacity: 1;
transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
#details.hidden,
#main-content.hidden {
display: block;
height: 0;
opacity: 0;
overflow: hidden;
}
#details-button {
height: 48px;
}
h1 {
font-size: 1.5em;
margin-bottom: 8px;
}
.icon {
margin-bottom: 12px;
}
.interstitial-wrapper {
box-sizing: border-box;
margin: 24px 0 12px;
max-width: initial;
overflow: auto;
padding: 0 24px;
position: relative;
}
.interstitial-wrapper p {
font-size: .95em;
line-height: 1.61em;
margin-top: 8px;
}
#main-content {
margin: 0;
transition: opacity 100ms cubic-bezier(0.4, 0, 0.2, 1);
}
.small-link {
border: 0;
}
.suggested-left > #control-buttons,
.suggested-right > #control-buttons {
float: none;
margin: 0;
}
}
@media (min-height: 400px) and (orientation:portrait) {
body:not(.safe-browsing-has-checkbox):not(.offline) .interstitial-wrapper {
margin-bottom: 145px;
}
}
@media (min-height: 299px) and (orientation:portrait) {
.nav-wrapper {
padding-bottom: 16px;
}
}
@media (min-height: 405px) and (orientation:portrait) {
.icon {
margin-bottom: 24px;
}
.interstitial-wrapper {
margin-top: 64px;
}
}
@media (min-height: 480px) and (max-width: 420px) and (orientation: portrait),
(min-height: 338px) and (max-height: 420px) and (max-width: 736px) and
(orientation: landscape) {
.icon {
margin-bottom: 24px;
}
.nav-wrapper {
padding: 16px 24px 24px;
}
}
@media (min-height: 500px) and (max-width: 414px) and (orientation: portrait) {
:not(.safe-browsing-has-checkbox) .interstitial-wrapper {
margin-top: 96px;
}
}
/* Phablet sizing */
@media (min-width: 375px) and (min-height: 641px) and
(max-width: 414px) and (orientation: portrait) {
button,
[dir='rtl'] button,
.small-link {
font-size: 1em;
height: 40px;
}
body:not(.neterror) .icon {
height: 80px;
width: 80px;
}
#details-button {
margin-top: 28px;
}
h1 {
font-size: 1.7em;
}
.icon {
margin-bottom: 28px;
}
.interstitial-wrapper {
padding: 28px;
}
.interstitial-wrapper p {
font-size: 1.05em;
}
.nav-wrapper {
padding: 28px;
}
.neterror .icon {
height: 80px;
width: 65.6px;
}
}
@media (min-width: 420px) and (max-width: 736px) and
(min-height: 240px) and (max-height: 298px) and
(orientation:landscape) {
body:not(.neterror) .icon {
height: 50px;
width: 50px;
}
.icon {
padding-top: 0;
}
.interstitial-wrapper {
margin-top: 16px;
}
.nav-wrapper {
padding: 0 24px 8px;
}
}
@media (min-width: 420px) and (max-width: 736px) and
(min-height: 240px) and (max-height: 420px) and
(orientation:landscape) {
#details-button {
margin: 0;
}
.interstitial-wrapper {
margin-bottom: 70px;
}
.nav-wrapper {
margin-top: 0;
}
#malware-opt-in {
margin-top: 0;
}
#reload-button,
#primary-button {
margin: 6px 0;
}
}
/* Phablet landscape */
@media (min-width: 680px) and (max-height: 414px) {
.interstitial-wrapper {
margin: 24px auto;
}
.nav-wrapper {
margin: 0 auto;
}
}
@media (max-height: 404px) {
button {
margin-top: 0;
}
#details-button {
height: 32px;
margin: 8px 0;
}
}
@media (max-height: 240px) and (orientation: landscape),
(max-height: 480px) and (orientation: portrait),
(max-width: 419px) and (max-height: 323px) {
body:not(.neterror) .icon {
height: 56px;
width: 56px;
}
.icon {
margin-bottom: 16px;
}
}
/* Small mobile screens. No fixed nav. */
@media (max-height: 400px) and (orientation: portrait),
(max-height: 240px) and (orientation: landscape) {
.interstitial-wrapper {
display: flex;
flex-direction: column;
margin-bottom: 0;
}
#details {
flex: 1 1 auto;
order: 0;
}
#main-content {
flex: 1 1 auto;
order: 0;
}
.nav-wrapper {
flex: 0 1 auto;
margin-top: 0;
order: 1;
padding-left: 0;
padding-right: 0;
position: relative;
}
}
/* Malware opt-in. No fixed nav. */
@media (max-height: 600px) and (orientation: portrait),
(max-height: 360px) and (orientation: landscape) {
.safe-browsing-has-checkbox .interstitial-wrapper {
display: flex;
flex-direction: column;
margin-bottom: 0;
}
.safe-browsing-has-checkbox #details {
flex: 1 1 auto;
order: 0;
}
.safe-browsing-has-checkbox #main-content {
flex: 1 1 auto;
order: 0;
}
.safe-browsing-has-checkbox #malware-opt-in {
margin-bottom: 8px;
}
body.safe-browsing-has-checkbox .nav-wrapper {
flex: 0 1 auto;
margin-top: 0;
order: 1;
padding-left: 0;
padding-right: 0;
position: relative;
}
}
chrome/browser/resources/security_warnings/interstitial_v2.html
View file @ c2e35628
......@@ -10,35 +10,40 @@
<script src="captive_portal.js"></script>
<script src="ssl.js"></script>
<script src="safe_browsing.js"></script>
<script src="interstitial_v2_mobile.js"></script>
<script src="interstitial_v2.js"></script>
</head>
<body id="body">
<div class="interstitial-wrapper">
<div class="icon" id="icon"></div>
<div id="main-message">
<h1 i18n-content="heading"></h1>
<p i18n-values=".innerHTML:primaryParagraph"></p>
</div>
<div id="malware-opt-in" class="hidden">
<div class="styled-checkbox">
<input type="checkbox" id="opt-in-checkbox">
<label for="opt-in-checkbox"></label>
<div id="main-content">
<div class="icon" id="icon"></div>
<div id="main-message">
<h1 i18n-content="heading"></h1>
<p i18n-values=".innerHTML:primaryParagraph"></p>
</div>
<div id="malware-opt-in" class="hidden">
<div class="styled-checkbox">
<label>
<input type="checkbox" id="opt-in-checkbox">
<span class="checkbox-tick"></span>
</label>
</div>
<div id="opt-in-label"></div>
</div>
<div id="opt-in-label"></div>
</div>
<div class="nav-wrapper">
<button i18n-content="primaryButtonText" id="primary-button"></button>
<a href="#" id="details-button" class="small-link"
i18n-content="openDetails"></a>
<button id="details-button" class="small-link"
i18n-content="openDetails"></button>
</div>
<div id="details" class="hidden">
<p i18n-values=".innerHTML:explanationParagraph"></p>
<p i18n-values=".innerHTML:finalParagraph" id="final-paragraph"></p>
</div>
<div id="debugging">
<p id="error-code"></p>
<div id="error-debugging-info" class="hidden"></div>
<div id="debugging">
<p id="error-code"></p>
<div id="error-debugging-info" class="hidden"></div>
</div>
</div>
</div>
</body>
</html>
</html>
\ No newline at end of file
chrome/browser/resources/security_warnings/interstitial_v2.js
View file @ c2e35628
......@@ -139,6 +139,14 @@ function setupEvents() {
} else {
$('details-button').addEventListener('click', function(event) {
var hiddenDetails = $('details').classList.toggle('hidden');
if (mobileNav) {
// Details appear over the main content on small screens.
$('main-content').classList.toggle('hidden', !hiddenDetails);
} else {
$('main-content').classList.remove('hidden');
}
$('details-button').innerText = hiddenDetails ?
loadTimeData.getString('openDetails') :
loadTimeData.getString('closeDetails');
......
chrome/browser/resources/security_warnings/interstitial_v2_mobile.js 0 → 100644
View file @ c2e35628
// Copyright 2015 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.
var mobileNav = false;
/**
* For small screen mobile the navigation buttons are moved
* below the advanced text.
*/
function onResize() {
var helpOuterBox = document.querySelector('#details');
var mainContent = document.querySelector('#main-content');
var mediaQuery = '(max-width: 420px) and (orientation: portrait),' +
'(max-width: 736px) and (max-height: 420px) and (orientation: landscape)';
mobileNav = window.matchMedia(mediaQuery).matches;
mainContent.classList.toggle('hidden', false);
helpOuterBox.classList.toggle('hidden', true);
}
function setupMobileNav() {
window.addEventListener('resize', onResize);
onResize();
}
document.addEventListener('DOMContentLoaded', setupMobileNav);
chrome/browser/resources/security_warnings/safe_browsing.js
View file @ c2e35628
......@@ -26,6 +26,7 @@ function setupCheckbox() {
$('opt-in-label').innerHTML = loadTimeData.getString('optInLink');
$('opt-in-checkbox').checked = loadTimeData.getBoolean(SB_BOX_CHECKED);
$('malware-opt-in').classList.remove('hidden');
$('body').classList.add('safe-browsing-has-checkbox');
$('opt-in-checkbox').addEventListener('click', function() {
sendCommand(
......
chrome/renderer/resources/neterror.css
View file @ c2e35628
......@@ -37,6 +37,7 @@ a {
.icon {
-webkit-user-select: none;
content: '';
}
.icon-generic {
......@@ -153,6 +154,7 @@ a {
.error-code {
color: #A0A0A0;
font-size: .825em;
margin-top: 15px;
}
......@@ -165,11 +167,8 @@ a {
/* Decrease padding at low sizes. */
@media (max-width: 640px), (max-height: 640px) {
body {
margin: 15px;
}
h1 {
margin: 10px 0 15px;
margin: 0 0 15px;
}
#content-top {
margin: 15px;
......@@ -282,8 +281,9 @@ html[subframe] body {
color: #2b2b2b;
font-size: 1em;
line-height: 1.55;
margin: 100px auto 0;
margin: 0 auto;
max-width: 600px;
padding-top: 100px;
width: 100%;
}
......@@ -320,11 +320,10 @@ html[subframe] body {
display: none;
}
@media (max-width: 400px) {
@media (max-width: 420px) {
.suggested-left > #control-buttons,
.suggested-right > #control-buttons {
float: none;
margin: 50px 0 20px;
}
}
......@@ -345,3 +344,9 @@ html[subframe] body {
margin-top: 30px;
}
}
@media (min-height: 240px) and (orientation: landscape) {
.offline .interstitial-wrapper {
margin-bottom: 20px;
}
}
chrome/renderer/resources/neterror.html
View file @ c2e35628
<!doctype html>
<html i18n-values="dir:textdirection;.style.fontSize:fontsize;lang:language">
<html i18n-values="dir:textdirection;lang:language">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,
......@@ -7,66 +7,66 @@
<title i18n-content="title"></title>
<link rel="stylesheet" href="../../browser/resources/security_warnings/interstitial_v2.css">
<link rel="stylesheet" href="neterror.css">
<script src="../../browser/resources/security_warnings/interstitial_v2_mobile.js"></script>
<script src="neterror.js"></script>
<script src="offline.js"></script>
</head>
<body id="t" i18n-values=".style.fontFamily:fontfamily">
<body id="t" i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
<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 hidden></p>
<div id="buttons" class="nav-wrapper">
<div id="control-buttons" hidden>
<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 id="main-content">
<img class="icon"
jseval="updateIconClass(this.classList, iconClass)">
<div id="main-message">
<h1 i18n-content="heading"></h1>
<p hidden></p>
</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 id="buttons" class="nav-wrapper">
<div id="control-buttons" hidden>
<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;"></button>
</div>
<div id="details" class="hidden">
<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 id="sub-frame-error">
......
chrome/renderer/resources/neterror.js
View file @ c2e35628
......@@ -3,13 +3,17 @@
// found in the LICENSE file.
function toggleHelpBox() {
var helpBoxOuter = document.getElementById('help-box-outer');
var helpBoxOuter = document.getElementById('details');
helpBoxOuter.classList.toggle('hidden');
var detailsButton = document.getElementById('details-button');
if (helpBoxOuter.classList.contains('hidden'))
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');
}
function diagnoseErrors() {
......@@ -53,6 +57,8 @@ function updateIconClass(classList, newClass) {
if (newClass == 'icon-offline') {
document.body.classList.add('offline');
new Runner('.interstitial-wrapper');
} else {
document.body.classList.add('neterror');
}
}
......@@ -136,7 +142,7 @@ function onDocumentLoad() {
if (loadTimeData.valueExists('summary') &&
!loadTimeData.getValue('summary').msg) {
detailsButton.style.display = 'none';
document.getElementById('help-box-outer').style.display = 'block';
document.getElementById('details').style.display = 'block';
}
</if>
......
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