001    /*
002     * Copyright 2006 Mat Gessel <mat.gessel@gmail.com>
003     * 
004     * Licensed under the Apache License, Version 2.0 (the "License"); you may not
005     * use this file except in compliance with the License. You may obtain a copy of
006     * the License at
007     * 
008     * http://www.apache.org/licenses/LICENSE-2.0
009     * 
010     * Unless required by applicable law or agreed to in writing, software
011     * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
012     * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
013     * License for the specific language governing permissions and limitations under
014     * the License.
015     */
016    package asquare.gwt.debug.client;
017    
018    import com.google.gwt.user.client.DOM;
019    import com.google.gwt.user.client.Element;
020    import com.google.gwt.user.client.Event;
021    
022    /**
023     * Dumps the DOM containment of an element to the console. To use, put this in
024     * {@link com.google.gwt.core.client.EntryPoint#onModuleLoad() onModuleLoad()}:
025     * 
026     * <pre>
027     * new DebugHierarchyInspector().install();</pre>
028     * In the browser, press 'h' twice and click on an element.
029     */
030    public class DebugHierarchyInspector extends DebugEventListener
031    {
032            /**
033             * The default enabler key (<code>'h'</code>).
034             */
035            public static final char DEFAULT_ENABLE_KEY = 'h';
036            
037            public DebugHierarchyInspector()
038            {
039                    this(DEFAULT_ENABLE_KEY, Event.ONMOUSEDOWN);
040            }
041            
042            public DebugHierarchyInspector(char enableKey, int eventMask)
043            {
044                    super(enableKey, eventMask, "Hierarchy inspector");
045                    
046                    // ensure Debug is not optimized out by compiler
047                    Debug.init();
048            }
049            
050            protected void doEvent(Event event)
051            {
052                    Element target = DOM.eventGetTarget(event);
053                    printHierarchy(target, this);
054            }
055            
056            /**
057             * Override this method to change the details you want to display for each
058             * element in the hierarchy.
059             * 
060             * @param element
061             * @return a string
062             */
063            protected native String createDetailString(Element element) /*-{
064                    return "offsetLeft=" + element.offsetLeft + 
065                            ", offsetTop=" + element.offsetTop + 
066                            ", offsetWidth=" + element.offsetWidth + 
067                            ", offsetHeight=" + element.offsetHeight; 
068            }-*/;
069            
070            private native void printHierarchy(Element element, DebugHierarchyInspector inspector) /*-{
071                    var ELEMENT_NODE = 1;
072                    var prefix = "+ ";
073                    
074                    // crawl up the DOM hierarchy, stopping at the document node
075                    while(element && element.nodeType == ELEMENT_NODE)
076                    {
077                            var details = inspector.@asquare.gwt.debug.client.DebugHierarchyInspector::createDetailString(Lcom/google/gwt/user/client/Element;)(element);
078                            Debug.println(prefix + element.tagName + "(" + element.id + " " + element.className + ") {" + details + "}");
079                            element = element.parentNode;
080                            prefix = " " + prefix;
081                    }
082            }-*/;
083    }