Web Inspector: add a DebugUI context menu item for saving inspector protocol traffic...
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Base / Main.js
1 /*
2  * Copyright (C) 2013-2016 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.ContentViewCookieType = {
27     ApplicationCache: "application-cache",
28     CookieStorage: "cookie-storage",
29     Database: "database",
30     DatabaseTable: "database-table",
31     DOMStorage: "dom-storage",
32     Resource: "resource", // includes Frame too.
33     Timelines: "timelines"
34 };
35
36 WebInspector.DebuggableType = {
37     Web: "web",
38     JavaScript: "javascript"
39 };
40
41 WebInspector.SelectedSidebarPanelCookieKey = "selected-sidebar-panel";
42 WebInspector.TypeIdentifierCookieKey = "represented-object-type";
43
44 WebInspector.StateRestorationType = {
45     Load: "state-restoration-load",
46     Navigation: "state-restoration-navigation",
47     Delayed: "state-restoration-delayed",
48 };
49
50 WebInspector.loaded = function()
51 {
52     // Initialize WebSocket to communication.
53     this._initializeWebSocketIfNeeded();
54
55     this.debuggableType = InspectorFrontendHost.debuggableType() === "web" ? WebInspector.DebuggableType.Web : WebInspector.DebuggableType.JavaScript;
56     this.hasExtraDomains = false;
57
58     // Register observers for events from the InspectorBackend.
59     if (InspectorBackend.registerInspectorDispatcher)
60         InspectorBackend.registerInspectorDispatcher(new WebInspector.InspectorObserver);
61     if (InspectorBackend.registerPageDispatcher)
62         InspectorBackend.registerPageDispatcher(new WebInspector.PageObserver);
63     if (InspectorBackend.registerConsoleDispatcher)
64         InspectorBackend.registerConsoleDispatcher(new WebInspector.ConsoleObserver);
65     if (InspectorBackend.registerNetworkDispatcher)
66         InspectorBackend.registerNetworkDispatcher(new WebInspector.NetworkObserver);
67     if (InspectorBackend.registerDOMDispatcher)
68         InspectorBackend.registerDOMDispatcher(new WebInspector.DOMObserver);
69     if (InspectorBackend.registerDebuggerDispatcher)
70         InspectorBackend.registerDebuggerDispatcher(new WebInspector.DebuggerObserver);
71     if (InspectorBackend.registerHeapDispatcher)
72         InspectorBackend.registerHeapDispatcher(new WebInspector.HeapObserver);
73     if (InspectorBackend.registerDatabaseDispatcher)
74         InspectorBackend.registerDatabaseDispatcher(new WebInspector.DatabaseObserver);
75     if (InspectorBackend.registerDOMStorageDispatcher)
76         InspectorBackend.registerDOMStorageDispatcher(new WebInspector.DOMStorageObserver);
77     if (InspectorBackend.registerApplicationCacheDispatcher)
78         InspectorBackend.registerApplicationCacheDispatcher(new WebInspector.ApplicationCacheObserver);
79     if (InspectorBackend.registerScriptProfilerDispatcher)
80         InspectorBackend.registerScriptProfilerDispatcher(new WebInspector.ScriptProfilerObserver);
81     if (InspectorBackend.registerTimelineDispatcher)
82         InspectorBackend.registerTimelineDispatcher(new WebInspector.TimelineObserver);
83     if (InspectorBackend.registerCSSDispatcher)
84         InspectorBackend.registerCSSDispatcher(new WebInspector.CSSObserver);
85     if (InspectorBackend.registerLayerTreeDispatcher)
86         InspectorBackend.registerLayerTreeDispatcher(new WebInspector.LayerTreeObserver);
87     if (InspectorBackend.registerRuntimeDispatcher)
88         InspectorBackend.registerRuntimeDispatcher(new WebInspector.RuntimeObserver);
89     if (InspectorBackend.registerReplayDispatcher)
90         InspectorBackend.registerReplayDispatcher(new WebInspector.ReplayObserver);
91
92     // Enable agents.
93     if (window.InspectorAgent)
94         InspectorAgent.enable();
95
96     // Perform one-time tasks.
97     WebInspector.CSSCompletions.requestCSSCompletions();
98
99     // Listen for the ProvisionalLoadStarted event before registering for events so our code gets called before any managers or sidebars.
100     // This lets us save a state cookie before any managers or sidebars do any resets that would affect state (namely TimelineManager).
101     WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ProvisionalLoadStarted, this._provisionalLoadStarted, this);
102
103     // Create the singleton managers next, before the user interface elements, so the user interface can register
104     // as event listeners on these managers.
105     this.branchManager = new WebInspector.BranchManager;
106     this.frameResourceManager = new WebInspector.FrameResourceManager;
107     this.storageManager = new WebInspector.StorageManager;
108     this.domTreeManager = new WebInspector.DOMTreeManager;
109     this.cssStyleManager = new WebInspector.CSSStyleManager;
110     this.logManager = new WebInspector.LogManager;
111     this.issueManager = new WebInspector.IssueManager;
112     this.analyzerManager = new WebInspector.AnalyzerManager;
113     this.runtimeManager = new WebInspector.RuntimeManager;
114     this.heapManager = new WebInspector.HeapManager;
115     this.applicationCacheManager = new WebInspector.ApplicationCacheManager;
116     this.timelineManager = new WebInspector.TimelineManager;
117     this.debuggerManager = new WebInspector.DebuggerManager;
118     this.sourceMapManager = new WebInspector.SourceMapManager;
119     this.layerTreeManager = new WebInspector.LayerTreeManager;
120     this.dashboardManager = new WebInspector.DashboardManager;
121     this.probeManager = new WebInspector.ProbeManager;
122     this.replayManager = new WebInspector.ReplayManager;
123
124     // Enable the Console Agent after creating the singleton managers.
125     if (window.ConsoleAgent)
126         ConsoleAgent.enable();
127
128     // Tell the backend we are initialized after all our initialization messages have been sent.
129     setTimeout(function() {
130         // COMPATIBILITY (iOS 8): Inspector.initialized did not exist yet.
131         if (window.InspectorAgent && InspectorAgent.initialized)
132             InspectorAgent.initialized();
133     }, 0);
134
135     // Register for events.
136     this.replayManager.addEventListener(WebInspector.ReplayManager.Event.CaptureStarted, this._captureDidStart, this);
137     this.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.Paused, this._debuggerDidPause, this);
138     this.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.Resumed, this._debuggerDidResume, this);
139     this.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.InspectModeStateChanged, this._inspectModeStateChanged, this);
140     this.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.DOMNodeWasInspected, this._domNodeWasInspected, this);
141     this.storageManager.addEventListener(WebInspector.StorageManager.Event.DOMStorageObjectWasInspected, this._storageWasInspected, this);
142     this.storageManager.addEventListener(WebInspector.StorageManager.Event.DatabaseWasInspected, this._storageWasInspected, this);
143     this.frameResourceManager.addEventListener(WebInspector.FrameResourceManager.Event.MainFrameDidChange, this._mainFrameDidChange, this);
144     this.frameResourceManager.addEventListener(WebInspector.FrameResourceManager.Event.FrameWasAdded, this._frameWasAdded, this);
145
146     WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
147
148     document.addEventListener("DOMContentLoaded", this.contentLoaded.bind(this));
149
150     // Create settings.
151     this._showingSplitConsoleSetting = new WebInspector.Setting("showing-split-console", false);
152     this._splitConsoleHeightSetting = new WebInspector.Setting("split-console-height", 150);
153
154     this._openTabsSetting = new WebInspector.Setting("open-tab-types", ["elements", "network", "resources", "timeline", "debugger", "storage", "console"]);
155     this._selectedTabIndexSetting = new WebInspector.Setting("selected-tab-index", 0);
156
157     this.showShadowDOMSetting = new WebInspector.Setting("show-shadow-dom", false);
158     this.showReplayInterfaceSetting = new WebInspector.Setting("show-web-replay", false);
159
160     // COMPATIBILITY (iOS 8): Page.enableTypeProfiler did not exist.
161     this.showJavaScriptTypeInformationSetting = new WebInspector.Setting("show-javascript-type-information", false);
162     if (this.showJavaScriptTypeInformationSetting.value && window.RuntimeAgent && RuntimeAgent.enableTypeProfiler)
163         RuntimeAgent.enableTypeProfiler();
164
165     // COMPATIBILITY (iOS 8): Page.setShowPaintRects did not exist.
166     this.showPaintRectsSetting = new WebInspector.Setting("show-paint-rects", false);
167     if (this.showPaintRectsSetting.value && window.PageAgent && PageAgent.setShowPaintRects)
168         PageAgent.setShowPaintRects(true);
169
170     this.mouseCoords = {
171         x: 0,
172         y: 0
173     };
174
175     this._windowKeydownListeners = [];
176 };
177
178 WebInspector.contentLoaded = function()
179 {
180     // If there was an uncaught exception earlier during loading, then
181     // abort loading more content. We could be in an inconsistent state.
182     if (window.__uncaughtExceptions)
183         return;
184
185     // Register for global events.
186     document.addEventListener("beforecopy", this._beforecopy.bind(this));
187     document.addEventListener("copy", this._copy.bind(this));
188
189     document.addEventListener("click", this._mouseWasClicked.bind(this));
190     document.addEventListener("dragover", this._dragOver.bind(this));
191     document.addEventListener("focus", WebInspector._focusChanged.bind(this), true);
192
193     window.addEventListener("focus", this._windowFocused.bind(this));
194     window.addEventListener("blur", this._windowBlurred.bind(this));
195     window.addEventListener("resize", this._windowResized.bind(this));
196     window.addEventListener("keydown", this._windowKeyDown.bind(this));
197     window.addEventListener("keyup", this._windowKeyUp.bind(this));
198     window.addEventListener("mousemove", this._mouseMoved.bind(this), true);
199     window.addEventListener("pagehide", this._pageHidden.bind(this));
200     window.addEventListener("contextmenu", this._contextMenuRequested.bind(this));
201
202     // Add platform style classes so the UI can be tweaked per-platform.
203     document.body.classList.add(WebInspector.Platform.name + "-platform");
204     if (WebInspector.Platform.isNightlyBuild)
205         document.body.classList.add("nightly-build");
206
207     if (WebInspector.Platform.name === "mac") {
208         document.body.classList.add(WebInspector.Platform.version.name);
209
210         if (WebInspector.Platform.version.release >= 11)
211             document.body.classList.add("latest-mac");
212         else
213             document.body.classList.add("legacy-mac");
214     }
215
216     document.body.classList.add(this.debuggableType);
217
218     // Create the user interface elements.
219     this.toolbar = new WebInspector.Toolbar(document.getElementById("toolbar"), null, true);
220     this.toolbar.displayMode = WebInspector.Toolbar.DisplayMode.IconOnly;
221     this.toolbar.sizeMode = WebInspector.Toolbar.SizeMode.Small;
222
223     this.tabBar = new WebInspector.TabBar(document.getElementById("tab-bar"));
224     this.tabBar.addEventListener(WebInspector.TabBar.Event.NewTabItemClicked, this._newTabItemClicked, this);
225     this.tabBar.addEventListener(WebInspector.TabBar.Event.OpenDefaultTab, this._openDefaultTab, this);
226
227     var contentElement = document.getElementById("content");
228     contentElement.setAttribute("role", "main");
229     contentElement.setAttribute("aria-label", WebInspector.UIString("Content"));
230
231     this.splitContentBrowser = new WebInspector.ContentBrowser(document.getElementById("split-content-browser"), this, true);
232     this.splitContentBrowser.navigationBar.element.addEventListener("mousedown", this._consoleResizerMouseDown.bind(this));
233
234     this.quickConsole = new WebInspector.QuickConsole(document.getElementById("quick-console"));
235     this.quickConsole.addEventListener(WebInspector.QuickConsole.Event.DidResize, this._quickConsoleDidResize, this);
236
237     this._consoleRepresentedObject = new WebInspector.LogObject;
238     this._consoleTreeElement = new WebInspector.LogTreeElement(this._consoleRepresentedObject);
239     this.consoleContentView = WebInspector.splitContentBrowser.contentViewForRepresentedObject(this._consoleRepresentedObject);
240     this.consoleLogViewController = this.consoleContentView.logViewController;
241     this.breakpointPopoverController = new WebInspector.BreakpointPopoverController;
242
243     // FIXME: The sidebars should be flipped in RTL languages.
244     this.navigationSidebar = new WebInspector.Sidebar(document.getElementById("navigation-sidebar"), WebInspector.Sidebar.Sides.Left);
245     this.navigationSidebar.addEventListener(WebInspector.Sidebar.Event.WidthDidChange, this._sidebarWidthDidChange, this);
246
247     this.detailsSidebar = new WebInspector.Sidebar(document.getElementById("details-sidebar"), WebInspector.Sidebar.Sides.Right, null, null, WebInspector.UIString("Details"), true);
248     this.detailsSidebar.addEventListener(WebInspector.Sidebar.Event.WidthDidChange, this._sidebarWidthDidChange, this);
249
250     this.searchKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Shift, "F", this._focusSearchField.bind(this));
251     this._findKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "F", this._find.bind(this));
252     this._saveKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "S", this._save.bind(this));
253     this._saveAsKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Shift | WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "S", this._saveAs.bind(this));
254
255     this.navigationSidebarKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Option, "L", this.toggleNavigationSidebar.bind(this));
256     this.detailsSidebarKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Option, "R", this.toggleDetailsSidebar.bind(this));
257
258     this._increaseZoomKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, WebInspector.KeyboardShortcut.Key.Plus, this._increaseZoom.bind(this));
259     this._decreaseZoomKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, WebInspector.KeyboardShortcut.Key.Minus, this._decreaseZoom.bind(this));
260     this._resetZoomKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "0", this._resetZoom.bind(this));
261
262     this._showTabAtIndexKeyboardShortcuts = [1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, `${i}`, this._showTabAtIndex.bind(this, i)));
263
264     this.tabBrowser = new WebInspector.TabBrowser(document.getElementById("tab-browser"), this.tabBar, this.navigationSidebar, this.detailsSidebar);
265     this.tabBrowser.addEventListener(WebInspector.TabBrowser.Event.SelectedTabContentViewDidChange, this._tabBrowserSelectedTabContentViewDidChange, this);
266
267     this.tabBar.addEventListener(WebInspector.TabBar.Event.TabBarItemAdded, this._updateNewTabButtonState, this);
268     this.tabBar.addEventListener(WebInspector.TabBar.Event.TabBarItemRemoved, this._updateNewTabButtonState, this);
269
270     this._reloadPageKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "R", this._reloadPage.bind(this));
271     this._reloadPageIgnoringCacheKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Shift, "R", this._reloadPageIgnoringCache.bind(this));
272     this._reloadPageKeyboardShortcut.implicitlyPreventsDefault = this._reloadPageIgnoringCacheKeyboardShortcut = false;
273
274     this._consoleTabKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Option | WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "C", this._showConsoleTab.bind(this));
275     this._quickConsoleKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Control, WebInspector.KeyboardShortcut.Key.Apostrophe, this._focusConsolePrompt.bind(this));
276
277     this._inspectModeKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Shift, "C", this._toggleInspectMode.bind(this));
278
279     this._undoKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "Z", this._undoKeyboardShortcut.bind(this));
280     this._redoKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Shift, "Z", this._redoKeyboardShortcut.bind(this));
281     this._undoKeyboardShortcut.implicitlyPreventsDefault = this._redoKeyboardShortcut.implicitlyPreventsDefault = false;
282
283     this.toggleBreakpointsKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "Y", this.debuggerToggleBreakpoints.bind(this));
284     this.pauseOrResumeKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Control | WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "Y", this.debuggerPauseResumeToggle.bind(this));
285     this.stepOverKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.F6, this.debuggerStepOver.bind(this));
286     this.stepIntoKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.F7, this.debuggerStepInto.bind(this));
287     this.stepOutKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.F8, this.debuggerStepOut.bind(this));
288
289     this.pauseOrResumeAlternateKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, WebInspector.KeyboardShortcut.Key.Backslash, this.debuggerPauseResumeToggle.bind(this));
290     this.stepOverAlternateKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, WebInspector.KeyboardShortcut.Key.SingleQuote, this.debuggerStepOver.bind(this));
291     this.stepIntoAlternateKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, WebInspector.KeyboardShortcut.Key.Semicolon, this.debuggerStepInto.bind(this));
292     this.stepOutAlternateKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Shift | WebInspector.KeyboardShortcut.Modifier.CommandOrControl, WebInspector.KeyboardShortcut.Key.Semicolon, this.debuggerStepOut.bind(this));
293
294     this._closeToolbarButton = new WebInspector.ControlToolbarItem("dock-close", WebInspector.UIString("Close"), "Images/Close.svg", 16, 14);
295     this._closeToolbarButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this.close, this);
296
297     this._undockToolbarButton = new WebInspector.ButtonToolbarItem("undock", WebInspector.UIString("Detach into separate window"), null, "Images/Undock.svg");
298     this._undockToolbarButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._undock, this);
299
300     this._dockRightToolbarButton = new WebInspector.ButtonToolbarItem("dock-right", WebInspector.UIString("Dock to right of window"), null, "Images/DockRight.svg");
301     this._dockRightToolbarButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._dockRight, this);
302
303     this._dockBottomToolbarButton = new WebInspector.ButtonToolbarItem("dock-bottom", WebInspector.UIString("Dock to bottom of window"), null, "Images/DockBottom.svg");
304     this._dockBottomToolbarButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._dockBottom, this);
305
306     var toolTip;
307     if (WebInspector.debuggableType === WebInspector.DebuggableType.JavaScript)
308         toolTip = WebInspector.UIString("Restart (%s)").format(this._reloadPageKeyboardShortcut.displayName);
309     else
310         toolTip = WebInspector.UIString("Reload page (%s)\nReload ignoring cache (%s)").format(this._reloadPageKeyboardShortcut.displayName, this._reloadPageIgnoringCacheKeyboardShortcut.displayName);
311
312     this._reloadToolbarButton = new WebInspector.ButtonToolbarItem("reload", toolTip, null, "Images/ReloadToolbar.svg");
313     this._reloadToolbarButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._reloadPageClicked, this);
314
315     this._downloadToolbarButton = new WebInspector.ButtonToolbarItem("download", WebInspector.UIString("Download Web Archive"), null, "Images/DownloadArrow.svg");
316     this._downloadToolbarButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._downloadWebArchive, this);
317
318     this._updateReloadToolbarButton();
319     this._updateDownloadToolbarButton();
320
321     // The toolbar button for node inspection.
322     if (this.debuggableType === WebInspector.DebuggableType.Web) {
323         var toolTip = WebInspector.UIString("Enable point to inspect mode (%s)").format(WebInspector._inspectModeKeyboardShortcut.displayName);
324         var activatedToolTip = WebInspector.UIString("Disable point to inspect mode (%s)").format(WebInspector._inspectModeKeyboardShortcut.displayName);
325         this._inspectModeToolbarButton = new WebInspector.ActivateButtonToolbarItem("inspect", toolTip, activatedToolTip, null, "Images/Crosshair.svg");
326         this._inspectModeToolbarButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._toggleInspectMode, this);
327     }
328
329     this._dashboardContainer = new WebInspector.DashboardContainerView;
330     this._dashboardContainer.showDashboardViewForRepresentedObject(this.dashboardManager.dashboards.default);
331
332     this._searchToolbarItem = new WebInspector.SearchBar("inspector-search", WebInspector.UIString("Search"), null, true);
333     this._searchToolbarItem.addEventListener(WebInspector.SearchBar.Event.TextChanged, this._searchTextDidChange, this);
334
335     this.toolbar.addToolbarItem(this._closeToolbarButton, WebInspector.Toolbar.Section.Control);
336
337     this.toolbar.addToolbarItem(this._undockToolbarButton, WebInspector.Toolbar.Section.Left);
338     this.toolbar.addToolbarItem(this._dockRightToolbarButton, WebInspector.Toolbar.Section.Left);
339     this.toolbar.addToolbarItem(this._dockBottomToolbarButton, WebInspector.Toolbar.Section.Left);
340
341     this.toolbar.addToolbarItem(this._reloadToolbarButton, WebInspector.Toolbar.Section.CenterLeft);
342     this.toolbar.addToolbarItem(this._downloadToolbarButton, WebInspector.Toolbar.Section.CenterLeft);
343
344     this.toolbar.addToolbarItem(this._dashboardContainer.toolbarItem, WebInspector.Toolbar.Section.Center);
345
346     if (this._inspectModeToolbarButton)
347         this.toolbar.addToolbarItem(this._inspectModeToolbarButton, WebInspector.Toolbar.Section.CenterRight);
348
349     this.toolbar.addToolbarItem(this._searchToolbarItem, WebInspector.Toolbar.Section.Right);
350
351     this.resourceDetailsSidebarPanel = new WebInspector.ResourceDetailsSidebarPanel;
352     this.domNodeDetailsSidebarPanel = new WebInspector.DOMNodeDetailsSidebarPanel;
353     this.cssStyleDetailsSidebarPanel = new WebInspector.CSSStyleDetailsSidebarPanel;
354     this.applicationCacheDetailsSidebarPanel = new WebInspector.ApplicationCacheDetailsSidebarPanel;
355     this.scopeChainDetailsSidebarPanel = new WebInspector.ScopeChainDetailsSidebarPanel;
356     this.probeDetailsSidebarPanel = new WebInspector.ProbeDetailsSidebarPanel;
357
358     if (window.LayerTreeAgent)
359         this.layerTreeDetailsSidebarPanel = new WebInspector.LayerTreeDetailsSidebarPanel;
360
361     this.modifierKeys = {altKey: false, metaKey: false, shiftKey: false};
362
363     this.toolbar.element.addEventListener("mousedown", this._toolbarMouseDown.bind(this));
364     document.getElementById("docked-resizer").addEventListener("mousedown", this._dockedResizerMouseDown.bind(this));
365
366     this._dockingAvailable = false;
367
368     this._updateDockNavigationItems();
369     this._setupViewHierarchy();
370
371     // These tabs are always available for selecting, modulo isTabAllowed().
372     // Other tabs may be engineering-only or toggled at runtime if incomplete.
373     let productionTabClasses = [
374         WebInspector.ConsoleTabContentView,
375         WebInspector.DebuggerTabContentView,
376         WebInspector.ElementsTabContentView,
377         WebInspector.NetworkTabContentView,
378         WebInspector.NewTabContentView,
379         WebInspector.ResourcesTabContentView,
380         WebInspector.SearchTabContentView,
381         WebInspector.StorageTabContentView,
382         WebInspector.TimelineTabContentView,
383     ];
384
385     this._knownTabClassesByType = new Map;
386     // Set tab classes directly. The public API triggers other updates and
387     // notifications that won't work or have no listeners at this point.
388     for (let tabClass of productionTabClasses)
389         this._knownTabClassesByType.set(tabClass.Type, tabClass);
390
391     this._pendingOpenTabs = [];
392
393     let openTabTypes = this._openTabsSetting.value;
394
395     for (let i = 0; i < openTabTypes.length; ++i) {
396         let tabType = openTabTypes[i];
397         if (!this.isTabTypeAllowed(tabType)) {
398             this._pendingOpenTabs.push({tabType, index: i});
399             continue;
400         }
401
402         let tabContentView = this._createTabContentViewForType(tabType);
403         if (!tabContentView)
404             continue;
405         this.tabBrowser.addTabForContentView(tabContentView, true);
406     }
407
408     this._restoreCookieForOpenTabs(WebInspector.StateRestorationType.Load);
409
410     this.tabBar.selectedTabBarItem = this._selectedTabIndexSetting.value;
411
412     if (!this.tabBar.selectedTabBarItem)
413         this.tabBar.selectedTabBarItem = 0;
414
415     if (!this.tabBar.hasNormalTab())
416         this.showNewTabTab();
417
418     // Listen to the events after restoring the saved tabs to avoid recursion.
419     this.tabBar.addEventListener(WebInspector.TabBar.Event.TabBarItemAdded, this._rememberOpenTabs, this);
420     this.tabBar.addEventListener(WebInspector.TabBar.Event.TabBarItemRemoved, this._rememberOpenTabs, this);
421     this.tabBar.addEventListener(WebInspector.TabBar.Event.TabBarItemsReordered, this._rememberOpenTabs, this);
422
423     // Signal that the frontend is now ready to receive messages.
424     InspectorFrontendAPI.loadCompleted();
425
426     // Tell the InspectorFrontendHost we loaded, which causes the window to display
427     // and pending InspectorFrontendAPI commands to be sent.
428     InspectorFrontendHost.loaded();
429
430     this._updateSplitConsoleHeight(this._splitConsoleHeightSetting.value);
431
432     if (this._showingSplitConsoleSetting.value)
433         this.showSplitConsole();
434
435     // Store this on the window in case the WebInspector global gets corrupted.
436     window.__frontendCompletedLoad = true;
437
438     if (this.runBootstrapOperations)
439         this.runBootstrapOperations();
440 };
441
442 WebInspector.isTabTypeAllowed = function(tabType)
443 {
444     let tabClass = this._knownTabClassesByType.get(tabType);
445     if (!tabClass)
446         return false;
447
448     return tabClass.isTabAllowed();
449 };
450
451 WebInspector.knownTabClasses = function()
452 {
453     return new Set(this._knownTabClassesByType.values());
454 }
455
456 WebInspector._createTabContentViewForType = function(tabType)
457 {
458     let tabClass = this._knownTabClassesByType.get(tabType);
459     if (!tabClass) {
460         console.error("Unknown tab type", tabType);
461         return null;
462     }
463
464     console.assert(WebInspector.TabContentView.isPrototypeOf(tabClass));
465     return new tabClass;
466 };
467
468 WebInspector._rememberOpenTabs = function()
469 {
470     let openTabs = [];
471
472     for (let tabBarItem of this.tabBar.tabBarItems) {
473         let tabContentView = tabBarItem.representedObject;
474         if (!(tabContentView instanceof WebInspector.TabContentView))
475             continue;
476         if (!tabContentView.constructor.shouldSaveTab())
477             continue;
478         console.assert(tabContentView.type, "Tab type can't be null, undefined, or empty string", tabContentView.type, tabContentView);
479         openTabs.push(tabContentView.type);
480     }
481
482     // Keep currently unsupported tabs in the setting at their previous index.
483     for (let {tabType, index} of this._pendingOpenTabs)
484         openTabs.insertAtIndex(tabType, index);
485
486     this._openTabsSetting.value = openTabs;
487 };
488
489 WebInspector._updateNewTabButtonState = function(event)
490 {
491     let allTabs = [...this._knownTabClassesByType.values()];
492     let addableTabs = allTabs.filter((tabClass) => !tabClass.isEphemeral());
493
494     // FIXME: Use arrow functions once http://webkit.org/b/152497 is resolved.
495     let canMakeNewTab = addableTabs.some(function(tabClass) {
496         return this.isNewTabWithTypeAllowed(tabClass.Type);
497     }.bind(this));
498     this.tabBar.newTabItem.disabled = !canMakeNewTab;
499 };
500
501 WebInspector._newTabItemClicked = function(event)
502 {
503     const shouldAnimate = true;
504     this.showNewTabTab(shouldAnimate);
505 };
506
507 WebInspector._openDefaultTab = function(event)
508 {
509     this.showNewTabTab();
510 };
511
512 WebInspector._tryToRestorePendingTabs = function()
513 {
514     let stillPendingOpenTabs = [];
515     for (let {tabType, index} of this._pendingOpenTabs) {
516         if (!this.isTabTypeAllowed(tabType)) {
517             stillPendingOpenTabs.push({tabType, index});
518             continue;
519         }
520
521         let tabContentView = this._createTabContentViewForType(tabType);
522         if (!tabContentView)
523             continue;
524
525         this.tabBrowser.addTabForContentView(tabContentView, true, index);
526
527         tabContentView.restoreStateFromCookie(WebInspector.StateRestorationType.Load);
528     }
529
530     this._pendingOpenTabs = stillPendingOpenTabs;
531
532     this._updateNewTabButtonState();
533 }
534
535 WebInspector.showNewTabTab = function(shouldAnimate)
536 {
537     let tabContentView = this.tabBrowser.bestTabContentViewForClass(WebInspector.NewTabContentView);
538     if (!tabContentView)
539         tabContentView = new WebInspector.NewTabContentView;
540     this.tabBrowser.showTabForContentView(tabContentView, !shouldAnimate);
541 };
542
543 WebInspector.isNewTabWithTypeAllowed = function(tabType)
544 {
545     let tabClass = this._knownTabClassesByType.get(tabType);
546     if (!tabClass || !tabClass.isTabAllowed())
547         return false;
548
549     // Only allow one tab per class for now.
550     for (let tabBarItem of this.tabBar.tabBarItems) {
551         let tabContentView = tabBarItem.representedObject;
552         if (!(tabContentView instanceof WebInspector.TabContentView))
553             continue;
554         if (tabContentView.constructor === tabClass)
555             return false;
556     }
557
558     return true;
559 };
560
561 WebInspector.createNewTabWithType = function(tabType, options = {})
562 {
563     console.assert(this.isNewTabWithTypeAllowed(tabType));
564
565     let {referencedView, shouldReplaceTab, shouldShowNewTab} = options;
566     console.assert(!referencedView || referencedView instanceof WebInspector.TabContentView, referencedView);
567     console.assert(!shouldReplaceTab || referencedView, "Must provide a reference view to replace a tab.");
568
569     let tabContentView = this._createTabContentViewForType(tabType);
570     const suppressAnimations = true;
571     let insertionIndex = referencedView ? this.tabBar.tabBarItems.indexOf(referencedView.tabBarItem) : undefined;
572     this.tabBrowser.addTabForContentView(tabContentView, suppressAnimations, insertionIndex);
573
574     if (shouldReplaceTab)
575         this.tabBrowser.closeTabForContentView(referencedView, suppressAnimations);
576
577     if (shouldShowNewTab)
578         this.tabBrowser.showTabForContentView(tabContentView);
579 };
580
581 WebInspector.registerTabClass = function(tabClass)
582 {
583     console.assert(WebInspector.TabContentView.isPrototypeOf(tabClass));
584     if (!WebInspector.TabContentView.isPrototypeOf(tabClass))
585         return;
586
587     if (this._knownTabClassesByType.has(tabClass.Type))
588         return;
589
590     this._knownTabClassesByType.set(tabClass.Type, tabClass);
591
592     this._tryToRestorePendingTabs();
593     this.notifications.dispatchEventToListeners(WebInspector.Notification.TabTypesChanged);
594 }
595
596 WebInspector.activateExtraDomains = function(domains)
597 {
598     this.hasExtraDomains = true;
599
600     for (var domain of domains) {
601         var agent = InspectorBackend.activateDomain(domain);
602         if (agent.enable)
603             agent.enable();
604     }
605
606     this.notifications.dispatchEventToListeners(WebInspector.Notification.ExtraDomainsActivated, {"domains": domains});
607
608     WebInspector.CSSCompletions.requestCSSCompletions();
609
610     this._updateReloadToolbarButton();
611     this._updateDownloadToolbarButton();
612     this._tryToRestorePendingTabs();
613 };
614
615 WebInspector.contentBrowserTreeElementForRepresentedObject = function(contentBrowser, representedObject)
616 {
617     // The console does not have a sidebar, so return a tree element here so something is shown.
618     if (representedObject === this._consoleRepresentedObject)
619         return this._consoleTreeElement;
620     return null;
621 };
622
623 WebInspector.updateWindowTitle = function()
624 {
625     var mainFrame = this.frameResourceManager.mainFrame;
626     console.assert(mainFrame);
627
628     var urlComponents = mainFrame.mainResource.urlComponents;
629
630     var lastPathComponent;
631     try {
632         lastPathComponent = decodeURIComponent(urlComponents.lastPathComponent || "");
633     } catch (e) {
634         lastPathComponent = urlComponents.lastPathComponent;
635     }
636
637     // Build a title based on the URL components.
638     if (urlComponents.host && lastPathComponent)
639         var title = this.displayNameForHost(urlComponents.host) + " \u2014 " + lastPathComponent;
640     else if (urlComponents.host)
641         var title = this.displayNameForHost(urlComponents.host);
642     else if (lastPathComponent)
643         var title = lastPathComponent;
644     else
645         var title = mainFrame.url;
646
647     // The name "inspectedURLChanged" sounds like the whole URL is required, however this is only
648     // used for updating the window title and it can be any string.
649     InspectorFrontendHost.inspectedURLChanged(title);
650 };
651
652 WebInspector.updateDockingAvailability = function(available)
653 {
654     this._dockingAvailable = available;
655
656     this._updateDockNavigationItems();
657 };
658
659 WebInspector.updateDockedState = function(side)
660 {
661     if (this._dockSide === side)
662         return;
663
664     this._dockSide = side;
665
666     this.docked = side !== "undocked";
667
668     this._ignoreToolbarModeDidChangeEvents = true;
669
670     if (side === "bottom") {
671         document.body.classList.add("docked", "bottom");
672         document.body.classList.remove("window-inactive", "right");
673     } else if (side === "right") {
674         document.body.classList.add("docked", "right");
675         document.body.classList.remove("window-inactive", "bottom");
676     } else
677         document.body.classList.remove("docked", "right", "bottom");
678
679     this._ignoreToolbarModeDidChangeEvents = false;
680
681     this._updateDockNavigationItems();
682 };
683
684 WebInspector.handlePossibleLinkClick = function(event, frame, alwaysOpenExternally)
685 {
686     var anchorElement = event.target.enclosingNodeOrSelfWithNodeName("a");
687     if (!anchorElement || !anchorElement.href)
688         return false;
689
690     if (WebInspector.isBeingEdited(anchorElement)) {
691         // Don't follow the link when it is being edited.
692         return false;
693     }
694
695     // Prevent the link from navigating, since we don't do any navigation by following links normally.
696     event.preventDefault();
697     event.stopPropagation();
698
699     this.openURL(anchorElement.href, frame, false, anchorElement.lineNumber);
700
701     return true;
702 };
703
704 WebInspector.openURL = function(url, frame, alwaysOpenExternally, lineNumber)
705 {
706     console.assert(url);
707     if (!url)
708         return;
709
710     console.assert(typeof lineNumber === "undefined" || typeof lineNumber === "number", "lineNumber should be a number.");
711
712     // If alwaysOpenExternally is not defined, base it off the command/meta key for the current event.
713     if (alwaysOpenExternally === undefined || alwaysOpenExternally === null)
714         alwaysOpenExternally = window.event ? window.event.metaKey : false;
715
716     if (alwaysOpenExternally) {
717         InspectorFrontendHost.openInNewTab(url);
718         return;
719     }
720
721     var searchChildFrames = false;
722     if (!frame) {
723         frame = this.frameResourceManager.mainFrame;
724         searchChildFrames = true;
725     }
726
727     console.assert(frame);
728
729     // WebInspector.Frame.resourceForURL does not check the main resource, only sub-resources. So check both.
730     let simplifiedURL = removeURLFragment(url);
731     var resource = frame.url === simplifiedURL ? frame.mainResource : frame.resourceForURL(simplifiedURL, searchChildFrames);
732     if (resource) {
733         var position = new WebInspector.SourceCodePosition(lineNumber, 0);
734         this.showSourceCode(resource, position);
735         return;
736     }
737
738     InspectorFrontendHost.openInNewTab(url);
739 };
740
741 WebInspector.close = function()
742 {
743     if (this._isClosing)
744         return;
745
746     this._isClosing = true;
747
748     InspectorFrontendHost.closeWindow();
749 };
750
751 WebInspector.saveDataToFile = function(saveData, forceSaveAs)
752 {
753     console.assert(saveData);
754     if (!saveData)
755         return;
756
757     if (typeof saveData.customSaveHandler === "function") {
758         saveData.customSaveHandler(forceSaveAs);
759         return;
760     }
761
762     console.assert(saveData.url);
763     console.assert(typeof saveData.content === "string");
764     if (!saveData.url || typeof saveData.content !== "string")
765         return;
766
767     InspectorFrontendHost.save(saveData.url, saveData.content, false, forceSaveAs || saveData.forceSaveAs);
768 };
769
770 WebInspector.isConsoleFocused = function()
771 {
772     return this.quickConsole.prompt.focused;
773 };
774
775 WebInspector.isShowingSplitConsole = function()
776 {
777     return !this.splitContentBrowser.element.classList.contains("hidden");
778 };
779
780 WebInspector.doesCurrentTabSupportSplitContentBrowser = function()
781 {
782     var currentContentView = this.tabBrowser.selectedTabContentView;
783     return !currentContentView || currentContentView.supportsSplitContentBrowser;
784 };
785
786 WebInspector.toggleSplitConsole = function()
787 {
788     if (!this.doesCurrentTabSupportSplitContentBrowser()) {
789         this.showConsoleTab();
790         return;
791     }
792
793     if (this.isShowingSplitConsole())
794         this.hideSplitConsole();
795     else
796         this.showSplitConsole();
797 };
798
799 WebInspector.showSplitConsole = function()
800 {
801     if (!this.doesCurrentTabSupportSplitContentBrowser()) {
802         this.showConsoleTab();
803         return;
804     }
805
806     this.splitContentBrowser.element.classList.remove("hidden");
807
808     this._showingSplitConsoleSetting.value = true;
809
810     if (this.splitContentBrowser.currentContentView !== this.consoleContentView) {
811         // Be sure to close the view in the tab content browser before showing it in the
812         // split content browser. We can only show a content view in one browser at a time.
813         if (this.consoleContentView.parentContainer)
814             this.consoleContentView.parentContainer.closeContentView(this.consoleContentView);
815         this.splitContentBrowser.showContentView(this.consoleContentView);
816     } else {
817         // This causes the view to know it was shown and focus the prompt.
818         this.splitContentBrowser.shown();
819     }
820
821     this.quickConsole.consoleLogVisibilityChanged(true);
822 };
823
824 WebInspector.hideSplitConsole = function()
825 {
826     if (!this.isShowingSplitConsole())
827         return;
828
829     this.splitContentBrowser.element.classList.add("hidden");
830
831     this._showingSplitConsoleSetting.value = false;
832
833     // This causes the view to know it was hidden.
834     this.splitContentBrowser.hidden();
835
836     this.quickConsole.consoleLogVisibilityChanged(false);
837 };
838
839 WebInspector.showConsoleTab = function(requestedScope)
840 {
841     this.hideSplitConsole();
842
843     var scope = requestedScope || WebInspector.LogContentView.Scopes.All;
844
845     // If the requested scope is already selected and the console is showing, then switch back to All.
846     if (this.isShowingConsoleTab() && this.consoleContentView.scopeBar.item(scope).selected)
847         scope = WebInspector.LogContentView.Scopes.All;
848
849     if (requestedScope || !this.consoleContentView.scopeBar.selectedItems.length)
850         this.consoleContentView.scopeBar.item(scope).selected = true;
851
852     this.showRepresentedObject(this._consoleRepresentedObject);
853
854     console.assert(this.isShowingConsoleTab());
855 };
856
857 WebInspector.isShowingConsoleTab = function()
858 {
859     return this.tabBrowser.selectedTabContentView instanceof WebInspector.ConsoleTabContentView;
860 };
861
862 WebInspector.showElementsTab = function()
863 {
864     var tabContentView = this.tabBrowser.bestTabContentViewForClass(WebInspector.ElementsTabContentView);
865     if (!tabContentView)
866         tabContentView = new WebInspector.ElementsTabContentView;
867     this.tabBrowser.showTabForContentView(tabContentView);
868 };
869
870 WebInspector.showDebuggerTab = function(breakpointToSelect)
871 {
872     var tabContentView = this.tabBrowser.bestTabContentViewForClass(WebInspector.DebuggerTabContentView);
873     if (!tabContentView)
874         tabContentView = new WebInspector.DebuggerTabContentView;
875
876     if (breakpointToSelect instanceof WebInspector.Breakpoint)
877         tabContentView.revealAndSelectBreakpoint(breakpointToSelect);
878
879     this.tabBrowser.showTabForContentView(tabContentView);
880 };
881
882 WebInspector.isShowingDebuggerTab = function()
883 {
884     return this.tabBrowser.selectedTabContentView instanceof WebInspector.DebuggerTabContentView;
885 };
886
887 WebInspector.showResourcesTab = function()
888 {
889     var tabContentView = this.tabBrowser.bestTabContentViewForClass(WebInspector.ResourcesTabContentView);
890     if (!tabContentView)
891         tabContentView = new WebInspector.ResourcesTabContentView;
892     this.tabBrowser.showTabForContentView(tabContentView);
893 };
894
895 WebInspector.showStorageTab = function()
896 {
897     var tabContentView = this.tabBrowser.bestTabContentViewForClass(WebInspector.StorageTabContentView);
898     if (!tabContentView)
899         tabContentView = new WebInspector.StorageTabContentView;
900     this.tabBrowser.showTabForContentView(tabContentView);
901 };
902
903 WebInspector.showNetworkTab = function()
904 {
905     var tabContentView = this.tabBrowser.bestTabContentViewForClass(WebInspector.NetworkTabContentView);
906     if (!tabContentView)
907         tabContentView = new WebInspector.NetworkTabContentView;
908     this.tabBrowser.showTabForContentView(tabContentView);
909 };
910
911 WebInspector.showTimelineTab = function()
912 {
913     var tabContentView = this.tabBrowser.bestTabContentViewForClass(WebInspector.TimelineTabContentView);
914     if (!tabContentView)
915         tabContentView = new WebInspector.TimelineTabContentView;
916     this.tabBrowser.showTabForContentView(tabContentView);
917 };
918
919 WebInspector.unlocalizedString = function(string)
920 {
921     // Intentionally do nothing, since this is for engineering builds
922     // (such as in Debug UI) or in text that is standardized in English.
923     // For example, CSS property names and values are never localized.
924     return string;
925 }
926
927 WebInspector.UIString = function(string, vararg)
928 {
929     if (WebInspector.dontLocalizeUserInterface)
930         return string;
931
932     if (window.localizedStrings && string in window.localizedStrings)
933         return window.localizedStrings[string];
934
935     if (!this._missingLocalizedStrings)
936         this._missingLocalizedStrings = {};
937
938     if (!(string in this._missingLocalizedStrings)) {
939         console.error("Localized string \"" + string + "\" was not found.");
940         this._missingLocalizedStrings[string] = true;
941     }
942
943     return "LOCALIZED STRING NOT FOUND";
944 };
945
946 WebInspector.restoreFocusFromElement = function(element)
947 {
948     if (element && element.isSelfOrAncestor(this.currentFocusElement))
949         this.previousFocusElement.focus();
950 };
951
952 WebInspector.toggleNavigationSidebar = function(event)
953 {
954     if (!this.navigationSidebar.collapsed || !this.navigationSidebar.sidebarPanels.length) {
955         this.navigationSidebar.collapsed = true;
956         return;
957     }
958
959     if (!this.navigationSidebar.selectedSidebarPanel)
960         this.navigationSidebar.selectedSidebarPanel = this.navigationSidebar.sidebarPanels[0];
961     this.navigationSidebar.collapsed = false;
962 };
963
964 WebInspector.toggleDetailsSidebar = function(event)
965 {
966     if (!this.detailsSidebar.collapsed || !this.detailsSidebar.sidebarPanels.length) {
967         this.detailsSidebar.collapsed = true;
968         return;
969     }
970
971     if (!this.detailsSidebar.selectedSidebarPanel)
972         this.detailsSidebar.selectedSidebarPanel = this.detailsSidebar.sidebarPanels[0];
973     this.detailsSidebar.collapsed = false;
974 };
975
976 WebInspector.tabContentViewClassForRepresentedObject = function(representedObject)
977 {
978     if (representedObject instanceof WebInspector.DOMTree)
979         return WebInspector.ElementsTabContentView;
980
981     if (representedObject instanceof WebInspector.TimelineRecording)
982         return WebInspector.TimelineTabContentView;
983
984     // We only support one console tab right now. So this isn't an instanceof check.
985     if (representedObject === this._consoleRepresentedObject)
986         return WebInspector.ConsoleTabContentView;
987
988     if (WebInspector.debuggerManager.paused) {
989         if (representedObject instanceof WebInspector.Script)
990             return WebInspector.DebuggerTabContentView;
991
992         if (representedObject instanceof WebInspector.Resource && (representedObject.type === WebInspector.Resource.Type.Document || representedObject.type === WebInspector.Resource.Type.Script))
993             return WebInspector.DebuggerTabContentView;
994     }
995
996     if (representedObject instanceof WebInspector.Frame || representedObject instanceof WebInspector.Resource || representedObject instanceof WebInspector.Script)
997         return WebInspector.ResourcesTabContentView;
998
999     // FIXME: Move Content Flows to the Elements tab?
1000     if (representedObject instanceof WebInspector.ContentFlow)
1001         return WebInspector.ResourcesTabContentView;
1002
1003     // FIXME: Move these to a Storage tab.
1004     if (representedObject instanceof WebInspector.DOMStorageObject || representedObject instanceof WebInspector.CookieStorageObject ||
1005         representedObject instanceof WebInspector.DatabaseTableObject || representedObject instanceof WebInspector.DatabaseObject ||
1006         representedObject instanceof WebInspector.ApplicationCacheFrame || representedObject instanceof WebInspector.IndexedDatabaseObjectStore ||
1007         representedObject instanceof WebInspector.IndexedDatabaseObjectStoreIndex)
1008         return WebInspector.ResourcesTabContentView;
1009
1010     return null;
1011 };
1012
1013 WebInspector.tabContentViewForRepresentedObject = function(representedObject)
1014 {
1015     var tabContentView = this.tabBrowser.bestTabContentViewForRepresentedObject(representedObject);
1016     if (tabContentView)
1017         return tabContentView;
1018
1019     var tabContentViewClass = this.tabContentViewClassForRepresentedObject(representedObject);
1020     if (!tabContentViewClass) {
1021         console.error("Unknown representedObject, couldn't create TabContentView.", representedObject);
1022         return null;
1023     }
1024
1025     tabContentView = new tabContentViewClass;
1026
1027     this.tabBrowser.addTabForContentView(tabContentView);
1028
1029     return tabContentView;
1030 };
1031
1032 WebInspector.showRepresentedObject = function(representedObject, cookie)
1033 {
1034     var tabContentView = this.tabContentViewForRepresentedObject(representedObject);
1035     console.assert(tabContentView);
1036     if (!tabContentView)
1037         return;
1038
1039     this.tabBrowser.showTabForContentView(tabContentView);
1040     tabContentView.showRepresentedObject(representedObject, cookie);
1041 };
1042
1043 WebInspector.showMainFrameDOMTree = function(nodeToSelect)
1044 {
1045     console.assert(WebInspector.frameResourceManager.mainFrame);
1046     if (!WebInspector.frameResourceManager.mainFrame)
1047         return;
1048     this.showRepresentedObject(WebInspector.frameResourceManager.mainFrame.domTree, {nodeToSelect});
1049 };
1050
1051 WebInspector.showContentFlowDOMTree = function(contentFlow, nodeToSelect)
1052 {
1053     this.showRepresentedObject(contentFlow, {nodeToSelect});
1054 };
1055
1056 WebInspector.showSourceCodeForFrame = function(frameIdentifier)
1057 {
1058     var frame = WebInspector.frameResourceManager.frameForIdentifier(frameIdentifier);
1059     if (!frame) {
1060         this._frameIdentifierToShowSourceCodeWhenAvailable = frameIdentifier;
1061         return;
1062     }
1063
1064     this._frameIdentifierToShowSourceCodeWhenAvailable = undefined;
1065
1066     this.showRepresentedObject(frame);
1067 };
1068
1069 WebInspector.showSourceCode = function(sourceCode, positionToReveal, textRangeToSelect, forceUnformatted)
1070 {
1071     console.assert(!positionToReveal || positionToReveal instanceof WebInspector.SourceCodePosition, positionToReveal);
1072     var representedObject = sourceCode;
1073
1074     if (representedObject instanceof WebInspector.Script) {
1075         // A script represented by a resource should always show the resource.
1076         representedObject = representedObject.resource || representedObject;
1077     }
1078
1079     var cookie = positionToReveal ? {lineNumber: positionToReveal.lineNumber, columnNumber: positionToReveal.columnNumber} : {};
1080     this.showRepresentedObject(representedObject, cookie);
1081 };
1082
1083 WebInspector.showSourceCodeLocation = function(sourceCodeLocation)
1084 {
1085     this.showSourceCode(sourceCodeLocation.displaySourceCode, sourceCodeLocation.displayPosition());
1086 };
1087
1088 WebInspector.showOriginalUnformattedSourceCodeLocation = function(sourceCodeLocation)
1089 {
1090     this.showSourceCode(sourceCodeLocation.sourceCode, sourceCodeLocation.position(), null, true);
1091 };
1092
1093 WebInspector.showOriginalOrFormattedSourceCodeLocation = function(sourceCodeLocation)
1094 {
1095     this.showSourceCode(sourceCodeLocation.sourceCode, sourceCodeLocation.formattedPosition());
1096 };
1097
1098 WebInspector.showOriginalOrFormattedSourceCodeTextRange = function(sourceCodeTextRange)
1099 {
1100     var textRangeToSelect = sourceCodeTextRange.formattedTextRange;
1101     this.showSourceCode(sourceCodeTextRange.sourceCode, textRangeToSelect.startPosition(), textRangeToSelect);
1102 };
1103
1104 WebInspector.showResourceRequest = function(resource)
1105 {
1106     this.showRepresentedObject(resource, {[WebInspector.ResourceClusterContentView.ContentViewIdentifierCookieKey]: WebInspector.ResourceClusterContentView.RequestIdentifier});
1107 };
1108
1109 WebInspector.debuggerToggleBreakpoints = function(event)
1110 {
1111     WebInspector.debuggerManager.breakpointsEnabled = !WebInspector.debuggerManager.breakpointsEnabled;
1112 };
1113
1114 WebInspector.debuggerPauseResumeToggle = function(event)
1115 {
1116     if (WebInspector.debuggerManager.paused)
1117         WebInspector.debuggerManager.resume();
1118     else
1119         WebInspector.debuggerManager.pause();
1120 };
1121
1122 WebInspector.debuggerStepOver = function(event)
1123 {
1124     WebInspector.debuggerManager.stepOver();
1125 };
1126
1127 WebInspector.debuggerStepInto = function(event)
1128 {
1129     WebInspector.debuggerManager.stepInto();
1130 };
1131
1132 WebInspector.debuggerStepOut = function(event)
1133 {
1134     WebInspector.debuggerManager.stepOut();
1135 };
1136
1137 WebInspector._searchTextDidChange = function(event)
1138 {
1139     var tabContentView = this.tabBrowser.bestTabContentViewForClass(WebInspector.SearchTabContentView);
1140     if (!tabContentView)
1141         tabContentView = new WebInspector.SearchTabContentView;
1142
1143     var searchQuery = this._searchToolbarItem.text;
1144     this._searchToolbarItem.text = "";
1145
1146     this.tabBrowser.showTabForContentView(tabContentView);
1147
1148     tabContentView.performSearch(searchQuery);
1149 };
1150
1151 WebInspector._focusSearchField = function(event)
1152 {
1153     if (this.tabBrowser.selectedTabContentView instanceof WebInspector.SearchTabContentView) {
1154         this.tabBrowser.selectedTabContentView.focusSearchField();
1155         return;
1156     }
1157
1158     this._searchToolbarItem.focus();
1159 };
1160
1161 WebInspector._focusChanged = function(event)
1162 {
1163     // Make a caret selection inside the focused element if there isn't a range selection and there isn't already
1164     // a caret selection inside. This is needed (at least) to remove caret from console when focus is moved.
1165     // The selection change should not apply to text fields and text areas either.
1166
1167     if (WebInspector.isEventTargetAnEditableField(event)) {
1168         // Still update the currentFocusElement if inside of a CodeMirror editor.
1169         var codeMirrorEditorElement = event.target.enclosingNodeOrSelfWithClass("CodeMirror");
1170         if (codeMirrorEditorElement && codeMirrorEditorElement !== this.currentFocusElement) {
1171             this.previousFocusElement = this.currentFocusElement;
1172             this.currentFocusElement = codeMirrorEditorElement;
1173         }
1174         return;
1175     }
1176
1177     var selection = window.getSelection();
1178     if (!selection.isCollapsed)
1179         return;
1180
1181     var element = event.target;
1182
1183     if (element !== this.currentFocusElement) {
1184         this.previousFocusElement = this.currentFocusElement;
1185         this.currentFocusElement = element;
1186     }
1187
1188     if (element.isInsertionCaretInside())
1189         return;
1190
1191     var selectionRange = element.ownerDocument.createRange();
1192     selectionRange.setStart(element, 0);
1193     selectionRange.setEnd(element, 0);
1194
1195     selection.removeAllRanges();
1196     selection.addRange(selectionRange);
1197 };
1198
1199 WebInspector._mouseWasClicked = function(event)
1200 {
1201     this.handlePossibleLinkClick(event);
1202 };
1203
1204 WebInspector._dragOver = function(event)
1205 {
1206     // Do nothing if another event listener handled the event already.
1207     if (event.defaultPrevented)
1208         return;
1209
1210     // Allow dropping into editable areas.
1211     if (WebInspector.isEventTargetAnEditableField(event))
1212         return;
1213
1214     // Prevent the drop from being accepted.
1215     event.dataTransfer.dropEffect = "none";
1216     event.preventDefault();
1217 };
1218
1219 WebInspector._captureDidStart = function(event)
1220 {
1221     this._dashboardContainer.showDashboardViewForRepresentedObject(this.dashboardManager.dashboards.replay);
1222 };
1223
1224 WebInspector._debuggerDidPause = function(event)
1225 {
1226     // FIXME: <webkit.org/b/###> Web Inspector: Preference for Auto Showing Scope Chain sidebar on pause
1227     this.showDebuggerTab();
1228
1229     this._dashboardContainer.showDashboardViewForRepresentedObject(this.dashboardManager.dashboards.debugger);
1230
1231     InspectorFrontendHost.bringToFront();
1232 };
1233
1234 WebInspector._debuggerDidResume = function(event)
1235 {
1236     this._dashboardContainer.closeDashboardViewForRepresentedObject(this.dashboardManager.dashboards.debugger);
1237 };
1238
1239 WebInspector._frameWasAdded = function(event)
1240 {
1241     if (!this._frameIdentifierToShowSourceCodeWhenAvailable)
1242         return;
1243
1244     var frame = event.data.frame;
1245     if (frame.id !== this._frameIdentifierToShowSourceCodeWhenAvailable)
1246         return;
1247
1248     function delayedWork()
1249     {
1250         this.showSourceCodeForFrame(frame.id);
1251     }
1252
1253     // Delay showing the frame since FrameWasAdded is called before MainFrameChanged.
1254     // Calling showSourceCodeForFrame before MainFrameChanged will show the frame then close it.
1255     setTimeout(delayedWork.bind(this));
1256 };
1257
1258 WebInspector._mainFrameDidChange = function(event)
1259 {
1260     this._updateDownloadToolbarButton();
1261
1262     this.updateWindowTitle();
1263 };
1264
1265 WebInspector._mainResourceDidChange = function(event)
1266 {
1267     if (!event.target.isMainFrame())
1268         return;
1269
1270     this._inProvisionalLoad = false;
1271
1272     // Run cookie restoration after we are sure all of the Tabs and NavigationSidebarPanels
1273     // have updated with respect to the main resource change.
1274     setTimeout(this._restoreCookieForOpenTabs.bind(this, WebInspector.StateRestorationType.Navigation));
1275
1276     this._updateDownloadToolbarButton();
1277
1278     this.updateWindowTitle();
1279 };
1280
1281 WebInspector._provisionalLoadStarted = function(event)
1282 {
1283     if (!event.target.isMainFrame())
1284         return;
1285
1286     this._saveCookieForOpenTabs();
1287
1288     this._inProvisionalLoad = true;
1289 };
1290
1291 WebInspector._restoreCookieForOpenTabs = function(restorationType)
1292 {
1293     for (var tabBarItem of this.tabBar.tabBarItems) {
1294         var tabContentView = tabBarItem.representedObject;
1295         if (!(tabContentView instanceof WebInspector.TabContentView))
1296             continue;
1297         tabContentView.restoreStateFromCookie(restorationType);
1298     }
1299 };
1300
1301 WebInspector._saveCookieForOpenTabs = function()
1302 {
1303     for (var tabBarItem of this.tabBar.tabBarItems) {
1304         var tabContentView = tabBarItem.representedObject;
1305         if (!(tabContentView instanceof WebInspector.TabContentView))
1306             continue;
1307         tabContentView.saveStateToCookie();
1308     }
1309 };
1310
1311 WebInspector._windowFocused = function(event)
1312 {
1313     if (event.target.document.nodeType !== Node.DOCUMENT_NODE)
1314         return;
1315
1316     // FIXME: We should use the :window-inactive pseudo class once https://webkit.org/b/38927 is fixed.
1317     document.body.classList.remove(this.docked ? "window-docked-inactive" : "window-inactive");
1318 };
1319
1320 WebInspector._windowBlurred = function(event)
1321 {
1322     if (event.target.document.nodeType !== Node.DOCUMENT_NODE)
1323         return;
1324
1325     // FIXME: We should use the :window-inactive pseudo class once https://webkit.org/b/38927 is fixed.
1326     document.body.classList.add(this.docked ? "window-docked-inactive" : "window-inactive");
1327 };
1328
1329 WebInspector._windowResized = function(event)
1330 {
1331     this.toolbar.updateLayout();
1332     this.tabBar.updateLayout();
1333     this._tabBrowserSizeDidChange();
1334 };
1335
1336 WebInspector._updateModifierKeys = function(event)
1337 {
1338     var didChange = this.modifierKeys.altKey !== event.altKey || this.modifierKeys.metaKey !== event.metaKey || this.modifierKeys.shiftKey !== event.shiftKey;
1339
1340     this.modifierKeys = {altKey: event.altKey, metaKey: event.metaKey, shiftKey: event.shiftKey};
1341
1342     if (didChange)
1343         this.notifications.dispatchEventToListeners(WebInspector.Notification.GlobalModifierKeysDidChange, event);
1344 };
1345
1346 WebInspector._windowKeyDown = function(event)
1347 {
1348     this._updateModifierKeys(event);
1349 };
1350
1351 WebInspector._windowKeyUp = function(event)
1352 {
1353     this._updateModifierKeys(event);
1354 };
1355
1356 WebInspector._mouseMoved = function(event)
1357 {
1358     this._updateModifierKeys(event);
1359     this.mouseCoords = {
1360         x: event.pageX,
1361         y: event.pageY
1362     };
1363 };
1364
1365 WebInspector._pageHidden = function(event)
1366 {
1367     this._saveCookieForOpenTabs();
1368 };
1369
1370 WebInspector._contextMenuRequested = function(event)
1371 {
1372     let proposedContextMenu;
1373
1374     // This is setting is only defined in engineering builds.
1375     if (WebInspector.isDebugUIEnabled()) {
1376         proposedContextMenu = WebInspector.ContextMenu.createFromEvent(event);
1377         proposedContextMenu.appendSeparator();
1378         proposedContextMenu.appendItem(WebInspector.unlocalizedString("Reload Web Inspector"), () => {
1379             window.location.reload();
1380         });
1381
1382         let protocolSubMenu = proposedContextMenu.appendSubMenuItem(WebInspector.unlocalizedString("Protocol Debugging"), null, false);
1383         let isCapturingTraffic = InspectorBackend.activeTracer instanceof WebInspector.CapturingProtocolTracer;
1384
1385         protocolSubMenu.appendCheckboxItem(WebInspector.unlocalizedString("Capture Trace"), () => {
1386             if (isCapturingTraffic)
1387                 InspectorBackend.activeTracer = null;
1388             else
1389                 InspectorBackend.activeTracer = new WebInspector.CapturingProtocolTracer;
1390         }, isCapturingTraffic);
1391
1392         protocolSubMenu.appendSeparator();
1393
1394         protocolSubMenu.appendItem(WebInspector.unlocalizedString("Export Trace\u2014"), () => {
1395             const forceSaveAs = true;
1396             WebInspector.saveDataToFile(InspectorBackend.activeTracer.trace.saveData, forceSaveAs);
1397         }, !isCapturingTraffic);
1398     } else {
1399         const onlyExisting = true;
1400         proposedContextMenu = WebInspector.ContextMenu.createFromEvent(event, onlyExisting);
1401     }
1402
1403     if (proposedContextMenu)
1404         proposedContextMenu.show();
1405 };
1406
1407 WebInspector.isDebugUIEnabled = function()
1408 {
1409     return WebInspector.showDebugUISetting && WebInspector.showDebugUISetting.value;
1410 }
1411
1412 WebInspector._undock = function(event)
1413 {
1414     InspectorFrontendHost.requestSetDockSide("undocked");
1415 };
1416
1417 WebInspector._dockBottom = function(event)
1418 {
1419     InspectorFrontendHost.requestSetDockSide("bottom");
1420 };
1421
1422 WebInspector._dockRight = function(event)
1423 {
1424     InspectorFrontendHost.requestSetDockSide("right");
1425 };
1426
1427 WebInspector._updateDockNavigationItems = function()
1428 {
1429     if (this._dockingAvailable || this.docked) {
1430         this._closeToolbarButton.hidden = !this.docked;
1431         this._undockToolbarButton.hidden = this._dockSide === "undocked";
1432         this._dockBottomToolbarButton.hidden = this._dockSide === "bottom";
1433         this._dockRightToolbarButton.hidden = this._dockSide === "right";
1434     } else {
1435         this._closeToolbarButton.hidden = true;
1436         this._undockToolbarButton.hidden = true;
1437         this._dockBottomToolbarButton.hidden = true;
1438         this._dockRightToolbarButton.hidden = true;
1439     }
1440 };
1441
1442 WebInspector._tabBrowserSizeDidChange = function()
1443 {
1444     this.tabBrowser.updateLayout();
1445     this.splitContentBrowser.updateLayout();
1446     this.quickConsole.updateLayout();
1447 };
1448
1449 WebInspector._quickConsoleDidResize = function(event)
1450 {
1451     this.tabBrowser.updateLayout();
1452 };
1453
1454 WebInspector._sidebarWidthDidChange = function(event)
1455 {
1456     this._tabBrowserSizeDidChange();
1457 };
1458
1459 WebInspector._setupViewHierarchy = function()
1460 {
1461     let rootView = WebInspector.View.rootView();
1462     rootView.addSubview(this.toolbar);
1463     rootView.addSubview(this.tabBar);
1464     rootView.addSubview(this.navigationSidebar);
1465     rootView.addSubview(this.tabBrowser);
1466     rootView.addSubview(this.splitContentBrowser);
1467     rootView.addSubview(this.quickConsole);
1468     rootView.addSubview(this.detailsSidebar);
1469 };
1470
1471 WebInspector._tabBrowserSelectedTabContentViewDidChange = function(event)
1472 {
1473     if (this.tabBar.selectedTabBarItem)
1474         this._selectedTabIndexSetting.value = this.tabBar.tabBarItems.indexOf(this.tabBar.selectedTabBarItem);
1475
1476     if (!this.doesCurrentTabSupportSplitContentBrowser())
1477         this.hideSplitConsole();
1478
1479     if (!this.isShowingSplitConsole())
1480         this.quickConsole.consoleLogVisibilityChanged(this.isShowingConsoleTab());
1481 };
1482
1483 WebInspector._initializeWebSocketIfNeeded = function()
1484 {
1485     if (!InspectorFrontendHost.initializeWebSocket)
1486         return;
1487
1488     var queryParams = parseLocationQueryParameters();
1489
1490     if ("ws" in queryParams)
1491         var url = "ws://" + queryParams.ws;
1492     else if ("page" in queryParams) {
1493         var page = queryParams.page;
1494         var host = "host" in queryParams ? queryParams.host : window.location.host;
1495         var url = "ws://" + host + "/devtools/page/" + page;
1496     }
1497
1498     if (!url)
1499         return;
1500
1501     InspectorFrontendHost.initializeWebSocket(url);
1502 };
1503
1504 WebInspector._updateSplitConsoleHeight = function(height)
1505 {
1506     const minimumHeight = 64;
1507     const maximumHeight = window.innerHeight * 0.55;
1508
1509     height = Math.max(minimumHeight, Math.min(height, maximumHeight));
1510
1511     this.splitContentBrowser.element.style.height = height + "px";
1512 };
1513
1514 WebInspector._consoleResizerMouseDown = function(event)
1515 {
1516     if (event.button !== 0 || event.ctrlKey)
1517         return;
1518
1519     // Only start dragging if the target is one of the elements that we expect.
1520     if (!event.target.classList.contains("navigation-bar") && !event.target.classList.contains("flexible-space"))
1521         return;
1522
1523     var resizerElement = event.target;
1524     var mouseOffset = resizerElement.offsetHeight - (event.pageY - resizerElement.totalOffsetTop);
1525
1526     function dockedResizerDrag(event)
1527     {
1528         if (event.button !== 0)
1529             return;
1530
1531         var height = window.innerHeight - event.pageY - mouseOffset;
1532
1533         this._splitConsoleHeightSetting.value = height;
1534
1535         this._updateSplitConsoleHeight(height);
1536
1537         this.quickConsole.dispatchEventToListeners(WebInspector.QuickConsole.Event.DidResize);
1538     }
1539
1540     function dockedResizerDragEnd(event)
1541     {
1542         if (event.button !== 0)
1543             return;
1544
1545         this.elementDragEnd(event);
1546     }
1547
1548     this.elementDragStart(resizerElement, dockedResizerDrag.bind(this), dockedResizerDragEnd.bind(this), event, "row-resize");
1549 };
1550
1551 WebInspector._toolbarMouseDown = function(event)
1552 {
1553     if (event.ctrlKey)
1554         return;
1555
1556     if (this._dockSide === "right")
1557         return;
1558
1559     if (this.docked)
1560         this._dockedResizerMouseDown(event);
1561     else
1562         this._moveWindowMouseDown(event);
1563 };
1564
1565 WebInspector._dockedResizerMouseDown = function(event)
1566 {
1567     if (event.button !== 0 || event.ctrlKey)
1568         return;
1569
1570     if (!this.docked)
1571         return;
1572
1573     // Only start dragging if the target is one of the elements that we expect.
1574     if (event.target.id !== "docked-resizer" && !event.target.classList.contains("toolbar") &&
1575         !event.target.classList.contains("flexible-space") && !event.target.classList.contains("item-section"))
1576         return;
1577
1578     var windowProperty = this._dockSide === "bottom" ? "innerHeight" : "innerWidth";
1579     var eventScreenProperty = this._dockSide === "bottom" ? "screenY" : "screenX";
1580     var eventClientProperty = this._dockSide === "bottom" ? "clientY" : "clientX";
1581
1582     var resizerElement = event.target;
1583     var firstClientPosition = event[eventClientProperty];
1584     var lastScreenPosition = event[eventScreenProperty];
1585
1586     function dockedResizerDrag(event)
1587     {
1588         if (event.button !== 0)
1589             return;
1590
1591         var position = event[eventScreenProperty];
1592         var delta = position - lastScreenPosition;
1593         var clientPosition = event[eventClientProperty];
1594
1595         lastScreenPosition = position;
1596
1597         // If delta is positive the docked Inspector size is decreasing, in which case the cursor client position
1598         // with respect to the target cannot be less than the first mouse down position within the target.
1599         if (delta > 0 && clientPosition < firstClientPosition)
1600             return;
1601
1602         // If delta is negative the docked Inspector size is increasing, in which case the cursor client position
1603         // with respect to the target cannot be greater than the first mouse down position within the target.
1604         if (delta < 0 && clientPosition > firstClientPosition)
1605             return;
1606
1607         let dimension = Math.max(0, window[windowProperty] - delta);
1608         // If zoomed in/out, there be greater/fewer document pixels shown, but the inspector's
1609         // width or height should be the same in device pixels regardless of the document zoom.
1610         dimension *= InspectorFrontendHost.zoomFactor();
1611
1612         if (this._dockSide === "bottom")
1613             InspectorFrontendHost.setAttachedWindowHeight(dimension);
1614         else
1615             InspectorFrontendHost.setAttachedWindowWidth(dimension);
1616     }
1617
1618     function dockedResizerDragEnd(event)
1619     {
1620         if (event.button !== 0)
1621             return;
1622
1623         WebInspector.elementDragEnd(event);
1624     }
1625
1626     WebInspector.elementDragStart(resizerElement, dockedResizerDrag.bind(this), dockedResizerDragEnd.bind(this), event, this._dockSide === "bottom" ? "row-resize" : "col-resize");
1627 };
1628
1629 WebInspector._moveWindowMouseDown = function(event)
1630 {
1631     console.assert(!this.docked);
1632
1633     if (event.button !== 0 || event.ctrlKey)
1634         return;
1635
1636     // Only start dragging if the target is one of the elements that we expect.
1637     if (!event.target.classList.contains("toolbar") && !event.target.classList.contains("flexible-space") &&
1638         !event.target.classList.contains("item-section"))
1639         return;
1640
1641     if (WebInspector.Platform.name === "mac") {
1642         // New Mac releases can start a window drag.
1643         if (WebInspector.Platform.version.release >= 11) {
1644             InspectorFrontendHost.startWindowDrag();
1645             event.preventDefault();
1646             return;
1647         }
1648
1649         // Ignore dragging on the top of the toolbar on Mac if the system handles it.
1650         if (WebInspector.Platform.version.release === 10) {
1651             const windowDragHandledTitleBarHeight = 22;
1652             if (event.pageY < windowDragHandledTitleBarHeight) {
1653                 event.preventDefault();
1654                 return;
1655             }
1656         }
1657     }
1658
1659     var lastScreenX = event.screenX;
1660     var lastScreenY = event.screenY;
1661
1662     function toolbarDrag(event)
1663     {
1664         if (event.button !== 0)
1665             return;
1666
1667         var x = event.screenX - lastScreenX;
1668         var y = event.screenY - lastScreenY;
1669
1670         InspectorFrontendHost.moveWindowBy(x, y);
1671
1672         lastScreenX = event.screenX;
1673         lastScreenY = event.screenY;
1674     }
1675
1676     function toolbarDragEnd(event)
1677     {
1678         if (event.button !== 0)
1679             return;
1680
1681         WebInspector.elementDragEnd(event);
1682     }
1683
1684     WebInspector.elementDragStart(event.target, toolbarDrag, toolbarDragEnd, event, "default");
1685 };
1686
1687 WebInspector._storageWasInspected = function(event)
1688 {
1689     this.showStorageTab();
1690 };
1691
1692 WebInspector._domNodeWasInspected = function(event)
1693 {
1694     this.domTreeManager.highlightDOMNodeForTwoSeconds(event.data.node.id);
1695
1696     InspectorFrontendHost.bringToFront();
1697
1698     this.showElementsTab();
1699     this.showMainFrameDOMTree(event.data.node);
1700 };
1701
1702 WebInspector._inspectModeStateChanged = function(event)
1703 {
1704     this._inspectModeToolbarButton.activated = this.domTreeManager.inspectModeEnabled;
1705 };
1706
1707 WebInspector._toggleInspectMode = function(event)
1708 {
1709     this.domTreeManager.inspectModeEnabled = !this.domTreeManager.inspectModeEnabled;
1710 };
1711
1712 WebInspector._downloadWebArchive = function(event)
1713 {
1714     this.archiveMainFrame();
1715 };
1716
1717 WebInspector._reloadPage = function(event)
1718 {
1719     if (!window.PageAgent)
1720         return;
1721
1722     PageAgent.reload();
1723     event.preventDefault();
1724 };
1725
1726 WebInspector._reloadPageClicked = function(event)
1727 {
1728     // Ignore cache when the shift key is pressed.
1729     PageAgent.reload(window.event ? window.event.shiftKey : false);
1730 };
1731
1732 WebInspector._reloadPageIgnoringCache = function(event)
1733 {
1734     if (!window.PageAgent)
1735         return;
1736
1737     PageAgent.reload(true);
1738     event.preventDefault();
1739 };
1740
1741 WebInspector._updateReloadToolbarButton = function()
1742 {
1743     if (!window.PageAgent) {
1744         this._reloadToolbarButton.hidden = true;
1745         return;
1746     }
1747
1748     this._reloadToolbarButton.hidden = false;
1749 };
1750
1751 WebInspector._updateDownloadToolbarButton = function()
1752 {
1753     // COMPATIBILITY (iOS 7): Page.archive did not exist yet.
1754     if (!window.PageAgent || !PageAgent.archive || this.debuggableType !== WebInspector.DebuggableType.Web) {
1755         this._downloadToolbarButton.hidden = true;
1756         return;
1757     }
1758
1759     if (this._downloadingPage) {
1760         this._downloadToolbarButton.enabled = false;
1761         return;
1762     }
1763
1764     this._downloadToolbarButton.enabled = this.canArchiveMainFrame();
1765 };
1766
1767 WebInspector._toggleInspectMode = function(event)
1768 {
1769     this.domTreeManager.inspectModeEnabled = !this.domTreeManager.inspectModeEnabled;
1770 };
1771
1772 WebInspector._showConsoleTab = function(event)
1773 {
1774     this.showConsoleTab();
1775 };
1776
1777 WebInspector._focusConsolePrompt = function(event)
1778 {
1779     this.quickConsole.prompt.focus();
1780 };
1781
1782 WebInspector._focusedContentBrowser = function()
1783 {
1784     if (this.tabBrowser.element.isSelfOrAncestor(this.currentFocusElement) || document.activeElement === document.body) {
1785         var tabContentView = this.tabBrowser.selectedTabContentView;
1786         if (tabContentView instanceof WebInspector.ContentBrowserTabContentView)
1787             return tabContentView.contentBrowser;
1788         return null;
1789     }
1790
1791     if (this.splitContentBrowser.element.isSelfOrAncestor(this.currentFocusElement)
1792         || (WebInspector.isShowingSplitConsole() && this.quickConsole.element.isSelfOrAncestor(this.currentFocusElement)))
1793         return this.splitContentBrowser;
1794
1795     return null;
1796 };
1797
1798 WebInspector._focusedContentView = function()
1799 {
1800     if (this.tabBrowser.element.isSelfOrAncestor(this.currentFocusElement) || document.activeElement === document.body) {
1801         var tabContentView = this.tabBrowser.selectedTabContentView;
1802         if (tabContentView instanceof WebInspector.ContentBrowserTabContentView)
1803             return tabContentView.contentBrowser.currentContentView;
1804         return tabContentView;
1805     }
1806
1807     if (this.splitContentBrowser.element.isSelfOrAncestor(this.currentFocusElement)
1808         || (WebInspector.isShowingSplitConsole() && this.quickConsole.element.isSelfOrAncestor(this.currentFocusElement)))
1809         return this.splitContentBrowser.currentContentView;
1810
1811     return null;
1812 };
1813
1814 WebInspector._focusedOrVisibleContentBrowser = function()
1815 {
1816     let focusedContentBrowser = this._focusedContentBrowser();
1817     if (focusedContentBrowser)
1818         return focusedContentBrowser;
1819
1820     var tabContentView = this.tabBrowser.selectedTabContentView;
1821     if (tabContentView instanceof WebInspector.ContentBrowserTabContentView)
1822         return tabContentView.contentBrowser;
1823
1824     return null;
1825 };
1826
1827 WebInspector._focusedOrVisibleContentView = function()
1828 {
1829     let focusedContentView = this._focusedContentView();
1830     if (focusedContentView)
1831         return focusedContentView;
1832
1833     var tabContentView = this.tabBrowser.selectedTabContentView;
1834     if (tabContentView instanceof WebInspector.ContentBrowserTabContentView)
1835         return tabContentView.contentBrowser.currentContentView;
1836     return tabContentView;
1837 };
1838
1839 WebInspector._beforecopy = function(event)
1840 {
1841     var selection = window.getSelection();
1842
1843     // If there is no selection, see if the focused element or focused ContentView can handle the copy event.
1844     if (selection.isCollapsed && !WebInspector.isEventTargetAnEditableField(event)) {
1845         var focusedCopyHandler = this.currentFocusElement && this.currentFocusElement.copyHandler;
1846         if (focusedCopyHandler && typeof focusedCopyHandler.handleBeforeCopyEvent === "function") {
1847             focusedCopyHandler.handleBeforeCopyEvent(event);
1848             if (event.defaultPrevented)
1849                 return;
1850         }
1851
1852         var focusedContentView = this._focusedContentView();
1853         if (focusedContentView && typeof focusedContentView.handleCopyEvent === "function") {
1854             event.preventDefault();
1855             return;
1856         }
1857
1858         return;
1859     }
1860
1861     if (selection.isCollapsed)
1862         return;
1863
1864     // Say we can handle it (by preventing default) to remove word break characters.
1865     event.preventDefault();
1866 };
1867
1868 WebInspector._find = function(event)
1869 {
1870     var contentBrowser = this._focusedOrVisibleContentBrowser();
1871     if (!contentBrowser || typeof contentBrowser.handleFindEvent !== "function")
1872         return;
1873     
1874     contentBrowser.handleFindEvent(event);
1875 };
1876
1877 WebInspector._save = function(event)
1878 {
1879     var contentView = this._focusedOrVisibleContentView();
1880     if (!contentView || !contentView.supportsSave)
1881         return;
1882
1883     WebInspector.saveDataToFile(contentView.saveData);
1884 };
1885
1886 WebInspector._saveAs = function(event)
1887 {
1888     var contentView = this._focusedOrVisibleContentView();
1889     if (!contentView || !contentView.supportsSave)
1890         return;
1891
1892     WebInspector.saveDataToFile(contentView.saveData, true);
1893 };
1894
1895 WebInspector._copy = function(event)
1896 {
1897     var selection = window.getSelection();
1898
1899     // If there is no selection, pass the copy event on to the focused element or focused ContentView.
1900     if (selection.isCollapsed && !WebInspector.isEventTargetAnEditableField(event)) {
1901         var focusedCopyHandler = this.currentFocusElement && this.currentFocusElement.copyHandler;
1902         if (focusedCopyHandler && typeof focusedCopyHandler.handleCopyEvent === "function") {
1903             focusedCopyHandler.handleCopyEvent(event);
1904             if (event.defaultPrevented)
1905                 return;
1906         }
1907
1908         var focusedContentView = this._focusedContentView();
1909         if (focusedContentView && typeof focusedContentView.handleCopyEvent === "function") {
1910             focusedContentView.handleCopyEvent(event);
1911             return;
1912         }
1913
1914         return;
1915     }
1916
1917     if (selection.isCollapsed)
1918         return;
1919
1920     // Remove word break characters from the selection before putting it on the pasteboard.
1921     var selectionString = selection.toString().removeWordBreakCharacters();
1922     event.clipboardData.setData("text/plain", selectionString);
1923     event.preventDefault();
1924 };
1925
1926 WebInspector._increaseZoom = function(event) {
1927     let currentZoom = InspectorFrontendHost.zoomFactor();
1928     InspectorFrontendHost.setZoomFactor(currentZoom + 0.2);
1929     event.preventDefault();
1930 };
1931
1932 WebInspector._decreaseZoom = function(event) {
1933     let currentZoom = InspectorFrontendHost.zoomFactor();
1934     InspectorFrontendHost.setZoomFactor(currentZoom - 0.2);
1935     event.preventDefault();
1936 };
1937
1938 WebInspector._resetZoom = function(event) {
1939     InspectorFrontendHost.setZoomFactor(1);
1940     event.preventDefault();
1941 };
1942
1943 WebInspector._showTabAtIndex = function(i, event) {
1944     if (i <= WebInspector.tabBar.tabBarItems.length)
1945         WebInspector.tabBar.selectedTabBarItem = i - 1;
1946
1947     event.preventDefault();
1948 }
1949
1950 WebInspector.elementDragStart = function(element, dividerDrag, elementDragEnd, event, cursor, eventTarget)
1951 {
1952     if (WebInspector._elementDraggingEventListener || WebInspector._elementEndDraggingEventListener)
1953         WebInspector.elementDragEnd(event);
1954
1955     if (element) {
1956         // Install glass pane
1957         if (WebInspector._elementDraggingGlassPane)
1958             WebInspector._elementDraggingGlassPane.remove();
1959
1960         var glassPane = document.createElement("div");
1961         glassPane.style.cssText = "position:absolute;top:0;bottom:0;left:0;right:0;opacity:0;z-index:1";
1962         glassPane.id = "glass-pane-for-drag";
1963         element.ownerDocument.body.appendChild(glassPane);
1964         WebInspector._elementDraggingGlassPane = glassPane;
1965     }
1966
1967     WebInspector._elementDraggingEventListener = dividerDrag;
1968     WebInspector._elementEndDraggingEventListener = elementDragEnd;
1969
1970     var targetDocument = event.target.ownerDocument;
1971
1972     WebInspector._elementDraggingEventTarget = eventTarget || targetDocument;
1973     WebInspector._elementDraggingEventTarget.addEventListener("mousemove", dividerDrag, true);
1974     WebInspector._elementDraggingEventTarget.addEventListener("mouseup", elementDragEnd, true);
1975
1976     targetDocument.body.style.cursor = cursor;
1977
1978     event.preventDefault();
1979 };
1980
1981 WebInspector.elementDragEnd = function(event)
1982 {
1983     WebInspector._elementDraggingEventTarget.removeEventListener("mousemove", WebInspector._elementDraggingEventListener, true);
1984     WebInspector._elementDraggingEventTarget.removeEventListener("mouseup", WebInspector._elementEndDraggingEventListener, true);
1985
1986     event.target.ownerDocument.body.style.removeProperty("cursor");
1987
1988     if (WebInspector._elementDraggingGlassPane)
1989         WebInspector._elementDraggingGlassPane.remove();
1990
1991     delete WebInspector._elementDraggingGlassPane;
1992     delete WebInspector._elementDraggingEventTarget;
1993     delete WebInspector._elementDraggingEventListener;
1994     delete WebInspector._elementEndDraggingEventListener;
1995
1996     event.preventDefault();
1997 };
1998
1999 WebInspector.createMessageTextView = function(message, isError)
2000 {
2001     var messageElement = document.createElement("div");
2002     messageElement.className = "message-text-view";
2003     if (isError)
2004         messageElement.classList.add("error");
2005
2006     messageElement.textContent = message;
2007
2008     return messageElement;
2009 };
2010
2011 WebInspector.createGoToArrowButton = function()
2012 {
2013     function stopPropagation(event)
2014     {
2015         event.stopPropagation()
2016     }
2017
2018     var button = document.createElement("button");
2019     button.addEventListener("mousedown", stopPropagation, true);
2020     button.className = "go-to-arrow";
2021     button.tabIndex = -1;
2022     return button;
2023 };
2024
2025 WebInspector.createSourceCodeLocationLink = function(sourceCodeLocation, dontFloat, useGoToArrowButton)
2026 {
2027     console.assert(sourceCodeLocation);
2028     if (!sourceCodeLocation)
2029         return null;
2030
2031     var linkElement = document.createElement("a");
2032     linkElement.className = "go-to-link";
2033     WebInspector.linkifyElement(linkElement, sourceCodeLocation);
2034     sourceCodeLocation.populateLiveDisplayLocationTooltip(linkElement);
2035
2036     if (useGoToArrowButton)
2037         linkElement.appendChild(WebInspector.createGoToArrowButton());
2038     else
2039         sourceCodeLocation.populateLiveDisplayLocationString(linkElement, "textContent");
2040
2041     if (dontFloat)
2042         linkElement.classList.add("dont-float");
2043
2044     return linkElement;
2045 };
2046
2047 WebInspector.linkifyLocation = function(url, lineNumber, columnNumber, className)
2048 {
2049     var sourceCode = WebInspector.sourceCodeForURL(url);
2050
2051     if (!sourceCode) {
2052         var anchor = document.createElement("a");
2053         anchor.href  = url;
2054         anchor.lineNumber = lineNumber;
2055         if (className)
2056             anchor.className = className;
2057         anchor.append(WebInspector.displayNameForURL(url) + ":" + lineNumber);
2058         return anchor;
2059     }
2060
2061     var sourceCodeLocation = sourceCode.createSourceCodeLocation(lineNumber, columnNumber);
2062     var linkElement = WebInspector.createSourceCodeLocationLink(sourceCodeLocation, true);
2063     if (className)
2064         linkElement.classList.add(className);
2065     return linkElement;
2066 };
2067
2068 WebInspector.linkifyElement = function(linkElement, sourceCodeLocation) {
2069     console.assert(sourceCodeLocation);
2070
2071     function showSourceCodeLocation(event)
2072     {
2073         event.stopPropagation();
2074         event.preventDefault();
2075
2076         if (event.metaKey)
2077             this.showOriginalUnformattedSourceCodeLocation(sourceCodeLocation);
2078         else
2079             this.showSourceCodeLocation(sourceCodeLocation);
2080     }
2081
2082     linkElement.addEventListener("click", showSourceCodeLocation.bind(this));
2083 };
2084
2085 WebInspector.sourceCodeForURL = function(url) {
2086     var sourceCode = WebInspector.frameResourceManager.resourceForURL(url);
2087     if (!sourceCode) {
2088         sourceCode = WebInspector.debuggerManager.scriptsForURL(url)[0];
2089         if (sourceCode)
2090             sourceCode = sourceCode.resource || sourceCode;
2091     }
2092     return sourceCode || null;
2093 };
2094
2095 WebInspector.linkifyURLAsNode = function(url, linkText, classes)
2096 {
2097     if (!linkText)
2098         linkText = url;
2099
2100     classes = (classes ? classes + " " : "");
2101
2102     var a = document.createElement("a");
2103     a.href = url;
2104     a.className = classes;
2105
2106     a.textContent = linkText;
2107     a.style.maxWidth = "100%";
2108
2109     return a;
2110 };
2111
2112 WebInspector.linkifyStringAsFragmentWithCustomLinkifier = function(string, linkifier)
2113 {
2114     var container = document.createDocumentFragment();
2115     var linkStringRegEx = /(?:[a-zA-Z][a-zA-Z0-9+.-]{2,}:\/\/|www\.)[\w$\-_+*'=\|\/\\(){}[\]%@&#~,:;.!?]{2,}[\w$\-_+*=\|\/\\({%@&#~]/;
2116     var lineColumnRegEx = /:(\d+)(:(\d+))?$/;
2117
2118     while (string) {
2119         var linkString = linkStringRegEx.exec(string);
2120         if (!linkString)
2121             break;
2122
2123         linkString = linkString[0];
2124         var linkIndex = string.indexOf(linkString);
2125         var nonLink = string.substring(0, linkIndex);
2126         container.append(nonLink);
2127
2128         var title = linkString;
2129         var realURL = (linkString.startsWith("www.") ? "http://" + linkString : linkString);
2130         var lineColumnMatch = lineColumnRegEx.exec(realURL);
2131         if (lineColumnMatch)
2132             realURL = realURL.substring(0, realURL.length - lineColumnMatch[0].length);
2133
2134         var lineNumber;
2135         if (lineColumnMatch)
2136             lineNumber = parseInt(lineColumnMatch[1]) - 1;
2137
2138         var linkNode = linkifier(title, realURL, lineNumber);
2139         container.appendChild(linkNode);
2140         string = string.substring(linkIndex + linkString.length, string.length);
2141     }
2142
2143     if (string)
2144         container.append(string);
2145
2146     return container;
2147 };
2148
2149 WebInspector.linkifyStringAsFragment = function(string)
2150 {
2151     function linkifier(title, url, lineNumber)
2152     {
2153         var urlNode = WebInspector.linkifyURLAsNode(url, title, undefined);
2154         if (lineNumber !== undefined)
2155             urlNode.lineNumber = lineNumber;
2156
2157         return urlNode;
2158     }
2159
2160     return WebInspector.linkifyStringAsFragmentWithCustomLinkifier(string, linkifier);
2161 };
2162
2163 WebInspector.createResourceLink = function(resource, className)
2164 {
2165     function handleClick(event)
2166     {
2167         event.stopPropagation();
2168         event.preventDefault();
2169
2170         WebInspector.showRepresentedObject(resource);
2171     }
2172
2173     let linkNode = document.createElement("a");
2174     linkNode.classList.add("resource-link", className);
2175     linkNode.title = resource.url;
2176     linkNode.textContent = (resource.urlComponents.lastPathComponent || resource.url).insertWordBreakCharacters();
2177     linkNode.addEventListener("click", handleClick.bind(this));
2178     return linkNode;
2179 }
2180
2181 WebInspector._undoKeyboardShortcut = function(event)
2182 {
2183     if (!this.isEditingAnyField() && !this.isEventTargetAnEditableField(event)) {
2184         this.undo();
2185         event.preventDefault();
2186     }
2187 };
2188
2189 WebInspector._redoKeyboardShortcut = function(event)
2190 {
2191     if (!this.isEditingAnyField() && !this.isEventTargetAnEditableField(event)) {
2192         this.redo();
2193         event.preventDefault();
2194     }
2195 };
2196
2197 WebInspector.undo = function()
2198 {
2199     DOMAgent.undo();
2200 };
2201
2202 WebInspector.redo = function()
2203 {
2204     DOMAgent.redo();
2205 };
2206
2207 WebInspector.highlightRangesWithStyleClass = function(element, resultRanges, styleClass, changes)
2208 {
2209     changes = changes || [];
2210     var highlightNodes = [];
2211     var lineText = element.textContent;
2212     var ownerDocument = element.ownerDocument;
2213     var textNodeSnapshot = ownerDocument.evaluate(".//text()", element, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
2214
2215     var snapshotLength = textNodeSnapshot.snapshotLength;
2216     if (snapshotLength === 0)
2217         return highlightNodes;
2218
2219     var nodeRanges = [];
2220     var rangeEndOffset = 0;
2221     for (var i = 0; i < snapshotLength; ++i) {
2222         var range = {};
2223         range.offset = rangeEndOffset;
2224         range.length = textNodeSnapshot.snapshotItem(i).textContent.length;
2225         rangeEndOffset = range.offset + range.length;
2226         nodeRanges.push(range);
2227     }
2228
2229     var startIndex = 0;
2230     for (var i = 0; i < resultRanges.length; ++i) {
2231         var startOffset = resultRanges[i].offset;
2232         var endOffset = startOffset + resultRanges[i].length;
2233
2234         while (startIndex < snapshotLength && nodeRanges[startIndex].offset + nodeRanges[startIndex].length <= startOffset)
2235             startIndex++;
2236         var endIndex = startIndex;
2237         while (endIndex < snapshotLength && nodeRanges[endIndex].offset + nodeRanges[endIndex].length < endOffset)
2238             endIndex++;
2239         if (endIndex === snapshotLength)
2240             break;
2241
2242         var highlightNode = ownerDocument.createElement("span");
2243         highlightNode.className = styleClass;
2244         highlightNode.textContent = lineText.substring(startOffset, endOffset);
2245
2246         var lastTextNode = textNodeSnapshot.snapshotItem(endIndex);
2247         var lastText = lastTextNode.textContent;
2248         lastTextNode.textContent = lastText.substring(endOffset - nodeRanges[endIndex].offset);
2249         changes.push({ node: lastTextNode, type: "changed", oldText: lastText, newText: lastTextNode.textContent });
2250
2251         if (startIndex === endIndex) {
2252             lastTextNode.parentElement.insertBefore(highlightNode, lastTextNode);
2253             changes.push({ node: highlightNode, type: "added", nextSibling: lastTextNode, parent: lastTextNode.parentElement });
2254             highlightNodes.push(highlightNode);
2255
2256             var prefixNode = ownerDocument.createTextNode(lastText.substring(0, startOffset - nodeRanges[startIndex].offset));
2257             lastTextNode.parentElement.insertBefore(prefixNode, highlightNode);
2258             changes.push({ node: prefixNode, type: "added", nextSibling: highlightNode, parent: lastTextNode.parentElement });
2259         } else {
2260             var firstTextNode = textNodeSnapshot.snapshotItem(startIndex);
2261             var firstText = firstTextNode.textContent;
2262             var anchorElement = firstTextNode.nextSibling;
2263
2264             firstTextNode.parentElement.insertBefore(highlightNode, anchorElement);
2265             changes.push({ node: highlightNode, type: "added", nextSibling: anchorElement, parent: firstTextNode.parentElement });
2266             highlightNodes.push(highlightNode);
2267
2268             firstTextNode.textContent = firstText.substring(0, startOffset - nodeRanges[startIndex].offset);
2269             changes.push({ node: firstTextNode, type: "changed", oldText: firstText, newText: firstTextNode.textContent });
2270
2271             for (var j = startIndex + 1; j < endIndex; j++) {
2272                 var textNode = textNodeSnapshot.snapshotItem(j);
2273                 var text = textNode.textContent;
2274                 textNode.textContent = "";
2275                 changes.push({ node: textNode, type: "changed", oldText: text, newText: textNode.textContent });
2276             }
2277         }
2278         startIndex = endIndex;
2279         nodeRanges[startIndex].offset = endOffset;
2280         nodeRanges[startIndex].length = lastTextNode.textContent.length;
2281
2282     }
2283     return highlightNodes;
2284 };
2285
2286 WebInspector.revertDomChanges = function(domChanges)
2287 {
2288     for (var i = domChanges.length - 1; i >= 0; --i) {
2289         var entry = domChanges[i];
2290         switch (entry.type) {
2291         case "added":
2292             entry.node.remove();
2293             break;
2294         case "changed":
2295             entry.node.textContent = entry.oldText;
2296             break;
2297         }
2298     }
2299 };
2300
2301 WebInspector.archiveMainFrame = function()
2302 {
2303     this._downloadingPage = true;
2304     this._updateDownloadToolbarButton();
2305
2306     PageAgent.archive(function(error, data) {
2307         this._downloadingPage = false;
2308         this._updateDownloadToolbarButton();
2309
2310         if (error)
2311             return;
2312
2313         var mainFrame = WebInspector.frameResourceManager.mainFrame;
2314         var archiveName = mainFrame.mainResource.urlComponents.host || mainFrame.mainResource.displayName || "Archive";
2315         var url = "web-inspector:///" + encodeURI(archiveName) + ".webarchive";
2316
2317         InspectorFrontendHost.save(url, data, true, true);
2318     }.bind(this));
2319 };
2320
2321 WebInspector.canArchiveMainFrame = function()
2322 {
2323     // COMPATIBILITY (iOS 7): Page.archive did not exist yet.
2324     if (!PageAgent.archive || this.debuggableType !== WebInspector.DebuggableType.Web)
2325         return false;
2326
2327     if (!WebInspector.frameResourceManager.mainFrame || !WebInspector.frameResourceManager.mainFrame.mainResource)
2328         return;
2329
2330     return WebInspector.Resource.typeFromMIMEType(WebInspector.frameResourceManager.mainFrame.mainResource.mimeType) === WebInspector.Resource.Type.Document;
2331 };
2332
2333 WebInspector.addWindowKeydownListener = function(listener)
2334 {
2335     if (typeof listener.handleKeydownEvent !== "function")
2336         return;
2337
2338     this._windowKeydownListeners.push(listener);
2339
2340     this._updateWindowKeydownListener();
2341 };
2342
2343 WebInspector.removeWindowKeydownListener = function(listener)
2344 {
2345     this._windowKeydownListeners.remove(listener);
2346
2347     this._updateWindowKeydownListener();
2348 };
2349
2350 WebInspector._updateWindowKeydownListener = function()
2351 {
2352     if (this._windowKeydownListeners.length > 0)
2353         window.addEventListener("keydown", WebInspector._sharedWindowKeydownListener, true);
2354     else
2355         window.removeEventListener("keydown", WebInspector._sharedWindowKeydownListener, true);
2356 };
2357
2358 WebInspector._sharedWindowKeydownListener = function(event)
2359 {
2360     for (var i = WebInspector._windowKeydownListeners.length - 1; i >= 0; --i) {
2361         if (WebInspector._windowKeydownListeners[i].handleKeydownEvent(event)) {
2362             event.stopImmediatePropagation();
2363             event.preventDefault();
2364             break;
2365         }
2366     }
2367 };