Bug 1824701 - [devtools] Change the styling for blackboxing r=devtools-reviewers,nchevobbe

1) This patch cleanups the styling for blackboxing
- Ignored sources in the source tree are colored out and the icoon colors are consistent.
- Source content for ignored sources are also colored out.
- Ignored lines are colored out.
- The tab content for ignored sources are also abit lighter.

2) Also added tests to assert the lines in the sources are styled correcty
Thanks

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

devtools/client/debugger/src/components/Editor/Footer.css

@@ -60,7 +60,7 @@
 }
 
 .source-footer .blackboxed .img.blackBox {
-  background-color: var(--red-40);
+  background-color: #806414;
 }
 
 .source-footer .commands button.prettyPrint:disabled {

devtools/client/debugger/src/components/Editor/Tab.js

@@ -206,6 +206,7 @@ class Tab extends PureComponent {
     const className = classnames("source-tab", {
       active,
       pretty: isPrettyCode,
+      blackboxed: this.props.isBlackBoxed,
     });
 
     const path = getDisplayPath(source, tabSources);

devtools/client/debugger/src/components/Editor/Tabs.css

@@ -84,7 +84,7 @@
 }
 
 .source-tab .img.source-icon.blackBox {
-  background-color: var(--red-40);
+  background-color: #806414;
 }
 
 .source-tab .filename {

devtools/client/debugger/src/components/PrimaryPanes/Sources.css

@@ -123,9 +123,13 @@
   background-color: var(--theme-tab-toolbar-background);
 }
 
+.sources-list .tree .blackboxed {
+  color: #806414;
+}
+
 .sources-list .img.blackBox {
   mask-size: 13px;
-  background-color: var(--red-40);
+  background-color: #806414;
 }
 
 .sources-list .tree .label {

devtools/client/debugger/src/components/PrimaryPanes/SourcesTreeItem.js

@@ -382,7 +382,10 @@ class SourceTreeItem extends Component {
 
     return (
       <div
-        className={classnames("node", { focused })}
+        className={classnames("node", {
+          focused,
+          blackboxed: item.type == "source" && item.isBlackBoxed,
+        })}
         key={item.path}
         onClick={this.onClick}
         onContextMenu={this.onContextMenu}

devtools/client/debugger/test/mochitest/browser_dbg-blackbox.js

@@ -197,6 +197,16 @@ async function testBlackBoxSource(dbg, source) {
   await openContextMenu(dbg, "CodeMirrorLines");
   await selectBlackBoxContextMenuItem(dbg, "blackbox");
 
+  info("Assert that all lines in the source are styled correctly");
+  assertIgnoredStyleInSourceLines(dbg, { hasBlackboxedLinesClass: true });
+
+  info("Assert that the source tree for simple4.js has the ignored style");
+  const node = findSourceNodeWithText(dbg, "simple4.js");
+  ok(
+    node.querySelector(".blackboxed"),
+    "simple4.js node does not have the ignored style"
+  );
+
   invokeInTab("funcA");
 
   info(
@@ -230,6 +240,18 @@ async function testBlackBoxSource(dbg, source) {
   await waitForContextMenu(dbg);
   await selectBlackBoxContextMenuItem(dbg, "blackbox");
 
+  info("Assert that all lines in the source are un-styled correctly");
+  assertIgnoredStyleInSourceLines(dbg, { hasBlackboxedLinesClass: false });
+
+  info(
+    "Assert that the source tree for simple4.js does not have the ignored style"
+  );
+  const nodeAfterBlackbox = findSourceNodeWithText(dbg, "simple4.js");
+  ok(
+    !nodeAfterBlackbox.querySelector(".blackboxed"),
+    "simple4.js node still has the ignored style"
+  );
+
   invokeInTab("funcA");
 
   info("assert the pause at the debugger statement on line 2");
@@ -289,6 +311,20 @@ async function testBlackBoxMultipleLines(dbg, source) {
     nonBlackBoxedSourceTreeNode: findSourceNodeWithText(dbg, "simple2.js"),
   });
 
+  info("Assert that the ignored lines are styled correctly");
+  assertIgnoredStyleInSourceLines(dbg, {
+    lines: [7, 13],
+    hasBlackboxedLinesClass: true,
+  });
+
+  info("Assert that the source tree for simple4.js has the ignored style");
+  const node = findSourceNodeWithText(dbg, "simple4.js");
+
+  ok(
+    node.querySelector(".blackboxed"),
+    "simple4.js node does not have the ignored style"
+  );
+
   invokeInTab("funcA");
 
   info("assert the pause at the debugger statement on line 2");
@@ -324,6 +360,21 @@ async function testBlackBoxMultipleLines(dbg, source) {
     nonBlackBoxedSourceTreeNode: findSourceNodeWithText(dbg, "simple2.js"),
   });
 
+  info("Assert that the un-ignored lines are no longer have the style");
+  assertIgnoredStyleInSourceLines(dbg, {
+    lines: [7, 13],
+    hasBlackboxedLinesClass: false,
+  });
+
+  info(
+    "Assert that the source tree for simple4.js does not have the ignored style"
+  );
+  const nodeAfterBlackbox = findSourceNodeWithText(dbg, "simple4.js");
+  ok(
+    !nodeAfterBlackbox.querySelector(".blackboxed"),
+    "simple4.js still has the ignored style"
+  );
+
   invokeInTab("funcA");
 
   // assert the pause at the debugger statement on line 2
@@ -363,6 +414,22 @@ async function testBlackBoxSingleLine(dbg, source) {
     nonBlackBoxedSourceTreeNode: findSourceNodeWithText(dbg, "simple2.js"),
   });
 
+  info("Assert that the ignored line 2 is styled correctly");
+  assertIgnoredStyleInSourceLines(dbg, {
+    lines: [2],
+    hasBlackboxedLinesClass: true,
+  });
+
+  info("Black box line 4 of funcC() with the debugger statement");
+  await openContextMenu(dbg, "gutter", 4);
+  await selectBlackBoxContextMenuItem(dbg, "blackbox-line");
+
+  info("Assert that the ignored line 4 is styled correctly");
+  assertIgnoredStyleInSourceLines(dbg, {
+    lines: [4],
+    hasBlackboxedLinesClass: true,
+  });
+
   invokeInTab("funcA");
 
   // assert the pause at the breakpoint set on line 8
@@ -378,17 +445,17 @@ async function testBlackBoxSingleLine(dbg, source) {
   await selectBlackBoxContextMenuItem(dbg, "blackbox-line");
 
   await assertEditorBlackBoxBoxContextMenuItems(dbg, {
-    blackboxedLine: null,
-    nonBlackBoxedLine: 4,
+    blackboxedLine: 4,
+    nonBlackBoxedLine: 3,
     blackBoxedLines: null,
-    nonBlackBoxedLines: [3, 4],
-    blackboxedSourceState: SOURCE_IS_NOT_IGNORED,
+    nonBlackBoxedLines: [11, 12],
+    blackboxedSourceState: SOURCE_LINES_ARE_IGNORED,
   });
 
   await assertGutterBlackBoxBoxContextMenuItems(dbg, {
-    blackboxedLine: null,
-    nonBlackBoxedLine: 4,
-    blackboxedSourceState: SOURCE_IS_NOT_IGNORED,
+    blackboxedLine: 4,
+    nonBlackBoxedLine: 3,
+    blackboxedSourceState: SOURCE_LINES_ARE_IGNORED,
   });
 
   await assertSourceTreeBlackBoxBoxContextMenuItems(dbg, {
@@ -396,6 +463,12 @@ async function testBlackBoxSingleLine(dbg, source) {
     nonBlackBoxedSourceTreeNode: findSourceNodeWithText(dbg, "simple2.js"),
   });
 
+  info("Assert that the un-ignored line 2 is styled correctly");
+  assertIgnoredStyleInSourceLines(dbg, {
+    lines: [2],
+    hasBlackboxedLinesClass: false,
+  });
+
   invokeInTab("funcA");
 
   // assert the pause at the debugger statement on line 2
@@ -657,10 +730,10 @@ async function selectEditorLinesAndOpenContextMenu(dbg, lines) {
 /**
  * Opens the debugger editor context menu in either codemirror or the
  * the debugger gutter.
- * @params {Object} dbg
- * @params {String} elementName
+ * @param {Object} dbg
+ * @param {String} elementName
  *                  The element to select
- * @params {Number} line
+ * @param {Number} line
  *                  The line to open the context menu on.
  */
 async function openContextMenu(dbg, elementName, line) {
@@ -672,8 +745,8 @@ async function openContextMenu(dbg, elementName, line) {
 
 /**
  * Selects the specific black box context menu item
- * @params {Object} dbg
- * @params {String} itemName
+ * @param {Object} dbg
+ * @param {String} itemName
  *                  The name of the context menu item.
  */
 async function selectBlackBoxContextMenuItem(dbg, itemName) {
@@ -697,9 +770,9 @@ async function selectBlackBoxContextMenuItem(dbg, itemName) {
 
 /**
  * Selects a range of lines
- * @params {Object} dbg
- * @params {Number} startLine
- * @params {Number} endLine
+ * @param {Object} dbg
+ * @param {Number} startLine
+ * @param {Number} endLine
  */
 function selectEditorLines(dbg, startLine, endLine) {
   getCM(dbg).setSelection(
@@ -707,3 +780,64 @@ function selectEditorLines(dbg, startLine, endLine) {
     { line: endLine, ch: 0 }
   );
 }
+/**
+ * Asserts that the styling for ignored lines are applied
+ * @param {Object} dbg
+ * @param {Object} options
+ *                 lines {null | Number | Number[]} [lines] Line(s) to assert.
+ *                   - If null is passed, the assertion is on all the blackboxed lines
+ *                   - If a line number is passed, the assertion is on the specified line
+ *                   - If an array (start and end lines) is passed, the assertion is on the multiple lines seelected
+ *                 hasBlackboxedLinesClass
+ *                   If `true` assert that style exist, else assert that style does not exist
+ */
+function assertIgnoredStyleInSourceLines(
+  dbg,
+  { lines, hasBlackboxedLinesClass }
+) {
+  if (lines) {
+    if (!lines[1]) {
+      // Single line ignored
+      const element = findElement(dbg, "line", lines[0]);
+      const hasStyle = hasBlackboxedLinesClass
+        ? element.parentNode.classList.contains("blackboxed-line")
+        : !element.parentNode.classList.contains("blackboxed-line");
+      ok(
+        hasStyle,
+        `Line ${lines[0]} ${
+          hasBlackboxedLinesClass ? "does not have" : "has"
+        } ignored styling`
+      );
+    } else {
+      // Multiple lines ignored
+      let currentLine = lines[0];
+      while (currentLine <= lines[1]) {
+        const element = findElement(dbg, "line", currentLine);
+        const hasStyle = hasBlackboxedLinesClass
+          ? element.parentNode.classList.contains("blackboxed-line")
+          : !element.parentNode.classList.contains("blackboxed-line");
+        ok(
+          hasStyle,
+          `Line ${currentLine} ${
+            hasBlackboxedLinesClass ? "does not have" : "has"
+          } ignored styling`
+        );
+        currentLine = currentLine + 1;
+      }
+    }
+  } else {
+    const codeLines = findAllElementsWithSelector(
+      dbg,
+      ".CodeMirror-code .CodeMirror-line"
+    );
+    const blackboxedLines = findAllElementsWithSelector(
+      dbg,
+      ".CodeMirror-code .blackboxed-line"
+    );
+    is(
+      hasBlackboxedLinesClass ? codeLines.length : 0,
+      blackboxedLines.length,
+      `${blackboxedLines.length} of ${codeLines.length} lines are blackboxed`
+    );
+  }
+}

devtools/client/themes/dark-theme.css

@@ -238,10 +238,8 @@ div.CodeMirror span.marked-text {
 }
 
 /* Blackboxing lines */
-.CodeMirror-lines .blackboxed-line,
-.CodeMirror-lines .blackboxed-line .CodeMirror-gutter-elt {
-  /* Same color hue than the one used for the icon, but with different saturation/light */
-  background-color: hsl(347.8, 5%, 20%);
+.CodeMirror-lines .blackboxed-line :is(span, .cm-comment, .CodeMirror-gutter-elt) {
+  color: #806414cc;
 }
 
 /* Highlight for evaluating current statement. */

devtools/client/themes/light-theme.css

@@ -225,10 +225,8 @@ div.CodeMirror span.marked-text {
 }
 
 /* Blackboxing lines */
-.CodeMirror-lines .blackboxed-line,
-.CodeMirror-lines .blackboxed-line .CodeMirror-gutter-elt {
-  /* Same color hue than the one used for the icon, but with different saturation/light */
-  background-color: hsl(347.8, 15%, 90%);
+.CodeMirror-lines .blackboxed-line :is(span, .cm-comment, .CodeMirror-gutter-elt) {
+  color: #806414cc;
 }
 
 /* Highlight for evaluating current statement. */