--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -334,17 +334,18 @@ checkbox:-moz-focusring {
 .devtools-button:not(:empty):not(.checked):not(:disabled):hover:active,
 .devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled]))[label]:hover:active {
   background-color: var(--theme-selection-background-semitransparent);
 }
 
 .devtools-toolbarbutton:not([disabled])[label][checked=true],
 .devtools-toolbarbutton:not([disabled])[label][open],
 .devtools-button:not(:empty).checked,
-.theme-firebug .devtools-toolbarbutton:-moz-any([checked],[open]),
+.theme-firebug .devtools-toolbarbutton[checked],
+.theme-firebug .devtools-toolbarbutton[open],
 .theme-firebug .devtools-button.checked:empty {
   background: var(--toolbarbutton-checked-background);
   border-color: var(--toolbarbutton-checked-border-color);
   color: var(--toolbarbutton-checked-color);
 }
 
 /* Icons */
 :root {

--- a/devtools/client/webconsole/new-console-output/components/message-container.js
+++ b/devtools/client/webconsole/new-console-output/components/message-container.js
@@ -74,16 +74,20 @@ const MessageContainer = createClass({
     const message = this.props.getMessage();
 
     let MessageComponent = getMessageComponent(message);
     return MessageComponent(Object.assign({message}, this.props));
   }
 });
 
 function getMessageComponent(message) {
+  if (!message) {
+    return componentMap.get("DefaultRenderer");
+  }
+
   switch (message.source) {
     case MESSAGE_SOURCE.CONSOLE_API:
       return componentMap.get("ConsoleApiCall");
     case MESSAGE_SOURCE.NETWORK:
       return componentMap.get("NetworkEventMessage");
     case MESSAGE_SOURCE.CSS:
     case MESSAGE_SOURCE.JAVASCRIPT:
       switch (message.type) {

--- a/devtools/client/webconsole/new-console-output/constants.js
+++ b/devtools/client/webconsole/new-console-output/constants.js
@@ -60,16 +60,17 @@ const chromeRDPEnums = {
     DIR: "dir",
     TABLE: "table",
     TRACE: "trace",
     CLEAR: "clear",
     START_GROUP: "startGroup",
     START_GROUP_COLLAPSED: "startGroupCollapsed",
     END_GROUP: "endGroup",
     ASSERT: "assert",
+    DEBUG: "debug",
     PROFILE: "profile",
     PROFILE_END: "profileEnd",
     // Undocumented in Chrome RDP, but is used for evaluation results.
     RESULT: "result",
     // Undocumented in Chrome RDP, but is used for input.
     COMMAND: "command",
     // Undocumented in Chrome RDP, but is used for messages that should not
     // output anything (e.g. `console.time()` calls).

--- a/devtools/client/webconsole/new-console-output/new-console-output-wrapper.js
+++ b/devtools/client/webconsole/new-console-output/new-console-output-wrapper.js
@@ -42,22 +42,23 @@ NewConsoleOutputWrapper.prototype = {
     // Focus the input line whenever the output area is clicked.
     this.parentNode.addEventListener("click", (event) => {
       // Do not focus on middle/right-click or 2+ clicks.
       if (event.detail !== 1 || event.button !== 0) {
         return;
       }
 
       // Do not focus if a link was clicked
-      if (event.originalTarget.closest("a")) {
+      let target = event.originalTarget || event.target;
+      if (target.closest("a")) {
         return;
       }
 
       // Do not focus if something other than the output region was clicked
-      if (!event.originalTarget.closest(".webconsole-output")) {
+      if (!target.closest(".webconsole-output")) {
         return;
       }
 
       // Do not focus if something is selected
       let selection = this.document.defaultView.getSelection();
       if (selection && !selection.isCollapsed) {
         return;
       }

--- a/devtools/client/webconsole/new-console-output/reducers/messages.js
+++ b/devtools/client/webconsole/new-console-output/reducers/messages.js
@@ -426,32 +426,67 @@ function getAllActorsInMessage(message, 
 /**
  * Returns total count of top level messages (those which are not
  * within a group).
  */
 function getToplevelMessageCount(record) {
   return record.messagesById.count(message => !message.groupId);
 }
 
+/**
+ * Returns true if given message should be visible, false otherwise.
+ */
 function shouldMessageBeVisible(message, messagesState, filtersState, checkGroup = true) {
-  return (
-    (
-      checkGroup === false
-      || isInOpenedGroup(message, messagesState.groupsById, messagesState.messagesUiById)
-    )
-    && (
-      isUnfilterable(message)
-      || (
-        matchLevelFilters(message, filtersState)
-        && matchCssFilters(message, filtersState)
-        && matchNetworkFilters(message, filtersState)
-        && matchSearchFilters(message, filtersState)
-      )
-    )
-  );
+  // Do not display the message if it's in closed group.
+  if (
+    checkGroup
+    && !isInOpenedGroup(message, messagesState.groupsById, messagesState.messagesUiById)
+  ) {
+    return false;
+  }
+
+  // Some messages can't be filtered out (e.g. groups).
+  // So, always return true for those.
+  if (isUnfilterable(message)) {
+    return true;
+  }
+
+  // Let's check all filters and hide the message if they say so.
+  if (!matchFilters(message, filtersState)) {
+    return false;
+  }
+
+  // If there is a free text available for filtering use it to decide
+  // whether the message is displayed or not.
+  let text = (filtersState.text || "").trim();
+  if (text) {
+    return matchSearchFilters(message, text);
+  }
+
+  return true;
+}
+
+function matchFilters(message, filtersState) {
+  if (matchLevelFilters(message, filtersState)) {
+    return true;
+  }
+
+  // Return true if the message source is 'css'
+  // and CSS filter is enabled.
+  if (matchCssFilters(message, filtersState)) {
+    return true;
+  }
+
+  // Return true if the message is network event
+  // and Network and/or XHR filter is enabled.
+  if (matchNetworkFilters(message, filtersState)) {
+    return true;
+  }
+
+  return false;
 }
 
 function isUnfilterable(message) {
   return [
     MESSAGE_TYPE.COMMAND,
     MESSAGE_TYPE.RESULT,
     MESSAGE_TYPE.START_GROUP,
     MESSAGE_TYPE.START_GROUP_COLLAPSED,
@@ -469,41 +504,43 @@ function isInOpenedGroup(message, groups
 function hasClosedParentGroup(group, messagesUI) {
   return group.some(groupId => isGroupClosed(groupId, messagesUI));
 }
 
 function isGroupClosed(groupId, messagesUI) {
   return messagesUI.includes(groupId) === false;
 }
 
-function matchLevelFilters(message, filters) {
-  return filters.get(message.level) === true;
+function matchNetworkFilters(message, filters) {
+  return (
+    message.source === MESSAGE_SOURCE.NETWORK &&
+    (filters.get("net") === true && message.isXHR === false) ||
+    (filters.get("netxhr") === true && message.isXHR === true)
+  );
 }
 
-function matchNetworkFilters(message, filters) {
+function matchLevelFilters(message, filters) {
   return (
-    message.source !== MESSAGE_SOURCE.NETWORK
-    || (filters.get("net") === true && message.isXHR === false)
-    || (filters.get("netxhr") === true && message.isXHR === true)
+    (message.source === MESSAGE_SOURCE.CONSOLE_API ||
+    message.source === MESSAGE_SOURCE.JAVASCRIPT) &&
+    filters.get(message.level) === true
   );
 }
 
 function matchCssFilters(message, filters) {
   return (
-    message.source != MESSAGE_SOURCE.CSS
-    || filters.get("css") === true
+    message.source === MESSAGE_SOURCE.CSS &&
+    filters.get("css") === true
   );
 }
 
-function matchSearchFilters(message, filters) {
-  let text = (filters.text || "").trim();
+function matchSearchFilters(message, text) {
   return (
-    text === ""
     // Look for a match in parameters.
-    || isTextInParameters(text, message.parameters)
+    isTextInParameters(text, message.parameters)
     // Look for a match in location.
     || isTextInFrame(text, message.frame)
     // Look for a match in net events.
     || isTextInNetEvent(text, message.request)
     // Look for a match in stack-trace.
     || isTextInStackTrace(text, message.stacktrace)
     // Look for a match in messageText.
     || isTextInMessageText(text, message.messageText)

--- a/devtools/client/webconsole/new-console-output/utils/messages.js
+++ b/devtools/client/webconsole/new-console-output/utils/messages.js
@@ -323,25 +323,25 @@ function getLevelFromType(type) {
     exception: levels.LEVEL_ERROR,
     assert: levels.LEVEL_ERROR,
     warn: levels.LEVEL_WARNING,
     info: levels.LEVEL_INFO,
     log: levels.LEVEL_LOG,
     clear: levels.LEVEL_LOG,
     trace: levels.LEVEL_LOG,
     table: levels.LEVEL_LOG,
-    debug: levels.LEVEL_LOG,
+    debug: levels.LEVEL_DEBUG,
     dir: levels.LEVEL_LOG,
     dirxml: levels.LEVEL_LOG,
     group: levels.LEVEL_LOG,
     groupCollapsed: levels.LEVEL_LOG,
     groupEnd: levels.LEVEL_LOG,
     time: levels.LEVEL_LOG,
     timeEnd: levels.LEVEL_LOG,
-    count: levels.LEVEL_DEBUG,
+    count: levels.LEVEL_LOG,
   };
 
   return levelMap[type] || MESSAGE_TYPE.LOG;
 }
 
 function isGroupType(type) {
   return [
     MESSAGE_TYPE.START_GROUP,