Bug 1159725 - Links in markup-view attributes should open with middle-click; r=pbro

browser/devtools/inspector/inspector-panel.js

@@ -1176,13 +1176,25 @@ InspectorPanel.prototype = {
 
   /**
    * This method is here for the benefit of the node-menu-link-follow menu item
-   * in the inspector contextual-menu. It's behavior depends on which node was
-   * right-clicked when the menu was opened.
+   * in the inspector contextual-menu.
    */
-  followAttributeLink: function(e) {
+  onFollowLink: function() {
     let type = this.panelDoc.popupNode.dataset.type;
     let link = this.panelDoc.popupNode.dataset.link;
 
+    this.followAttributeLink(type, link);
+  },
+
+  /**
+   * Given a type and link found in a node's attribute in the markup-view,
+   * attempt to follow that link (which may result in opening a new tab, the
+   * style editor or debugger).
+   */
+  followAttributeLink: function(type, link) {
+    if (!type || !link) {
+      return;
+    }
+
     if (type === "uri" || type === "cssresource" || type === "jsresource") {
       // Open link in a new tab.
       // When the inspector menu was setup on click (see _setupNodeLinkMenu), we
@@ -1213,11 +1225,18 @@ InspectorPanel.prototype = {
 
   /**
    * This method is here for the benefit of the node-menu-link-copy menu item
-   * in the inspector contextual-menu. It's behavior depends on which node was
-   * right-clicked when the menu was opened.
+   * in the inspector contextual-menu.
    */
-  copyAttributeLink: function(e) {
+  onCopyLink: function() {
     let link = this.panelDoc.popupNode.dataset.link;
+
+    this.copyAttributeLink(link);
+  },
+
+  /**
+   * This method is here for the benefit of copying links.
+   */
+  copyAttributeLink: function(link) {
     // When the inspector menu was setup on click (see _setupNodeLinkMenu), we
     // already checked that resolveRelativeURL existed.
     this.inspector.resolveRelativeURL(link, this.selection.nodeFront).then(url => {

browser/devtools/inspector/inspector.xul

@@ -106,9 +106,9 @@
         oncommand="inspector.deleteNode()"/>
       <menuseparator id="node-menu-link-separator"/>
       <menuitem id="node-menu-link-follow"
-        oncommand="inspector.followAttributeLink()"/>
+        oncommand="inspector.onFollowLink()"/>
       <menuitem id="node-menu-link-copy"
-        oncommand="inspector.copyAttributeLink()"/>
+        oncommand="inspector.onCopyLink()"/>
       <menuseparator/>
       <menuitem id="node-menu-pseudo-hover"
         label=":hover" type="checkbox"

browser/devtools/markupview/markup-view.js

@@ -1933,6 +1933,15 @@ MarkupContainer.prototype = {
       event.preventDefault();
     }
 
+    let isMiddleClick = event.button === 1;
+    let isMetaClick = event.button === 0 && (event.metaKey || event.ctrlKey);
+
+    if (isMiddleClick || isMetaClick) {
+      let link = target.dataset.link;
+      let type = target.dataset.type;
+      this.markup._inspector.followAttributeLink(type, link);
+    }
+
     // Start dragging the container after a delay.
     this.markup._dragStartEl = target;
     setTimeout(() => {

browser/devtools/markupview/test/browser.ini

@@ -79,6 +79,7 @@ skip-if = e10s # Bug 1040751 - CodeMirror editor.destroy() isn't e10s compatible
 [browser_markupview_links_04.js]
 [browser_markupview_links_05.js]
 [browser_markupview_links_06.js]
+[browser_markupview_links_07.js]
 [browser_markupview_load_01.js]
 [browser_markupview_html_edit_01.js]
 [browser_markupview_html_edit_02.js]

browser/devtools/markupview/test/browser_markupview_links_05.js

@@ -22,7 +22,7 @@ add_task(function*() {
 
   info("Follow the link and wait for the new tab to open");
   let onTabOpened = once(gBrowser.tabContainer, "TabOpen");
-  inspector.followAttributeLink();
+  inspector.onFollowLink();
   let {target: tab} = yield onTabOpened;
   yield waitForTabLoad(tab);
 
@@ -41,7 +41,7 @@ add_task(function*() {
 
   info("Follow the link and wait for the new node to be selected");
   let onSelection = inspector.selection.once("new-node-front");
-  inspector.followAttributeLink();
+  inspector.onFollowLink();
   yield onSelection;
 
   ok(true, "A new node was selected");
@@ -57,7 +57,7 @@ add_task(function*() {
 
   info("Try to follow the link and check that no new node were selected");
   let onFailed = inspector.once("idref-attribute-link-failed");
-  inspector.followAttributeLink();
+  inspector.onFollowLink();
   yield onFailed;
 
   ok(true, "The node selection failed");

browser/devtools/markupview/test/browser_markupview_links_06.js

@@ -22,7 +22,7 @@ add_task(function*() {
 
   info("Follow the link and wait for the style-editor to open");
   let onStyleEditorReady = toolbox.once("styleeditor-ready");
-  inspector.followAttributeLink();
+  inspector.onFollowLink();
   yield onStyleEditorReady;
 
   // No real need to test that the editor opened on the right file here as this
@@ -42,7 +42,7 @@ add_task(function*() {
 
   info("Follow the link and wait for the debugger to open");
   let onDebuggerReady = toolbox.once("jsdebugger-ready");
-  inspector.followAttributeLink();
+  inspector.onFollowLink();
   yield onDebuggerReady;
 
   // No real need to test that the debugger opened on the right file here as

browser/devtools/markupview/test/browser_markupview_links_07.js

@@ -0,0 +1,118 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that a middle-click or meta/ctrl-click on links in attributes actually
+// do follows the link.
+
+const TEST_URL = TEST_URL_ROOT + "doc_markup_links.html";
+
+add_task(function*() {
+  let {inspector} = yield addTab(TEST_URL).then(openInspector);
+
+  info("Select a node with a URI attribute");
+  yield selectNode("video", inspector);
+
+  info("Find the link element from the markup-view");
+  let {editor} = yield getContainerForSelector("video", inspector);
+  let linkEl = editor.attrElements.get("poster").querySelector(".link");
+
+  info("Follow the link with middle-click and wait for the new tab to open");
+  yield followLinkWaitForTab(linkEl, false,
+                             TEST_URL_ROOT + "doc_markup_tooltip.png");
+
+  info("Follow the link with meta/ctrl-click and wait for the new tab to open");
+  yield followLinkWaitForTab(linkEl, true,
+                             TEST_URL_ROOT + "doc_markup_tooltip.png");
+
+  info("Select a node with a IDREF attribute");
+  yield selectNode("label", inspector);
+
+  info("Find the link element from the markup-view that contains the ref");
+  ({editor} = yield getContainerForSelector("label", inspector));
+  linkEl = editor.attrElements.get("for").querySelector(".link");
+
+  info("Follow link with middle-click, wait for new node to be selected.");
+  yield followLinkWaitForNewNode(linkEl, false, inspector);
+
+  info("Follow link with ctrl/meta-click, wait for new node to be selected.");
+  yield followLinkWaitForNewNode(linkEl, true, inspector);
+
+  info("Select a node with an invalid IDREF attribute");
+  yield selectNode("output", inspector);
+
+  info("Find the link element from the markup-view that contains the ref");
+  ({editor} = yield getContainerForSelector("output", inspector));
+  linkEl = editor.attrElements.get("for").querySelectorAll(".link")[2];
+
+  info("Try to follow link wiith middle-click, check no new node selected");
+  yield followLinkNoNewNode(linkEl, false, inspector);
+
+  info("Try to follow link wiith meta/ctrl-click, check no new node selected");
+  yield followLinkNoNewNode(linkEl, true, inspector);
+});
+
+function waitForTabLoad(tab) {
+  let def = promise.defer();
+  tab.addEventListener("load", function onLoad() {
+    // Skip load event for about:blank
+    if (tab.linkedBrowser.currentURI.spec === "about:blank") {
+      return;
+    }
+    tab.removeEventListener("load", onLoad);
+    def.resolve();
+  });
+  return def.promise;
+}
+
+function performMouseDown(linkEl, metactrl) {
+  let evt = linkEl.ownerDocument.createEvent("MouseEvents");
+
+  let button = -1;
+
+  if (metactrl) {
+    info("Performing Meta/Ctrl+Left Click");
+    button = 0;
+  } else {
+    info("Performing Middle Click");
+    button = 1;
+  }
+
+  evt.initMouseEvent("mousedown", true, true,
+      linkEl.ownerDocument.defaultView, 1, 0, 0, 0, 0, metactrl,
+      false, false, metactrl, button, null);
+
+  linkEl.dispatchEvent(evt);
+}
+
+function* followLinkWaitForTab(linkEl, isMetaClick, expectedTabURI) {
+  let onTabOpened = once(gBrowser.tabContainer, "TabOpen");
+  performMouseDown(linkEl, isMetaClick);
+  let {target} = yield onTabOpened;
+  yield waitForTabLoad(target);
+  ok(true, "A new tab opened");
+  is(target.linkedBrowser.currentURI.spec, expectedTabURI,
+     "The URL for the new tab is correct");
+  gBrowser.removeTab(target);
+}
+
+function* followLinkWaitForNewNode(linkEl, isMetaClick, inspector) {
+  let onSelection = inspector.selection.once("new-node-front");
+  performMouseDown(linkEl, isMetaClick);
+  yield onSelection;
+
+  ok(true, "A new node was selected");
+  is(inspector.selection.nodeFront.id, "name", "The right node was selected");
+}
+
+function* followLinkNoNewNode(linkEl, isMetaClick, inspector) {
+  let onFailed = inspector.once("idref-attribute-link-failed");
+  performMouseDown(linkEl, isMetaClick);
+  yield onFailed;
+
+  ok(true, "The node selection failed");
+  is(inspector.selection.nodeFront.tagName.toLowerCase(), "output",
+    "The <output> node is still selected");
+}