Bug 587134 - Context menu item for Highlight Element (highlighter); r=limi, r=gavin

browser/base/content/browser-context.inc

@@ -21,6 +21,7 @@
 #
 # Contributor(s):
 #   Ehsan Akhgari <ehsan.akhgari@gmail.com>
+#   Rob Campbell <rcampbell@mozilla.com>
 #
 # Alternatively, the contents of this file may be used under the terms of
 # either the GNU General Public License Version 2 or later (the "GPL"), or
@@ -340,3 +341,8 @@
                 label="&bidiSwitchPageDirectionItem.label;"
                 accesskey="&bidiSwitchPageDirectionItem.accesskey;"
                 oncommand="gContextMenu.switchPageDirection();"/>
+      <menuseparator id="inspect-separator"/>
+      <menuitem id="context-inspect"
+                label="&inspectContextMenu.label;"
+                accesskey="&inspectContextMenu.accesskey;"
+                oncommand="gContextMenu.inspectNode();"/>

browser/base/content/browser.js

@@ -1676,8 +1676,7 @@ function delayedStartup(isLoadingBlank, mustLoadSidebar) {
   TabView.init();
 
   // Enable Inspector?
-  let enabled = gPrefService.getBoolPref(InspectorUI.prefEnabledName);
-  if (enabled) {
+  if (InspectorUI.enabled) {
     document.getElementById("menu_pageinspect").hidden = false;
     document.getElementById("Tools:Inspect").removeAttribute("disabled");
 #ifdef MENUBAR_CAN_AUTOHIDE

browser/base/content/inspector.js

@@ -558,7 +558,10 @@ var InspectorUI = {
   showTextNodesWithWhitespace: false,
   inspecting: false,
   treeLoaded: false,
-  prefEnabledName: "devtools.inspector.enabled",
+  get enabled()
+  {
+    return gPrefService.getBoolPref("devtools.inspector.enabled");
+  },
   isDirty: false,
 
   /**
@@ -650,12 +653,12 @@ var InspectorUI = {
       InspectorUI.treePanel.removeEventListener("popupshown",
         treePanelShown, false);
 
-        InspectorUI.treeIFrame.addEventListener("load",
-          function loadedInitializeTreePanel() {
-            InspectorUI.treeIFrame.removeEventListener("load",
-              loadedInitializeTreePanel, true);
-            InspectorUI.initializeTreePanel();
-          }, true);
+      InspectorUI.treeIFrame.addEventListener("load",
+        function loadedInitializeTreePanel() {
+          InspectorUI.treeIFrame.removeEventListener("load",
+            loadedInitializeTreePanel, true);
+          InspectorUI.initializeTreePanel();
+        }, true);
 
       let src = InspectorUI.treeIFrame.getAttribute("src");
       if (src != "chrome://browser/content/inspector.html") {
@@ -779,12 +782,33 @@ var InspectorUI = {
   },
 
   /**
-   * Open inspector UI. tree. Add listeners for document scrolling,
-   * resize, tabContainer.TabSelect and others.
+   * Open inspector UI and HTML tree. Add listeners for document scrolling,
+   * resize, tabContainer.TabSelect and others. If a node is provided, then
+   * start inspecting it.
+   *
+   * @param [optional] aNode
+   *        The node to inspect.
    */
-  openInspectorUI: function IUI_openInspectorUI()
+  openInspectorUI: function IUI_openInspectorUI(aNode)
   {
-    // initialization
+    // Observer used to inspect the specified element from content after the
+    // inspector UI has been opened.
+    function inspectObserver(aElement) {
+      Services.obs.removeObserver(boundInspectObserver,
+                                  INSPECTOR_NOTIFICATIONS.OPENED,
+                                  false);
+      this.inspectNode(aElement);
+      this.stopInspecting();
+    };
+    var boundInspectObserver = inspectObserver.bind(this, aNode);
+
+    if (aNode) {
+      // Add the observer to inspect the node after initialization finishes.
+      Services.obs.addObserver(boundInspectObserver,
+                               INSPECTOR_NOTIFICATIONS.OPENED,
+                               false);
+    }
+    // Start initialization.
     this.browser = gBrowser.selectedBrowser;
     this.win = this.browser.contentWindow;
     this.winID = this.getWindowID(this.win);

browser/base/content/nsContextMenu.js

@@ -46,6 +46,7 @@
 #   Kathleen Brade <brade@pearlcrescent.com>
 #   Mark Smith <mcs@pearlcrescent.com>
 #   Kailas Patil <patilkr24@gmail.com>
+#   Rob Campbell <rcampbell@mozilla.com>
 #
 # Alternatively, the contents of this file may be used under the terms of
 # either the GNU General Public License Version 2 or later (the "GPL"), or
@@ -246,6 +247,7 @@ nsContextMenu.prototype = {
                        this.onLink || this.onTextInput);
     this.showItem("context-viewsource", shouldShow);
     this.showItem("context-viewinfo", shouldShow);
+    this.showItem("context-inspect", InspectorUI.enabled);
 
     this.showItem("context-sep-viewsource", shouldShow);
 
@@ -429,6 +431,15 @@ nsContextMenu.prototype = {
     this.showItem("context-media-sep-commands",  onMedia);
   },
 
+  inspectNode: function CM_inspectNode() {
+    if (InspectorUI.isTreePanelOpen) {
+      InspectorUI.inspectNode(this.target);
+      InspectorUI.stopInspecting();
+    } else {
+      InspectorUI.openInspectorUI(this.target);
+    }
+  },
+
   // Set various context menu attributes based on the state of the world.
   setTarget: function (aNode, aRangeParent, aRangeOffset) {
     const xulNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";

browser/base/content/test/inspector/browser_inspector_initialization.js

@@ -36,6 +36,25 @@
  * the terms of any one of the MPL, the GPL or the LGPL.
  *
  * ***** END LICENSE BLOCK ***** */
+let doc;
+let salutation;
+
+function createDocument()
+{
+  doc.body.innerHTML = '<div id="first" style="{ margin: 10em; ' +
+    'font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA}">\n' +
+    '<h1>Some header text</h1>\n' +
+    '<p id="salutation" style="{font-size: 12pt}">hi.</p>\n' +
+    '<p id="body" style="{font-size: 12pt}">I am a test-case. This text exists ' +
+    'solely to provide some things to test the inspector initialization.</p>\n' +
+    'If you are reading this, you should go do something else instead. Maybe ' +
+    'read a book. Or better yet, write some test-cases for another bit of code. ' +
+    '<span style="{font-style: italic}">Maybe more inspector test-cases!</span></p>\n' +
+    '<p id="closing">end transmission</p>\n' +
+    '</div>';
+  doc.title = "Inspector Initialization Test";
+  startInspectorTests();
+}
 
 function startInspectorTests()
 {
@@ -49,7 +68,7 @@ function runInspectorTests()
 {
   Services.obs.removeObserver(runInspectorTests,
     INSPECTOR_NOTIFICATIONS.OPENED, false);
-  Services.obs.addObserver(finishInspectorTests,
+  Services.obs.addObserver(runContextMenuTest,
     INSPECTOR_NOTIFICATIONS.CLOSED, false);
 
   ok(!InspectorUI.toolbar.hidden, "toolbar is visible");
@@ -64,6 +83,39 @@ function runInspectorTests()
   });
 }
 
+function runContextMenuTest()
+{
+  Services.obs.removeObserver(runContextMenuTest, INSPECTOR_NOTIFICATIONS.CLOSED, false);
+  Services.obs.addObserver(inspectNodesFromContextTest, INSPECTOR_NOTIFICATIONS.OPENED, false);
+  salutation = doc.getElementById("salutation");
+  ok(salutation, "hello, context menu test!");
+  let eventDeets = { type : "contextmenu", button : 2 };
+  let contextMenu = document.getElementById("contentAreaContextMenu");
+  ok(contextMenu, "we have the context menu");
+  let contextInspectMenuItem = document.getElementById("context-inspect");
+  ok(contextInspectMenuItem, "we have the inspect context menu item");
+  EventUtils.synthesizeMouse(salutation, 2, 2, eventDeets);
+  is(contextMenu.state, "showing", "context menu is open");
+  is(contextInspectMenuItem.hidden, !InspectorUI.enabled, "is context menu item enabled?");
+  contextMenu.hidePopup();
+  executeSoon(function() {
+    InspectorUI.openInspectorUI(salutation);
+  });
+}
+
+function inspectNodesFromContextTest()
+{
+  Services.obs.removeObserver(inspectNodesFromContextTest, INSPECTOR_NOTIFICATIONS.OPENED, false);
+  Services.obs.addObserver(finishInspectorTests, INSPECTOR_NOTIFICATIONS.CLOSED, false);
+  ok(!InspectorUI.inspecting, "Inspector is not actively highlighting");
+  is(InspectorUI.selection, salutation, "Inspector is highlighting salutation");
+  ok(InspectorUI.isTreePanelOpen, "Inspector Tree Panel is open");
+  // TODO: These tests depend on the style inspector patches.
+  todo(InspectorUI.isStylePanelOpen, "Inspector Style Panel is open");
+  todo(InspectorUI.isDOMPanelOpen, "Inspector DOM Panel is open");
+  InspectorUI.closeInspectorUI(true);
+}
+
 function finishInspectorTests()
 {
   Services.obs.removeObserver(finishInspectorTests,
@@ -84,7 +136,8 @@ function test()
   gBrowser.selectedTab = gBrowser.addTab();
   gBrowser.selectedBrowser.addEventListener("load", function() {
     gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
-    waitForFocus(startInspectorTests, content);
+    doc = content.document;
+    waitForFocus(createDocument, content);
   }, true);
 
   content.location = "data:text/html,basic tests for inspector";

browser/locales/en-US/chrome/browser/browser.dtd

@@ -194,6 +194,9 @@ can reach it easily. -->
 <!ENTITY inspectMenu.accesskey        "T">
 <!ENTITY inspectMenu.commandkey       "I">
 
+<!ENTITY inspectContextMenu.label     "Inspect Element">
+<!ENTITY inspectContextMenu.accesskey "N">
+
 <!-- LOCALIZATION NOTE (scratchpad.label): This menu item label appears
   -  in the Tools menu. See bug 653093.
   -  The Scratchpad is intended to provide a simple text editor for creating