Ctrl/Cmd + click on a network log in console output should open the link in a new tab

RESOLVED FIXED in Firefox 67

Status

enhancement
P3
normal
RESOLVED FIXED
a year ago
a month ago

People

(Reporter: nchevobbe, Assigned: helenaenred, Mentored)

Tracking

Trunk
Firefox 67

Firefox Tracking Flags

(firefox62 wontfix, firefox67 fixed)

Details

Attachments

(1 attachment)

We already have a "open url in a new tab" context menu entry, and it would be a nice shortcut to have it mapped to Ctrl/Cmd + click as well.
Reporter

Updated

a year ago
Severity: normal → enhancement
Priority: -- → P3

Updated

11 months ago
Product: Firefox → DevTools
Reporter

Comment 1

3 months ago

So, first, here are some steps on how to display a network log in the console:

  1. In a tab, open https://nchevobbe.github.io/demo/console-test-app.html
  2. Open the console
  3. In the filter bar, make sure the "XHR" button is enabled
  4. In the page, there should be a "XHR" button, click it
  5. In the console, you should see a message like:
14:35:17.499 XHR GET https://api.github.com/ [HTTP/1.1 200 OK 0ms]

Clicking on it will show a new panel with some information about that request.

Now, what we want is to open the URL in a new tab if the user holds Ctrl (or Cmd on Mac) and click the URL.
Here's where we handle the click on the message itself: devtools/client/webconsole/components/message-types/NetworkEventMessage.js#110-111.

This calls the toggle function defined a few lines up:

const toggle = () => {
  if (open) {
    dispatch(actions.messageClose(id));
  } else {
    dispatch(actions.messageOpen(id));
  }
};

So now, what we need to do, is check if <kbd>Ctrl</kbd> (or <kbd>Cmd</kbd> on OSX) is held when clicking. For that, we need to get the event in the toggle function.

const toggle = e => {
  // Here we need to check if we should open a link.
  const shouldOpenLink = /* TODO */
  if (shouldOpenLink) {
    /* TODO */
  } else {
    if (open) {
      dispatch(actions.messageClose(id));
    } else {
      dispatch(actions.messageOpen(id));
    }
  }
};

We need to intialize shouldOpenLink. It should be true if:

  • we're on mac, and e.metaKey is true
  • we're not on mac, and e.ctrlKey is true

You can see here how we check that we're on Mac.

Then we should find the code to open the link. Which is fortunate because in the same file, we can see we already have calls to serviceContainer.openLink(statusCodeDocURL, e);. So we should be able to do the same, but with request.url instead.

Mentor: nchevobbe
Reporter

Comment 2

3 months ago

Assigning to Helena as we discussed about it on Slack.

Assignee: nobody → helenaenred
Status: NEW → ASSIGNED
Reporter

Comment 4

3 months ago

Thanks a lot Helena, this looks perfect :)
So now, we want to have an automated test that will ensure this is working as expected.

First, we need to create a test file under devtools/client/webconsole/test/mochitest/, for example browser_webconsole_network_message_ctrl_click.js. Then, we need to reference this file in devtools/client/webconsole/test/mochitest/browser.ini

So, let's have a look at the test we have to test the "open URL" context menu entry, since what we want to assert is pretty similar: devtools/client/webconsole/test/mochitest/browser_webconsole_context_menu_open_url.js.
We can take some inspiration and do something like:


"use strict";

const TEST_URI = "http://example.com/browser/devtools/client/webconsole/" +
                 "test/mochitest/test-console.html";

add_task(async function() {
  // Enable net messages in the console for this test.
  await pushPref("devtools.webconsole.filter.net", true);

  // We open the console
  const hud = await openNewTabAndConsole(TEST_URI);

  info("Reload the content window to produce a network log");
  await ContentTask.spawn(gBrowser.selectedBrowser, null, () => {
    content.wrappedJSObject.location.reload();
  });
  message = await waitFor(() => findMessage(hud, "test-console.html"));
  ok(message, "Network log found in the console");

  const currentTab = gBrowser.selectedTab;
  const tabLoaded = listenToTabLoad();
  info("Cmd/Ctrl click on the message");
  // TODO: simulate the click + ctrl/cmd


  const newTab = await tabLoaded;
  const newTabHref = newTab.linkedBrowser.currentURI.spec;
  is(newTabHref, TEST_URI, "Tab was opened with the expected URL");

  info("Remove the new tab and select the previous tab back");
  gBrowser.removeTab(newTab);
  gBrowser.selectedTab = currentTab;
});

So, what's left to do here is what is in the TODO.
We want to actually click on the message, with either ctrl or cmd, depending if we are on MacOS. You can see how it's done here for example: devtools/client/webconsole/test/mochitest/browser_webconsole_object_ctrl_click.js#30-33.

Once you think you have everything we should have, you can run the test doing: ./mach test devtools/client/webconsole/test/mochitest/browser_webconsole_network_message_ctrl_click.js.

Comment 5

3 months ago
Pushed by nchevobbe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/2265884e1282
Ctrl/Cmd + click on a network log in console output should open the link in a new tab - r=nchevobbe

Comment 6

3 months ago
bugherder
Status: ASSIGNED → RESOLVED
Last Resolved: 3 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 67
You need to log in before you can comment on or make changes to this bug.