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

Bug: 1130721
Change-Id: Ifc63a24b280410bccec13ec06bf13e5022242c28
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2434767Reviewed-by: Carlos IL <carlosil@chromium.org>
Reviewed-by: Varun Khaneja <vakh@chromium.org>
Commit-Queue: Xinghui Lu <xinghuilu@chromium.org>
Cr-Commit-Position: refs/heads/master@{#814959}

components/security_interstitials/core/browser/resources/enhanced_protection_message.js

@@ -28,4 +28,14 @@ function setupEnhancedProtectionMessage() {
     });
   }
   $('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);
 }

components/security_interstitials/core/browser/resources/images/light_bulb_grey.svg

+<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>

components/security_interstitials/core/browser/resources/images/light_bulb_white.svg

+<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>

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">

components/security_interstitials/core/browser/resources/interstitial_safebrowsing.css

@@ -74,4 +74,11 @@ body.safe-browsing {
       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);
+}

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;
+}

components/security_interstitials/core/common/resources/interstitial_common.css

@@ -142,6 +142,29 @@ input[type=checkbox]:focus ~ .checkbox:after {
   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 @@ input[type=checkbox]:checked ~ .checkbox::before {
   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 @@ input[type=checkbox]:checked ~ .checkbox::before {
     margin-top: 24px;
   }
 
+  #enhanced-protection-message {
+    margin-top: 24px;
+  }
+
   .nav-wrapper {
     margin-top: 30px;
   }