diff options
Diffstat (limited to 'chromium/components/security_interstitials/core/browser/resources')
12 files changed, 383 insertions, 288 deletions
diff --git a/chromium/components/security_interstitials/core/browser/resources/extended_reporting.js b/chromium/components/security_interstitials/core/browser/resources/extended_reporting.js index 5a72ad12204..8acc16af783 100644 --- a/chromium/components/security_interstitials/core/browser/resources/extended_reporting.js +++ b/chromium/components/security_interstitials/core/browser/resources/extended_reporting.js @@ -35,13 +35,13 @@ function setupExtendedReportingCheckbox() { if ($('whitepaper-link')) { $('whitepaper-link').addEventListener('click', function(event) { - sendCommand(CMD_OPEN_WHITEPAPER); + sendCommand(SecurityInterstitialCommandId.CMD_OPEN_WHITEPAPER); }); } $('opt-in-checkbox').addEventListener('click', function() { sendCommand($('opt-in-checkbox').checked ? - CMD_DO_REPORT : - CMD_DONT_REPORT); + SecurityInterstitialCommandId.CMD_DO_REPORT : + SecurityInterstitialCommandId.CMD_DONT_REPORT); }); } diff --git a/chromium/components/security_interstitials/core/browser/resources/images/blocked.svg b/chromium/components/security_interstitials/core/browser/resources/images/blocked.svg new file mode 100644 index 00000000000..102d2b0d217 --- /dev/null +++ b/chromium/components/security_interstitials/core/browser/resources/images/blocked.svg @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg width="20px" height="16px" viewBox="0 0 20 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g transform="translate(-2.000000, -4.000000)"> + <g> + <polygon points="0 0 24 0 24 24 0 24"></polygon> + <path d="M20,4 C21,4 22,5 22,6 L22,18 C22,19 21,20 20,20 L4,20 C2.9,20 2,19.1 2,18 L2,6 C2,5 3,4 4,4 L20,4 Z M14.3923033,15.4598278 L15.4949742,14.3581062 L13.1207639,11.9859397 L15.5,9.60774749 L14.3973291,8.50602582 L12.0170879,10.8842181 L9.63182079,8.5 L8.52914991,9.60172166 L10.9154222,11.9859397 L8.5,14.3982783 L9.60267088,15.5 L12.0170879,13.0866571 L14.3923033,15.4598278 Z" fill-opacity="0.2" fill="#000000"></path> + </g> + </g> + </g> +</svg>
\ No newline at end of file diff --git a/chromium/components/security_interstitials/core/browser/resources/interstitial_common.css b/chromium/components/security_interstitials/core/browser/resources/interstitial_common.css new file mode 100644 index 00000000000..32a27b997ff --- /dev/null +++ b/chromium/components/security_interstitials/core/browser/resources/interstitial_common.css @@ -0,0 +1,35 @@ +/* Copyright 2017 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. */ + +a { + color: rgb(88, 88, 88); +} + +body { + background-color: rgb(247, 247, 247); + color: rgb(100, 100, 100); +} + +#details-button { + background: inherit; + border: 0; + float: none; + margin: 0; + padding: 10px 0; + text-transform: uppercase; +} + +.hidden { + display: none; +} + +html { + -webkit-text-size-adjust: 100%; + font-size: 125%; +} + +.icon { + background-repeat: no-repeat; + background-size: 100%; +}
\ No newline at end of file diff --git a/chromium/components/security_interstitials/core/browser/resources/interstitial_common.js b/chromium/components/security_interstitials/core/browser/resources/interstitial_common.js new file mode 100644 index 00000000000..e826a149075 --- /dev/null +++ b/chromium/components/security_interstitials/core/browser/resources/interstitial_common.js @@ -0,0 +1,46 @@ +// Copyright 2017 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. + +// This is the shared code for security interstitials. It is used for both SSL +// interstitials and Safe Browsing interstitials. + +// Should match security_interstitials::SecurityInterstitialCommands +/** @enum| {string} */ +var SecurityInterstitialCommandId = { + CMD_DONT_PROCEED: 0, + CMD_PROCEED: 1, + // Ways for user to get more information + CMD_SHOW_MORE_SECTION: 2, + CMD_OPEN_HELP_CENTER: 3, + CMD_OPEN_DIAGNOSTIC: 4, + // Primary button actions + CMD_RELOAD: 5, + CMD_OPEN_DATE_SETTINGS: 6, + CMD_OPEN_LOGIN: 7, + // Safe Browsing Extended Reporting + CMD_DO_REPORT: 8, + CMD_DONT_REPORT: 9, + CMD_OPEN_REPORTING_PRIVACY: 10, + CMD_OPEN_WHITEPAPER: 11, + // Report a phishing error. + CMD_REPORT_PHISHING_ERROR: 12 +}; + +/** + * A convenience method for sending commands to the parent page. + * @param {string} cmd The command to send. + */ +function sendCommand(cmd) { +// <if expr="not is_ios"> + window.domAutomationController.setAutomationId(1); + window.domAutomationController.send(cmd); +// </if> +// <if expr="is_ios"> + // TODO(crbug.com/565877): Revisit message passing for WKWebView. + var iframe = document.createElement('IFRAME'); + iframe.setAttribute('src', 'js-command:' + cmd); + document.documentElement.appendChild(iframe); + iframe.parentNode.removeChild(iframe); +// </if> +}
\ No newline at end of file diff --git a/chromium/components/security_interstitials/core/browser/resources/interstitial_ui.html b/chromium/components/security_interstitials/core/browser/resources/interstitial_ui.html index 852be930ad0..a759c82be28 100644 --- a/chromium/components/security_interstitials/core/browser/resources/interstitial_ui.html +++ b/chromium/components/security_interstitials/core/browser/resources/interstitial_ui.html @@ -1,61 +1,97 @@ <html> <head> <title>Interstitials</title> + <meta name="viewport" content="width=device-width"> + <style> + body { + font-family: sans-serif; + line-height: 1.4; + } + + h3, h4 { + margin-bottom: 0.5em; + } + + ul { + margin-top: 0.5em; + } + </style> </head> <body> <h2>Choose an interstitial</h2> <h3>SSL</h3> - <div> - <a href="ssl?overridable=1&strict_enforcement=0">example.com (generic, overridable)</a> - </div> - <div> - <a href="ssl?overridable=0&strict_enforcement=0"> - example.com (generic, non-overridable) - </a> - </div> - <div> - <a href="ssl?overridable=0&strict_enforcement=1"> - example.com (HSTS, non-overridable) - </a> - </div> - <div> - <a href="clock?clock_manipulation=2">Clock is ahead</a> - </div> - <div> - <a href="clock?clock_manipulation=-2">Clock is behind</a> - </div> + <ul> + <li> + <a href="ssl?overridable=1&strict_enforcement=0">example.com (generic, overridable)</a> + </li> + <li> + <a href="ssl?overridable=0&strict_enforcement=0"> + example.com (generic, non-overridable) + </a> + </li> + <li> + <a href="ssl?overridable=0&strict_enforcement=1"> + example.com (HSTS, non-overridable) + </a> + </li> + <li> + <a href="clock?clock_manipulation=2">Clock is ahead</a> + </li> + <li> + <a href="clock?clock_manipulation=-2">Clock is behind</a> + </li> + </ul> <h3>SafeBrowsing</h3> - <div> - <a href="safebrowsing?type=malware">Malware</a> - </div> - <div> - <a href="safebrowsing?type=phishing">Phishing</a> - </div> - <div> - <a href="safebrowsing?type=clientside_malware">Client Side Malware</a> - </div> - <div> - <a href="safebrowsing?type=clientside_phishing">Client Side Phishing</a> - </div> + <h4>Loud</h4> + <ul> + <li> + <a href="safebrowsing?type=malware">Malware</a> + </li> + <li> + <a href="safebrowsing?type=phishing">Phishing</a> + </li> + <li> + <a href="safebrowsing?type=clientside_malware">Client Side Malware</a> + </li> + <li> + <a href="safebrowsing?type=clientside_phishing">Client Side Phishing</a> + </li> + </ul> + <h4>Quiet (WebView)</h4> + <ul> + <li> + <a href="quietsafebrowsing?type=malware">Malware</a> + </li> + <li> + <a href="quietsafebrowsing?type=phishing">Phishing</a> + </li> + <li> + <a href="quietsafebrowsing?type=giant">Giant</a> + </li> + </ul> <h3>Captive Portal</h3> - <div> - <a href="captiveportal">Captive Portal, Non-WiFi</a> - </div> - <div> - <a href="captiveportal?is_wifi=1"> - Captive Portal, WiFi - </a> - </div> - <div> - <a href="captiveportal?is_wifi=1&wifi_name=CoffeeShopWiFi"> - Captive Portal, WiFi with network name "CoffeeShopWiFi" - </a> - </div> + <ul> + <li> + <a href="captiveportal">Captive Portal, Non-WiFi</a> + </li> + <li> + <a href="captiveportal?is_wifi=1"> + Captive Portal, WiFi + </a> + </li> + <li> + <a href="captiveportal?is_wifi=1&wifi_name=CoffeeShopWiFi"> + Captive Portal, WiFi with network name "CoffeeShopWiFi" + </a> + </li> + </ul> <h3>Supervised Users</h3> - <div> - <a href="supervised_user"> - Supervised User - </a - </div>> + <ul> + <li> + <a href="supervised_user"> + Supervised User + </a> + </li> + </ul> </body> </html> diff --git a/chromium/components/security_interstitials/core/browser/resources/interstitial_v2.css b/chromium/components/security_interstitials/core/browser/resources/interstitial_v2.css index ebb5e48d58c..fdda65dff27 100644 --- a/chromium/components/security_interstitials/core/browser/resources/interstitial_v2.css +++ b/chromium/components/security_interstitials/core/browser/resources/interstitial_v2.css @@ -2,21 +2,12 @@ Use of this source code is governed by a BSD-style license that can be found in the LICENSE file. */ -a { - color: #585858; -} - .bad-clock .icon { background-image: -webkit-image-set( url(images/1x/clock.png) 1x, url(images/2x/clock.png) 2x); } -body { - background-color: #f7f7f7; - color: #646464; -} - body.safe-browsing { background-color: rgb(206, 52, 38); color: white; @@ -74,22 +65,13 @@ button:hover { #details { color: #696969; - margin: 45px 0 50px; + margin: 0 0 50px; } #details p:not(:first-of-type) { margin-top: 20px; } -#details-button { - background: inherit; - border: 0; - float: none; - margin: 0; - padding: 10px 0; - text-transform: uppercase; -} - #details-button:hover { box-shadow: inherit; text-decoration: underline; @@ -97,10 +79,7 @@ button:hover { .error-code { color: #646464; - display: inline; font-size: .86667em; - margin-top: 15px; - opacity: 1; text-transform: uppercase; } @@ -121,18 +100,7 @@ h2 { font-weight: normal; } -.hidden { - display: none; -} - -html { - -webkit-text-size-adjust: 100%; - font-size: 125%; -} - .icon { - background-repeat: no-repeat; - background-size: 100%; height: 72px; margin: 0 0 40px; width: 72px; @@ -331,10 +299,10 @@ input[type=checkbox]:checked ~ .checkbox::before { * Details message replaces the top content in its own scrollable area. */ -@media (max-width: 420px) and (max-height: 736px) and (orientation: portrait) { +@media (max-width: 420px) { #details-button { border: 0; - margin: 8px 0 0; + margin: 28px 0 0; } .secondary-button { @@ -345,18 +313,17 @@ input[type=checkbox]:checked ~ .checkbox::before { /* Fixed nav. */ @media (min-width: 240px) and (max-width: 420px) and - (min-height: 401px) and (max-height: 736px) and (orientation:portrait), - (min-width: 421px) and (max-width: 736px) and (min-height: 240px) and - (max-height: 420px) and (orientation:landscape) { + (min-height: 401px), + (min-width: 421px) and (min-height: 240px) and + (max-height: 560px) { body .nav-wrapper { background: #f7f7f7; bottom: 0; box-shadow: 0 -22px 40px rgb(247, 247, 247); - left: 0; margin: 0; max-width: 736px; - padding-left: 24px; - padding-right: 24px; + padding-left: 0px; + padding-right: 48px; position: fixed; z-index: 2; } @@ -374,10 +341,14 @@ input[type=checkbox]:checked ~ .checkbox::before { #main-content { padding-bottom: 40px; } + + #details { + padding-top: 5.5vh; + } } -@media (max-width: 420px) and (max-height: 736px) and (orientation: portrait), - (max-width: 736px) and (max-height: 420px) and (orientation: landscape) { +@media (max-width: 420px) and (orientation: portrait), + (max-height: 560px) { body { margin: 0 auto; } @@ -417,6 +388,7 @@ input[type=checkbox]:checked ~ .checkbox::before { height: 0; opacity: 0; overflow: hidden; + padding-bottom: 0; transition: none; } @@ -431,12 +403,12 @@ input[type=checkbox]:checked ~ .checkbox::before { } .icon { - margin-bottom: 12px; + margin-bottom: 5.69vh; } .interstitial-wrapper { box-sizing: border-box; - margin: 24px auto 12px; + margin: 7vh auto 12px; padding: 0 24px; position: relative; } @@ -463,151 +435,34 @@ input[type=checkbox]:checked ~ .checkbox::before { } } -@media (min-height: 400px) and (orientation:portrait) { +@media (min-width: 421px) and (min-height: 500px) and (max-height: 560px) { .interstitial-wrapper { - margin-bottom: 145px; + margin-top: 10vh; } } -@media (min-height: 299px) and (orientation:portrait) { - .nav-wrapper { - padding-bottom: 16px; - } -} - -@media (min-height: 405px) and (max-height: 736px) and - (max-width: 420px) and (orientation:portrait) { - .icon { - margin-bottom: 24px; - } - - .interstitial-wrapper { - margin-top: 64px; - } -} - -@media (min-height: 480px) and (max-width: 420px) and - (max-height: 736px) and (orientation: portrait), - (min-height: 338px) and (max-height: 420px) and (max-width: 736px) and - (orientation: landscape) { - .icon { - margin-bottom: 24px; - } - - .nav-wrapper { - padding-bottom: 24px; - } -} - -@media (min-height: 500px) and (max-width: 414px) and (orientation: portrait) { - .interstitial-wrapper { - margin-top: 96px; - } -} - -/* Phablet sizing */ -@media (min-width: 375px) and (min-height: 641px) and (max-height: 736px) and - (max-width: 414px) and (orientation: portrait) { - button, - [dir='rtl'] button, - .small-link { - font-size: 1em; - padding-bottom: 12px; - padding-top: 12px; - } - - body:not(.offline) .icon { - height: 80px; - width: 80px; - } - - #details-button { - margin-top: 28px; - } - - h1 { - font-size: 1.7em; - } - - .icon { - margin-bottom: 28px; - } - +@media (min-height: 400px) and (orientation:portrait) { .interstitial-wrapper { - padding: 28px; - } - - .interstitial-wrapper p { - font-size: 1.05em; - } - - .nav-wrapper { - padding: 28px; + margin-bottom: 145px; } } -@media (min-width: 420px) and (max-width: 736px) and - (min-height: 240px) and (max-height: 298px) and - (orientation:landscape) { - body:not(.offline) .icon { - height: 50px; - width: 50px; - } - - .icon { - padding-top: 0; - } - - .interstitial-wrapper { - margin-top: 16px; - } - +@media (min-height: 299px) { .nav-wrapper { - padding: 0 24px 8px; + padding-bottom: 16px; } } -@media (min-width: 420px) and (max-width: 736px) and - (min-height: 240px) and (max-height: 420px) and - (orientation:landscape) { - #details-button { - margin: 0; - } - +@media (min-height: 500px) and (max-height: 650px) and (max-width: 414px) and + (orientation: portrait) { .interstitial-wrapper { - margin-bottom: 70px; - } - - .nav-wrapper { - margin-top: 0; - } - - #extended-reporting-opt-in { - margin-top: 0; + margin-top: 7vh; } } -/* Phablet landscape */ -@media (min-width: 680px) and (max-height: 414px) { +@media (min-height: 650px) and (max-width: 414px) and (orientation: portrait) { .interstitial-wrapper { - margin: 24px auto; - } - - .nav-wrapper { - margin: 16px auto 0; - } -} - -@media (max-height: 240px) and (orientation: landscape), - (max-height: 480px) and (orientation: portrait), - (max-width: 419px) and (max-height: 323px) { - body:not(.offline) .icon { - height: 56px; - width: 56px; - } - - .icon { - margin-bottom: 16px; + margin-top: 10vh; } } diff --git a/chromium/components/security_interstitials/core/browser/resources/interstitial_v2.html b/chromium/components/security_interstitials/core/browser/resources/interstitial_v2.html index 9a3ad694433..f382689f3d3 100644 --- a/chromium/components/security_interstitials/core/browser/resources/interstitial_v2.html +++ b/chromium/components/security_interstitials/core/browser/resources/interstitial_v2.html @@ -1,16 +1,18 @@ <!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="initial-scale=1, minimum-scale=1, width=device-width"> <title i18n-content="tabTitle"></title> + <link rel="stylesheet" href="interstitial_common.css"> <link rel="stylesheet" href="interstitial_v2.css"> <script src="../../../../../ui/webui/resources/js/util.js"></script> <script src="captive_portal.js"></script> <script src="ssl.js"></script> <script src="extended_reporting.js"></script> <script src="interstitial_v2_mobile.js"></script> + <script src="interstitial_common.js"></script> <script src="interstitial_v2.js"></script> </head> <body id="body"> @@ -18,7 +20,7 @@ <div id="main-content"> <div class="icon" id="icon"></div> <div id="main-message"> - <h1 i18n-content="heading"></h1> + <h1>$i18n{heading}</h1> <p i18n-values=".innerHTML:primaryParagraph"></p> <div id="debugging"> <div id="error-code" class="error-code"></div> @@ -36,9 +38,8 @@ </div> </div> <div class="nav-wrapper"> - <button i18n-content="primaryButtonText" id="primary-button"></button> - <button id="details-button" class="small-link" - i18n-content="openDetails"></button> + <button id="primary-button">$i18n{primaryButtonText}</button> + <button id="details-button" class="small-link">$i18n{openDetails}</button> </div> <div id="details" class="hidden"> <p i18n-values=".innerHTML:explanationParagraph"></p> diff --git a/chromium/components/security_interstitials/core/browser/resources/interstitial_v2.js b/chromium/components/security_interstitials/core/browser/resources/interstitial_v2.js index 4fa48eac865..815ba69fcae 100644 --- a/chromium/components/security_interstitials/core/browser/resources/interstitial_v2.js +++ b/chromium/components/security_interstitials/core/browser/resources/interstitial_v2.js @@ -8,43 +8,6 @@ var expandedDetails = false; var keyPressState = 0; -// Should match security_interstitials::SecurityInterstitialCommands -var CMD_DONT_PROCEED = 0; -var CMD_PROCEED = 1; -// Ways for user to get more information -var CMD_SHOW_MORE_SECTION = 2; -var CMD_OPEN_HELP_CENTER = 3; -var CMD_OPEN_DIAGNOSTIC = 4; -// Primary button actions -var CMD_RELOAD = 5; -var CMD_OPEN_DATE_SETTINGS = 6; -var CMD_OPEN_LOGIN = 7; -// Safe Browsing Extended Reporting -var CMD_DO_REPORT = 8; -var CMD_DONT_REPORT = 9; -var CMD_OPEN_REPORTING_PRIVACY = 10; -var CMD_OPEN_WHITEPAPER = 11; -// Report a phishing error. -var CMD_REPORT_PHISHING_ERROR = 12; - -/** - * A convenience method for sending commands to the parent page. - * @param {string} cmd The command to send. - */ -function sendCommand(cmd) { -// <if expr="not is_ios"> - window.domAutomationController.setAutomationId(1); - window.domAutomationController.send(cmd); -// </if> -// <if expr="is_ios"> - // TODO(crbug.com/565877): Revisit message passing for WKWebView. - var iframe = document.createElement('IFRAME'); - iframe.setAttribute('src', 'js-command:' + cmd); - document.documentElement.appendChild(iframe); - iframe.parentNode.removeChild(iframe); -// </if> -} - /** * This allows errors to be skippped by typing a secret phrase into the page. * @param {string} e The key that was just pressed. @@ -54,7 +17,7 @@ function handleKeypress(e) { if (BYPASS_SEQUENCE.charCodeAt(keyPressState) == e.keyCode) { keyPressState++; if (keyPressState == BYPASS_SEQUENCE.length) { - sendCommand(CMD_PROCEED); + sendCommand(SecurityInterstitialCommandId.CMD_PROCEED); keyPressState = 0; } } else { @@ -102,8 +65,7 @@ function setupEvents() { var ssl = interstitialType == 'SSL'; var captivePortal = interstitialType == 'CAPTIVE_PORTAL'; var badClock = ssl && loadTimeData.getBoolean('bad_clock'); - var hidePrimaryButton = badClock && loadTimeData.getBoolean( - 'hide_primary_button'); + var hidePrimaryButton = loadTimeData.getBoolean('hide_primary_button'); if (ssl) { $('body').classList.add(badClock ? 'bad-clock' : 'ssl'); @@ -123,20 +85,20 @@ function setupEvents() { $('primary-button').addEventListener('click', function() { switch (interstitialType) { case 'CAPTIVE_PORTAL': - sendCommand(CMD_OPEN_LOGIN); + sendCommand(SecurityInterstitialCommandId.CMD_OPEN_LOGIN); break; case 'SSL': if (badClock) - sendCommand(CMD_OPEN_DATE_SETTINGS); + sendCommand(SecurityInterstitialCommandId.CMD_OPEN_DATE_SETTINGS); else if (overridable) - sendCommand(CMD_DONT_PROCEED); + sendCommand(SecurityInterstitialCommandId.CMD_DONT_PROCEED); else - sendCommand(CMD_RELOAD); + sendCommand(SecurityInterstitialCommandId.CMD_RELOAD); break; case 'SAFEBROWSING': - sendCommand(CMD_DONT_PROCEED); + sendCommand(SecurityInterstitialCommandId.CMD_DONT_PROCEED); break; default: @@ -148,7 +110,7 @@ function setupEvents() { if (overridable) { // Captive portal page isn't overridable. $('proceed-link').addEventListener('click', function(event) { - sendCommand(CMD_PROCEED); + sendCommand(SecurityInterstitialCommandId.CMD_PROCEED); }); } else if (!ssl) { $('final-paragraph').classList.add('hidden'); @@ -160,13 +122,13 @@ function setupEvents() { if ($('diagnostic-link')) { $('diagnostic-link').addEventListener('click', function(event) { - sendCommand(CMD_OPEN_DIAGNOSTIC); + sendCommand(SecurityInterstitialCommandId.CMD_OPEN_DIAGNOSTIC); }); } if ($('learn-more-link')) { $('learn-more-link').addEventListener('click', function(event) { - sendCommand(CMD_OPEN_HELP_CENTER); + sendCommand(SecurityInterstitialCommandId.CMD_OPEN_HELP_CENTER); }); } @@ -189,18 +151,15 @@ function setupEvents() { loadTimeData.getString('closeDetails'); if (!expandedDetails) { // Record a histogram entry only the first time that details is opened. - sendCommand(CMD_SHOW_MORE_SECTION); + sendCommand(SecurityInterstitialCommandId.CMD_SHOW_MORE_SECTION); expandedDetails = true; } }); } - // TODO(felt): This should be simplified once the Finch trial is no longer - // needed. - if (interstitialType == 'SAFEBROWSING' && - loadTimeData.getBoolean('phishing') && $('report-error-link')) { + if ($('report-error-link')) { $('report-error-link').addEventListener('click', function(event) { - sendCommand(CMD_REPORT_PHISHING_ERROR); + sendCommand(SecurityInterstitialCommandId.CMD_REPORT_PHISHING_ERROR); }); } diff --git a/chromium/components/security_interstitials/core/browser/resources/interstitial_v2_mobile.js b/chromium/components/security_interstitials/core/browser/resources/interstitial_v2_mobile.js index f296232387c..655d91f33be 100644 --- a/chromium/components/security_interstitials/core/browser/resources/interstitial_v2_mobile.js +++ b/chromium/components/security_interstitials/core/browser/resources/interstitial_v2_mobile.js @@ -12,10 +12,9 @@ function onResize() { var helpOuterBox = document.querySelector('#details'); var mainContent = document.querySelector('#main-content'); var mediaQuery = '(min-width: 240px) and (max-width: 420px) and ' + - '(max-height: 736px) and (min-height: 401px) and ' + - '(orientation: portrait), (max-width: 736px) and ' + - '(max-height: 420px) and (min-height: 240px) and ' + - '(min-width: 421px) and (orientation: landscape)'; + '(min-height: 401px), ' + + '(max-height: 560px) and (min-height: 240px) and ' + + '(min-width: 421px)'; var detailsHidden = helpOuterBox.classList.contains('hidden'); var runnerContainer = document.querySelector('.runner-container'); diff --git a/chromium/components/security_interstitials/core/browser/resources/interstitial_webview_quiet.css b/chromium/components/security_interstitials/core/browser/resources/interstitial_webview_quiet.css new file mode 100644 index 00000000000..80a87648cb6 --- /dev/null +++ b/chromium/components/security_interstitials/core/browser/resources/interstitial_webview_quiet.css @@ -0,0 +1,112 @@ +/* Copyright 2017 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. */ + +body { + margin: 0; +} + +#details { + box-sizing: border-box; + height: auto; + line-height: 1.48em; + margin: 0; + opacity: 1; + transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1); +} + +#details.hidden { + display: block; + height: 0; + opacity: 0; + overflow: hidden; + padding-bottom: 0; + transition: none; +} + +#details-link { + color: rgba(0,0,0,.38); + /* For V1, the details link is hidden. */ + display: none; + text-decoration: underline; + text-transform: none; +} + +h1 { + color: rgba(0,0,0,.38); + font-size: 1.037037em; + line-height: 1.4em; + margin: 8px 0 8px; +} + +.giant .icon { + bottom: 0; + left: 0; + margin: auto; + position: fixed; + right: 0; + top: 0; +} + +.giant #details, +.giant #main-message { + display: none; +} + +.icon { + background-image: url(images/blocked.svg); + height: 20vh; + margin: 0 auto; + max-height: 36px; + max-width: 36px; + min-height: 18px; + min-width: 18px; + opacity: .54; + width: 20vh; +} + +.interstitial-wrapper { + align-items: center; + box-sizing: border-box; + display: flex; + flex-direction: column; + font-size: 0.9em; + height: 100vh; + justify-content: center; + line-height: 1.6em; + margin: 0 auto; + max-width: 640px; + padding: 16px; + width: 100%; +} + +#main-content { + align-self: auto; + color: rgba(0, 0, 0, .54); + flex: 0 1 auto; + text-align: center; +} + +@media (max-height:2em), (max-width:2em) { + .icon { + display: none; + } +} + +@media (min-height:25em) and (min-width:37.5em), + (min-height:37.5em) and (min-width:25em) { + .icon { + height: 36px; + width: 36px; + } +} + +/* Views that don't fit the details text. */ +@media (max-height:11.25em) and (max-width:18.75em), + (max-height:18.75em) and (max-width:11.25em), + (max-height:5em), (max-width:5em) { + #details, + #main-message { + display: none; + } +} diff --git a/chromium/components/security_interstitials/core/browser/resources/interstitial_webview_quiet.html b/chromium/components/security_interstitials/core/browser/resources/interstitial_webview_quiet.html new file mode 100644 index 00000000000..63de8891ab1 --- /dev/null +++ b/chromium/components/security_interstitials/core/browser/resources/interstitial_webview_quiet.html @@ -0,0 +1,31 @@ +<!doctype html> +<html dir="$i18n{textdirection}" lang="$i18n{language}"> +<head> + <meta charset="utf-8"> + <meta name="viewport" + content="initial-scale=1, minimum-scale=1, width=device-width"> + <title>$i18n{tabTitle}</title> + <link rel="stylesheet" href="interstitial_common.css"> + <link rel="stylesheet" href="interstitial_webview_quiet.css"> + <script src="../../../../../ui/webui/resources/js/util.js"></script> + <script src="interstitial_webview_quiet.js"></script> +</head> +<body id="body"> + <div class="interstitial-wrapper"> + <div id="main-content"> + <div class="icon"></div> + <div id="main-message"> + <h1> + <span>$i18n{heading}</span> + <a id="details-link">$i18n{openDetails}</a> + </h1> + </div> + </div> + <div id="details" class="hidden"> + <p> + $i18Raw{explanationParagraph} + </p> + </div> + </div> +</body> +</html> diff --git a/chromium/components/security_interstitials/core/browser/resources/interstitial_webview_quiet.js b/chromium/components/security_interstitials/core/browser/resources/interstitial_webview_quiet.js new file mode 100644 index 00000000000..cb189d7128a --- /dev/null +++ b/chromium/components/security_interstitials/core/browser/resources/interstitial_webview_quiet.js @@ -0,0 +1,10 @@ +// Copyright 2017 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. + +function initPage() { + var isGiantWebView = loadTimeData.getBoolean('is_giant'); + document.body.className = isGiantWebView ? 'giant' : ''; +} + +document.addEventListener('DOMContentLoaded', initPage); |
