src/third_party/WebKit/Source/devtools/front_end/ui/SidebarPane.js

   1 /*
   2  * Copyright (C) 2007 Apple Inc.  All rights reserved.
   3  *
   4  * Redistribution and use in source and binary forms, with or without
   5  * modification, are permitted provided that the following conditions
   6  * are met:
   7  *
   8  * 1.  Redistributions of source code must retain the above copyright
   9  *     notice, this list of conditions and the following disclaimer.
  10  * 2.  Redistributions in binary form must reproduce the above copyright
  11  *     notice, this list of conditions and the following disclaimer in the
  12  *     documentation and/or other materials provided with the distribution.
  13  * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
  14  *     its contributors may be used to endorse or promote products derived
  15  *     from this software without specific prior written permission.
  16  *
  17  * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
  18  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
  19  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
  20  * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
  21  * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
  22  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
  23  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
  24  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  25  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  26  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  27  */
  28
  29 /**
  30  * @constructor
  31  * @extends {WebInspector.View}
  32  */
  33 WebInspector.SidebarPane = function(title)
  34 {
  35     WebInspector.View.call(this);
  36     this.setMinimumSize(25, 0);
  37     this.element.className = "sidebar-pane"; // Override
  38
  39     this.titleElement = document.createElement("div");
  40     this.titleElement.className = "sidebar-pane-toolbar";
  41
  42     this.bodyElement = this.element.createChild("div", "body");
  43
  44     this._title = title;
  45
  46     this._expandCallback = null;
  47 }
  48
  49 WebInspector.SidebarPane.EventTypes = {
  50     wasShown: "wasShown"
  51 }
  52
  53 WebInspector.SidebarPane.prototype = {
  54     /**
  55      * @return {string}
  56      */
  57     title: function()
  58     {
  59         return this._title;
  60     },
  61
  62     /**
  63      * @param {function()} callback
  64      */
  65     prepareContent: function(callback)
  66     {
  67         if (callback)
  68             callback();
  69     },
  70
  71     expand: function()
  72     {
  73         this.prepareContent(this.onContentReady.bind(this));
  74     },
  75
  76     onContentReady: function()
  77     {
  78         if (this._expandCallback)
  79             this._expandCallback();
  80         else
  81             this._expandPending = true;
  82     },
  83
  84     /**
  85      * @param {function()} callback
  86      */
  87     setExpandCallback: function(callback)
  88     {
  89         this._expandCallback = callback;
  90         if (this._expandPending) {
  91             delete this._expandPending;
  92             this._expandCallback();
  93         }
  94     },
  95
  96     wasShown: function()
  97     {
  98         WebInspector.View.prototype.wasShown.call(this);
  99         this.dispatchEventToListeners(WebInspector.SidebarPane.EventTypes.wasShown);
 100     },
 101
 102     __proto__: WebInspector.View.prototype
 103 }
 104
 105 /**
 106  * @constructor
 107  * @param {!Element} container
 108  * @param {!WebInspector.SidebarPane} pane
 109  */
 110 WebInspector.SidebarPaneTitle = function(container, pane)
 111 {
 112     this._pane = pane;
 113
 114     this.element = container.createChild("div", "sidebar-pane-title");
 115     this.element.textContent = pane.title();
 116     this.element.tabIndex = 0;
 117     this.element.addEventListener("click", this._toggleExpanded.bind(this), false);
 118     this.element.addEventListener("keydown", this._onTitleKeyDown.bind(this), false);
 119     this.element.appendChild(this._pane.titleElement);
 120
 121     this._pane.setExpandCallback(this._expand.bind(this));
 122 }
 123
 124 WebInspector.SidebarPaneTitle.prototype = {
 125
 126     _expand: function()
 127     {
 128         this.element.classList.add("expanded");
 129         this._pane.show(this.element.parentNode, this.element.nextSibling);
 130     },
 131
 132     _collapse: function()
 133     {
 134         this.element.classList.remove("expanded");
 135         if (this._pane.element.parentNode == this.element.parentNode)
 136             this._pane.detach();
 137     },
 138
 139     _toggleExpanded: function()
 140     {
 141         if (this.element.classList.contains("expanded"))
 142             this._collapse();
 143         else
 144             this._pane.expand();
 145     },
 146
 147     /**
 148      * @param {!Event} event
 149      */
 150     _onTitleKeyDown: function(event)
 151     {
 152         if (isEnterKey(event) || event.keyCode === WebInspector.KeyboardShortcut.Keys.Space.code)
 153             this._toggleExpanded();
 154     }
 155 }
 156
 157 /**
 158  * @constructor
 159  * @extends {WebInspector.View}
 160  */
 161 WebInspector.SidebarPaneStack = function()
 162 {
 163     WebInspector.View.call(this);
 164     this.setMinimumSize(25, 0);
 165     this.element.className = "sidebar-pane-stack"; // Override
 166     this.registerRequiredCSS("sidebarPane.css");
 167 }
 168
 169 WebInspector.SidebarPaneStack.prototype = {
 170     /**
 171      * @param {!WebInspector.SidebarPane} pane
 172      */
 173     addPane: function(pane)
 174     {
 175         new WebInspector.SidebarPaneTitle(this.element, pane);
 176     },
 177
 178     __proto__: WebInspector.View.prototype
 179 }
 180
 181 /**
 182  * @constructor
 183  * @extends {WebInspector.TabbedPane}
 184  */
 185 WebInspector.SidebarTabbedPane = function()
 186 {
 187     WebInspector.TabbedPane.call(this);
 188     this.setRetainTabOrder(true);
 189     this.element.classList.add("sidebar-tabbed-pane");
 190     this.registerRequiredCSS("sidebarPane.css");
 191 }
 192
 193 WebInspector.SidebarTabbedPane.prototype = {
 194     /**
 195      * @param {!WebInspector.SidebarPane} pane
 196      */
 197     addPane: function(pane)
 198     {
 199         var title = pane.title();
 200         this.appendTab(title, title, pane);
 201         pane.element.appendChild(pane.titleElement);
 202         pane.setExpandCallback(this.selectTab.bind(this, title));
 203
 204     },
 205
 206     __proto__: WebInspector.TabbedPane.prototype
 207 }