[M87] Add icon and background color in enhanced-protection-message.
Mocks: http://slides/1YgDDFKSXoIFreM19fBQZx71Kfa1Gh7Tmywqhmo-pkLY/view#
slide=id.g97a0aac007_0_43
Screenshots:
Desktop SB: http://screen/3LzbFP3BhJcH8jt
Desktop SSL: http://screen/AqReWuvxFPxzYdh
Android SB: http://screen/9v4wQeCtqWsmteC
Android SSL: http://screen/AWJekyhEeHu94ds
(cherry picked from commit 9daabe40359441fb305156cff179326f7cbb88d5)
Bug: 1130721
Change-Id: Ifc63a24b280410bccec13ec06bf13e5022242c28
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2434767
Reviewed-by: Carlos IL <[email protected]>
Reviewed-by: Varun Khaneja <[email protected]>
Commit-Queue: Xinghui Lu <[email protected]>
Cr-Original-Commit-Position: refs/heads/master@{#814959}
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2466213
Reviewed-by: Xinghui Lu <[email protected]>
Cr-Commit-Position: refs/branch-heads/4280@{#296}
Cr-Branched-From: ea420fb963f9658c9969b6513c56b8f47efa1a2a-refs/heads/master@{#812852}
diff --git a/components/security_interstitials/core/browser/resources/enhanced_protection_message.js b/components/security_interstitials/core/browser/resources/enhanced_protection_message.js
index 2b328a5..bc2f872 100644
--- a/components/security_interstitials/core/browser/resources/enhanced_protection_message.js
+++ b/components/security_interstitials/core/browser/resources/enhanced_protection_message.js
@@ -28,4 +28,14 @@
});
}
$('enhanced-protection-message').classList.remove('hidden');
+
+ const billing =
+ interstitialType === 'SAFEBROWSING' && loadTimeData.getBoolean('billing');
+
+ let className = 'ssl-enhanced-protection-message';
+ if (interstitialType === 'SAFEBROWSING' && !billing) {
+ className = 'safe-browsing-enhanced-protection-message';
+ }
+
+ $('enhanced-protection-message').classList.add(className);
}
diff --git a/components/security_interstitials/core/browser/resources/images/light_bulb_grey.svg b/components/security_interstitials/core/browser/resources/images/light_bulb_grey.svg
new file mode 100644
index 0000000..2cf0e30c
--- /dev/null
+++ b/components/security_interstitials/core/browser/resources/images/light_bulb_grey.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#696969"><path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z"/></svg>
diff --git a/components/security_interstitials/core/browser/resources/images/light_bulb_white.svg b/components/security_interstitials/core/browser/resources/images/light_bulb_white.svg
new file mode 100644
index 0000000..e378483
--- /dev/null
+++ b/components/security_interstitials/core/browser/resources/images/light_bulb_white.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#FFF"><path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z"/></svg>
diff --git a/components/security_interstitials/core/browser/resources/interstitial_large.html b/components/security_interstitials/core/browser/resources/interstitial_large.html
index 51a30d33..04bc0440 100644
--- a/components/security_interstitials/core/browser/resources/interstitial_large.html
+++ b/components/security_interstitials/core/browser/resources/interstitial_large.html
@@ -50,8 +50,10 @@
</label>
</div>
<div id="enhanced-protection-message" class="hidden">
- <!-- TODO(crbug.com/1130721): Add border and icon -->
- <p>$i18nRaw{enhancedProtectionMessage}</p>
+ <label>
+ <div class="icon"></div>
+ <div>$i18nRaw{enhancedProtectionMessage}</div>
+ </label>
</div>
</div>
<div class="nav-wrapper">
diff --git a/components/security_interstitials/core/browser/resources/interstitial_safebrowsing.css b/components/security_interstitials/core/browser/resources/interstitial_safebrowsing.css
index cfc256e..46cdde0 100644
--- a/components/security_interstitials/core/browser/resources/interstitial_safebrowsing.css
+++ b/components/security_interstitials/core/browser/resources/interstitial_safebrowsing.css
@@ -74,4 +74,11 @@
url(images/2x/triangle_red.png) 2x);
}
+.safe-browsing-enhanced-protection-message {
+ background-color: var(--google-red-700);
+ border: 1px solid var(--google-red-900);
+}
+.safe-browsing-enhanced-protection-message .icon {
+ background-image: url(images/light_bulb_white.svg);
+}
diff --git a/components/security_interstitials/core/browser/resources/interstitial_ssl.css b/components/security_interstitials/core/browser/resources/interstitial_ssl.css
index 0672b4ce..adcfc7b 100644
--- a/components/security_interstitials/core/browser/resources/interstitial_ssl.css
+++ b/components/security_interstitials/core/browser/resources/interstitial_ssl.css
@@ -27,3 +27,15 @@
.ssl-opt-in .checkbox::before {
border-color: #696969;
}
+
+.ssl-enhanced-protection-message {
+ border: 1px solid #696969;
+}
+
+.ssl-enhanced-protection-message .icon {
+ background-image: url(images/light_bulb_grey.svg);
+}
+
+.ssl-enhanced-protection-message a:link {
+ color: blue;
+}
diff --git a/components/security_interstitials/core/common/resources/interstitial_common.css b/components/security_interstitials/core/common/resources/interstitial_common.css
index 320abf1..f9484658f 100644
--- a/components/security_interstitials/core/common/resources/interstitial_common.css
+++ b/components/security_interstitials/core/common/resources/interstitial_common.css
@@ -142,6 +142,29 @@
position: relative;
}
+#enhanced-protection-message {
+ border-radius: 4px;
+ font-size: 1em;
+ margin-top: 32px;
+ padding: 10px 5px;
+}
+
+#enhanced-protection-message label {
+ display: grid;
+ grid-template-columns: 2.5em 1fr;
+ position: relative;
+}
+
+#enhanced-protection-message div {
+ margin: 0.5em;
+}
+
+#enhanced-protection-message .icon {
+ height: 1.5em;
+ vertical-align: middle;
+ width: 1.5em;
+}
+
.nav-wrapper {
margin-top: 51px;
}
@@ -217,6 +240,10 @@
margin-top: 16px;
}
+.showing-recurrent-error-message #enhanced-protection-message {
+ margin-top: 16px;
+}
+
@media (max-width: 700px) {
.interstitial-wrapper {
padding: 0 10%;
@@ -265,6 +292,10 @@
margin-top: 24px;
}
+ #enhanced-protection-message {
+ margin-top: 24px;
+ }
+
.nav-wrapper {
margin-top: 30px;
}
