Link to the mixed content filter from security panel

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 39 matching lines @@
  * @property {?NetworkAgent.CertificateDetails} securityDetails.certificateDetails - Certificate details of the origin (attached to security details), if available.
  * @property {?WebInspector.SecurityOriginView} originView - Current SecurityOriginView corresponding to origin.
  */
 WebInspector.SecurityPanel.OriginState;
 
 WebInspector.SecurityPanel.prototype = {
 
     /**
      * @param {!SecurityAgent.SecurityState} newSecurityState
      * @param {!Array<!SecurityAgent.SecurityStateExplanation>} explanations
+     * @param {!SecurityAgent.MixedContentStatus=} mixedContentStatus

[lgarron, 2015/09/04 00:44:35]

@param {?SecurityAgent.MixedContentStatus} mixedContentStatus

= represents an optional parameter. In this case, the parameter is guaranteed to
be provided (by the way we call it), but may be null (question mark prefix.)

[estark, 2015/09/04 02:45:30]

Done.

+     * @param {boolean=} schemeIsCryptographic

[lgarron, 2015/09/04 00:44:35]

Hmm, so, I believe JSDoc won't allow an nullable boolean, and the idiomatic
Javascript checks conflate "not present" with "false". (One reasons I avoided
the issue by placing the mixed content explanation generation in the model.)

How about we just make `schemeIsCryptographic and `mixedContentStatus`
non-optional in protocol.json?

[estark, 2015/09/04 02:45:30]

Converted schemeIsCryptographic to a boolean in SecurityModel.

If we want to make these arguments non-optional in protocol.json, that seems
fine, but I'd rather do it in a separate CL.

      */
-    _updateSecurityState: function(newSecurityState, explanations)
+    _updateSecurityState: function(newSecurityState, explanations, mixedContentStatus, schemeIsCryptographic)
     {
         this._sidebarMainViewElement.setSecurityState(newSecurityState);
-        this._mainView.updateSecurityState(newSecurityState, explanations);
+        this._mainView.updateSecurityState(newSecurityState, explanations, mixedContentStatus, schemeIsCryptographic);
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _onSecurityStateChanged: function(event)
     {
         var securityState = /** @type {!SecurityAgent.SecurityState} */ (event.data.securityState);
         var explanations = /** @type {!Array<!SecurityAgent.SecurityStateExplanation>} */ (event.data.explanations);
-        this._updateSecurityState(securityState, explanations);
+        this._updateSecurityState(securityState, explanations, event.data.mixedContentStatus, event.data.schemeIsCryptographic);

[lgarron, 2015/09/04 00:44:35]

I believe DevTools convention is to cast these (like securityState and
explanations above).

[estark, 2015/09/04 02:45:31]

Done.

     },
 
     showMainView: function()
     {
         this._setVisibleView(this._mainView);
     },
 
     /**
      * @param {!WebInspector.SecurityPanel.Origin} origin
      */
@@ skipping 240 matching lines @@
     text.createChild("div", "security-summary-section-title").textContent = WebInspector.UIString("Security Overview");
     this._summaryExplanation = text.createChild("div", "security-explanation");
 
     this._securityExplanations = this.element.createChild("div", "security-explanation-list");
 
 }
 
 WebInspector.SecurityMainView.prototype = {
     /**
      * @param {!SecurityAgent.SecurityStateExplanation} explanation
+     * @return {!Element}
      */
     _addExplanation: function(explanation)
     {
         var explanationSection = this._securityExplanations.createChild("div", "security-section");
         explanationSection.classList.add("security-explanation");
 
         explanationSection.createChild("div", "lock-icon").classList.add("lock-icon-" + explanation.securityState);
         var text = explanationSection.createChild("div", "security-section-text");
         text.createChild("div", "security-section-title").textContent = explanation.summary;
         text.createChild("div", "security-explanation").textContent = explanation.description;
+        return text;
     },
 
     /**
      * @param {!SecurityAgent.SecurityState} newSecurityState
      * @param {!Array<!SecurityAgent.SecurityStateExplanation>} explanations
+     * @param {!SecurityAgent.MixedContentStatus=} mixedContentStatus
+     * @param {boolean=} schemeIsCryptographic
      */
-    updateSecurityState: function(newSecurityState, explanations)
+    updateSecurityState: function(newSecurityState, explanations, mixedContentStatus, schemeIsCryptographic)
     {
         // Remove old state.
         // It's safe to call this even when this._securityState is undefined.
         this._summarylockIcon.classList.remove("lock-icon-" + this._securityState);
         this._summaryExplanation.classList.remove("security-state-" + this._securityState);
 
         // Add new state.
         this._securityState = newSecurityState;
         this._summarylockIcon.classList.add("lock-icon-" + this._securityState);
         this._summaryExplanation.classList.add("security-state-" + this._securityState);
         var summaryExplanationStrings = {
             "unknown":  WebInspector.UIString("This security of this page is unknown."),
             "insecure": WebInspector.UIString("This page is insecure (broken HTTPS)."),
             "neutral":  WebInspector.UIString("This page is not secure."),
             "secure":   WebInspector.UIString("This page is secure (valid HTTPS).")
         }
         this._summaryExplanation.textContent = summaryExplanationStrings[this._securityState];
 
         this._securityExplanations.removeChildren();
         for (var explanation of explanations)
             this._addExplanation(explanation);
+
+        if (schemeIsCryptographic && mixedContentStatus) {
+          var mixedContentExplanation;

[pfeldman, 2015/09/03 23:48:48]

4 space indent.

[estark, 2015/09/04 02:45:30]

Done.

+          if (mixedContentStatus.ranInsecureContent) {
+            mixedContentExplanation = {

[pfeldman, 2015/09/03 23:48:48]

These plain JS objects are always compiler-unfriendly and should be avoided via
adding typedefs and casting them.

[lgarron, 2015/09/04 00:44:35]

estark@: It seems I forgot to do this when I added these to SecurityModel.js

mixedContentExplanation = /** @type {!SecurityAgent. SecurityStateExplanation}
*/ ({
    ...
});

[estark, 2015/09/04 02:45:30]

Not sure if I did this right, PTAL.

+              "securityState": mixedContentStatus.ranInsecureContentStyle,
+              "summary": WebInspector.UIString("Active Mixed Content"),
+              "description": WebInspector.UIString("You have recently allowed insecure content (such as scripts or iframes) to run on this site.")
+            }
+          } else if (mixedContentStatus.displayedInsecureContent) {
+            mixedContentExplanation = {
+              "securityState": mixedContentStatus.displayedInsecureContentStyle,
+              "summary": WebInspector.UIString("Mixed Content"),
+              "description": WebInspector.UIString("The site includes HTTP resources.")
+            }
+          }
+          if (mixedContentExplanation) {

[lgarron, 2015/09/04 00:44:35]

I don't know if if's done anywhere in DevTools, but I personally don't like
relying on a hoisted unassigned variable to be falsey for a conditional check.

(I'd either:
- use an explicit boolean to keep track of whether t
- remove this if and place `if (mixedContentStatus.displayedInsecureContent ||
mixedContentStatus.ranInsecureContent)` around the three relevant blocks
- explicitly set mixedContentExplanation to null and cast to /** @type
{?SecurityAgent. SecurityStateExplanation} */ here)

[estark, 2015/09/04 02:45:30]

Done (conditioned the whole block around displayed/ranInsecureContent)

+            var requestsAnchor = this._addExplanation(mixedContentExplanation).createChild("div", "security-mixed-content link");
+            requestsAnchor.textContent = WebInspector.UIString("View requests in Network Panel");
+            requestsAnchor.href = "";
+            requestsAnchor.addEventListener("click", mixedContentStatus.ranInsecureContent ? showBlockOverriddenMixedContentInNetworkPanel : showDisplayedMixedContentInNetworkPanel, false);
+          }
+        }
+
+        function showDisplayedMixedContentInNetworkPanel(e) {

[pfeldman, 2015/09/03 23:48:48]

{ goes next line, missing annotation.

[estark, 2015/09/04 02:45:30]

Done.

+          e.consume();
+          WebInspector.NetworkPanel.revealAndFilter(WebInspector.NetworkLogView.FilterType.MixedContent, "displayed");
+        }
+
+        function showBlockOverriddenMixedContentInNetworkPanel(e) {

[pfeldman, 2015/09/03 23:48:48]

ditto

[estark, 2015/09/04 02:45:30]

Done.

+          e.consume();
+          WebInspector.NetworkPanel.revealAndFilter(WebInspector.NetworkLogView.FilterType.MixedContent, "block-overridden");
+        }
     },
 
     __proto__: WebInspector.VBox.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.VBox}
  * @param {!WebInspector.SecurityPanel} panel
  * @param {!WebInspector.SecurityPanel.Origin} origin
@@ skipping 128 matching lines @@
         row.createChild("div").textContent = WebInspector.UIString(key);
 
         var valueDiv = row.createChild("div");
         if (value instanceof HTMLDivElement) {
             valueDiv.appendChild(value);
         } else {
             valueDiv.textContent = value;
         }
     }
 }
-

[lgarron, 2015/09/04 00:44:35]

Nit: unnecessary whitespace change.

[estark, 2015/09/04 02:45:30]

Done.