Bug 785186 - Use the context menu in the markup panel. r=jwalker
authorDave Camp <dcamp@mozilla.com>
Fri, 24 Aug 2012 17:54:09 -0700
changeset 105427 9b58a0a085ee0254597c98205c9afcc1360b480b
parent 105426 73b1af99b72db8051f53b8fff859637cc980f740
child 105428 45ec9c8d4f272606830cf8e6841f727cb02e66bd
push id55
push usershu@rfrn.org
push dateThu, 30 Aug 2012 01:33:09 +0000
reviewersjwalker
bugs785186
milestone17.0a1
Bug 785186 - Use the context menu in the markup panel. r=jwalker
browser/devtools/highlighter/highlighter.jsm
browser/devtools/highlighter/inspector.jsm
browser/devtools/markupview/MarkupView.jsm
--- a/browser/devtools/highlighter/highlighter.jsm
+++ b/browser/devtools/highlighter/highlighter.jsm
@@ -450,16 +450,20 @@ Highlighter.prototype = {
     let container = this.chromeDoc.createElement("box");
     container.id = "highlighter-nodeinfobar-container";
     container.setAttribute("position", "top");
     container.setAttribute("disabled", "true");
 
     let nodeInfobar = this.chromeDoc.createElement("hbox");
     nodeInfobar.id = "highlighter-nodeinfobar";
 
+    nodeInfobar.addEventListener("mousedown", function(aEvent) {
+      this.emitEvent("nodeselected");
+    }.bind(this), true);
+
     let arrowBoxTop = this.chromeDoc.createElement("box");
     arrowBoxTop.className = "highlighter-nodeinfobar-arrow";
     arrowBoxTop.id = "highlighter-nodeinfobar-arrow-top";
 
     let arrowBoxBottom = this.chromeDoc.createElement("box");
     arrowBoxBottom.className = "highlighter-nodeinfobar-arrow";
     arrowBoxBottom.id = "highlighter-nodeinfobar-arrow-bottom";
 
--- a/browser/devtools/highlighter/inspector.jsm
+++ b/browser/devtools/highlighter/inspector.jsm
@@ -253,16 +253,17 @@ Inspector.prototype = {
     let container = doc.getElementById("appcontent");
     container.appendChild(this._markupSplitter);
     container.appendChild(this._markupBox);
 
     // create tool iframe
     this._markupFrame = doc.createElement("iframe");
     this._markupFrame.setAttribute("flex", "1");
     this._markupFrame.setAttribute("tooltip", "aHTMLTooltip");
+    this._markupFrame.setAttribute("context", "inspector-node-popup");
 
     // This is needed to enable tooltips inside the iframe document.
     this._boundMarkupFrameLoad = function Inspector_initMarkupPanel_onload() {
       if (aFocus) {
         this._markupFrame.contentWindow.focus();
       }
       this._onMarkupFrameLoad();
     }.bind(this);
@@ -1199,50 +1200,78 @@ InspectorUI.prototype = {
         }
         event.preventDefault();
         event.stopPropagation();
         break;
     }
   },
 
   /**
+   * Return the currently-selected node for the purposes of the
+   * context menu.  This is usually the highlighter selection, unless
+   * the markup panel has a selected node that can't be highlighted
+   * (such as a text node).  This will be fixed once the highlighter/inspector
+   * is confortable with non-element nodes being the current selection.
+   * See bug 785180.
+   */
+  _contextSelection: function IUI__contextSelection()
+  {
+    let inspector = this.currentInspector;
+    if (inspector.markup) {
+      return inspector.markup.selected;
+    }
+    return this.selection;
+  },
+
+  /**
    * Copy the innerHTML of the selected Node to the clipboard. Called via the
    * Inspector:CopyInner command.
    */
   copyInnerHTML: function IUI_copyInnerHTML()
   {
-    clipboardHelper.copyString(this.selection.innerHTML, this.selection.ownerDocument);
+    let selection = this._contextSelection();
+    clipboardHelper.copyString(selection.innerHTML, selection.ownerDocument);
   },
 
   /**
    * Copy the outerHTML of the selected Node to the clipboard. Called via the
    * Inspector:CopyOuter command.
    */
   copyOuterHTML: function IUI_copyOuterHTML()
   {
-    clipboardHelper.copyString(this.selection.outerHTML, this.selection.ownerDocument);
+    let selection = this._contextSelection();
+    clipboardHelper.copyString(selection.outerHTML, selection.ownerDocument);
   },
 
   /**
    * Delete the selected node. Called via the Inspector:DeleteNode command.
    */
   deleteNode: function IUI_deleteNode()
   {
-    let selection = this.selection;
+    let selection = this._contextSelection();
 
     let root = selection.ownerDocument.documentElement;
     if (selection === root) {
       // We can't delete the root element.
       return;
     }
 
     let parent = selection.parentNode;
 
-    // remove the node from content
-    parent.removeChild(selection);
+    // If the markup panel is active, use the markup panel to delete
+    // the node, making this an undoable action.
+    let markup = this.currentInspector.markup;
+    if (markup) {
+      markup.deleteNode(selection);
+    } else {
+      // remove the node from content
+      parent.removeChild(selection);
+    }
+
+    // Otherwise, just delete the node.
     this.breadcrumbs.invalidateHierarchy();
 
     // select the parent node in the highlighter and breadcrumbs
     this.inspectNode(parent);
   },
 
   /////////////////////////////////////////////////////////////////////////
   //// Utility Methods
--- a/browser/devtools/markupview/MarkupView.jsm
+++ b/browser/devtools/markupview/MarkupView.jsm
@@ -1,24 +1,14 @@
 /* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-/**
- * Followup bugs to be filed:
- * - Drag and drop should be implemented.
- * - Node menu should be implemented.
- * - editableField could be moved to a shared location.
- * - I'm willing to consider that judicious use of DOMTemplater could make this
- *   code easier to maintain.
- * - ScrollIntoViewIfNeeded seems jumpy, that should be fixed.
- */
-
 const Cc = Components.classes;
 const Cu = Components.utils;
 const Ci = Components.interfaces;
 
 // Page size for pageup/pagedown
 const PAGE_SIZE = 10;
 
 var EXPORTED_SYMBOLS = ["MarkupView"];
@@ -64,18 +54,16 @@ function MarkupView(aInspector, aFrame)
   this._inspector.on("select", this._boundSelect);
   this._onSelect();
 
   this._boundKeyDown = this._onKeyDown.bind(this);
   this._frame.addEventListener("keydown", this._boundKeyDown, false);
 
   this._boundFocus = this._onFocus.bind(this);
   this._frame.addEventListener("focus", this._boundFocus, false);
-
-  this._onSelect();
 }
 
 MarkupView.prototype = {
   _selectedContainer: null,
 
   /**
    * Return the selected node.
    */