Update to new Microsoft cookie banner

_includes/cookie_notice.html

@@ -1,16 +1 @@
-<div id='mscc-cookie-container'>
-  <div id='msccBanner' dir='ltr' data-site-name='uhf-code.visualstudio.com' data-mscc-version='0.4.0' data-nver='aspnet-2.0.7'
-    data-sver='0.1.2' class='cc-banner' role='alert'>
-    <div class='cc-container'>
-      <svg class='cc-icon cc-v-center' x='0px' y='0px' viewBox='0 0 44 44' height='30px' fill='none' stroke='currentColor'>
-        <circle cx='22' cy='22' r='20' stroke-width='2'></circle>
-        <line x1='22' x2='22' y1='18' y2='33' stroke-width='3'></line>
-        <line x1='22' x2='22' y1='12' y2='15' stroke-width='3'></line>
-      </svg>
-      <span class='cc-v-center cc-text'>This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to
-        this use.</span>
-      <a href='https://go.microsoft.com/fwlink/?linkid=845480' aria-label='Learn more about Microsoft&#39;s Cookie Policy'
-        id='msccLearnMore' class='cc-link cc-v-center cc-float-right' data-mscc-ic='false'>Learn more</a>
-    </div>
-  </div>
-</div>
+<div id='cookie-banner'></div>

_includes/footer.html

@@ -1,4 +1,12 @@
 <footer class="footer">
+    <script>
+        function manageConsent() {
+            if (WcpConsent.siteConsent.isConsentRequired) {
+                WcpConsent.siteConsent.manageConsent();
+            }
+        }
+    </script>
+
     <div class="container">
         <div class="row">
             <div class="col-sm-7">
@@ -15,11 +23,19 @@
                 </ul>
             </div>
             <div class="col-sm-5">
-                <div class="copyright">
-                    <a id="footer-microsoft-link" class="logo" href="https://www.microsoft.com">
-                        <img src="{{site.baseurl}}/img/microsoft.svg" alt="Microsoft">
-                    </a>
-                </div>
+                <ul class="links">
+                    <li style="display: none;" >
+                        <a id="footer-cookie-link" style="cursor: pointer; padding-right:20px" onclick="manageConsent()"
+                            aria-label="Manage cookies">Manage cookies</a>
+                    </li>
+                    <li>
+                        <div class="copyright">
+                            <a id="footer-microsoft-link" class="logo" href="https://www.microsoft.com">
+                                <img src="{{site.baseurl}}/img/microsoft.svg" alt="Microsoft">
+                            </a>
+                        </div>
+                    </li>
+                </ul>
             </div>
         </div>
     </div>

_includes/head.html

@@ -6,7 +6,6 @@
     <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
     <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
 
-    <link rel="stylesheet" href="//uhf.microsoft.com/mscc/statics/mscc-0.4.0.min.css">
 
     <!-- link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous" -->
     <link rel="stylesheet" href="{{ "/css/bootswatch/cosmo/bootstrap.min.css" | prepend: site.baseurl }}">

_includes/js_files.html

@@ -4,8 +4,8 @@
 
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
 
-<!-- MicroSoft cookie library -->
-<script src="https://uhf.microsoft.com/mscc/statics/mscc-0.4.0.min.js"></script>
+<!-- Microsoft EU cookie compliance library -->
+<script src="https://wcpstatic.microsoft.com/mscc/lib/v2/wcp-consent.js"></script>
 <!-- Global site tag (gtag.js) - Google Analytics -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=UA-62780441-30"></script>
 

inspector/index.html

@@ -12,8 +12,8 @@
 
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
 
-<!-- MicroSoft cookie library -->
-<script src="https://uhf.microsoft.com/mscc/statics/mscc-0.4.0.min.js"></script>
+<!-- Microsoft EU cookie compliance library -->
+<script src="https://wcpstatic.microsoft.com/mscc/lib/v2/wcp-consent.js"></script>
 <!-- Global site tag (gtag.js) - Google Analytics -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=UA-62780441-30"></script>
 

js/page.js

@@ -4,6 +4,12 @@ $('#small-nav-dropdown').change(function() {
     .val()
 })
 
+function onConsentChanged() {
+  console.log(WcpConsent.siteConsent.getConsent());
+
+  // Where we would handle non-essential cookies in the future
+}
+
 $(function() {
   // Load GA upfront because we classify it as essential cookie
   window.dataLayer = window.dataLayer || []
@@ -13,17 +19,14 @@ $(function() {
   gtag('js', new Date())
   gtag('config', 'UA-62780441-30', { anonymize_ip: true })
 
-  if (mscc) {
-    if (!mscc.hasConsent()) {
-      window.addEventListener('click', function() {
-        if (!mscc.hasConsent()) {
-          mscc.setConsent()
-        }
-      })
+  window.WcpConsent && WcpConsent.init("en-US", "cookie-banner", function (err, _siteConsent) {
+    }, onConsentChanged, WcpConsent.themes.light);
 
-      // Where future non-essential tracking cookie need to go
-      mscc.on('consent', function() {
-      })
-    }
+  const cookieManager = document.querySelector('#footer-cookie-link');
+  if (WcpConsent.siteConsent.isConsentRequired && cookieManager && cookieManager.parentElement) {
+    cookieManager.parentElement.style.display = '';
   }
+
+  // initialize consent
+  onConsentChanged();
 })