Web Inspector: REGRESSION (r244157): Timelines: ruler size appears wrong on first...
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / ConsoleDrawer.js
1 /*
2  * Copyright (C) 2017 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 WI.ConsoleDrawer = class ConsoleDrawer extends WI.ContentBrowser
27 {
28     constructor(element)
29     {
30         const delegate = null;
31         const disableBackForward = true;
32         const disableFindBanner = false;
33         super(element, delegate, disableBackForward, disableFindBanner);
34
35         this.element.classList.add("console-drawer");
36
37         this._drawerHeightSetting = new WI.Setting("console-drawer-height", 150);
38
39         this.navigationBar.element.addEventListener("mousedown", this._consoleResizerMouseDown.bind(this));
40
41         this._toggleDrawerButton = new WI.ToggleButtonNavigationItem("toggle-drawer", WI.UIString("Hide Console"), WI.UIString("Show Console"), "Images/HideConsoleDrawer.svg", "Images/ShowConsoleDrawer.svg");
42
43         this._toggleDrawerButton.visibilityPriority = WI.NavigationItem.VisibilityPriority.High;
44         this._toggleDrawerButton.addEventListener(WI.ButtonNavigationItem.Event.Clicked, () => { WI.toggleSplitConsole(); });
45         this.navigationBar.insertNavigationItem(this._toggleDrawerButton, 0);
46
47         this.collapsed = true;
48
49         WI.TabBrowser.addEventListener(WI.TabBrowser.Event.SelectedTabContentViewDidChange, this._selectedTabContentViewDidChange, this);
50     }
51
52     // Public
53
54     toggleButtonShortcutTooltip(keyboardShortcut)
55     {
56         this._toggleDrawerButton.defaultToolTip = WI.UIString("Hide Console (%s)").format(keyboardShortcut.displayName);
57     }
58
59     get collapsed()
60     {
61         return this._collapsed;
62     }
63
64     set collapsed(flag)
65     {
66         if (flag === this._collapsed)
67             return;
68
69         this._collapsed = flag || false;
70         this._toggleDrawerButton.toggled = this._collapsed;
71
72         this.element.classList.toggle("hidden", this._collapsed);
73
74         if (this._collapsed)
75             this.hidden();
76         else
77             this.shown();
78
79         this.dispatchEventToListeners(WI.ConsoleDrawer.Event.CollapsedStateChanged);
80     }
81
82     get height()
83     {
84         return this.element.offsetHeight;
85     }
86
87     shown()
88     {
89         super.shown();
90
91         this._restoreDrawerHeight();
92     }
93
94     // Protected
95
96     sizeDidChange()
97     {
98         super.sizeDidChange();
99
100         if (this._collapsed)
101             return;
102
103         let height = this.height;
104         this._restoreDrawerHeight();
105
106         if (height !== this.height)
107             this.dispatchEventToListeners(WI.ConsoleDrawer.Event.Resized);
108     }
109
110     // Private
111
112     _consoleResizerMouseDown(event)
113     {
114         if (event.button !== 0 || event.ctrlKey)
115             return;
116
117         // Only start dragging if the target is one of the elements that we expect.
118         if (event.target !== this.navigationBar.element && !event.target.classList.contains("flexible-space"))
119             return;
120
121         let resizerElement = event.target;
122         let quickConsoleHeight = window.innerHeight - (this.element.totalOffsetTop + this.height);
123         let mouseOffset = quickConsoleHeight - (event.pageY - resizerElement.totalOffsetTop);
124
125         function dockedResizerDrag(event)
126         {
127             let height = window.innerHeight - event.pageY - mouseOffset;
128             this._drawerHeightSetting.value = height;
129             this._updateDrawerHeight(height);
130             this.collapsed = false;
131         }
132
133         function dockedResizerDragEnd(event)
134         {
135             if (event.button !== 0)
136                 return;
137
138             WI.elementDragEnd(event);
139         }
140
141         WI.elementDragStart(resizerElement, dockedResizerDrag.bind(this), dockedResizerDragEnd.bind(this), event, "row-resize");
142     }
143
144     _restoreDrawerHeight()
145     {
146         this._updateDrawerHeight(this._drawerHeightSetting.value);
147     }
148
149     _updateDrawerHeight(height)
150     {
151         const minimumHeight = 64;
152         const maximumHeight = this.element.parentNode.offsetHeight - 100;
153
154         let heightCSSValue = Number.constrain(height, minimumHeight, maximumHeight) + "px";
155         if (this.element.style.height === heightCSSValue)
156             return;
157
158         this.element.style.height = heightCSSValue;
159
160         this.dispatchEventToListeners(WI.ConsoleDrawer.Event.Resized);
161     }
162
163     _selectedTabContentViewDidChange()
164     {
165         if (WI.doesCurrentTabSupportSplitContentBrowser())
166             return;
167
168         this.element.classList.add("hidden");
169     }
170 };
171
172 WI.ConsoleDrawer.Event = {
173     CollapsedStateChanged: "console-drawer-collapsed-state-changed",
174     Resized: "console-drawer-resized",
175 };