Source/WebInspectorUI/UserInterface/Views/Sidebar.js

   1 /*
   2  * Copyright (C) 2013, 2015 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  * 1. Redistributions of source code must retain the above copyright
   8  *    notice, this list of conditions and the following disclaimer.
   9  * 2. Redistributions in binary form must reproduce the above copyright
  10  *    notice, this list of conditions and the following disclaimer in the
  11  *    documentation and/or other materials provided with the distribution.
  12  *
  13  * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
  14  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
  15  * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
  16  * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
  17  * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
  18  * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
  19  * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
  20  * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
  21  * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
  22  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
  23  * THE POSSIBILITY OF SUCH DAMAGE.
  24  */
  25
  26 WebInspector.Sidebar = class Sidebar extends WebInspector.Object
  27 {
  28     constructor(element, side, sidebarPanels, role, label, hasNavigationBar)
  29     {
  30         super();
  31
  32         console.assert(!side || side === WebInspector.Sidebar.Sides.Left || side === WebInspector.Sidebar.Sides.Right);
  33         this._side = side || WebInspector.Sidebar.Sides.Left;
  34
  35         this._element = element || document.createElement("div");
  36         this._element.classList.add("sidebar", this._side, WebInspector.Sidebar.CollapsedStyleClassName);
  37
  38         this._element.setAttribute("role", role || "group");
  39         if (label)
  40             this._element.setAttribute("aria-label", label);
  41
  42         if (hasNavigationBar) {
  43             this._element.classList.add("has-navigation-bar");
  44
  45             this._navigationBar = new WebInspector.NavigationBar(null, null, "tablist");
  46             this._navigationBar.addEventListener(WebInspector.NavigationBar.Event.NavigationItemSelected, this._navigationItemSelected, this);
  47             this._element.appendChild(this._navigationBar.element);
  48         }
  49
  50         this._resizer = new WebInspector.Resizer(WebInspector.Resizer.RuleOrientation.Vertical, this);
  51         this._element.insertBefore(this._resizer.element, this._element.firstChild);
  52
  53         this._sidebarPanels = [];
  54
  55         if (sidebarPanels) {
  56             for (var i = 0; i < sidebarPanels.length; ++i)
  57                 this.addSidebarPanel(sidebarPanels[i]);
  58         }
  59     }
  60
  61     // Public
  62
  63     addSidebarPanel(sidebarPanel)
  64     {
  65         console.assert(sidebarPanel instanceof WebInspector.SidebarPanel);
  66         if (!(sidebarPanel instanceof WebInspector.SidebarPanel))
  67             return null;
  68
  69         console.assert(!sidebarPanel.parentSidebar);
  70         if (sidebarPanel.parentSidebar)
  71             return null;
  72
  73         sidebarPanel._parentSidebar = this;
  74
  75         this._sidebarPanels.push(sidebarPanel);
  76         this._element.appendChild(sidebarPanel.element);
  77
  78         if (this._navigationBar) {
  79             console.assert(sidebarPanel.navigationItem);
  80             this._navigationBar.addNavigationItem(sidebarPanel.navigationItem);
  81         }
  82
  83         sidebarPanel.added();
  84
  85         return sidebarPanel;
  86     }
  87
  88     removeSidebarPanel(sidebarPanelOrIdentifierOrIndex)
  89     {
  90         var sidebarPanel = this.findSidebarPanel(sidebarPanelOrIdentifierOrIndex);
  91         if (!sidebarPanel)
  92             return null;
  93
  94         sidebarPanel.willRemove();
  95
  96         sidebarPanel._parentSidebar = null;
  97
  98         if (this._selectedSidebarPanel === sidebarPanel) {
  99             var index = this._sidebarPanels.indexOf(sidebarPanel);
 100             this.selectedSidebarPanel = this._sidebarPanels[index - 1] || this._sidebarPanels[index + 1] || null;
 101         }
 102
 103         this._sidebarPanels.remove(sidebarPanel);
 104         this._element.removeChild(sidebarPanel.element);
 105
 106         if (this._navigationBar) {
 107             console.assert(sidebarPanel.navigationItem);
 108             this._navigationBar.removeNavigationItem(sidebarPanel.navigationItem);
 109         }
 110
 111         sidebarPanel.removed();
 112
 113         return sidebarPanel;
 114     }
 115
 116     get selectedSidebarPanel()
 117     {
 118         return this._selectedSidebarPanel || null;
 119     }
 120
 121     set selectedSidebarPanel(sidebarPanelOrIdentifierOrIndex)
 122     {
 123         var sidebarPanel = this.findSidebarPanel(sidebarPanelOrIdentifierOrIndex);
 124         if (this._selectedSidebarPanel === sidebarPanel)
 125             return;
 126
 127         if (this._selectedSidebarPanel) {
 128             var wasVisible = this._selectedSidebarPanel.visible;
 129
 130             this._selectedSidebarPanel.selected = false;
 131
 132             if (wasVisible) {
 133                 this._selectedSidebarPanel.hidden();
 134                 this._selectedSidebarPanel.visibilityDidChange();
 135             }
 136         }
 137
 138         this._selectedSidebarPanel = sidebarPanel || null;
 139
 140         if (this._navigationBar)
 141             this._navigationBar.selectedNavigationItem = sidebarPanel ? sidebarPanel.navigationItem : null;
 142
 143         if (this._selectedSidebarPanel) {
 144             this._selectedSidebarPanel.selected = true;
 145
 146             if (this._selectedSidebarPanel.visible) {
 147                 this._selectedSidebarPanel.shown();
 148                 this._selectedSidebarPanel.visibilityDidChange();
 149             }
 150         }
 151
 152         this.dispatchEventToListeners(WebInspector.Sidebar.Event.SidebarPanelSelected);
 153     }
 154
 155     get minimumWidth()
 156     {
 157         if (this._navigationBar)
 158             return Math.max(WebInspector.Sidebar.AbsoluteMinimumWidth, this._navigationBar.minimumWidth);
 159         return WebInspector.Sidebar.AbsoluteMinimumWidth;
 160     }
 161
 162     get maximumWidth()
 163     {
 164         // FIXME: This is kind of arbitrary and ideally would be a more complex calculation based on the
 165         // available space for the sibling elements.
 166         return Math.round(window.innerWidth / 3);
 167     }
 168
 169     get width()
 170     {
 171         return this._element.offsetWidth;
 172     }
 173
 174     set width(newWidth)
 175     {
 176         if (newWidth === this.width)
 177             return;
 178
 179         newWidth = Math.max(this.minimumWidth, Math.min(newWidth, this.maximumWidth));
 180
 181         this._element.style.width = newWidth + "px";
 182
 183         if (!this.collapsed && this._navigationBar)
 184             this._navigationBar.updateLayout();
 185
 186         if (!this.collapsed && this._selectedSidebarPanel)
 187             this._selectedSidebarPanel.widthDidChange();
 188
 189         this.dispatchEventToListeners(WebInspector.Sidebar.Event.WidthDidChange);
 190     }
 191
 192     get collapsed()
 193     {
 194         return this._element.classList.contains(WebInspector.Sidebar.CollapsedStyleClassName);
 195     }
 196
 197     set collapsed(flag)
 198     {
 199         if (flag === this.collapsed)
 200             return;
 201
 202         if (flag)
 203             this._element.classList.add(WebInspector.Sidebar.CollapsedStyleClassName);
 204         else {
 205             this._element.classList.remove(WebInspector.Sidebar.CollapsedStyleClassName);
 206
 207             if (this._navigationBar)
 208                 this._navigationBar.updateLayout();
 209         }
 210
 211         if (this._selectedSidebarPanel) {
 212             if (this._selectedSidebarPanel.visible)
 213                 this._selectedSidebarPanel.shown();
 214             else
 215                 this._selectedSidebarPanel.hidden();
 216
 217             this._selectedSidebarPanel.visibilityDidChange();
 218
 219             this._selectedSidebarPanel.widthDidChange();
 220         }
 221
 222         this.dispatchEventToListeners(WebInspector.Sidebar.Event.CollapsedStateDidChange);
 223         this.dispatchEventToListeners(WebInspector.Sidebar.Event.WidthDidChange);
 224     }
 225
 226     get sidebarPanels()
 227     {
 228         return this._sidebarPanels;
 229     }
 230
 231     get element()
 232     {
 233         return this._element;
 234     }
 235
 236     get side()
 237     {
 238         return this._side;
 239     }
 240
 241     findSidebarPanel(sidebarPanelOrIdentifierOrIndex)
 242     {
 243         var sidebarPanel = null;
 244
 245         if (sidebarPanelOrIdentifierOrIndex instanceof WebInspector.SidebarPanel) {
 246             if (this._sidebarPanels.includes(sidebarPanelOrIdentifierOrIndex))
 247                 sidebarPanel = sidebarPanelOrIdentifierOrIndex;
 248         } else if (typeof sidebarPanelOrIdentifierOrIndex === "number") {
 249             sidebarPanel = this._sidebarPanels[sidebarPanelOrIdentifierOrIndex];
 250         } else if (typeof sidebarPanelOrIdentifierOrIndex === "string") {
 251             for (var i = 0; i < this._sidebarPanels.length; ++i) {
 252                 if (this._sidebarPanels[i].identifier === sidebarPanelOrIdentifierOrIndex) {
 253                     sidebarPanel = this._sidebarPanels[i];
 254                     break;
 255                 }
 256             }
 257         }
 258
 259         return sidebarPanel;
 260     }
 261
 262     // Protected
 263
 264     resizerDragStarted(resizer)
 265     {
 266         this._widthBeforeResize = this.width;
 267     }
 268
 269     resizerDragging(resizer, positionDelta)
 270     {
 271         if (this._side === WebInspector.Sidebar.Sides.Left)
 272             positionDelta *= -1;
 273
 274         var newWidth = positionDelta + this._widthBeforeResize;
 275         this.width = newWidth;
 276         this.collapsed = (newWidth < (this.minimumWidth / 2));
 277     }
 278
 279     resizerDragEnded(resizer)
 280     {
 281         delete this._widthBeforeResize;
 282     }
 283
 284     // Private
 285
 286     _navigationItemSelected(event)
 287     {
 288         this.selectedSidebarPanel = event.target.selectedNavigationItem ? event.target.selectedNavigationItem.identifier : null;
 289     }
 290 };
 291
 292 WebInspector.Sidebar.CollapsedStyleClassName = "collapsed";
 293 WebInspector.Sidebar.AbsoluteMinimumWidth = 200;
 294
 295 WebInspector.Sidebar.Sides = {
 296     Right: "right",
 297     Left: "left"
 298 };
 299
 300 WebInspector.Sidebar.Event = {
 301     SidebarPanelSelected: "sidebar-panel-selected",
 302     CollapsedStateDidChange: "sidebar-collapsed-state-did-change",
 303     WidthDidChange: "sidebar-width-did-change",
 304 };