Bug 1613047 - Fix CSS Warnings in a Fission world when navigating. r=ochameau.

If the CSS filter was enabled, when the user would navigate to a page
on a different origin, the CSS Warnings from the new page wouldn't
be displayed in the console.
This is related to how we manage the CSS Warnings. Since emitting those
messages is costly, we only do so when the console is opened, if
the user already set the filter, or when they turned it on.
The issue is that it was only done on the main target, and only
when the console would start, or when the user clicked on the css
filter button.
So with Fission enabled, we could switch to a new target, but we
wouldn't trigger the code that parses the stylesheets of the new
page.

The browser_webconsole_message_categories was asserting this issue,
and is now fixed (after setting the proper target switching target).

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

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

devtools/client/webconsole/constants.js

@@ -52,6 +52,7 @@ const actionTypes = {
   WARNING_GROUPS_TOGGLE: "WARNING_GROUPS_TOGGLE",
   WILL_NAVIGATE: "WILL_NAVIGATE",
   EDITOR_SET_WIDTH: "EDITOR_SET_WIDTH",
+  TARGET_AVAILABLE: "TARGET_AVAILABLE",
 };
 
 const prefs = {

devtools/client/webconsole/enhancers/css-error-reporting.js

@@ -7,6 +7,7 @@
 const {
   INITIALIZE,
   FILTER_TOGGLE,
+  TARGET_AVAILABLE,
 } = require("devtools/client/webconsole/constants");
 
 /**
@@ -16,8 +17,8 @@ const {
 function ensureCSSErrorReportingEnabled(webConsoleUI) {
   return next => (reducer, initialState, enhancer) => {
     function ensureErrorReportingEnhancer(state, action) {
-      const proxy = webConsoleUI ? webConsoleUI.proxy : null;
-      if (!proxy) {
+      const proxies = webConsoleUI ? webConsoleUI.getAllProxies() : null;
+      if (!proxies) {
         return reducer(state, action);
       }
 
@@ -28,9 +29,18 @@ function ensureCSSErrorReportingEnabled(webConsoleUI) {
 
       const cssFilterToggled =
         action.type == FILTER_TOGGLE && action.filter == "css";
-      if (cssFilterToggled || action.type == INITIALIZE) {
-        proxy.target.ensureCSSErrorReportingEnabled();
+      if (
+        cssFilterToggled ||
+        action.type == INITIALIZE ||
+        action.type == TARGET_AVAILABLE
+      ) {
+        for (const proxy of proxies) {
+          if (proxy.target && proxy.target.ensureCSSErrorReportingEnabled) {
+            proxy.target.ensureCSSErrorReportingEnabled();
+          }
+        }
       }
+
       return state;
     }
     return next(ensureErrorReportingEnhancer, initialState, enhancer);

devtools/client/webconsole/test/browser/_webconsole.ini

@@ -271,7 +271,6 @@ skip-if = ccov #Bug 1594897
 [browser_webconsole_longstring_getter.js]
 [browser_webconsole_longstring.js]
 [browser_webconsole_message_categories.js]
-skip-if = fission
 [browser_webconsole_mime_css_blocked.js]
 [browser_webconsole_multiple_windows_and_tabs.js]
 [browser_webconsole_navigate_to_parse_error.js]

devtools/client/webconsole/test/browser/browser_webconsole_message_categories.js

@@ -9,7 +9,7 @@ const TEST_URI =
   "data:text/html;charset=utf-8,Web Console test for " +
   "bug 595934 - message categories coverage.";
 const TESTS_PATH =
-  "http://example.com/browser/devtools/client/webconsole/" + "test/browser/";
+  "http://example.com/browser/devtools/client/webconsole/test/browser/";
 const TESTS = [
   {
     // #0
@@ -90,6 +90,7 @@ const TESTS = [
 add_task(async function() {
   requestLongerTimeout(2);
 
+  await pushPref("devtools.target-switching.enabled", true);
   await pushPref("devtools.webconsole.filter.css", true);
   await pushPref("devtools.webconsole.filter.net", true);
 

devtools/client/webconsole/test/node/helpers.js

@@ -133,6 +133,7 @@ function getWebConsoleUiMock(hud, proxyOverrides) {
     emit: () => {},
     emitForTests: () => {},
     hud,
+    getAllProxies: () => [proxy],
     proxy,
     clearNetworkRequests: () => {},
     clearMessagesCache: () => {},

devtools/client/webconsole/webconsole-ui.js

@@ -29,10 +29,10 @@ loader.lazyRequireGetter(
 );
 loader.lazyRequireGetter(
   this,
-  "PREFS",
-  "devtools/client/webconsole/constants",
-  true
+  "constants",
+  "devtools/client/webconsole/constants"
 );
+
 loader.lazyRequireGetter(
   this,
   "START_IGNORE_ACTION",
@@ -121,7 +121,9 @@ class WebConsoleUI {
     // Ignore Fronts that are already destroyed
     if (filterDisconnectedProxies) {
       proxies = proxies.filter(proxy => {
-        return proxy.webConsoleFront && !!proxy.webConsoleFront.actorID;
+        return (
+          proxy && proxy.webConsoleFront && !!proxy.webConsoleFront.actorID
+        );
       });
     }
 
@@ -347,11 +349,21 @@ class WebConsoleUI {
    *        A new top level target is created.
    */
   async _onTargetAvailable({ type, targetFront, isTopLevel }) {
+    const dispatchTargetAvailable = () => {
+      const store = this.wrapper && this.wrapper.getStore();
+      if (store) {
+        this.wrapper.getStore().dispatch({
+          type: constants.TARGET_AVAILABLE,
+          targetType: type,
+        });
+      }
+    };
+
     // This is a top level target. It may update on process switches
     // when navigating to another domain.
     if (isTopLevel) {
       const fissionSupport = Services.prefs.getBoolPref(
-        PREFS.FEATURES.BROWSER_TOOLBOX_FISSION
+        constants.PREFS.FEATURES.BROWSER_TOOLBOX_FISSION
       );
       const needContentProcessMessagesListener =
         targetFront.isParentProcess && !targetFront.isAddon && !fissionSupport;
@@ -361,6 +373,7 @@ class WebConsoleUI {
         needContentProcessMessagesListener
       );
       await this.proxy.connect();
+      dispatchTargetAvailable();
       return;
     }
 
@@ -381,6 +394,7 @@ class WebConsoleUI {
     const proxy = new WebConsoleConnectionProxy(this, targetFront);
     this.additionalProxies.set(targetFront, proxy);
     await proxy.connect();
+    dispatchTargetAvailable();
   }
 
   /**