Skip to content

GitLab

T
tangled
Commit a8ec3236 authored by yilkal's avatar yilkal Committed by Commit Bot
Browse files
Options

Update SupervisedUserError blocking page. 

This CL does the following:
1. Adds the kite icon to the page.
2. Simplifies the design to have only 2 different modes.
   2.1 Mode 1. For view ports with width > 420px and
   2.2 Mode 2. For view ports with width < 420 px (mobile
       devices or iframes)

The changes simplify the error page making it easy to modify
without breaking it.

Bug: 850328
Change-Id: I9138670ffce0e705456eb5cce7d7ff048ef693d7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1959849Reviewed-by: default avatarMarc Treib <treib@chromium.org>
Reviewed-by: default avatarMichael Giuffrida <michaelpg@chromium.org>
Commit-Queue: Yilkal Abe <yilkal@chromium.org>
Cr-Commit-Position: refs/heads/master@{#726411}
parent 3e9becf5
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 89 additions and 439 deletions
chrome/app/supervised_user_error_page_strings.grdp
View file @ a8ec3236
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
We could not reach your parents at the moment. Please try again. We could not reach your parents at the moment. Please try again.
</message> </message>
<message name="IDS_BLOCK_INTERSTITIAL_SEND_FEEDBACK" desc="The text for a link to submit feedback about a blocked site."> <message name="IDS_BLOCK_INTERSTITIAL_SEND_FEEDBACK" desc="The text for a link to submit feedback about a blocked site.">
Was this unexpected? <ph name="BEGIN_LINK">&lt;a href="#" id="feedback-link"&gt;</ph>Let us know<ph name="END_LINK">&lt;/a&gt;</ph> Was this unexpected? <ph name="BEGIN_LINK">&lt;a href="#" id="feedback-link"&gt;</ph>Send feedback<ph name="END_LINK">&lt;/a&gt;</ph>
</message> </message>
<message name="IDS_BLOCK_INTERSTITIAL_SHOW_DETAILS" desc="The text for the link to show details about the interstitial."> <message name="IDS_BLOCK_INTERSTITIAL_SHOW_DETAILS" desc="The text for the link to show details about the interstitial.">
Details Details
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
Hide details Hide details
</message> </message>
<message name="IDS_SUPERVISED_USER_BLOCK_HEADER" desc="Header for the message to be shown when a site was blocked."> <message name="IDS_SUPERVISED_USER_BLOCK_HEADER" desc="Header for the message to be shown when a site was blocked.">
This site is blocked This site is blocked because it may have mature content
</message> </message>
<message name="IDS_CHILD_BLOCK_MESSAGE_DEFAULT_SINGLE_PARENT" desc="Message to be shown when a site was blocked due to the default fallback behavior and the child has one parent."> <message name="IDS_CHILD_BLOCK_MESSAGE_DEFAULT_SINGLE_PARENT" desc="Message to be shown when a site was blocked due to the default fallback behavior and the child has one parent.">
Your parent hasn't approved it yet Your parent hasn't approved it yet
......
chrome/browser/supervised_user/supervised_user_error_page/resources/supervised_user_block_interstitial.html
View file @ a8ec3236
...@@ -13,9 +13,11 @@ ...@@ -13,9 +13,11 @@
<script src="supervised_user_block_interstitial.js"></script> <script src="supervised_user_block_interstitial.js"></script>
</head> </head>
<body class="supervised-user-block"> <body class="supervised-user-block">
<div class="main-frame-blocked"> <div class="frame-blocked">
<div id="information-container"> <div>
<div class="icon" id="icon"></div> <div class="icon" id="icon" aria-hidden="true">
<img id="family-link-kite">
</div>
<div id="main-message"> <div id="main-message">
<h1 id="block-page-header">$i18n{blockPageHeader}</h1> <h1 id="block-page-header">$i18n{blockPageHeader}</h1>
<p id="block-page-message">$i18n{blockPageMessage}</p> <p id="block-page-message">$i18n{blockPageMessage}</p>
...@@ -25,14 +27,14 @@ ...@@ -25,14 +27,14 @@
<div id="custodians-information" hidden> <div id="custodians-information" hidden>
<div id="custodian-information" class="custodian-information"> <div id="custodian-information" class="custodian-information">
<img id="custodian-avatar-img" class="avatar-img"> <img id="custodian-avatar-img" class="avatar-img">
<div id="custodian-contact"> <div id="custodian-contact" class="custodian-contact">
<div id="custodian-name" class="custodian-name"></div> <div id="custodian-name" class="custodian-name"></div>
<div id="custodian-email" class="custodian-email"></div> <div id="custodian-email" class="custodian-email"></div>
</div> </div>
</div> </div>
<div id="second-custodian-information" class="custodian-information" hidden> <div id="second-custodian-information" class="custodian-information" hidden>
<img id="second-custodian-avatar-img" class="avatar-img" hidden> <img id="second-custodian-avatar-img" class="avatar-img" hidden>
<div id="second-custodian-contact"> <div id="second-custodian-contact" class="custodian-contact">
<div id="second-custodian-name" class="custodian-name"></div> <div id="second-custodian-name" class="custodian-name"></div>
<div id="second-custodian-email" class="custodian-email"></div> <div id="second-custodian-email" class="custodian-email"></div>
</div> </div>
...@@ -57,7 +59,6 @@ ...@@ -57,7 +59,6 @@
</div> </div>
<div id="details" hidden> <div id="details" hidden>
<p id="details-header">$i18n{blockReasonHeader}</p> <p id="details-header">$i18n{blockReasonHeader}</p>
<p id="details-message">$i18n{blockReasonMessage}</p>
<p id="feedback">$i18nRaw{feedbackLink}</p> <p id="feedback">$i18nRaw{feedbackLink}</p>
</div> </div>
</div> </div>
......
chrome/browser/supervised_user/supervised_user_error_page/resources/supervised_user_block_interstitial.js
View file @ a8ec3236
...@@ -6,36 +6,11 @@ var mobileNav = false; ...@@ -6,36 +6,11 @@ var mobileNav = false;
var showDetails = false; var showDetails = false;
/**
* For small screen mobile the navigation buttons are moved
* below the advanced text.
*/
function onResize() {
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)';
// Check for change in nav status.
if (mobileNav != window.matchMedia(mediaQuery).matches) {
mobileNav = !mobileNav;
updateDetails();
}
}
function updateDetails() { function updateDetails() {
$('information-container').hidden = mobileNav && showDetails;
$('details').hidden = !showDetails; $('details').hidden = !showDetails;
} }
function setupMobileNav() {
window.addEventListener('resize', onResize);
onResize();
}
document.addEventListener('DOMContentLoaded', setupMobileNav);
function sendCommand(cmd) { function sendCommand(cmd) {
if (window.supervisedUserErrorPageController) { if (window.supervisedUserErrorPageController) {
switch (cmd) { switch (cmd) {
......
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