Bug 1470815 - Make sure the Security panel is visible for HTTP requests in the Console panel; r=nchevobbe

Differential Revision: https://phabricator.services.mozilla.com/D3904

--HG--
extra : moz-landing-system : lando

devtools/client/netmonitor/src/connector/firefox-data-provider.js

@@ -351,7 +351,7 @@ class FirefoxDataProvider {
 
     switch (updateType) {
       case "securityInfo":
-        this.pushRequestToQueue(actor, { securityState: networkInfo.securityInfo });
+        this.pushRequestToQueue(actor, { securityState: networkInfo.securityState });
         break;
       case "responseStart":
         this.pushRequestToQueue(actor, {

devtools/client/netmonitor/src/reducers/requests.js

@@ -87,7 +87,7 @@ function requestsReducer(state = Requests(), action) {
 
       request = {
         ...request,
-        ...processNetworkUpdates(action.data),
+        ...processNetworkUpdates(action.data, request),
       };
       const requestEndTime = request.startedMillis +
         (request.eventTimings ? request.eventTimings.totalTime : 0);

devtools/client/netmonitor/src/utils/request-utils.js

@@ -491,9 +491,9 @@ async function updateFormDataSections(props) {
  * incoming network update packets. It's used by Network and
  * Console panel reducers.
  */
-function processNetworkUpdates(request = {}) {
+function processNetworkUpdates(update, request) {
   const result = {};
-  for (const [key, value] of Object.entries(request)) {
+  for (const [key, value] of Object.entries(update)) {
     if (UPDATE_PROPS.includes(key)) {
       result[key] = value;
 
@@ -501,8 +501,11 @@ function processNetworkUpdates(request = {}) {
         case "securityInfo":
           result.securityState = value.state;
           break;
+        case "securityState":
+          result.securityState = update.securityState || request.securityState;
+          break;
         case "totalTime":
-          result.totalTime = request.totalTime;
+          result.totalTime = update.totalTime;
           break;
         case "requestPostData":
           result.requestHeadersFromUploadStream = value.uploadHeaders;

devtools/client/webconsole/reducers/messages.js

@@ -314,7 +314,7 @@ function messages(state = MessageState(), action, filtersState, prefsState) {
           ...networkMessagesUpdateById,
           [action.id]: {
             ...request,
-            ...processNetworkUpdates(action.data),
+            ...processNetworkUpdates(action.data, request),
           }
         }
       };

devtools/client/webconsole/test/fixtures/stubs/networkEvent.js

@@ -30,7 +30,6 @@ stubPreparedMessages.set("GET request", new NetworkEventMessage({
   "indent": 0,
   "updates": [],
   "openedOnce": false,
-  "securityState": null,
   "securityInfo": null,
   "requestHeadersFromUploadStream": null,
   "private": false,
@@ -78,7 +77,6 @@ stubPreparedMessages.set("GET request update", new NetworkEventMessage({
   "totalTime": 16,
   "indent": 0,
   "openedOnce": false,
-  "securityState": null,
   "securityInfo": null,
   "requestHeadersFromUploadStream": null,
   "url": "http://example.com/browser/devtools/client/webconsole/test/fixtures/stub-generators/inexistent.html",
@@ -109,7 +107,6 @@ stubPreparedMessages.set("XHR GET request", new NetworkEventMessage({
   "indent": 0,
   "updates": [],
   "openedOnce": false,
-  "securityState": null,
   "securityInfo": null,
   "requestHeadersFromUploadStream": null,
   "private": false,
@@ -157,7 +154,6 @@ stubPreparedMessages.set("XHR GET request update", new NetworkEventMessage({
   "totalTime": 16,
   "indent": 0,
   "openedOnce": false,
-  "securityState": null,
   "securityInfo": null,
   "requestHeadersFromUploadStream": null,
   "url": "http://example.com/browser/devtools/client/webconsole/test/fixtures/stub-generators/inexistent.html",
@@ -188,7 +184,6 @@ stubPreparedMessages.set("XHR POST request", new NetworkEventMessage({
   "indent": 0,
   "updates": [],
   "openedOnce": false,
-  "securityState": null,
   "securityInfo": null,
   "requestHeadersFromUploadStream": null,
   "private": false,
@@ -236,7 +231,6 @@ stubPreparedMessages.set("XHR POST request update", new NetworkEventMessage({
   "totalTime": 10,
   "indent": 0,
   "openedOnce": false,
-  "securityState": null,
   "securityInfo": null,
   "requestHeadersFromUploadStream": null,
   "url": "http://example.com/browser/devtools/client/webconsole/test/fixtures/stub-generators/inexistent.html",

devtools/client/webconsole/test/mochitest/browser_webconsole_network_messages_expand.js

@@ -4,7 +4,7 @@
 "use strict";
 
 const TEST_FILE = "test-network-request.html";
-const TEST_PATH = "http://example.com/browser/devtools/client/webconsole/" +
+const TEST_PATH = "https://example.com/browser/devtools/client/webconsole/" +
                   "test/mochitest/";
 const TEST_URI = TEST_PATH + TEST_FILE;
 
@@ -44,6 +44,10 @@ const tabs = [{
   id: "stack-trace",
   testEmpty: testEmptyStackTrace,
   testContent: testStackTrace,
+}, {
+  id: "security",
+  testEmpty: testEmptySecurity,
+  testContent: testSecurity,
 }];
 
 /**
@@ -129,13 +133,18 @@ async function openRequestBeforeUpdates(target, hud, tab) {
   const urlNode = messageNode.querySelector(".url");
   urlNode.click();
 
-  // Make sure the current tab is the expected one.
-  const currentTab = messageNode.querySelector(`#${tab.id}-tab`);
-  is(currentTab.getAttribute("aria-selected"), "true",
-    "The correct tab is selected");
+  // Except the security tab. It isn't available till the
+  // "securityInfo" packet type is received, so doesn't
+  // fit this part of the test.
+  if (tab.id != "security") {
+    // Make sure the current tab is the expected one.
+    const currentTab = messageNode.querySelector(`#${tab.id}-tab`);
+    is(currentTab.getAttribute("aria-selected"), "true",
+      "The correct tab is selected");
 
-  // The tab should be empty now.
-  tab.testEmpty(messageNode);
+    // The tab should be empty now.
+    tab.testEmpty(messageNode);
+  }
 
   // Wait till all updates and payload are received.
   await updates;
@@ -158,6 +167,7 @@ async function testNetworkMessage(toolbox, messageNode) {
   await testResponse(messageNode);
   await testTimings(messageNode);
   await testStackTrace(messageNode);
+  await testSecurity(messageNode);
   await waitForLazyRequests(toolbox);
 }
 
@@ -289,6 +299,24 @@ async function testStackTrace(messageNode) {
   });
 }
 
+// Security
+
+function testEmptySecurity(messageNode) {
+  const panel = messageNode.querySelector("#security-panel .tab-panel");
+  is(panel.textContent, "", "Security tab is empty");
+}
+
+async function testSecurity(messageNode) {
+  const securityTab = messageNode.querySelector("#security-tab");
+  ok(securityTab, "Security tab is available");
+
+  // Select Timings tab and check the content.
+  securityTab.click();
+  await waitUntil(() => {
+    return !!messageNode.querySelector("#security-panel .treeTable .treeRow");
+  });
+}
+
 // Waiting helpers
 
 async function waitForPayloadReady(toolbox) {
@@ -318,7 +346,7 @@ async function waitForRequestUpdates(toolbox) {
 }
 
 /**
- * Wait until all lazily fetch requests in netmonitor get finsished.
+ * Wait until all lazily fetch requests in netmonitor get finished.
  * Otherwise test will be shutdown too early and cause failure.
  */
 async function waitForLazyRequests(toolbox) {

devtools/client/webconsole/utils/messages.js

@@ -270,6 +270,7 @@ function transformNetworkEventPacket(packet) {
     updates: networkEvent.updates,
     cause: networkEvent.cause,
     private: networkEvent.private,
+    securityState: networkEvent.securityState,
   });
 }
 

devtools/shared/webconsole/client.js

@@ -165,7 +165,7 @@ WebConsoleClient.prototype = {
         networkInfo.totalTime = packet.totalTime;
         break;
       case "securityInfo":
-        networkInfo.securityInfo = packet.state;
+        networkInfo.securityState = packet.state;
         break;
       case "responseCache":
         networkInfo.response.responseCache = packet.responseCache;