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

Status: RESOLVED FIXED

(DevTools :: Console, enhancement, P3)

Description

[Nicolas Chevobbe [:nchevobbe]]

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.

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

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.

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Assigning to Helena as we discussed about it on Slack.

Comment 3

[Helena Moreno (aka helenatxu)]

Attachment: Bug 1466040 - Ctrl/Cmd + click on a network log in console output should open the link in a new tab - r=nchevobbe

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

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

[Pulsebot]

Pushed by [e-mail]:
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

[Arthur Iakab [arthur_iakab]]

https://hg.mozilla.org/mozilla-central/rev/2265884e1282