Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(144)

Side by Side Diff: Source/devtools/front_end/elements/ElementsTreeOutline.js

Issue 603643002: DevTools: properly inject elements panel context menu items. (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Review comment addressed. Created 6 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
« no previous file with comments | « Source/devtools/front_end/elements/ElementsPanel.js ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 /* 1 /*
2 * Copyright (C) 2007, 2008 Apple Inc. All rights reserved. 2 * Copyright (C) 2007, 2008 Apple Inc. All rights reserved.
3 * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com> 3 * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
4 * Copyright (C) 2009 Joseph Pecoraro 4 * Copyright (C) 2009 Joseph Pecoraro
5 * 5 *
6 * Redistribution and use in source and binary forms, with or without 6 * Redistribution and use in source and binary forms, with or without
7 * modification, are permitted provided that the following conditions 7 * modification, are permitted provided that the following conditions
8 * are met: 8 * are met:
9 * 9 *
10 * 1. Redistributions of source code must retain the above copyright 10 * 1. Redistributions of source code must retain the above copyright
(...skipping 16 matching lines...) Expand all
27 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF 27 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
28 * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 28 * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
29 */ 29 */
30 30
31 /** 31 /**
32 * @constructor 32 * @constructor
33 * @extends {TreeOutline} 33 * @extends {TreeOutline}
34 * @param {!WebInspector.Target} target 34 * @param {!WebInspector.Target} target
35 * @param {boolean=} omitRootDOMNode 35 * @param {boolean=} omitRootDOMNode
36 * @param {boolean=} selectEnabled 36 * @param {boolean=} selectEnabled
37 * @param {function(!WebInspector.ContextMenu, !WebInspector.DOMNode)=} contextM enuCallback
38 * @param {function(!WebInspector.DOMNode, string, boolean)=} setPseudoClassCall back 37 * @param {function(!WebInspector.DOMNode, string, boolean)=} setPseudoClassCall back
39 */ 38 */
40 WebInspector.ElementsTreeOutline = function(target, omitRootDOMNode, selectEnabl ed, contextMenuCallback, setPseudoClassCallback) 39 WebInspector.ElementsTreeOutline = function(target, omitRootDOMNode, selectEnabl ed, setPseudoClassCallback)
41 { 40 {
42 this._target = target; 41 this._target = target;
43 this._domModel = target.domModel; 42 this._domModel = target.domModel;
44 this.element = document.createElement("ol"); 43 this.element = document.createElement("ol");
45 this.element.className = "elements-tree-outline"; 44 this.element.className = "elements-tree-outline";
46 this.element.addEventListener("mousedown", this._onmousedown.bind(this), fal se); 45 this.element.addEventListener("mousedown", this._onmousedown.bind(this), fal se);
47 this.element.addEventListener("mousemove", this._onmousemove.bind(this), fal se); 46 this.element.addEventListener("mousemove", this._onmousemove.bind(this), fal se);
48 this.element.addEventListener("mouseout", this._onmouseout.bind(this), false ); 47 this.element.addEventListener("mouseout", this._onmouseout.bind(this), false );
49 this.element.addEventListener("dragstart", this._ondragstart.bind(this), fal se); 48 this.element.addEventListener("dragstart", this._ondragstart.bind(this), fal se);
50 this.element.addEventListener("dragover", this._ondragover.bind(this), false ); 49 this.element.addEventListener("dragover", this._ondragover.bind(this), false );
51 this.element.addEventListener("dragleave", this._ondragleave.bind(this), fal se); 50 this.element.addEventListener("dragleave", this._ondragleave.bind(this), fal se);
52 this.element.addEventListener("drop", this._ondrop.bind(this), false); 51 this.element.addEventListener("drop", this._ondrop.bind(this), false);
53 this.element.addEventListener("dragend", this._ondragend.bind(this), false); 52 this.element.addEventListener("dragend", this._ondragend.bind(this), false);
54 this.element.addEventListener("keydown", this._onkeydown.bind(this), false); 53 this.element.addEventListener("keydown", this._onkeydown.bind(this), false);
55 this.element.addEventListener("webkitAnimationEnd", this._onAnimationEnd.bin d(this), false); 54 this.element.addEventListener("webkitAnimationEnd", this._onAnimationEnd.bin d(this), false);
55 this.element.addEventListener("contextmenu", this._contextMenuEventFired.bin d(this), false);
56 56
57 TreeOutline.call(this, this.element); 57 TreeOutline.call(this, this.element);
58 58
59 this._includeRootDOMNode = !omitRootDOMNode; 59 this._includeRootDOMNode = !omitRootDOMNode;
60 this._selectEnabled = selectEnabled; 60 this._selectEnabled = selectEnabled;
61 /** @type {?WebInspector.DOMNode} */ 61 /** @type {?WebInspector.DOMNode} */
62 this._rootDOMNode = null; 62 this._rootDOMNode = null;
63 /** @type {?WebInspector.DOMNode} */ 63 /** @type {?WebInspector.DOMNode} */
64 this._selectedDOMNode = null; 64 this._selectedDOMNode = null;
65 this._eventSupport = new WebInspector.Object(); 65 this._eventSupport = new WebInspector.Object();
66 66
67 this._visible = false; 67 this._visible = false;
68 this._pickNodeMode = false; 68 this._pickNodeMode = false;
69 69
70 this.element.addEventListener("contextmenu", this._contextMenuEventFired.bin d(this), true);
71 this._contextMenuCallback = contextMenuCallback;
72 this._setPseudoClassCallback = setPseudoClassCallback; 70 this._setPseudoClassCallback = setPseudoClassCallback;
73 this._createNodeDecorators(); 71 this._createNodeDecorators();
74 } 72 }
75 73
76 /** @typedef {{node: !WebInspector.DOMNode, isCut: boolean}} */ 74 /** @typedef {{node: !WebInspector.DOMNode, isCut: boolean}} */
77 WebInspector.ElementsTreeOutline.ClipboardData; 75 WebInspector.ElementsTreeOutline.ClipboardData;
78 76
79 /** 77 /**
80 * @enum {string} 78 * @enum {string}
81 */ 79 */
(...skipping 682 matching lines...) Expand 10 before | Expand all | Expand 10 after
764 if (!treeElement._editing && WebInspector.KeyboardShortcut.hasNoModifier s(keyboardEvent) && keyboardEvent.keyCode === WebInspector.KeyboardShortcut.Keys .H.code) { 762 if (!treeElement._editing && WebInspector.KeyboardShortcut.hasNoModifier s(keyboardEvent) && keyboardEvent.keyCode === WebInspector.KeyboardShortcut.Keys .H.code) {
765 this._toggleHideShortcut(node); 763 this._toggleHideShortcut(node);
766 event.consume(true); 764 event.consume(true);
767 return; 765 return;
768 } 766 }
769 }, 767 },
770 768
771 _contextMenuEventFired: function(event) 769 _contextMenuEventFired: function(event)
772 { 770 {
773 var treeElement = this._treeElementFromEvent(event); 771 var treeElement = this._treeElementFromEvent(event);
774 if (!treeElement || treeElement.treeOutline !== this) 772 if (!treeElement)
775 return; 773 return;
776 774
777 var contextMenu = new WebInspector.ContextMenu(event); 775 var contextMenu = new WebInspector.ContextMenu(event);
778 contextMenu.appendApplicableItems(treeElement._node);
779 contextMenu.show();
780 },
781
782 populateContextMenu: function(contextMenu, event)
783 {
784 var treeElement = this._treeElementFromEvent(event);
785 if (!treeElement || treeElement.treeOutline !== this)
786 return;
787 776
788 var isPseudoElement = !!treeElement._node.pseudoType(); 777 var isPseudoElement = !!treeElement._node.pseudoType();
789 var isTag = treeElement._node.nodeType() === Node.ELEMENT_NODE && !isPse udoElement; 778 var isTag = treeElement._node.nodeType() === Node.ELEMENT_NODE && !isPse udoElement;
790 var textNode = event.target.enclosingNodeOrSelfWithClass("webkit-html-te xt-node"); 779 var textNode = event.target.enclosingNodeOrSelfWithClass("webkit-html-te xt-node");
791 if (textNode && textNode.classList.contains("bogus")) 780 if (textNode && textNode.classList.contains("bogus"))
792 textNode = null; 781 textNode = null;
793 var commentNode = event.target.enclosingNodeOrSelfWithClass("webkit-html -comment"); 782 var commentNode = event.target.enclosingNodeOrSelfWithClass("webkit-html -comment");
794 contextMenu.appendApplicableItems(event.target); 783 contextMenu.appendApplicableItems(event.target);
795 if (textNode) { 784 if (textNode) {
796 contextMenu.appendSeparator(); 785 contextMenu.appendSeparator();
797 treeElement._populateTextContextMenu(contextMenu, textNode); 786 treeElement._populateTextContextMenu(contextMenu, textNode);
798 } else if (isTag) { 787 } else if (isTag) {
799 contextMenu.appendSeparator(); 788 contextMenu.appendSeparator();
800 treeElement._populateTagContextMenu(contextMenu, event); 789 treeElement._populateTagContextMenu(contextMenu, event);
801 } else if (commentNode) { 790 } else if (commentNode) {
802 contextMenu.appendSeparator(); 791 contextMenu.appendSeparator();
803 treeElement._populateNodeContextMenu(contextMenu); 792 treeElement._populateNodeContextMenu(contextMenu);
804 } else if (isPseudoElement) { 793 } else if (isPseudoElement) {
805 treeElement._populateScrollIntoView(contextMenu); 794 treeElement._populateScrollIntoView(contextMenu);
806 } else if (treeElement._node.isShadowRoot()) {
807 this.treeOutline._populateContextMenu(contextMenu, treeElement._node );
808 } 795 }
796
797 contextMenu.appendApplicableItems(treeElement._node);
798 contextMenu.show();
809 }, 799 },
810 800
811 _updateModifiedNodes: function() 801 _updateModifiedNodes: function()
812 { 802 {
813 if (this._elementsTreeUpdater) 803 if (this._elementsTreeUpdater)
814 this._elementsTreeUpdater._updateModifiedNodes(); 804 this._elementsTreeUpdater._updateModifiedNodes();
815 }, 805 },
816 806
817 _populateContextMenu: function(contextMenu, node)
818 {
819 if (this._contextMenuCallback)
820 this._contextMenuCallback(contextMenu, node);
821 },
822
823 handleShortcut: function(event) 807 handleShortcut: function(event)
824 { 808 {
825 var node = this.selectedDOMNode(); 809 var node = this.selectedDOMNode();
826 var treeElement = this.getCachedTreeElement(node); 810 var treeElement = this.getCachedTreeElement(node);
827 if (!node || !treeElement) 811 if (!node || !treeElement)
828 return; 812 return;
829 813
830 if (event.keyIdentifier === "F2" && treeElement.hasEditableNode()) { 814 if (event.keyIdentifier === "F2" && treeElement.hasEditableNode()) {
831 this._toggleEditAsHTML(node); 815 this._toggleEditAsHTML(node);
832 event.handled = true; 816 event.handled = true;
(...skipping 792 matching lines...) Expand 10 before | Expand all | Expand 10 after
1625 var newAttribute = event.target.enclosingNodeOrSelfWithClass("add-attrib ute"); 1609 var newAttribute = event.target.enclosingNodeOrSelfWithClass("add-attrib ute");
1626 if (attribute && !newAttribute) 1610 if (attribute && !newAttribute)
1627 contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCa seMenuTitles() ? "Edit attribute" : "Edit Attribute"), this._startEditingAttribu te.bind(this, attribute, event.target)); 1611 contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCa seMenuTitles() ? "Edit attribute" : "Edit Attribute"), this._startEditingAttribu te.bind(this, attribute, event.target));
1628 contextMenu.appendSeparator(); 1612 contextMenu.appendSeparator();
1629 if (this.treeOutline._setPseudoClassCallback) { 1613 if (this.treeOutline._setPseudoClassCallback) {
1630 var pseudoSubMenu = contextMenu.appendSubMenuItem(WebInspector.UIStr ing(WebInspector.useLowerCaseMenuTitles() ? "Force element state" : "Force Eleme nt State")); 1614 var pseudoSubMenu = contextMenu.appendSubMenuItem(WebInspector.UIStr ing(WebInspector.useLowerCaseMenuTitles() ? "Force element state" : "Force Eleme nt State"));
1631 this._populateForcedPseudoStateItems(pseudoSubMenu); 1615 this._populateForcedPseudoStateItems(pseudoSubMenu);
1632 contextMenu.appendSeparator(); 1616 contextMenu.appendSeparator();
1633 } 1617 }
1634 this._populateNodeContextMenu(contextMenu); 1618 this._populateNodeContextMenu(contextMenu);
1635 this.treeOutline._populateContextMenu(contextMenu, this._node);
1636 this._populateScrollIntoView(contextMenu); 1619 this._populateScrollIntoView(contextMenu);
1637 }, 1620 },
1638 1621
1639 /** 1622 /**
1640 * @param {!WebInspector.ContextMenu} contextMenu 1623 * @param {!WebInspector.ContextMenu} contextMenu
1641 */ 1624 */
1642 _populateScrollIntoView: function(contextMenu) 1625 _populateScrollIntoView: function(contextMenu)
1643 { 1626 {
1644 contextMenu.appendSeparator(); 1627 contextMenu.appendSeparator();
1645 contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMe nuTitles() ? "Scroll into view" : "Scroll into View"), this._scrollIntoView.bind (this)); 1628 contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMe nuTitles() ? "Scroll into view" : "Scroll into View"), this._scrollIntoView.bind (this));
(...skipping 1278 matching lines...) Expand 10 before | Expand all | Expand 10 after
2924 var treeOutline = new WebInspector.ElementsTreeOutline(node.target(), fa lse, false); 2907 var treeOutline = new WebInspector.ElementsTreeOutline(node.target(), fa lse, false);
2925 treeOutline.rootDOMNode = node; 2908 treeOutline.rootDOMNode = node;
2926 treeOutline.element.classList.add("outline-disclosure"); 2909 treeOutline.element.classList.add("outline-disclosure");
2927 if (!treeOutline.children[0].hasChildren) 2910 if (!treeOutline.children[0].hasChildren)
2928 treeOutline.element.classList.add("single-node"); 2911 treeOutline.element.classList.add("single-node");
2929 treeOutline.setVisible(true); 2912 treeOutline.setVisible(true);
2930 treeOutline.element.treeElementForTest = treeOutline.children[0]; 2913 treeOutline.element.treeElementForTest = treeOutline.children[0];
2931 return treeOutline.element; 2914 return treeOutline.element;
2932 } 2915 }
2933 } 2916 }
OLDNEW
« no previous file with comments | « Source/devtools/front_end/elements/ElementsPanel.js ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698