third_party/WebKit/Source/devtools/front_end/ui/Section.js

   1 /*
   2  * Copyright (C) 2007 Apple Inc.  All rights reserved.
   3  * Copyright (C) 2009 Google Inc.  All rights reserved.
   4  *
   5  * Redistribution and use in source and binary forms, with or without
   6  * modification, are permitted provided that the following conditions
   7  * are met:
   8  *
   9  * 1.  Redistributions of source code must retain the above copyright
  10  *     notice, this list of conditions and the following disclaimer.
  11  * 2.  Redistributions in binary form must reproduce the above copyright
  12  *     notice, this list of conditions and the following disclaimer in the
  13  *     documentation and/or other materials provided with the distribution.
  14  * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
  15  *     its contributors may be used to endorse or promote products derived
  16  *     from this software without specific prior written permission.
  17  *
  18  * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
  19  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
  20  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
  21  * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
  22  * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
  23  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
  24  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
  25  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  26  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  27  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  28  */
  29
  30 /**
  31  * @constructor
  32  * @param {string|!Node} title
  33  * @param {string=} subtitle
  34  */
  35 WebInspector.Section = function(title, subtitle)
  36 {
  37     this.element = createElementWithClass("div", "section");
  38     this.element._section = this;
  39     this.registerRequiredCSS("ui/section.css");
  40
  41     this.headerElement = createElementWithClass("div", "header monospace");
  42
  43     this.titleElement = createElementWithClass("div", "title");
  44
  45     this.subtitleElement = createElementWithClass("div", "subtitle");
  46
  47     this.headerElement.appendChild(this.subtitleElement);
  48     this.headerElement.appendChild(this.titleElement);
  49
  50     this.headerElement.addEventListener("click", this.handleClick.bind(this), false);
  51     this.element.appendChild(this.headerElement);
  52
  53     this.title = title;
  54     if (subtitle) {
  55         this._subtitle = subtitle;
  56         this.subtitleElement.textContent = subtitle;
  57     }
  58     this._expanded = false;
  59 }
  60
  61 WebInspector.Section.prototype = {
  62     get title()
  63     {
  64         return this._title;
  65     },
  66
  67     set title(x)
  68     {
  69         if (this._title === x)
  70             return;
  71         this._title = x;
  72
  73         if (x instanceof Node) {
  74             this.titleElement.removeChildren();
  75             this.titleElement.appendChild(x);
  76         } else
  77           this.titleElement.textContent = x;
  78     },
  79
  80     get subtitle()
  81     {
  82         return this._subtitle;
  83     },
  84
  85     get expanded()
  86     {
  87         return this._expanded;
  88     },
  89
  90     repopulate: function()
  91     {
  92         this._populated = false;
  93         if (this._expanded) {
  94             this.onpopulate();
  95             this._populated = true;
  96         }
  97     },
  98
  99     /**
 100      * @protected
 101      */
 102     onpopulate: function()
 103     {
 104         // Overridden by subclasses.
 105     },
 106
 107     expand: function()
 108     {
 109         if (this._expanded)
 110             return;
 111         this._expanded = true;
 112         this.element.classList.add("expanded");
 113
 114         if (!this._populated) {
 115             this.onpopulate();
 116             this._populated = true;
 117         }
 118     },
 119
 120     collapse: function()
 121     {
 122         if (!this._expanded)
 123             return;
 124         this._expanded = false;
 125         this.element.classList.remove("expanded");
 126     },
 127
 128     /**
 129      * @param {string} cssFile
 130      */
 131     registerRequiredCSS: function(cssFile)
 132     {
 133         this.element.insertBefore(WebInspector.Widget.createStyleElement(cssFile), this.headerElement);
 134     },
 135
 136     /**
 137      * @param {!Event} event
 138      * @protected
 139      */
 140     handleClick: function(event)
 141     {
 142         if (this._doNotExpandOnTitleClick)
 143             return;
 144
 145         if (this._expanded)
 146             this.collapse();
 147         else
 148             this.expand();
 149         event.consume();
 150     },
 151
 152     doNotExpandOnTitleClick: function()
 153     {
 154         this._doNotExpandOnTitleClick = true;
 155     }
 156 }
 157
 158 /**
 159  * @constructor
 160  * @extends {WebInspector.Section}
 161  * @param {string|!Node} title
 162  * @param {string=} subtitle
 163  */
 164 WebInspector.PropertiesSection = function(title, subtitle)
 165 {
 166     WebInspector.Section.call(this, title, subtitle);
 167     this.registerRequiredCSS("ui/propertiesSection.css");
 168
 169     this.propertiesTreeOutline = new TreeOutline(true);
 170     this.propertiesElement = this.propertiesTreeOutline.element;
 171     this.propertiesElement.classList.add("properties", "properties-tree", "monospace");
 172     this.propertiesTreeOutline.setFocusable(false);
 173     this.propertiesTreeOutline.section = this;
 174
 175     this.element.appendChild(this.propertiesElement);
 176 }
 177
 178 WebInspector.PropertiesSection.prototype = {
 179     __proto__: WebInspector.Section.prototype
 180 }