Bug 1823610 - [devtools] Don't hide timestamp when exporting console messages. r=devtools-reviewers,jdescottes.

The media query we introduced not long ago to hide
timestamp on narrow output was also effective for
the element we use for the export (as it has a width
of 0), which means timestamp wouldn't be included
in the export.

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

devtools/client/themes/webconsole.css

@@ -191,7 +191,12 @@
 
 /* Use a container query as the inline-size of the output might vary when the console is in editor mode */
 @container console-output (width < 500px) {
-  .message > .timestamp {
+  /*
+   * When we export messages, we mount the app as a sibling of the #app-wrapper element,
+   * in a 0-width section which would cause the timestamp to be hidden, so only hide
+   * the timestamp in the "visible" element.
+   */
+  #app-wrapper .message > .timestamp {
     display: none;
   }
 

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

@@ -52,6 +52,9 @@ var FileUtils = ChromeUtils.importESModule(
 add_task(async function testExportToClipboard() {
   // Clear clipboard content.
   SpecialPowers.clipboardCopyString("");
+  // Display timestamp to make sure we export them (there's a container query that would
+  // hide them in the regular case, which we don't want).
+  await pushPref("devtools.webconsole.timestampMessages", true);
 
   const hud = await openNewTabAndConsole(TEST_URI);
   await clearOutput(hud);
@@ -108,11 +111,17 @@ function checkExportedText(text) {
   //   item-99 test.js:11:19
   //   -----------------------------------------------------
   info("Check if all messages where exported as expected");
-  const lines = text.split("\n").map(line => line.replace(/\r$/, ""));
+  let lines = text.split("\n").map(line => line.replace(/\r$/, ""));
 
   is(lines.length, 115, "There's 115 lines of text");
   is(lines.at(-1), "", "Last line is empty");
 
+  info("Check that timestamp are displayed");
+  const timestampRegex = /^\d{2}:\d{2}:\d{2}\.\d{3} /;
+  // only check the first message
+  ok(timestampRegex.test(lines[0]), "timestamp are included in the messages");
+  lines = lines.map(l => l.replace(timestampRegex, ""));
+
   info("Check simple text message");
   is(lines[0], "hello test.js:4:17", "Simple log has expected text");