Display when PKP is bypassed in devtools

third_party/WebKit/Source/devtools/front_end/security/SecurityPanel.js

 // Copyright 2015 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.
 
 /**
  * @constructor
  * @extends {WebInspector.PanelWithSidebar}
  * @implements {WebInspector.TargetManager.Observer}
  */
 WebInspector.SecurityPanel = function()
@@ skipping 535 matching lines @@
     WebInspector.VBox.call(this, true);
     this.registerRequiredCSS("security/mainView.css");
     this.registerRequiredCSS("security/lockIcon.css");
     this.setMinimumSize(200, 100);
 
     this.contentElement.classList.add("security-main-view");
 
     this._panel = panel;
 
     this._summarySection = this.contentElement.createChild("div", "security-summary");
-    this._securityExplanations = this.contentElement.createChild("div", "security-explanation-list");
+
+    // Info explanations should appear after all others.
+    this._securityExplanationsMain = this.contentElement.createChild("div", "security-explanation-list");
+    this._securityExplanationsExtra = this.contentElement.createChild("div", "security-explanation-list security-explanations-extra");
 
     // Fill the security summary section.
     this._summarySection.createChild("div", "security-summary-section-title").textContent = WebInspector.UIString("Security Overview");
 
     var lockSpectrum = this._summarySection.createChild("div", "lock-spectrum");
     lockSpectrum.createChild("div", "lock-icon lock-icon-secure").title = WebInspector.UIString("Secure");
     lockSpectrum.createChild("div", "security-summary-lock-spacer");
     lockSpectrum.createChild("div", "lock-icon lock-icon-neutral").title = WebInspector.UIString("Not Secure");
     lockSpectrum.createChild("div", "security-summary-lock-spacer");
     lockSpectrum.createChild("div", "lock-icon lock-icon-insecure").title = WebInspector.UIString("Insecure (Broken)");
 
     this._summarySection.createChild("div", "triangle-pointer-container").createChild("div", "triangle-pointer-wrapper").createChild("div", "triangle-pointer");
 
     this._summaryText = this._summarySection.createChild("div", "security-summary-text");
 }
 
 WebInspector.SecurityMainView.prototype = {
     /**
+     * @param {!Element} parent
      * @param {!SecurityAgent.SecurityStateExplanation} explanation
      * @return {!Element}
      */
-    _addExplanation: function(explanation)
+    _addExplanation: function(parent, explanation)
     {
-        var explanationSection = this._securityExplanations.createChild("div", "security-explanation");
+        var explanationSection = parent.createChild("div", "security-explanation");
         explanationSection.classList.add("security-explanation-" + explanation.securityState);
 
         explanationSection.createChild("div", "security-property").classList.add("security-property-" + explanation.securityState);
         var text = explanationSection.createChild("div", "security-explanation-text");
         text.createChild("div", "security-explanation-title").textContent = explanation.summary;
         text.createChild("div").textContent = explanation.description;
 
         if (explanation.certificateId) {
             text.appendChild(WebInspector.SecurityPanel.createCertificateViewerButton(WebInspector.UIString("View certificate"), explanation.certificateId));
         }
@@ skipping 29 matching lines @@
         this._schemeIsCryptographic = schemeIsCryptographic;
 
         this._panel.setRanInsecureContentStyle(mixedContentStatus.ranInsecureContentStyle);
         this._panel.setDisplayedInsecureContentStyle(mixedContentStatus.displayedInsecureContentStyle);
 
         this.refreshExplanations();
     },
 
     refreshExplanations: function()
     {
-        this._securityExplanations.removeChildren();
-        for (var explanation of this._explanations)
-            this._addExplanation(explanation);
+        this._securityExplanationsMain.removeChildren();
+        this._securityExplanationsExtra.removeChildren();
+        for (var explanation of this._explanations) {
+            if (explanation.securityState === SecurityAgent.SecurityState.Info) {
+                this._addExplanation(this._securityExplanationsExtra, explanation);
+            } else {
+                this._addExplanation(this._securityExplanationsMain, explanation);
+            }
+        }
 
         this._addMixedContentExplanations();
     },
 
     _addMixedContentExplanations: function()
     {
         if (!this._schemeIsCryptographic)
             return;
 
         if (this._mixedContentStatus && (this._mixedContentStatus.ranInsecureContent || this._mixedContentStatus.displayedInsecureContent)) {
             if (this._mixedContentStatus.ranInsecureContent)
-                this._addMixedContentExplanation(this._mixedContentStatus.ranInsecureContentStyle, WebInspector.UIString("Active Mixed Content"), WebInspector.UIString("You have recently allowed insecure content (such as scripts or iframes) to run on this site."), WebInspector.NetworkLogView.MixedContentFilterValues.BlockOverridden, showBlockOverriddenMixedContentInNetworkPanel);
+                this._addMixedContentExplanation(this._securityExplanationsMain, this._mixedContentStatus.ranInsecureContentStyle, WebInspector.UIString("Active Mixed Content"), WebInspector.UIString("You have recently allowed insecure content (such as scripts or iframes) to run on this site."), WebInspector.NetworkLogView.MixedContentFilterValues.BlockOverridden, showBlockOverriddenMixedContentInNetworkPanel);
             if (this._mixedContentStatus.displayedInsecureContent)
-                this._addMixedContentExplanation(this._mixedContentStatus.displayedInsecureContentStyle, WebInspector.UIString("Mixed Content"), WebInspector.UIString("The site includes HTTP resources."), WebInspector.NetworkLogView.MixedContentFilterValues.Displayed, showDisplayedMixedContentInNetworkPanel);
+                this._addMixedContentExplanation(this._securityExplanationsMain, this._mixedContentStatus.displayedInsecureContentStyle, WebInspector.UIString("Mixed Content"), WebInspector.UIString("The site includes HTTP resources."), WebInspector.NetworkLogView.MixedContentFilterValues.Displayed, showDisplayedMixedContentInNetworkPanel);
         }
 
         if (this._mixedContentStatus && (!this._mixedContentStatus.displayedInsecureContent && !this._mixedContentStatus.ranInsecureContent)) {
-            this._addExplanation(/** @type {!SecurityAgent.SecurityStateExplanation} */ ({
+            this._addExplanation(this._securityExplanationsMain, /** @type {!SecurityAgent.SecurityStateExplanation} */ ({
                 "securityState": SecurityAgent.SecurityState.Secure,
                 "summary": WebInspector.UIString("Secure Resources"),
                 "description": WebInspector.UIString("All resources on this page are served securely.")
             }));
         }
 
         if (this._panel.filterRequestCount(WebInspector.NetworkLogView.MixedContentFilterValues.Blocked) > 0)
-            this._addMixedContentExplanation(SecurityAgent.SecurityState.Info, WebInspector.UIString("Blocked mixed content"), WebInspector.UIString("Your page requested insecure resources that were blocked."), WebInspector.NetworkLogView.MixedContentFilterValues.Blocked, showBlockedMixedContentInNetworkPanel);
+            this._addMixedContentExplanation(this._securityExplanationsExtra, SecurityAgent.SecurityState.Info, WebInspector.UIString("Blocked mixed content"), WebInspector.UIString("Your page requested insecure resources that were blocked."), WebInspector.NetworkLogView.MixedContentFilterValues.Blocked, showBlockedMixedContentInNetworkPanel);
 
         /**
          * @param {!Event} e
          */
         function showDisplayedMixedContentInNetworkPanel(e)
         {
             e.consume();
             WebInspector.NetworkPanel.revealAndFilter([
                 {
                     filterType: WebInspector.NetworkLogView.FilterType.MixedContent,
@@ skipping 25 matching lines @@
             WebInspector.NetworkPanel.revealAndFilter([
                 {
                     filterType: WebInspector.NetworkLogView.FilterType.MixedContent,
                     filterValue: WebInspector.NetworkLogView.MixedContentFilterValues.Blocked
                 }
             ]);
         }
     },
 
     /**
+     * @param {!Element} parent
      * @param {!SecurityAgent.SecurityState} securityState
      * @param {string} summary
      * @param {string} description
      * @param {!WebInspector.NetworkLogView.MixedContentFilterValues} filterKey
      * @param {!Function} networkFilterFn
      */
-    _addMixedContentExplanation: function(securityState, summary, description, filterKey, networkFilterFn)
+    _addMixedContentExplanation: function(parent, securityState, summary, description, filterKey, networkFilterFn)
     {
         var mixedContentExplanation = /** @type {!SecurityAgent.SecurityStateExplanation} */ ({
             "securityState": securityState,
             "summary": summary,
             "description": description
         });
 
         var filterRequestCount = this._panel.filterRequestCount(filterKey);
-        var requestsAnchor = this._addExplanation(mixedContentExplanation).createChild("div", "security-mixed-content link");
+        var requestsAnchor = this._addExplanation(parent, mixedContentExplanation).createChild("div", "security-mixed-content link");
         if (filterRequestCount > 0) {
             requestsAnchor.textContent = WebInspector.UIString("View %d request%s in Network Panel", filterRequestCount, (filterRequestCount > 1 ? "s" : ""));
         } else {
             // Network instrumentation might not have been enabled for the page load, so the security panel does not necessarily know a count of individual mixed requests at this point. Point the user at the Network Panel which prompts them to refresh.
             requestsAnchor.textContent = WebInspector.UIString("View requests in Network Panel");
         }
         requestsAnchor.href = "";
         requestsAnchor.addEventListener("click", networkFilterFn);
     },
 
@@ skipping 259 matching lines @@
         row.createChild("div").textContent = key;
 
         var valueDiv = row.createChild("div");
         if (typeof value === "string") {
             valueDiv.textContent = value;
         } else {
             valueDiv.appendChild(value);
         }
     }
 }