Backed out changeset 65b1715d878b (bug 1573695) for causing failures in browser_parsable_css.js CLOSED TREE

devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/Breakpoints.css

@@ -253,3 +253,21 @@ html .breakpoints-list .breakpoint.paused {
   padding-top: 1px;
 }
 
+/**
+ * Skip Pausing style
+ * Add a gray background and lower content opacity
+ */
+.breakpoints-pane .pane.skip-pausing {
+  background-color: var(--theme-toolbar-hover);
+}
+
+.breakpoints-pane .pane.skip-pausing > * {
+  opacity: 0.6;
+}
+
+.breakpoints-pane .skip-pausing .breakpoint-label,
+.breakpoints-pane .skip-pausing .breakpoint-heading .filename,
+.breakpoints-pane .skip-pausing .breakpoint-exceptions-label,
+.breakpoints-pane .skip-pausing .breakpoint .breakpoint-line {
+  color: var(--theme-body-color);
+}

devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/index.js

@@ -23,7 +23,11 @@ import {
   sortSelectedBreakpoints,
 } from "../../../utils/breakpoint";
 
-import { getSelectedSource, getBreakpointSources } from "../../../selectors";
+import {
+  getSelectedSource,
+  getBreakpointSources,
+  getSkipPausing,
+} from "../../../selectors";
 
 import type { Source } from "../../../types";
 import type { BreakpointSources } from "../../../selectors/breakpointSources";
@@ -34,6 +38,7 @@ import "./Breakpoints.css";
 type Props = {
   breakpointSources: BreakpointSources,
   selectedSource: Source,
+  skipPausing: boolean,
   shouldPauseOnExceptions: boolean,
   shouldPauseOnCaughtExceptions: boolean,
   pauseOnExceptions: Function,
@@ -142,8 +147,9 @@ class Breakpoints extends Component<Props> {
   }
 
   render() {
+    const { skipPausing } = this.props;
     return (
-      <div className="pane">
+      <div className={classnames("pane", skipPausing && "skip-pausing")}>
         {this.renderExceptionsOptions()}
         {this.renderBreakpoints()}
       </div>
@@ -154,6 +160,7 @@ class Breakpoints extends Component<Props> {
 const mapStateToProps = state => ({
   breakpointSources: getBreakpointSources(state),
   selectedSource: getSelectedSource(state),
+  skipPausing: getSkipPausing(state),
 });
 
 export default connect(

devtools/client/debugger/src/components/SecondaryPanes/SecondaryPanes.css

@@ -67,16 +67,3 @@
 .secondary-panes-wrapper .command-bar.bottom {
   background-color: var(--theme-body-background);
 }
-
-/**
- * Skip Pausing style
- * Add a gray background and lower content opacity
- */
-.skip-pausing .xhr-breakpoints-pane ._content,
-.skip-pausing .breakpoints-pane ._content,
-.skip-pausing .event-listeners-pane ._content,
-.skip-pausing .dom-mutations-pane ._content {
-  background-color: var(--skip-pausing-background-color);
-  opacity: var(--skip-pausing-opacity);
-  color: var(--theme-body-color);
-}

devtools/client/debugger/src/components/SecondaryPanes/index.js

@@ -5,7 +5,6 @@
 // @flow
 
 import React, { Component } from "react";
-import classnames from "classnames";
 import { isGeneratedId } from "devtools-source-map";
 import { connect } from "../../utils/connect";
 import { List } from "immutable";
@@ -26,7 +25,6 @@ import {
   getCurrentThread,
   getThreadContext,
   getSourceFromId,
-  getSkipPausing,
 } from "../../selectors";
 
 import AccessibleImage from "../shared/AccessibleImage";
@@ -98,7 +96,6 @@ type Props = {
   shouldPauseOnExceptions: boolean,
   shouldPauseOnCaughtExceptions: boolean,
   workers: WorkerList,
-  skipPausing: boolean,
   source: ?Source,
   toggleShortcutsModal: () => void,
   toggleAllBreakpoints: typeof actions.toggleAllBreakpoints,
@@ -492,16 +489,10 @@ class SecondaryPanes extends Component<Props, State> {
   }
 
   render() {
-    const { skipPausing } = this.props;
     return (
       <div className="secondary-panes-wrapper">
         <CommandBar horizontal={this.props.horizontal} />
-        <div
-          className={classnames(
-            "secondary-panes",
-            skipPausing && "skip-pausing"
-          )}
-        >
+        <div className="secondary-panes">
           {this.props.horizontal
             ? this.renderHorizontalLayout()
             : this.renderVerticalLayout()}
@@ -541,7 +532,6 @@ const mapStateToProps = state => {
     shouldPauseOnExceptions: getShouldPauseOnExceptions(state),
     shouldPauseOnCaughtExceptions: getShouldPauseOnCaughtExceptions(state),
     workers: getWorkers(state),
-    skipPausing: getSkipPausing(state),
     source:
       selectedFrame && getSourceFromId(state, selectedFrame.location.sourceId),
   };

devtools/client/debugger/src/components/variables.css

@@ -11,10 +11,6 @@
   --editor-searchbar-height: 25px;
   /* Remove once https://bugzilla.mozilla.org/show_bug.cgi?id=1520440 lands */
   --theme-code-line-height: calc(15 / 11);
-  /* Background and text colors and opacity for skipped breakpoint panes */
-  --skip-pausing-background-color: var(--theme-toolbar-hover);
-  --skip-pausing-opacity: 0.6;
-  --skip-pausing-color: var(--theme-body-color);
 }
 
 :root.theme-light,