Add checkbox for reporting invalid TLS/SSL cert chains

chrome/browser/resources/security_warnings/interstitial_v2.css

 /* Copyright 2014 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: #585858;
 }
 
 .bad-clock .icon {
   background-image: -webkit-image-set(
@@ skipping 128 matching lines @@
   line-height: 1.6em;
   margin: 100px auto 0;
   max-width: 600px;
   width: 100%;
 }
 
 #main-message > p {
   display: inline;
 }
 
-#malware-opt-in {
+#extended-reporting-opt-in {
   font-size: .875em;
   margin-top: 39px;
 }
 
 .nav-wrapper {
   margin-top: 51px;
 }
 
 .nav-wrapper::after {
   clear: both;
@@ skipping 57 matching lines @@
   position: relative;
   width: 16px;
 }
 
 [dir='rtl'] .styled-checkbox {
   float: right;
 }
 
 .styled-checkbox label {
   background: transparent;
-  border: white solid 1px;
   border-radius: 2px;
   height: 14px;
   left: 0;
   position: absolute;
   right: 0;
   top: 0;
   width: 14px;
 }
 
 .styled-checkbox .checkbox-tick {
   background: transparent;
-  border: 2px solid white;
-  border-right-width: 0;
-  border-top-width: 0;
   content: '';
   height: 4px;
   left: 2px;
   opacity: 0;
   position: absolute;
   top: 3px;
   transform: rotate(-45deg);
   width: 9px;
 }
 
+.safe-browsing-opt-in .styled-checkbox label {
+  border: white solid 1px;
+}
+
+.safe-browsing-opt-in .styled-checkbox .checkbox-tick {
+  border: white solid 1px;
+  border-right-width: 0;
+  border-top-width: 0;
+}
+
+.ssl-opt-in .styled-checkbox label {
+  border: #696969 solid 1px;
+}
+
+.ssl-opt-in .styled-checkbox .checkbox-tick {
+  border: #696969 solid 1px;
+  border-right-width: 0;
+  border-top-width: 0;
+}
+
 .styled-checkbox input[type=checkbox]:checked ~ .checkbox-tick {
   opacity: 1;
 }
 
 @media (max-width: 700px) {
   .interstitial-wrapper {
     padding: 0 10%;
   }
 
   #error-debugging-info {
@@ skipping 35 matching lines @@
     display: block;
     margin-top: 20px;
     text-align: center;
     width: 100%;
   }
 
   .interstitial-wrapper {
     padding: 0 5%;
   }
 
-  #malware-opt-in {
+  #extended-reporting-opt-in {
     margin-top: 24px;
   }
 
   .nav-wrapper {
     margin-top: 30px;
   }
 }
 
 /**
  * Mobile specific styling.
@@ skipping 117 matching lines @@
   }
 
   .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) .interstitial-wrapper {
+  body:not(.extended-reporting-has-checkbox) .interstitial-wrapper {
     margin-bottom: 145px;
   }
 }
 
 @media (min-height: 299px) and (orientation:portrait) {
   .nav-wrapper {
     padding-bottom: 16px;
   }
 }
 
@@ skipping 13 matching lines @@
   .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 {
+  :not(.extended-reporting-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 {
@@ skipping 61 matching lines @@
   }
 
   .interstitial-wrapper {
     margin-bottom: 70px;
   }
 
   .nav-wrapper {
     margin-top: 0;
   }
 
-  #malware-opt-in {
+  #extended-reporting-opt-in {
     margin-top: 0;
   }
 }
 
 /* Phablet landscape */
 @media (min-width: 680px) and (max-height: 414px) {
   .interstitial-wrapper {
     margin: 24px auto;
   }
 
@@ skipping 39 matching lines @@
     flex: 0 1 auto;
     margin-top: 8px;
     order: 1;
     padding-left: 0;
     padding-right: 0;
     position: relative;
     width: 100%;
   }
 }
 
-/* Malware opt-in. No fixed nav. */
+/* Extended reporting opt-in. No fixed nav. */
 @media (max-height: 600px) and (orientation: portrait),
        (max-height: 360px) and (max-width: 680px) and (orientation: landscape) {
-  .safe-browsing-has-checkbox .interstitial-wrapper {
+  .extended-reporting-has-checkbox .interstitial-wrapper {
     display: flex;
     flex-direction: column;
     margin-bottom: 0;
   }
 
-  .safe-browsing-has-checkbox #details {
+  .extended-reporting-has-checkbox #details {
     flex: 1 1 auto;
     order: 0;
   }
 
-  .safe-browsing-has-checkbox #main-content {
+  .extended-reporting-has-checkbox #main-content {
     flex: 1 1 auto;
     order: 0;
   }
 
-  .safe-browsing-has-checkbox #malware-opt-in {
+  .extended-reporting-has-checkbox #extended-reporting-opt-in {
     margin-bottom: 8px;
   }
 
-  body.safe-browsing-has-checkbox .nav-wrapper {
+  body.extended-reporting-has-checkbox .nav-wrapper {
     flex: 0 1 auto;
     margin-top: 0;
     order: 1;
     padding-left: 0;
     padding-right: 0;
     position: relative;
     width: 100%;
   }
 }