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)
  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         this._resizer = new WebInspector.Resizer(WebInspector.Resizer.RuleOrientation.Vertical, this);
  43         this._element.insertBefore(this._resizer.element, this._element.firstChild);
  44
  45         this._sidebarPanels = [];
  46
  47         if (sidebarPanels) {
  48             for (var i = 0; i < sidebarPanels.length; ++i)
  49                 this.addSidebarPanel(sidebarPanels[i]);
  50         }
  51     }
  52
  53     // Public
  54
  55     addSidebarPanel(sidebarPanel)
  56     {
  57         console.assert(sidebarPanel instanceof WebInspector.SidebarPanel);
  58         if (!(sidebarPanel instanceof WebInspector.SidebarPanel))
  59             return null;
  60
  61         console.assert(!sidebarPanel.parentSidebar);
  62         if (sidebarPanel.parentSidebar)
  63             return null;
  64
  65         sidebarPanel._parentSidebar = this;
  66
  67         this._sidebarPanels.push(sidebarPanel);
  68         this._element.appendChild(sidebarPanel.element);
  69
  70         sidebarPanel.added();
  71
  72         return sidebarPanel;
  73     }
  74
  75     removeSidebarPanel(sidebarPanelOrIdentifierOrIndex)
  76     {
  77         var sidebarPanel = this.findSidebarPanel(sidebarPanelOrIdentifierOrIndex);
  78         if (!sidebarPanel)
  79             return null;
  80
  81         sidebarPanel.willRemove();
  82
  83         sidebarPanel._parentSidebar = null;
  84
  85         if (this._selectedSidebarPanel === sidebarPanel) {
  86             var index = this._sidebarPanels.indexOf(sidebarPanel);
  87             this.selectedSidebarPanel = this._sidebarPanels[index - 1] || this._sidebarPanels[index + 1] || null;
  88         }
  89
  90         this._sidebarPanels.remove(sidebarPanel);
  91         this._element.removeChild(sidebarPanel.element);
  92
  93         sidebarPanel.removed();
  94
  95         return sidebarPanel;
  96     }
  97
  98     get selectedSidebarPanel()
  99     {
 100         return this._selectedSidebarPanel || null;
 101     }
 102
 103     set selectedSidebarPanel(sidebarPanelOrIdentifierOrIndex)
 104     {
 105         var sidebarPanel = this.findSidebarPanel(sidebarPanelOrIdentifierOrIndex);
 106         if (this._selectedSidebarPanel === sidebarPanel)
 107             return;
 108
 109         if (this._selectedSidebarPanel) {
 110             var wasVisible = this._selectedSidebarPanel.visible;
 111
 112             this._selectedSidebarPanel.selected = false;
 113
 114             if (wasVisible) {
 115                 this._selectedSidebarPanel.hidden();
 116                 this._selectedSidebarPanel.visibilityDidChange();
 117             }
 118         }
 119
 120         this._selectedSidebarPanel = sidebarPanel || null;
 121
 122         if (this._selectedSidebarPanel) {
 123             this._selectedSidebarPanel.selected = true;
 124
 125             if (this._selectedSidebarPanel.visible) {
 126                 this._selectedSidebarPanel.shown();
 127                 this._selectedSidebarPanel.visibilityDidChange();
 128             }
 129         }
 130
 131         this.dispatchEventToListeners(WebInspector.Sidebar.Event.SidebarPanelSelected);
 132     }
 133
 134     get minimumWidth()
 135     {
 136         return WebInspector.Sidebar.AbsoluteMinimumWidth;
 137     }
 138
 139     get maximumWidth()
 140     {
 141         // FIXME: This is kind of arbitrary and ideally would be a more complex calculation based on the
 142         // available space for the sibling elements.
 143         return Math.round(window.innerWidth / 3);
 144     }
 145
 146     get width()
 147     {
 148         return this._element.offsetWidth;
 149     }
 150
 151     set width(newWidth)
 152     {
 153         if (newWidth === this.width)
 154             return;
 155
 156         newWidth = Math.max(this.minimumWidth, Math.min(newWidth, this.maximumWidth));
 157
 158         this._element.style.width = newWidth + "px";
 159
 160         if (!this.collapsed && this._selectedSidebarPanel)
 161             this._selectedSidebarPanel.widthDidChange();
 162
 163         this.dispatchEventToListeners(WebInspector.Sidebar.Event.WidthDidChange);
 164     }
 165
 166     get collapsed()
 167     {
 168         return this._element.classList.contains(WebInspector.Sidebar.CollapsedStyleClassName);
 169     }
 170
 171     set collapsed(flag)
 172     {
 173         if (flag === this.collapsed)
 174             return;
 175
 176         if (flag)
 177             this._element.classList.add(WebInspector.Sidebar.CollapsedStyleClassName);
 178         else
 179             this._element.classList.remove(WebInspector.Sidebar.CollapsedStyleClassName);
 180
 181         if (this._selectedSidebarPanel) {
 182             if (this._selectedSidebarPanel.visible)
 183                 this._selectedSidebarPanel.shown();
 184             else
 185                 this._selectedSidebarPanel.hidden();
 186
 187             this._selectedSidebarPanel.visibilityDidChange();
 188
 189             this._selectedSidebarPanel.widthDidChange();
 190         }
 191
 192         this.dispatchEventToListeners(WebInspector.Sidebar.Event.CollapsedStateDidChange);
 193         this.dispatchEventToListeners(WebInspector.Sidebar.Event.WidthDidChange);
 194     }
 195
 196     get sidebarPanels()
 197     {
 198         return this._sidebarPanels;
 199     }
 200
 201     get element()
 202     {
 203         return this._element;
 204     }
 205
 206     get side()
 207     {
 208         return this._side;
 209     }
 210
 211     findSidebarPanel(sidebarPanelOrIdentifierOrIndex)
 212     {
 213         var sidebarPanel = null;
 214
 215         if (sidebarPanelOrIdentifierOrIndex instanceof WebInspector.SidebarPanel) {
 216             if (this._sidebarPanels.includes(sidebarPanelOrIdentifierOrIndex))
 217                 sidebarPanel = sidebarPanelOrIdentifierOrIndex;
 218         } else if (typeof sidebarPanelOrIdentifierOrIndex === "number") {
 219             sidebarPanel = this._sidebarPanels[sidebarPanelOrIdentifierOrIndex];
 220         } else if (typeof sidebarPanelOrIdentifierOrIndex === "string") {
 221             for (var i = 0; i < this._sidebarPanels.length; ++i) {
 222                 if (this._sidebarPanels[i].identifier === sidebarPanelOrIdentifierOrIndex) {
 223                     sidebarPanel = this._sidebarPanels[i];
 224                     break;
 225                 }
 226             }
 227         }
 228
 229         return sidebarPanel;
 230     }
 231
 232     // Protected
 233
 234     resizerDragStarted(resizer)
 235     {
 236         this._widthBeforeResize = this.width;
 237     }
 238
 239     resizerDragging(resizer, positionDelta)
 240     {
 241         if (this._side === WebInspector.Sidebar.Sides.Left)
 242             positionDelta *= -1;
 243
 244         var newWidth = positionDelta + this._widthBeforeResize;
 245         this.width = newWidth;
 246         this.collapsed = (newWidth < (this.minimumWidth / 2));
 247     }
 248
 249     resizerDragEnded(resizer)
 250     {
 251         delete this._widthBeforeResize;
 252     }
 253
 254     // Private
 255
 256     _navigationItemSelected(event)
 257     {
 258         this.selectedSidebarPanel = event.target.selectedNavigationItem ? event.target.selectedNavigationItem.identifier : null;
 259     }
 260 };
 261
 262 WebInspector.Sidebar.CollapsedStyleClassName = "collapsed";
 263 WebInspector.Sidebar.AbsoluteMinimumWidth = 200;
 264
 265 WebInspector.Sidebar.Sides = {
 266     Right: "right",
 267     Left: "left"
 268 };
 269
 270 WebInspector.Sidebar.Event = {
 271     SidebarPanelSelected: "sidebar-panel-selected",
 272     CollapsedStateDidChange: "sidebar-collapsed-state-did-change",
 273     WidthDidChange: "sidebar-width-did-change",
 274 };