From c0491f79b8ef7424564d1c2d204748840a30b3a0 Mon Sep 17 00:00:00 2001 From: Antonin Hildebrand Date: Thu, 18 Aug 2016 00:15:49 +0200 Subject: [PATCH] squash 'resources/unpacked/devtools' changes from da1ed46..52c36e6 52c36e6 DevTools: Refactor Profiler domain interface 5b5a787 DevTools: Use png icon for bezier editor b95270c DevTools: Repick execution context when frames are loaded d2cdcdc [DevTools] Rename entities in js_protocol, remove deprecated ones. f75d989 DevTools: do not load workers from the cloud in the debug mode. 2fb9635 DevTools: follow up to the sources views, make setting screen apear, make shortcuts a simple view. f0784e9 DevTools: migrate sources panel sidebar to views. 077fee1 DevTools: Standardize box shadows 2673630 Revert of [DevTools] Rename entities in js_protocol, remove deprecated ones. (patchset #1 id:1 of https://codereview.chromium.org/2249743002/ ) git-subtree-dir: resources/unpacked/devtools git-subtree-split: 52c36e6874d069061d629be8032ff691e4103457 --- devtools.gypi | 1 + front_end/Images/smallIcons.png | Bin 1823 -> 1907 bytes front_end/Images/smallIcons_2x.png | Bin 4095 -> 4278 bytes front_end/Images/src/optimize_png.hashes | 2 +- front_end/Images/src/smallIcons.svg | 13 ++ front_end/Images/src/svg2png.hashes | 2 +- .../components/BreakpointsSidebarPaneBase.js | 17 -- .../components/DOMBreakpointsSidebarPane.js | 24 ++- .../components/ExecutionContextSelector.js | 36 +++- front_end/elements/ColorSwatchPopoverIcon.js | 30 +-- front_end/elements/elementsPanel.css | 24 --- front_end/elements/elementsTreeOutline.css | 10 +- front_end/formatter_worker.json | 2 +- front_end/sdk/CPUProfileDataModel.js | 27 ++- front_end/sdk/ResourceTreeModel.js | 2 + front_end/sdk/RuntimeModel.js | 8 +- front_end/sdk/TargetManager.js | 8 + front_end/settings/SettingsScreen.js | 9 +- front_end/sources/CallStackSidebarPane.js | 131 ++++++++----- .../EventListenerBreakpointsSidebarPane.js | 2 +- .../JavaScriptBreakpointsSidebarPane.js | 78 +++++--- front_end/sources/JavaScriptSourceFrame.js | 73 +------ front_end/sources/ScopeChainSidebarPane.js | 27 ++- front_end/sources/SourcesPanel.js | 181 ++++++------------ front_end/sources/TabbedEditorContainer.js | 4 + front_end/sources/ThreadsSidebarPane.js | 6 +- front_end/sources/UISourceCodeFrame.js | 1 - .../sources/WatchExpressionsSidebarPane.js | 101 +++++----- .../sources/XHRBreakpointsSidebarPane.js | 17 +- front_end/sources/module.json | 87 ++++++++- front_end/sources/uiList.css | 3 + front_end/timeline/timelineStatusDialog.css | 5 +- front_end/ui/ColorSwatch.js | 13 ++ front_end/ui/Context.js | 16 ++ front_end/ui/View.js | 30 +-- front_end/ui/bezierSwatch.css | 35 ++++ front_end/ui/dialog.css | 5 +- front_end/ui/inspectorCommon.css | 5 +- front_end/ui/module.json | 1 + front_end/ui/suggestBox.css | 4 +- front_end/ui/textPrompt.css | 5 +- front_end/ui_lazy/filteredListWidget.css | 2 +- front_end/ui_lazy/flameChart.css | 4 +- 43 files changed, 587 insertions(+), 464 deletions(-) create mode 100644 front_end/ui/bezierSwatch.css diff --git a/devtools.gypi b/devtools.gypi index 448a98e960..3e2081b613 100644 --- a/devtools.gypi +++ b/devtools.gypi @@ -237,6 +237,7 @@ 'front_end/emulation/TouchModel.js', ], 'devtools_ui_js_files': [ + 'front_end/ui/bezierSwatch.css', 'front_end/ui/checkboxTextLabel.css', 'front_end/ui/closeButton.css', 'front_end/ui/colorSwatch.css', diff --git a/front_end/Images/smallIcons.png b/front_end/Images/smallIcons.png index b493ffa9203fe82971bb02e5f99814875c266c8a..b97404ae419a8cbf3bf49278a7536481341fd210 100644 GIT binary patch delta 363 zcmV-x0hIoq4)YF>BLW9Hu_f~bf5sjh2mk;8008;FHiD|Es;a80s?wfW0yhvvQMBHa zP05=w*A`{jn|fC!FM@B^n|Ku_UGl3-s?6Np%zRx+vUu;z2`oHyKAV~Z`22wcuxl6* zS<-dAtyJ~;)~}ZOS1(Ynbjf5gZK+ghslq<_{1x^L)5`m z>RZ1#>RZ3Q>|MJ-z2cKhCWj#XB{<6G^HmNIzY$DPe47Wtw}^-V`R_GNn<%zk_x42# z#5cfw@A~ybkv;tcguhRx(*|g_POU9o!A5JqtAwD4^s@pr)js8;tnz&XXI_-+;dTuEL?wUU3A zb9_#9+&6j(iOTEKIilca9jMnR(C!000000000000000=iFWtMN{U<((%LI^5NZ-dDLh$ zrfRj?p7{V|GMV8*p>V0~K9|d_S)XRk?}wL;pDvejKFy!s1seE?w%5hu$DKY``W+4U*LuC4Xba3IAfL}qXyC`% zzMOL@>(lJP^MnR{tik`ac=FKG|1{838uVW}#-≠(sD+=-$oG(EtWMK&k^!+yb;S d0btO416a*KMCruQi~s-t2>?k&PDHLkV1lUZi2?us diff --git a/front_end/Images/smallIcons_2x.png b/front_end/Images/smallIcons_2x.png index 87e18d364f87415518513af82818621e7207a8cb..77df58f4c7cf94149b8c3c759af03b0e5f503768 100644 GIT binary patch delta 614 zcmew_zfEz1GLt~Z!E_k7}khA}lJ?~e^hJot31#<1IEfebmMw~xzz9P zH)hrb*VosdJI^grGuQgZ{u1fw8|%eSf5^SdA!xih;mh_%r6#}pC#swLivDON^>_J+ z_QE&CHoeFGnQlw7e=+;|H*WU-*3LKjBY#9bE;zEfB+9(_gKQ1^e~x1h)6X8NW*1b;Om-%}3Hokw>I&L?mc(&c|4Nr@k_A+%Q-@ni) z5xz&8zwNnv?TqyLJs(dUeD8Sk-M88;O*8w$K3wGD`-x+4wip>FdWdE<|5n3Q9+wu6{1-oD!M#V}9%4=$B^xjVQ zV?6dRQ|gjd?5lz|^Oq^Et-rLi@A$utDHTuIp`{Mm2h3@;m$eS(R@A;VTSlt}6 zvp4K@9G>_5v#DL{RzF)!wim{#FMOk(8O>Y&_qvJx0sBKQ + + + + + diff --git a/front_end/Images/src/svg2png.hashes b/front_end/Images/src/svg2png.hashes index bbc5d067b9..a2372d0515 100644 --- a/front_end/Images/src/svg2png.hashes +++ b/front_end/Images/src/svg2png.hashes @@ -2,7 +2,7 @@ "resourceGlyphs.svg": "8e1947b1fa4aac49cbc081f85f44d412", "breakpointConditional.svg": "4cf90210b2af2ed84db2f60b07bcde28", "errorWave.svg": "e183fa242a22ed4784a92f6becbc2c45", - "smallIcons.svg": "502937c3d719c885acb5c18184ac3eca", + "smallIcons.svg": "8a0b5c6bec69c3f17f71fb51245e00d1", "settingsListRemove.svg": "ce9e7c5c5cdaef28e6ee51d9478d5485", "toolbarButtonGlyphs.svg": "195b979b5677122cf2f3b65e8a4d657e", "breakpoint.svg": "69cd92d807259c022791112809b97799", diff --git a/front_end/components/BreakpointsSidebarPaneBase.js b/front_end/components/BreakpointsSidebarPaneBase.js index 949a68d240..5c481cbdad 100644 --- a/front_end/components/BreakpointsSidebarPaneBase.js +++ b/front_end/components/BreakpointsSidebarPaneBase.js @@ -45,9 +45,6 @@ WebInspector.BreakpointsSidebarPaneBase = function() this.emptyElement.textContent = WebInspector.UIString("No Breakpoints"); this.element.appendChild(this.emptyElement); - WebInspector.targetManager.addModelListener(WebInspector.DebuggerModel, WebInspector.DebuggerModel.Events.DebuggerPaused, this._update, this); - WebInspector.targetManager.addModelListener(WebInspector.DebuggerModel, WebInspector.DebuggerModel.Events.DebuggerResumed, this._update, this); - WebInspector.context.addFlavorChangeListener(WebInspector.Target, this._update, this); } WebInspector.BreakpointsSidebarPaneBase.prototype = { @@ -94,19 +91,5 @@ WebInspector.BreakpointsSidebarPaneBase.prototype = { } }, - _update: function() - { - var target = WebInspector.context.flavor(WebInspector.Target); - var debuggerModel = WebInspector.DebuggerModel.fromTarget(target); - var details = debuggerModel ? debuggerModel.debuggerPausedDetails() : null; - this.highlightDetails(details); - }, - - /** - * @param {?WebInspector.DebuggerPausedDetails} details - * @protected - */ - highlightDetails: function(details) { }, - __proto__: WebInspector.VBox.prototype } diff --git a/front_end/components/DOMBreakpointsSidebarPane.js b/front_end/components/DOMBreakpointsSidebarPane.js index 6c38cbe871..fe42463838 100644 --- a/front_end/components/DOMBreakpointsSidebarPane.js +++ b/front_end/components/DOMBreakpointsSidebarPane.js @@ -31,6 +31,7 @@ /** * @constructor * @extends {WebInspector.BreakpointsSidebarPaneBase} + * @implements {WebInspector.ContextFlavorListener} */ WebInspector.DOMBreakpointsSidebarPane = function() { @@ -55,21 +56,20 @@ WebInspector.DOMBreakpointsSidebarPane = function() this._contextMenuLabels[this._breakpointTypes.AttributeModified] = WebInspector.UIString.capitalize("Attributes ^modifications"); this._contextMenuLabels[this._breakpointTypes.NodeRemoved] = WebInspector.UIString.capitalize("Node ^removal"); - WebInspector.targetManager.addEventListener(WebInspector.TargetManager.Events.InspectedURLChanged, this._inspectedURLChanged, this); WebInspector.targetManager.addModelListener(WebInspector.DOMModel, WebInspector.DOMModel.Events.NodeRemoved, this._nodeRemoved, this); + WebInspector.targetManager.addEventListener(WebInspector.TargetManager.Events.InspectedURLChanged, this._inspectedURLChanged, this); + this._inspectedURL = WebInspector.targetManager.inspectedURL(); + this._update(); } WebInspector.DOMBreakpointsSidebarPane.Marker = "breakpoint-marker"; WebInspector.DOMBreakpointsSidebarPane.prototype = { - _inspectedURLChanged: function(event) + _inspectedURLChanged: function() { - var target = /** @type {!WebInspector.Target} */ (event.data); - if (target !== WebInspector.targetManager.mainTarget()) - return; this._breakpointElements = {}; this.reset(); - this._inspectedURL = target.inspectedURL().removeURLFragment(); + this._inspectedURL = WebInspector.targetManager.inspectedURL(); }, /** @@ -322,10 +322,16 @@ WebInspector.DOMBreakpointsSidebarPane.prototype = { /** * @override - * @param {?WebInspector.DebuggerPausedDetails} details + * @param {?Object} object */ - highlightDetails: function(details) + flavorChanged: function(object) + { + this._update(); + }, + + _update: function() { + var details = WebInspector.context.flavor(WebInspector.DebuggerPausedDetails); if (!details || details.reason !== WebInspector.DebuggerModel.BreakReason.DOM) { if (this._highlightedElement) { this._highlightedElement.classList.remove("breakpoint-hit"); @@ -338,7 +344,7 @@ WebInspector.DOMBreakpointsSidebarPane.prototype = { var element = this._breakpointElements[breakpointId]; if (!element) return; - WebInspector.viewManager.revealViewWithWidget(this); + WebInspector.viewManager.showView("sources.domBreakpoints"); element.classList.add("breakpoint-hit"); this._highlightedElement = element; }, diff --git a/front_end/components/ExecutionContextSelector.js b/front_end/components/ExecutionContextSelector.js index 932dcbc00c..b125843899 100644 --- a/front_end/components/ExecutionContextSelector.js +++ b/front_end/components/ExecutionContextSelector.js @@ -16,6 +16,7 @@ WebInspector.ExecutionContextSelector = function(targetManager, context) targetManager.addModelListener(WebInspector.RuntimeModel, WebInspector.RuntimeModel.Events.ExecutionContextCreated, this._onExecutionContextCreated, this); targetManager.addModelListener(WebInspector.RuntimeModel, WebInspector.RuntimeModel.Events.ExecutionContextDestroyed, this._onExecutionContextDestroyed, this); + targetManager.addModelListener(WebInspector.RuntimeModel, WebInspector.RuntimeModel.Events.ExecutionContextOrderChanged, this._onExecutionContextOrderChanged, this); this._targetManager = targetManager; this._context = context; } @@ -141,12 +142,7 @@ WebInspector.ExecutionContextSelector.prototype = { */ _onExecutionContextCreated: function(event) { - var executionContext = /** @type {!WebInspector.ExecutionContext} */ (event.data); - if (!this._context.flavor(WebInspector.ExecutionContext) || this._shouldSwitchToContext(executionContext)) { - this._ignoreContextChanged = true; - this._context.setFlavor(WebInspector.ExecutionContext, executionContext); - this._ignoreContextChanged = false; - } + this._switchContextIfNecessary(/** @type {!WebInspector.ExecutionContext} */ (event.data)); }, /** @@ -159,6 +155,34 @@ WebInspector.ExecutionContextSelector.prototype = { this._currentExecutionContextGone(); }, + /** + * @param {!WebInspector.Event} event + */ + _onExecutionContextOrderChanged: function(event) + { + var runtimeModel = /** @type {!WebInspector.RuntimeModel} */ (event.data); + var executionContexts = runtimeModel.executionContexts(); + for (var i = 0; i < executionContexts.length; i++) { + if (this._switchContextIfNecessary(executionContexts[i])) + break; + } + }, + + /** + * @param {!WebInspector.ExecutionContext} executionContext + * @return {boolean} + */ + _switchContextIfNecessary: function(executionContext) + { + if (!this._context.flavor(WebInspector.ExecutionContext) || this._shouldSwitchToContext(executionContext)) { + this._ignoreContextChanged = true; + this._context.setFlavor(WebInspector.ExecutionContext, executionContext); + this._ignoreContextChanged = false; + return true; + } + return false; + }, + _currentExecutionContextGone: function() { var targets = this._targetManager.targets(WebInspector.Target.Capability.JS); diff --git a/front_end/elements/ColorSwatchPopoverIcon.js b/front_end/elements/ColorSwatchPopoverIcon.js index ccc42c2023..49b4b8ce76 100644 --- a/front_end/elements/ColorSwatchPopoverIcon.js +++ b/front_end/elements/ColorSwatchPopoverIcon.js @@ -12,7 +12,14 @@ WebInspector.BezierPopoverIcon = function(treeElement, swatchPopoverHelper, text { this._treeElement = treeElement; this._swatchPopoverHelper = swatchPopoverHelper; - this._createDOM(text); + + this._element = createElement("span"); + this._iconElement = WebInspector.BezierSwatch.create(); + this._iconElement.title = WebInspector.UIString("Open cubic bezier editor"); + this._iconElement.addEventListener("click", this._iconClick.bind(this), false); + this._element.appendChild(this._iconElement); + this._bezierValueElement = this._element.createChild("span"); + this._bezierValueElement.textContent = text; this._boundBezierChanged = this._bezierChanged.bind(this); this._boundOnScroll = this._onScroll.bind(this); @@ -27,27 +34,6 @@ WebInspector.BezierPopoverIcon.prototype = { return this._element; }, - /** - * @param {string} text - */ - _createDOM: function(text) - { - this._element = createElement("nobr"); - - this._iconElement = this._element.createChild("div", "popover-icon bezier-icon"); - this._iconElement.title = WebInspector.UIString("Open cubic bezier editor"); - var svg = this._iconElement.createSVGChild("svg"); - svg.setAttribute("height", 10); - svg.setAttribute("width", 10); - this._iconElement.addEventListener("click", this._iconClick.bind(this), false); - var g = svg.createSVGChild("g"); - var path = g.createSVGChild("path"); - path.setAttribute("d", "M2,8 C2,3 8,7 8,2"); - - this._bezierValueElement = this._element.createChild("span"); - this._bezierValueElement.textContent = text; - }, - /** * @param {!Event} event */ diff --git a/front_end/elements/elementsPanel.css b/front_end/elements/elementsPanel.css index 15ec141591..b0b14ca0fe 100644 --- a/front_end/elements/elementsPanel.css +++ b/front_end/elements/elementsPanel.css @@ -633,30 +633,6 @@ white-space: pre; } -.popover-icon { - margin-left: 1px; - margin-right: 2px; - width: 10px; - height: 10px; - position: relative; - top: 1px; - display: inline-block; - line-height: 1px; - -webkit-user-select: none; -} - -.bezier-icon { - background-color: #9C27B0; - border-radius: 2px; -} - -.bezier-icon path { - stroke: white; - stroke-width: 1.5; - stroke-linecap: square; - fill: none; -} - li.child-editing .styles-clipboard-only { display: none; } diff --git a/front_end/elements/elementsTreeOutline.css b/front_end/elements/elementsTreeOutline.css index 8a2094a2e7..fe6b2b78cf 100644 --- a/front_end/elements/elementsTreeOutline.css +++ b/front_end/elements/elementsTreeOutline.css @@ -174,8 +174,9 @@ } .CodeMirror { - box-shadow: rgba(0, 0, 0, .5) 3px 3px 4px; - outline: 1px solid rgb(66%, 66%, 66%) !important; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), + 0 2px 4px rgba(0, 0, 0, 0.2), + 0 2px 6px rgba(0, 0, 0, 0.1); background-color: white; } @@ -194,8 +195,9 @@ button, input, select { .editing { -webkit-user-select: text; - box-shadow: rgba(0, 0, 0, .5) 3px 3px 4px; - outline: 1px solid rgb(66%, 66%, 66%) !important; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), + 0 2px 4px rgba(0, 0, 0, 0.2), + 0 2px 6px rgba(0, 0, 0, 0.1); background-color: white; -webkit-user-modify: read-write-plaintext-only; text-overflow: clip !important; diff --git a/front_end/formatter_worker.json b/front_end/formatter_worker.json index a9fd16559b..272184c74a 100644 --- a/front_end/formatter_worker.json +++ b/front_end/formatter_worker.json @@ -1,7 +1,7 @@ { "modules": [ { "name": "formatter_worker", "type": "autostart" }, - { "name": "gonzales", "type": "remote" } + { "name": "gonzales", "type": "remoteInRelease" } ], "has_html": false diff --git a/front_end/sdk/CPUProfileDataModel.js b/front_end/sdk/CPUProfileDataModel.js index 26ed0e3eaa..0c98355352 100644 --- a/front_end/sdk/CPUProfileDataModel.js +++ b/front_end/sdk/CPUProfileDataModel.js @@ -42,7 +42,7 @@ WebInspector.CPUProfileDataModel = function(profile) this.profileStartTime = profile.startTime * 1000; this.profileEndTime = profile.endTime * 1000; this.totalHitCount = 0; - this.profileHead = this._translateProfileTree(profile.head); + this.profileHead = this._translateProfileTree(profile.nodes); WebInspector.ProfileTreeModel.call(this, this.profileHead); this._extractMetaNodes(); if (this.samples) { @@ -54,19 +54,11 @@ WebInspector.CPUProfileDataModel = function(profile) WebInspector.CPUProfileDataModel.prototype = { /** - * @param {!ProfilerAgent.CPUProfileNode} root + * @param {!Array} nodes * @return {!WebInspector.CPUProfileNode} */ - _translateProfileTree: function(root) + _translateProfileTree: function(nodes) { - /** - * @param {!ProfilerAgent.CPUProfileNode} node - * @return {number} - */ - function computeHitCountForSubtree(node) - { - return node.children.reduce((acc, node) => acc + computeHitCountForSubtree(node), node.hitCount); - } /** * @param {!ProfilerAgent.CPUProfileNode} node * @return {boolean} @@ -77,14 +69,21 @@ WebInspector.CPUProfileDataModel.prototype = { return !!node.callFrame.url && node.callFrame.url.startsWith("native "); return !!node.url && node.url.startsWith("native "); } - this.totalHitCount = computeHitCountForSubtree(root); + /** @type {!Map} */ + var nodeByIdMap = new Map(); + for (var i = 0; i < nodes.length; ++i) { + var node = nodes[i]; + nodeByIdMap.set(node.id, node); + } + this.totalHitCount = nodes.reduce((acc, node) => acc + node.hitCount, 0); var sampleTime = (this.profileEndTime - this.profileStartTime) / this.totalHitCount; var keepNatives = !!WebInspector.moduleSetting("showNativeFunctionsInJSProfile").get(); + var root = nodes[0]; /** @type {!Map} */ var idMap = new Map([[root.id, root.id]]); var resultRoot = new WebInspector.CPUProfileNode(root, sampleTime); var parentNodeStack = root.children.map(() => resultRoot); - var sourceNodeStack = root.children; + var sourceNodeStack = root.children.map(id => nodeByIdMap.get(id)); while (sourceNodeStack.length) { var parentNode = parentNodeStack.pop(); var sourceNode = sourceNodeStack.pop(); @@ -97,7 +96,7 @@ WebInspector.CPUProfileDataModel.prototype = { } idMap.set(sourceNode.id, parentNode.id); parentNodeStack.push.apply(parentNodeStack, sourceNode.children.map(() => parentNode)); - sourceNodeStack.push.apply(sourceNodeStack, sourceNode.children); + sourceNodeStack.push.apply(sourceNodeStack, sourceNode.children.map(id => nodeByIdMap.get(id))); } if (this.samples) this.samples = this.samples.map(id => idMap.get(id)); diff --git a/front_end/sdk/ResourceTreeModel.js b/front_end/sdk/ResourceTreeModel.js index 16ae069156..92f37ac404 100644 --- a/front_end/sdk/ResourceTreeModel.js +++ b/front_end/sdk/ResourceTreeModel.js @@ -55,6 +55,7 @@ WebInspector.ResourceTreeModel = function(target, networkManager, securityOrigin this._pendingReloadOptions = null; this._reloadSuspensionCount = 0; + this._fireExecutionContextOrderChanged = target.runtimeModel.fireExecutionContextOrderChanged.bind(target.runtimeModel); target.runtimeModel.setExecutionContextComparator(this._executionContextComparator.bind(this)); } @@ -132,6 +133,7 @@ WebInspector.ResourceTreeModel.prototype = { this.target().setInspectedURL(mainFramePayload.frame.url); } this._cachedResourcesProcessed = true; + this._fireExecutionContextOrderChanged(); this.dispatchEventToListeners(WebInspector.ResourceTreeModel.EventTypes.CachedResourcesLoaded); }, diff --git a/front_end/sdk/RuntimeModel.js b/front_end/sdk/RuntimeModel.js index b1b20e18ed..3dfd8dafb0 100644 --- a/front_end/sdk/RuntimeModel.js +++ b/front_end/sdk/RuntimeModel.js @@ -54,7 +54,8 @@ WebInspector.RuntimeModel = function(target) WebInspector.RuntimeModel.Events = { ExecutionContextCreated: "ExecutionContextCreated", ExecutionContextDestroyed: "ExecutionContextDestroyed", - ExecutionContextChanged: "ExecutionContextChanged" + ExecutionContextChanged: "ExecutionContextChanged", + ExecutionContextOrderChanged: "ExecutionContextOrderChanged" } WebInspector.RuntimeModel._privateScript = "private script"; @@ -133,6 +134,11 @@ WebInspector.RuntimeModel.prototype = { this.dispatchEventToListeners(WebInspector.RuntimeModel.Events.ExecutionContextDestroyed, executionContext); }, + fireExecutionContextOrderChanged: function() + { + this.dispatchEventToListeners(WebInspector.RuntimeModel.Events.ExecutionContextOrderChanged, this); + }, + _executionContextsCleared: function() { var debuggerModel = WebInspector.DebuggerModel.fromTarget(this.target()); diff --git a/front_end/sdk/TargetManager.js b/front_end/sdk/TargetManager.js index e5f085158a..12ef551ba0 100644 --- a/front_end/sdk/TargetManager.js +++ b/front_end/sdk/TargetManager.js @@ -77,6 +77,14 @@ WebInspector.TargetManager.prototype = { return this._isSuspended; }, + /** + * @return {string} + */ + inspectedURL: function() + { + return this._targets[0] ? this._targets[0].inspectedURL() : ""; + }, + /** * @param {!WebInspector.Event} event */ diff --git a/front_end/settings/SettingsScreen.js b/front_end/settings/SettingsScreen.js index bd5964bf4e..5a556c9d5c 100644 --- a/front_end/settings/SettingsScreen.js +++ b/front_end/settings/SettingsScreen.js @@ -49,7 +49,9 @@ WebInspector.SettingsScreen = function() tabbedPane.insertBeforeTabStrip(settingsLabelElement); tabbedPane.setShrinkableTabs(false); tabbedPane.setVerticalTabLayout(true); - tabbedPane.appendTab("shortcuts", WebInspector.UIString("Shortcuts"), WebInspector.shortcutsScreen.createShortcutsTabView()); + var shortcutsView = new WebInspector.SimpleView(WebInspector.UIString("Shortcuts")); + WebInspector.shortcutsScreen.createShortcutsTabView().show(shortcutsView.element); + this._tabbedLocation.appendView(shortcutsView); tabbedPane.show(this.contentElement); this.element.addEventListener("keydown", this._keyDown.bind(this), false); @@ -68,12 +70,11 @@ WebInspector.SettingsScreen._showSettingsScreen = function(name) var dialog = new WebInspector.Dialog(); dialog.addCloseButton(); settingsScreen.show(dialog.element); - settingsScreen._selectTab(name || "preferences"); dialog.show(); + settingsScreen._selectTab(name || "preferences"); } WebInspector.SettingsScreen.prototype = { - /** * @override * @param {string} locationName @@ -504,7 +505,7 @@ WebInspector.SettingsScreen.ActionDelegate.prototype = { InspectorFrontendHost.openInNewTab("https://developers.google.com/web/tools/chrome-devtools/"); return true; case "settings.shortcuts": - WebInspector.SettingsScreen._showSettingsScreen("shortcuts"); + WebInspector.SettingsScreen._showSettingsScreen(WebInspector.UIString("Shortcuts")); return true; } return false; diff --git a/front_end/sources/CallStackSidebarPane.js b/front_end/sources/CallStackSidebarPane.js index 7e9c1d0932..50f07d4a77 100644 --- a/front_end/sources/CallStackSidebarPane.js +++ b/front_end/sources/CallStackSidebarPane.js @@ -26,6 +26,7 @@ /** * @constructor * @extends {WebInspector.SimpleView} + * @implements {WebInspector.ContextFlavorListener} */ WebInspector.CallStackSidebarPane = function() { @@ -40,18 +41,22 @@ WebInspector.CallStackSidebarPane = function() /** @type {!Array} */ this.callFrames = []; this._locationPool = new WebInspector.LiveLocationPool(); - WebInspector.targetManager.addModelListener(WebInspector.DebuggerModel, WebInspector.DebuggerModel.Events.DebuggerPaused, this._update, this); - WebInspector.targetManager.addModelListener(WebInspector.DebuggerModel, WebInspector.DebuggerModel.Events.DebuggerResumed, this._update, this); - WebInspector.context.addFlavorChangeListener(WebInspector.Target, this._update, this); - WebInspector.context.addFlavorChangeListener(WebInspector.DebuggerModel.CallFrame, this._updateCallFrame, this); + this._update(); } WebInspector.CallStackSidebarPane.prototype = { + /** + * @override + * @param {?Object} object + */ + flavorChanged: function(object) + { + this._update(); + }, + _update: function() { - var target = WebInspector.context.flavor(WebInspector.Target); - var debuggerModel = WebInspector.DebuggerModel.fromTarget(target); - var details = debuggerModel ? debuggerModel.debuggerPausedDetails() : null; + var details = WebInspector.context.flavor(WebInspector.DebuggerPausedDetails); this.callFrameList.detach(); this.callFrameList.clear(); @@ -59,21 +64,20 @@ WebInspector.CallStackSidebarPane.prototype = { this.element.removeChildren(); this._locationPool.disposeAll(); + this.callFrameList.show(this.element); + delete this._hiddenCallFramesMessageElement; + this.callFrames = []; + this._hiddenCallFrames = 0; + + this._updateStatusMessage(details); + if (!details) { - var infoElement = this.element.createChild("div", "callstack-info"); - infoElement.textContent = WebInspector.UIString("Not Paused"); + WebInspector.context.setFlavor(WebInspector.DebuggerModel.CallFrame, null); return; } - - this.callFrameList.show(this.element); this._debuggerModel = details.debuggerModel; var asyncStackTrace = details.asyncStackTrace; - delete this._statusMessageElement; - delete this._hiddenCallFramesMessageElement; - this.callFrames = []; - this._hiddenCallFrames = 0; - this._appendSidebarCallFrames(this._callFramesFromDebugger(details.callFrames)); var topStackHidden = (this._hiddenCallFrames === this.callFrames.length); @@ -101,7 +105,54 @@ WebInspector.CallStackSidebarPane.prototype = { this.element.insertBefore(element, this.element.firstChild); this._hiddenCallFramesMessageElement = element; } - WebInspector.viewManager.revealViewWithWidget(this); + this._selectNextVisibleCallFrame(0); + this.revealView(); + }, + + /** + * @param {?WebInspector.DebuggerPausedDetails} details + */ + _updateStatusMessage: function(details) + { + var status = this.contentElement.createChild("div", "callstack-info"); + status.removeChildren(); + + if (!details) { + status.textContent = WebInspector.UIString("Not Paused"); + status.classList.toggle("status", false); + return; + } + + if (details.reason === WebInspector.DebuggerModel.BreakReason.DOM) { + status.appendChild(WebInspector.domBreakpointsSidebarPane.createBreakpointHitStatusMessage(details)); + } else if (details.reason === WebInspector.DebuggerModel.BreakReason.EventListener) { + var eventName = details.auxData["eventName"]; + var eventNameForUI = WebInspector.EventListenerBreakpointsSidebarPane.eventNameForUI(eventName, details.auxData); + status.textContent = WebInspector.UIString("Paused on a \"%s\" Event Listener.", eventNameForUI); + } else if (details.reason === WebInspector.DebuggerModel.BreakReason.XHR) { + status.textContent = WebInspector.UIString("Paused on a XMLHttpRequest."); + } else if (details.reason === WebInspector.DebuggerModel.BreakReason.Exception) { + var description = details.auxData["description"] || ""; + status.textContent = WebInspector.UIString("Paused on exception: '%s'.", description.split("\n", 1)[0]); + } else if (details.reason === WebInspector.DebuggerModel.BreakReason.PromiseRejection) { + var description = details.auxData["description"] || ""; + status.textContent = WebInspector.UIString("Paused on promise rejection: '%s'.", description.split("\n", 1)[0]); + } else if (details.reason === WebInspector.DebuggerModel.BreakReason.Assert) { + status.textContent = WebInspector.UIString("Paused on assertion."); + } else if (details.reason === WebInspector.DebuggerModel.BreakReason.DebugCommand) { + status.textContent = WebInspector.UIString("Paused on a debugged function."); + } else { + if (details.callFrames.length) { + var uiLocation = details && details.callFrames.length ? WebInspector.debuggerWorkspaceBinding.rawLocationToUILocation(details.callFrames[0].location()) : null; + var breakpoint = uiLocation ? WebInspector.breakpointManager.findBreakpointOnLine(uiLocation.uiSourceCode, uiLocation.lineNumber) : null; + if (breakpoint) { + status.textContent = WebInspector.UIString("Paused on a JavaScript breakpoint."); + } + } else { + console.warn("ScriptsPanel paused, but callFrames.length is zero."); // TODO remove this once we understand this case better + } + } + status.classList.toggle("hidden", !status.firstChild); }, /** @@ -276,17 +327,6 @@ WebInspector.CallStackSidebarPane.prototype = { this._selectNextVisibleCallFrame(0); }, - _updateCallFrame: function() - { - var selectedCallFrame = WebInspector.context.flavor(WebInspector.DebuggerModel.CallFrame); - for (var i = 0; i < this.callFrames.length; ++i) { - var callFrame = this.callFrames[i]; - callFrame.setSelected(callFrame._debuggerCallFrame === selectedCallFrame); - if (callFrame.isSelected() && callFrame.isHidden()) - this._revealHiddenCallFrames(); - } - }, - /** * @return {boolean} */ @@ -354,14 +394,22 @@ WebInspector.CallStackSidebarPane.prototype = { }, /** - * @param {!WebInspector.CallStackSidebarPane.CallFrame} callFrameItem + * @param {!WebInspector.CallStackSidebarPane.CallFrame} selectedCallFrame */ - _callFrameSelected: function(callFrameItem) + _callFrameSelected: function(selectedCallFrame) { - callFrameItem.element.scrollIntoViewIfNeeded(); - var callFrame = callFrameItem._debuggerCallFrame; - if (callFrame) - callFrame.debuggerModel.setSelectedCallFrame(callFrame); + selectedCallFrame.element.scrollIntoViewIfNeeded(); + var callFrame = selectedCallFrame._debuggerCallFrame; + + for (var i = 0; i < this.callFrames.length; ++i) { + var callFrameItem = this.callFrames[i]; + callFrameItem.setSelected(callFrameItem === selectedCallFrame); + if (callFrameItem.isSelected() && callFrameItem.isHidden()) + this._revealHiddenCallFrames(); + } + + WebInspector.context.setFlavor(WebInspector.DebuggerModel.CallFrame, callFrame); + callFrame.debuggerModel.setSelectedCallFrame(callFrame); }, _copyStackTrace: function() @@ -389,21 +437,6 @@ WebInspector.CallStackSidebarPane.prototype = { registerShortcutDelegate(WebInspector.ShortcutsScreen.SourcesPanelShortcuts.PrevCallFrame, this._selectPreviousCallFrameOnStack.bind(this)); }, - /** - * @param {!Element|string} status - */ - setStatus: function(status) - { - if (!this._statusMessageElement) - this._statusMessageElement = this.element.createChild("div", "callstack-info status"); - if (typeof status === "string") { - this._statusMessageElement.textContent = status; - } else { - this._statusMessageElement.removeChildren(); - this._statusMessageElement.appendChild(status); - } - }, - _keyDown: function(event) { if (event.altKey || event.shiftKey || event.metaKey || event.ctrlKey) diff --git a/front_end/sources/EventListenerBreakpointsSidebarPane.js b/front_end/sources/EventListenerBreakpointsSidebarPane.js index 1323224fe3..ba795683b8 100644 --- a/front_end/sources/EventListenerBreakpointsSidebarPane.js +++ b/front_end/sources/EventListenerBreakpointsSidebarPane.js @@ -169,7 +169,7 @@ WebInspector.EventListenerBreakpointsSidebarPane.prototype = { breakpointItem = this._findBreakpointItem(eventName, WebInspector.EventListenerBreakpointsSidebarPane.eventTargetAny); if (!breakpointItem) return; - WebInspector.viewManager.revealViewWithWidget(this); + WebInspector.viewManager.showView("sources.eventListenerBreakpoints"); breakpointItem.parent.element.expand(); breakpointItem.element.listItemElement.classList.add("breakpoint-hit"); this._highlightedElement = breakpointItem.element.listItemElement; diff --git a/front_end/sources/JavaScriptBreakpointsSidebarPane.js b/front_end/sources/JavaScriptBreakpointsSidebarPane.js index 25c218666c..c020981eb1 100644 --- a/front_end/sources/JavaScriptBreakpointsSidebarPane.js +++ b/front_end/sources/JavaScriptBreakpointsSidebarPane.js @@ -4,19 +4,17 @@ /** * @constructor - * @extends {WebInspector.SimpleView} - * @param {!WebInspector.BreakpointManager} breakpointManager - * @param {function(!WebInspector.UISourceCode, number=, number=, boolean=)} showSourceLineDelegate + * @extends {WebInspector.VBox} + * @implements {WebInspector.ContextFlavorListener} */ -WebInspector.JavaScriptBreakpointsSidebarPane = function(breakpointManager, showSourceLineDelegate) +WebInspector.JavaScriptBreakpointsSidebarPane = function() { - WebInspector.SimpleView.call(this, WebInspector.UIString("Breakpoints")); + WebInspector.VBox.call(this); this.registerRequiredCSS("components/breakpointsList.css"); - this._breakpointManager = breakpointManager; - this._showSourceLineDelegate = showSourceLineDelegate; + this._breakpointManager = WebInspector.breakpointManager; - this.listElement = createElementWithClass("ol", "breakpoint-list"); + this._listElement = createElementWithClass("ol", "breakpoint-list"); this.emptyElement = this.element.createChild("div", "gray-info-message"); this.emptyElement.textContent = WebInspector.UIString("No Breakpoints"); @@ -31,6 +29,9 @@ WebInspector.JavaScriptBreakpointsSidebarPane = function(breakpointManager, show this._breakpointManager.addEventListener(WebInspector.BreakpointManager.Events.BreakpointRemoved, this._breakpointRemoved, this); this.emptyElement.addEventListener("contextmenu", this._emptyElementContextMenu.bind(this), true); + this._breakpointManager.addEventListener(WebInspector.BreakpointManager.Events.BreakpointsActiveStateChanged, this._breakpointsActiveStateChanged, this); + this._breakpointsActiveStateChanged(); + this._update(); } WebInspector.JavaScriptBreakpointsSidebarPane.prototype = { @@ -102,7 +103,7 @@ WebInspector.JavaScriptBreakpointsSidebarPane.prototype = { uiLocation.uiSourceCode.requestContent().then(didRequestContent.bind(this)); element._data = uiLocation; - var currentElement = this.listElement.firstChild; + var currentElement = this._listElement.firstChild; while (currentElement) { if (currentElement._data && this._compareBreakpoints(currentElement._data, element._data) > 0) break; @@ -135,29 +136,44 @@ WebInspector.JavaScriptBreakpointsSidebarPane.prototype = { }, /** - * @param {!WebInspector.BreakpointManager.Breakpoint} breakpoint + * @override + * @param {?Object} object */ - highlightBreakpoint: function(breakpoint) + flavorChanged: function(object) + { + this._update(); + }, + + _update: function() { + var details = WebInspector.context.flavor(WebInspector.DebuggerPausedDetails); + var uiLocation = details && details.callFrames.length ? WebInspector.debuggerWorkspaceBinding.rawLocationToUILocation(details.callFrames[0].location()) : null; + var breakpoint = uiLocation ? this._breakpointManager.findBreakpointOnLine(uiLocation.uiSourceCode, uiLocation.lineNumber) : null; var breakpointItem = this._items.get(breakpoint); - if (!breakpointItem) + if (!breakpointItem) { + if (this._highlightedBreakpointItem) { + this._highlightedBreakpointItem.element.classList.remove("breakpoint-hit"); + delete this._highlightedBreakpointItem; + } return; + } + breakpointItem.element.classList.add("breakpoint-hit"); this._highlightedBreakpointItem = breakpointItem; - this.revealView(); + WebInspector.viewManager.showView("sources.jsBreakpoints"); }, - clearBreakpointHighlight: function() + _breakpointsActiveStateChanged: function() { - if (this._highlightedBreakpointItem) { - this._highlightedBreakpointItem.element.classList.remove("breakpoint-hit"); - delete this._highlightedBreakpointItem; - } + this._listElement.classList.toggle("breakpoints-list-deactivated", !this._breakpointManager.breakpointsActive()); }, - _breakpointClicked: function(uiLocation, event) + /** + * @param {!WebInspector.UILocation} uiLocation + */ + _breakpointClicked: function(uiLocation) { - this._showSourceLineDelegate(uiLocation.uiSourceCode, uiLocation.lineNumber); + WebInspector.Revealer.reveal(uiLocation); }, /** @@ -214,21 +230,21 @@ WebInspector.JavaScriptBreakpointsSidebarPane.prototype = { _addListElement: function(element, beforeElement) { if (beforeElement) - this.listElement.insertBefore(element, beforeElement); + this._listElement.insertBefore(element, beforeElement); else { - if (!this.listElement.firstChild) { + if (!this._listElement.firstChild) { this.element.removeChild(this.emptyElement); - this.element.appendChild(this.listElement); + this.element.appendChild(this._listElement); } - this.listElement.appendChild(element); + this._listElement.appendChild(element); } }, _removeListElement: function(element) { - this.listElement.removeChild(element); - if (!this.listElement.firstChild) { - this.element.removeChild(this.listElement); + this._listElement.removeChild(element); + if (!this._listElement.firstChild) { + this.element.removeChild(this._listElement); this.element.appendChild(this.emptyElement); } }, @@ -247,13 +263,13 @@ WebInspector.JavaScriptBreakpointsSidebarPane.prototype = { reset: function() { - this.listElement.removeChildren(); - if (this.listElement.parentElement) { - this.element.removeChild(this.listElement); + this._listElement.removeChildren(); + if (this._listElement.parentElement) { + this.element.removeChild(this._listElement); this.element.appendChild(this.emptyElement); } this._items.clear(); }, - __proto__: WebInspector.SimpleView.prototype + __proto__: WebInspector.VBox.prototype } diff --git a/front_end/sources/JavaScriptSourceFrame.js b/front_end/sources/JavaScriptSourceFrame.js index d9f09fbe81..73685522a3 100644 --- a/front_end/sources/JavaScriptSourceFrame.js +++ b/front_end/sources/JavaScriptSourceFrame.js @@ -60,7 +60,6 @@ WebInspector.JavaScriptSourceFrame = function(uiSourceCode) /** @type {!Map.}*/ this._scriptFileForTarget = new Map(); - this._registerShortcuts(); var targets = WebInspector.targetManager.targets(); for (var i = 0; i < targets.length; ++i) { var scriptFile = WebInspector.debuggerWorkspaceBinding.scriptFile(uiSourceCode, targets[i]); @@ -191,57 +190,6 @@ WebInspector.JavaScriptSourceFrame.prototype = { delete this._blackboxInfobar; }, - _registerShortcuts: function() - { - var shortcutKeys = WebInspector.ShortcutsScreen.SourcesPanelShortcuts; - for (var i = 0; i < shortcutKeys.EvaluateSelectionInConsole.length; ++i) { - var keyDescriptor = shortcutKeys.EvaluateSelectionInConsole[i]; - this.addShortcut(keyDescriptor.key, this._evaluateSelectionInConsole.bind(this)); - } - for (var i = 0; i < shortcutKeys.AddSelectionToWatch.length; ++i) { - var keyDescriptor = shortcutKeys.AddSelectionToWatch[i]; - this.addShortcut(keyDescriptor.key, this._addCurrentSelectionToWatch.bind(this)); - } - }, - - _addCurrentSelectionToWatch: function() - { - var textSelection = this.textEditor.selection(); - if (textSelection && !textSelection.isEmpty()) - this._innerAddToWatch(this.textEditor.copyRange(textSelection)); - return true; - }, - - /** - * @param {string} expression - */ - _innerAddToWatch: function(expression) - { - this._scriptsPanel.addToWatch(expression); - }, - - /** - * @return {boolean} - */ - _evaluateSelectionInConsole: function() - { - var selection = this.textEditor.selection(); - if (!selection || selection.isEmpty()) - return true; - this._evaluateInConsole(this.textEditor.copyRange(selection)); - return true; - }, - - /** - * @param {string} expression - */ - _evaluateInConsole: function(expression) - { - var currentExecutionContext = WebInspector.context.flavor(WebInspector.ExecutionContext); - if (currentExecutionContext) - WebInspector.ConsoleModel.evaluateCommandInConsole(currentExecutionContext, expression); - }, - /** * @override */ @@ -316,16 +264,6 @@ WebInspector.JavaScriptSourceFrame.prototype = { */ populateTextAreaContextMenu: function(contextMenu, lineNumber, columnNumber) { - var textSelection = this.textEditor.selection(); - if (textSelection && !textSelection.isEmpty()) { - var selection = this.textEditor.copyRange(textSelection); - var addToWatchLabel = WebInspector.UIString.capitalize("Add to ^watch"); - contextMenu.appendItem(addToWatchLabel, this._innerAddToWatch.bind(this, selection)); - var evaluateLabel = WebInspector.UIString.capitalize("Evaluate in ^console"); - contextMenu.appendItem(evaluateLabel, this._evaluateInConsole.bind(this, selection)); - contextMenu.appendSeparator(); - } - /** * @param {!WebInspector.ResourceScriptFile} scriptFile */ @@ -548,8 +486,8 @@ WebInspector.JavaScriptSourceFrame.prototype = { _resolveObjectForPopover: function(anchorBox, showCallback, objectGroupName) { var target = WebInspector.context.flavor(WebInspector.Target); - var debuggerModel = WebInspector.DebuggerModel.fromTarget(target); - if (!debuggerModel || !debuggerModel.isPaused()) { + var selectedCallFrame = WebInspector.context.flavor(WebInspector.DebuggerModel.CallFrame); + if (!selectedCallFrame) { this._popoverHelper.hidePopover(); return; } @@ -568,8 +506,6 @@ WebInspector.JavaScriptSourceFrame.prototype = { } } var evaluationText = line.substring(startHighlight, endHighlight + 1); - var selectedCallFrame = /** @type {!WebInspector.DebuggerModel.CallFrame}*/ (debuggerModel.selectedCallFrame()); - WebInspector.SourceMapNamesResolver.resolveExpression(selectedCallFrame, evaluationText, this.uiSourceCode(), lineNumber, startHighlight, endHighlight).then(onResolve.bind(this)); /** @@ -589,7 +525,8 @@ WebInspector.JavaScriptSourceFrame.prototype = { function showObjectPopover(result, exceptionDetails) { var target = WebInspector.context.flavor(WebInspector.Target); - if (selectedCallFrame.target() !== target || !debuggerModel.isPaused() || !result) { + var potentiallyUpdatedCallFrame = WebInspector.context.flavor(WebInspector.DebuggerModel.CallFrame); + if (selectedCallFrame !== potentiallyUpdatedCallFrame || !result) { this._popoverHelper.hidePopover(); return; } @@ -720,7 +657,7 @@ WebInspector.JavaScriptSourceFrame.prototype = { var executionContext = WebInspector.context.flavor(WebInspector.ExecutionContext); if (!executionContext) return; - var callFrame = executionContext.debuggerModel.selectedCallFrame(); + var callFrame = WebInspector.context.flavor(WebInspector.DebuggerModel.CallFrame); if (!callFrame) return; diff --git a/front_end/sources/ScopeChainSidebarPane.js b/front_end/sources/ScopeChainSidebarPane.js index bf8f41881e..aef00c7de9 100644 --- a/front_end/sources/ScopeChainSidebarPane.js +++ b/front_end/sources/ScopeChainSidebarPane.js @@ -26,36 +26,48 @@ /** * @constructor - * @extends {WebInspector.SimpleView} + * @extends {WebInspector.VBox} + * @implements {WebInspector.ContextFlavorListener} */ WebInspector.ScopeChainSidebarPane = function() { - WebInspector.SimpleView.call(this, WebInspector.UIString("Scope")); + WebInspector.VBox.call(this); this._expandController = new WebInspector.ObjectPropertiesSectionExpandController(); this._linkifier = new WebInspector.Linkifier(); - WebInspector.context.addFlavorChangeListener(WebInspector.DebuggerModel.CallFrame, this._update, this); + this._update(); } WebInspector.ScopeChainSidebarPane._pathSymbol = Symbol("path"); WebInspector.ScopeChainSidebarPane.prototype = { + /** + * @override + * @param {?Object} object + */ + flavorChanged: function(object) + { + this._update(); + }, + _update: function() { var callFrame = WebInspector.context.flavor(WebInspector.DebuggerModel.CallFrame); + var details = WebInspector.context.flavor(WebInspector.DebuggerPausedDetails); this._linkifier.reset(); WebInspector.SourceMapNamesResolver.resolveThisObject(callFrame) - .then(this._innerUpdate.bind(this, callFrame)); + .then(this._innerUpdate.bind(this, details, callFrame)); }, /** + * @param {?WebInspector.DebuggerPausedDetails} details * @param {?WebInspector.DebuggerModel.CallFrame} callFrame * @param {?WebInspector.RemoteObject} thisObject */ - _innerUpdate: function(callFrame, thisObject) + _innerUpdate: function(details, callFrame, thisObject) { this.element.removeChildren(); - if (!callFrame) { + if (!details || !callFrame) { var infoElement = createElement("div"); infoElement.className = "gray-info-message"; infoElement.textContent = WebInspector.UIString("Not Paused"); @@ -79,7 +91,6 @@ WebInspector.ScopeChainSidebarPane.prototype = { if (thisObject) extraProperties.push(new WebInspector.RemoteObjectProperty("this", thisObject)); if (i === 0) { - var details = callFrame.debuggerModel.debuggerPausedDetails(); var exception = details.exception(); if (exception) extraProperties.push(new WebInspector.RemoteObjectProperty(WebInspector.UIString.capitalize("Exception"), exception, undefined, undefined, undefined, undefined, undefined, true)); @@ -137,5 +148,5 @@ WebInspector.ScopeChainSidebarPane.prototype = { _sidebarPaneUpdatedForTest: function() { }, - __proto__: WebInspector.SimpleView.prototype + __proto__: WebInspector.VBox.prototype } diff --git a/front_end/sources/SourcesPanel.js b/front_end/sources/SourcesPanel.js index aa7a8950f2..5348993f07 100644 --- a/front_end/sources/SourcesPanel.js +++ b/front_end/sources/SourcesPanel.js @@ -64,7 +64,7 @@ WebInspector.SourcesPanel = function() this._splitWidget.setMainWidget(this.editorView); // Create navigator tabbed pane with toolbar. - this._navigatorTabbedLocation = WebInspector.viewManager.createTabbedLocation(this._setAsCurrentPanel.bind(this), "navigator-view", true); + this._navigatorTabbedLocation = WebInspector.viewManager.createTabbedLocation(this._revealNavigatorSidebar.bind(this), "navigator-view", true); var tabbedPane = this._navigatorTabbedLocation.tabbedPane(); tabbedPane.setMinimumSize(100, 25); tabbedPane.setShrinkableTabs(true); @@ -83,14 +83,12 @@ WebInspector.SourcesPanel = function() this.editorView.setMainWidget(this._sourcesView); this._editorChanged(this._sourcesView.currentUISourceCode()); - this.sidebarPanes = {}; - this.sidebarPanes.threads = null; - this.sidebarPanes.watchExpressions = new WebInspector.WatchExpressionsSidebarPane(); - this.sidebarPanes.callstack = new WebInspector.CallStackSidebarPane(); - this.sidebarPanes.callstack.registerShortcuts(this.registerShortcuts.bind(this)); - - this.sidebarPanes.scopechain = new WebInspector.ScopeChainSidebarPane(); - this.sidebarPanes.jsBreakpoints = new WebInspector.JavaScriptBreakpointsSidebarPane(WebInspector.breakpointManager, this.showUISourceCode.bind(this)); + this._threadsSidebarPane = null; + this._watchSidebarPane = /** @type {!WebInspector.View} */ (WebInspector.viewManager.view("sources.watch")); + // TODO: Force installing listeners from the model, not the UI. + self.runtime.sharedInstance(WebInspector.XHRBreakpointsSidebarPane); + this._callstackPane = self.runtime.sharedInstance(WebInspector.CallStackSidebarPane); + this._callstackPane.registerShortcuts(this.registerShortcuts.bind(this)); this._installDebuggerSidebarController(); @@ -106,10 +104,10 @@ WebInspector.SourcesPanel = function() this._setTarget(WebInspector.context.flavor(WebInspector.Target)); WebInspector.breakpointManager.addEventListener(WebInspector.BreakpointManager.Events.BreakpointsActiveStateChanged, this._breakpointsActiveStateChanged, this); WebInspector.context.addFlavorChangeListener(WebInspector.Target, this._onCurrentTargetChanged, this); + WebInspector.context.addFlavorChangeListener(WebInspector.DebuggerModel.CallFrame, this._callFrameChanged, this); WebInspector.targetManager.addModelListener(WebInspector.DebuggerModel, WebInspector.DebuggerModel.Events.DebuggerWasEnabled, this._debuggerWasEnabled, this); WebInspector.targetManager.addModelListener(WebInspector.DebuggerModel, WebInspector.DebuggerModel.Events.DebuggerPaused, this._debuggerPaused, this); WebInspector.targetManager.addModelListener(WebInspector.DebuggerModel, WebInspector.DebuggerModel.Events.DebuggerResumed, this._debuggerResumed, this); - WebInspector.targetManager.addModelListener(WebInspector.DebuggerModel, WebInspector.DebuggerModel.Events.CallFrameSelected, this._callFrameSelectedOnModel, this); WebInspector.targetManager.addModelListener(WebInspector.DebuggerModel, WebInspector.DebuggerModel.Events.GlobalObjectCleared, this._debuggerReset, this); new WebInspector.WorkspaceMappingTip(this, this._workspace); WebInspector.extensionServer.addEventListener(WebInspector.ExtensionServer.Events.SidebarPaneAdded, this._extensionSidebarPaneAdded, this); @@ -137,10 +135,10 @@ WebInspector.SourcesPanel.prototype = { targetAdded: function(target) { var hasThreads = WebInspector.targetManager.targets(WebInspector.Target.Capability.JS).length > 1; - if (hasThreads && !this.sidebarPanes.threads) { - this.sidebarPanes.threads = new WebInspector.ThreadsSidebarPane(); + if (hasThreads && !this._threadsSidebarPane) { + this._threadsSidebarPane = /** @type {!WebInspector.View} */ (WebInspector.viewManager.view("sources.threads")); if (this._sidebarPaneStack) { - this._sidebarPaneStack.showView(this.sidebarPanes.threads, this._splitWidget.isVertical() ? this.sidebarPanes.watchExpressions : this.sidebarPanes.callstack); + this._sidebarPaneStack.showView(this._threadsSidebarPane, this._splitWidget.isVertical() ? this._watchSidebarPane : this._callstackPane); } } }, @@ -166,9 +164,6 @@ WebInspector.SourcesPanel.prototype = { if (debuggerModel.isPaused()) { this._showDebuggerPausedDetails(/** @type {!WebInspector.DebuggerPausedDetails} */ (debuggerModel.debuggerPausedDetails())); - var callFrame = debuggerModel.selectedCallFrame(); - if (callFrame) - this._selectCallFrameInUI(callFrame); } else { this._paused = false; this._clearInterface(); @@ -275,49 +270,7 @@ WebInspector.SourcesPanel.prototype = { { this._paused = true; this._updateDebuggerButtons(); - - /** - * @param {!WebInspector.LiveLocation} liveLocation - * @this {WebInspector.SourcesPanel} - */ - function didGetUILocation(liveLocation) - { - var uiLocation = liveLocation.uiLocation(); - if (!uiLocation) - return; - var breakpoint = WebInspector.breakpointManager.findBreakpointOnLine(uiLocation.uiSourceCode, uiLocation.lineNumber); - if (!breakpoint) - return; - this.sidebarPanes.jsBreakpoints.highlightBreakpoint(breakpoint); - this.sidebarPanes.callstack.setStatus(WebInspector.UIString("Paused on a JavaScript breakpoint.")); - } - - if (details.reason === WebInspector.DebuggerModel.BreakReason.DOM) { - this.sidebarPanes.callstack.setStatus(WebInspector.domBreakpointsSidebarPane.createBreakpointHitStatusMessage(details)); - } else if (details.reason === WebInspector.DebuggerModel.BreakReason.EventListener) { - var eventName = details.auxData["eventName"]; - var eventNameForUI = WebInspector.EventListenerBreakpointsSidebarPane.eventNameForUI(eventName, details.auxData); - this.sidebarPanes.callstack.setStatus(WebInspector.UIString("Paused on a \"%s\" Event Listener.", eventNameForUI)); - } else if (details.reason === WebInspector.DebuggerModel.BreakReason.XHR) { - this.sidebarPanes.callstack.setStatus(WebInspector.UIString("Paused on a XMLHttpRequest.")); - } else if (details.reason === WebInspector.DebuggerModel.BreakReason.Exception) { - var description = details.auxData["description"] || ""; - this.sidebarPanes.callstack.setStatus(WebInspector.UIString("Paused on exception: '%s'.", description.split("\n", 1)[0])); - } else if (details.reason === WebInspector.DebuggerModel.BreakReason.PromiseRejection) { - var description = details.auxData["description"] || ""; - this.sidebarPanes.callstack.setStatus(WebInspector.UIString("Paused on promise rejection: '%s'.", description.split("\n", 1)[0])); - } else if (details.reason === WebInspector.DebuggerModel.BreakReason.Assert) { - this.sidebarPanes.callstack.setStatus(WebInspector.UIString("Paused on assertion.")); - } else if (details.reason === WebInspector.DebuggerModel.BreakReason.DebugCommand) { - this.sidebarPanes.callstack.setStatus(WebInspector.UIString("Paused on a debugged function.")); - } else { - if (details.callFrames.length) - WebInspector.debuggerWorkspaceBinding.createCallFrameLiveLocation(details.callFrames[0].location(), didGetUILocation.bind(this), this._liveLocationPool); - else - console.warn("ScriptsPanel paused, but callFrames.length is zero."); // TODO remove this once we understand this case better - } - - this._splitWidget.showBoth(true); + WebInspector.context.setFlavor(WebInspector.DebuggerPausedDetails, details); this._toggleDebuggerSidebarButton.disabled = true; window.focus(); InspectorFrontendHost.bringToFront(); @@ -472,24 +425,14 @@ WebInspector.SourcesPanel.prototype = { WebInspector.SourcesPanel._lastModificationTimeout = Number.MAX_VALUE; }, - /** - * @param {!WebInspector.Event} event - */ - _callFrameSelectedOnModel: function(event) + _callFrameChanged: function() { - var callFrame = /** @type {?WebInspector.DebuggerModel.CallFrame} */ (event.data); - if (!callFrame || callFrame.target() !== WebInspector.context.flavor(WebInspector.Target)) + var callFrame = WebInspector.context.flavor(WebInspector.DebuggerModel.CallFrame); + if (!callFrame) return; - this._selectCallFrameInUI(callFrame); - }, - - /** - * @param {!WebInspector.DebuggerModel.CallFrame} callFrame - */ - _selectCallFrameInUI: function(callFrame) - { - WebInspector.context.setFlavor(WebInspector.DebuggerModel.CallFrame, callFrame); - WebInspector.debuggerWorkspaceBinding.createCallFrameLiveLocation(callFrame.location(), this._executionLineChanged.bind(this), this._liveLocationPool); + if (this._executionLineLocation) + this._executionLineLocation.dispose(); + this._executionLineLocation = WebInspector.debuggerWorkspaceBinding.createCallFrameLiveLocation(callFrame.location(), this._executionLineChanged.bind(this), this._liveLocationPool); }, _pauseOnExceptionEnabledChanged: function() @@ -526,10 +469,9 @@ WebInspector.SourcesPanel.prototype = { _clearInterface: function() { - this.sidebarPanes.jsBreakpoints.clearBreakpointHighlight(); - this._sourcesView.clearCurrentExecutionLine(); this._updateDebuggerButtons(); + WebInspector.context.setFlavor(WebInspector.DebuggerPausedDetails, null); if (this._switchToPausedTargetTimeout) clearTimeout(this._switchToPausedTargetTimeout); @@ -727,7 +669,6 @@ WebInspector.SourcesPanel.prototype = { { var active = event.data; this._toggleBreakpointsActiveAction.setToggled(!active); - this.sidebarPanes.jsBreakpoints.listElement.classList.toggle("breakpoints-list-deactivated", !active); this._sourcesView.toggleBreakpointsActiveState(active); }, @@ -773,11 +714,6 @@ WebInspector.SourcesPanel.prototype = { return debugToolbarDrawer; }, - addToWatch: function(expression) - { - this.sidebarPanes.watchExpressions.addExpression(expression); - }, - _installDebuggerSidebarController: function() { this.editorView.displayShowHideSidebarButton("navigator"); @@ -804,6 +740,7 @@ WebInspector.SourcesPanel.prototype = { this.appendUILocationItems(contextMenu, target); this._appendRemoteObjectItems(contextMenu, target); this._appendNetworkRequestItems(contextMenu, target); + contextMenu.appendAction("debugger.evaluate-selection"); }, /** @@ -927,7 +864,7 @@ WebInspector.SourcesPanel.prototype = { } if (contentType.hasScripts() && projectType !== WebInspector.projectTypes.Snippets) - this.sidebarPanes.callstack.appendBlackboxURLContextMenuItems(contextMenu, uiSourceCode); + this._callstackPane.appendBlackboxURLContextMenuItems(contextMenu, uiSourceCode); }, /** @@ -1064,6 +1001,18 @@ WebInspector.SourcesPanel.prototype = { this._sourcesView.showOpenResourceDialog(); }, + _revealNavigatorSidebar: function() + { + this._setAsCurrentPanel(); + this.editorView.showBoth(true); + }, + + _revealDebuggerSidebar: function() + { + this._setAsCurrentPanel(); + this._splitWidget.showBoth(true); + }, + _updateSidebarPosition: function() { var vertically; @@ -1093,31 +1042,25 @@ WebInspector.SourcesPanel.prototype = { var vbox = new WebInspector.VBox(); vbox.element.appendChild(this._debugToolbarDrawer); vbox.setMinimumAndPreferredSizes(25, 25, WebInspector.SourcesPanel.minToolbarWidth, 100); - this._sidebarPaneStack = WebInspector.viewManager.createStackLocation(this._setAsCurrentPanel.bind(this)); + this._sidebarPaneStack = WebInspector.viewManager.createStackLocation(this._revealDebuggerSidebar.bind(this)); this._sidebarPaneStack.widget().element.classList.add("overflow-auto"); this._sidebarPaneStack.widget().show(vbox.element); vbox.element.appendChild(this._debugToolbar.element); - if (this.sidebarPanes.threads) - this._sidebarPaneStack.showView(this.sidebarPanes.threads); + if (this._threadsSidebarPane) + this._sidebarPaneStack.showView(this._threadsSidebarPane); - if (!vertically) { - if (this.sidebarPanes.watchExpressions.hasExpressions()) - this._sidebarPaneStack.showView(this.sidebarPanes.watchExpressions); - else - this._sidebarPaneStack.appendView(this.sidebarPanes.watchExpressions); - } + if (!vertically) + this._sidebarPaneStack.appendView(this._watchSidebarPane); - this._sidebarPaneStack.showView(this.sidebarPanes.callstack); + this._sidebarPaneStack.showView(this._callstackPane); + var jsBreakpoints = /** @type {!WebInspector.View} */ (WebInspector.viewManager.view("sources.jsBreakpoints")); + var scopeChainView = /** @type {!WebInspector.View} */ (WebInspector.viewManager.view("sources.scopeChain")); if (!vertically) { // Populate the rest of the stack. - this._sidebarPaneStack.showView(this.sidebarPanes.scopechain); - this._sidebarPaneStack.showView(this.sidebarPanes.jsBreakpoints); - for (var pane in this.sidebarPanes) { - if (this.sidebarPanes[pane]) - this._sidebarPaneStack.appendView(this.sidebarPanes[pane]); - } + this._sidebarPaneStack.showView(scopeChainView); + this._sidebarPaneStack.showView(jsBreakpoints); this._extensionSidebarPanesContainer = this._sidebarPaneStack; this.sidebarPaneView = vbox; } else { @@ -1125,12 +1068,12 @@ WebInspector.SourcesPanel.prototype = { splitWidget.setMainWidget(vbox); // Populate the left stack. - this._sidebarPaneStack.showView(this.sidebarPanes.jsBreakpoints); + this._sidebarPaneStack.showView(jsBreakpoints); - var tabbedLocation = WebInspector.viewManager.createTabbedLocation(this._setAsCurrentPanel.bind(this)); + var tabbedLocation = WebInspector.viewManager.createTabbedLocation(this._revealDebuggerSidebar.bind(this)); splitWidget.setSidebarWidget(tabbedLocation.tabbedPane()); - tabbedLocation.appendView(this.sidebarPanes.scopechain); - tabbedLocation.appendView(this.sidebarPanes.watchExpressions); + tabbedLocation.appendView(scopeChainView); + tabbedLocation.appendView(this._watchSidebarPane); this._extensionSidebarPanesContainer = tabbedLocation; this.sidebarPaneView = splitWidget; } @@ -1191,27 +1134,6 @@ WebInspector.SourcesPanel.prototype = { __proto__: WebInspector.Panel.prototype } -/** - * @constructor - * @implements {WebInspector.ContextMenu.Provider} - */ -WebInspector.SourcesPanel.ContextMenuProvider = function() -{ -} - -WebInspector.SourcesPanel.ContextMenuProvider.prototype = { - /** - * @override - * @param {!Event} event - * @param {!WebInspector.ContextMenu} contextMenu - * @param {!Object} target - */ - appendApplicableItems: function(event, contextMenu, target) - { - WebInspector.SourcesPanel.instance().appendApplicableItems(event, contextMenu, target); - } -} - /** * @constructor * @implements {WebInspector.Revealer} @@ -1369,6 +1291,15 @@ WebInspector.SourcesPanel.DebuggingActionDelegate.prototype = { case "debugger.toggle-breakpoints-active": panel._toggleBreakpointsActive(); return true; + case "debugger.evaluate-selection": + var frame = WebInspector.context.flavor(WebInspector.UISourceCodeFrame); + if (frame) { + var text = frame.textEditor.copyRange(frame.textEditor.selection()); + var executionContext = WebInspector.context.flavor(WebInspector.ExecutionContext); + if (executionContext) + WebInspector.ConsoleModel.evaluateCommandInConsole(executionContext, text); + } + return true; } return false; } diff --git a/front_end/sources/TabbedEditorContainer.js b/front_end/sources/TabbedEditorContainer.js index 7178c35048..fcbe43491f 100644 --- a/front_end/sources/TabbedEditorContainer.js +++ b/front_end/sources/TabbedEditorContainer.js @@ -214,6 +214,7 @@ WebInspector.TabbedEditorContainer.prototype = { var previousView = this._currentView; this._currentView = this.visibleView; + WebInspector.context.setFlavor(WebInspector.UISourceCodeFrame, this._currentView instanceof WebInspector.UISourceCodeFrame ? this._currentView : null); this._addViewListeners(); var eventData = { @@ -249,9 +250,12 @@ WebInspector.TabbedEditorContainer.prototype = { // FIXME: this should be replaced with common Save/Discard/Cancel dialog. if (!shouldPrompt || confirm(WebInspector.UIString("Are you sure you want to close unsaved file: %s?", uiSourceCode.name()))) { uiSourceCode.resetWorkingCopy(); + var previousView = this._currentView; if (nextTabId) this._tabbedPane.selectTab(nextTabId, true); this._tabbedPane.closeTab(id, true); + if (WebInspector.context.flavor(WebInspector.UISourceCodeFrame) === previousView) + WebInspector.context.setFlavor(WebInspector.UISourceCodeFrame, null); return true; } return false; diff --git a/front_end/sources/ThreadsSidebarPane.js b/front_end/sources/ThreadsSidebarPane.js index dbd0fc71b3..cc92481d63 100644 --- a/front_end/sources/ThreadsSidebarPane.js +++ b/front_end/sources/ThreadsSidebarPane.js @@ -4,12 +4,12 @@ /** * @constructor - * @extends {WebInspector.SimpleView} + * @extends {WebInspector.VBox} * @implements {WebInspector.TargetManager.Observer} */ WebInspector.ThreadsSidebarPane = function() { - WebInspector.SimpleView.call(this, WebInspector.UIString("Threads")); + WebInspector.VBox.call(this); /** @type {!Map.} */ this._debuggerModelToListItems = new Map(); @@ -137,5 +137,5 @@ WebInspector.ThreadsSidebarPane.prototype = { }, - __proto__: WebInspector.SimpleView.prototype + __proto__: WebInspector.VBox.prototype } diff --git a/front_end/sources/UISourceCodeFrame.js b/front_end/sources/UISourceCodeFrame.js index 17b212fcba..2d3f006e1b 100644 --- a/front_end/sources/UISourceCodeFrame.js +++ b/front_end/sources/UISourceCodeFrame.js @@ -242,7 +242,6 @@ WebInspector.UISourceCodeFrame.prototype = { { contextMenu.appendApplicableItems(this._uiSourceCode); contextMenu.appendApplicableItems(new WebInspector.UILocation(this._uiSourceCode, lineNumber, columnNumber)); - contextMenu.appendSeparator(); } return WebInspector.SourceFrame.prototype.populateTextAreaContextMenu.call(this, contextMenu, lineNumber, columnNumber) diff --git a/front_end/sources/WatchExpressionsSidebarPane.js b/front_end/sources/WatchExpressionsSidebarPane.js index 1325380cd9..728b3073fc 100644 --- a/front_end/sources/WatchExpressionsSidebarPane.js +++ b/front_end/sources/WatchExpressionsSidebarPane.js @@ -30,58 +30,43 @@ /** * @constructor - * @extends {WebInspector.SimpleView} + * @extends {WebInspector.ThrottledWidget} + * @implements {WebInspector.ActionDelegate} + * @implements {WebInspector.ToolbarItem.ItemsProvider} + * @implements {WebInspector.ContextMenu.Provider} */ WebInspector.WatchExpressionsSidebarPane = function() { - WebInspector.SimpleView.call(this, WebInspector.UIString("Watch")); + WebInspector.ThrottledWidget.call(this); this.registerRequiredCSS("components/objectValue.css"); - this._requiresUpdate = true; /** @type {!Array.} */ this._watchExpressions = []; this._watchExpressionsSetting = WebInspector.settings.createLocalSetting("watchExpressions", []); - var addButton = new WebInspector.ToolbarButton(WebInspector.UIString("Add expression"), "add-toolbar-item"); - addButton.addEventListener("click", this._addButtonClicked.bind(this)); - this.addToolbarItem(addButton); - var refreshButton = new WebInspector.ToolbarButton(WebInspector.UIString("Refresh"), "refresh-toolbar-item"); - refreshButton.addEventListener("click", this._refreshButtonClicked.bind(this)); - this.addToolbarItem(refreshButton); + this._addButton = new WebInspector.ToolbarButton(WebInspector.UIString("Add expression"), "add-toolbar-item"); + this._addButton.addEventListener("click", this._addButtonClicked.bind(this)); + this._refreshButton = new WebInspector.ToolbarButton(WebInspector.UIString("Refresh"), "refresh-toolbar-item"); + this._refreshButton.addEventListener("click", this._refreshButtonClicked.bind(this)); this._bodyElement = this.element.createChild("div", "vbox watch-expressions"); this._bodyElement.addEventListener("contextmenu", this._contextMenu.bind(this), false); this._expandController = new WebInspector.ObjectPropertiesSectionExpandController(); - WebInspector.context.addFlavorChangeListener(WebInspector.ExecutionContext, this._refreshExpressions, this); - WebInspector.context.addFlavorChangeListener(WebInspector.DebuggerModel.CallFrame, this._refreshExpressions, this); + WebInspector.context.addFlavorChangeListener(WebInspector.ExecutionContext, this.update, this); + WebInspector.context.addFlavorChangeListener(WebInspector.DebuggerModel.CallFrame, this.update, this); this._linkifier = new WebInspector.Linkifier(); + this.update(); } WebInspector.WatchExpressionsSidebarPane.prototype = { - wasShown: function() - { - this._refreshExpressionsIfNeeded(); - }, - - _refreshExpressions: function() - { - this._requiresUpdate = true; - this._refreshExpressionsIfNeeded(); - }, - /** - * @param {string} expressionString + * @override + * @return {!Array} */ - addExpression: function(expressionString) + toolbarItems: function() { - this.revealView(); - if (this._requiresUpdate) { - this._rebuildWatchExpressions(); - delete this._requiresUpdate; - } - this._createWatchExpression(expressionString); - this._saveExpressions(); + return [this._addButton, this._refreshButton]; }, /** @@ -102,15 +87,6 @@ WebInspector.WatchExpressionsSidebarPane.prototype = { this._watchExpressionsSetting.set(toSave); }, - _refreshExpressionsIfNeeded: function() - { - if (this._requiresUpdate && this.isShowing()) { - this._rebuildWatchExpressions(); - delete this._requiresUpdate; - } else - this._requiresUpdate = true; - }, - /** * @param {!WebInspector.Event=} event */ @@ -118,7 +94,7 @@ WebInspector.WatchExpressionsSidebarPane.prototype = { { if (event) event.consume(true); - this.revealView(); + WebInspector.viewManager.showView("sources.watch"); this._createWatchExpression(null).startEditing(); }, @@ -128,10 +104,14 @@ WebInspector.WatchExpressionsSidebarPane.prototype = { _refreshButtonClicked: function(event) { event.consume(); - this._refreshExpressions(); + this.update(); }, - _rebuildWatchExpressions: function() + /** + * @override + * @return {!Promise.} + */ + doUpdate: function() { this._linkifier.reset(); this._bodyElement.removeChildren(); @@ -146,6 +126,7 @@ WebInspector.WatchExpressionsSidebarPane.prototype = { this._createWatchExpression(expression); } + return Promise.resolve(); }, /** @@ -212,10 +193,40 @@ WebInspector.WatchExpressionsSidebarPane.prototype = { { this._watchExpressions = []; this._saveExpressions(); - this._rebuildWatchExpressions(); + this.update(); + }, + + /** + * @override + * @param {!WebInspector.Context} context + * @param {string} actionId + * @return {boolean} + */ + handleAction: function(context, actionId) + { + var frame = WebInspector.context.flavor(WebInspector.UISourceCodeFrame); + if (!frame) + return false; + var text = frame.textEditor.copyRange(frame.textEditor.selection()); + WebInspector.viewManager.showView("sources.watch"); + this.doUpdate(); + this._createWatchExpression(text); + this._saveExpressions(); + return true; + }, + + /** + * @override + * @param {!Event} event + * @param {!WebInspector.ContextMenu} contextMenu + * @param {!Object} target + */ + appendApplicableItems: function(event, contextMenu, target) + { + contextMenu.appendAction("sources.add-to-watch"); }, - __proto__: WebInspector.SimpleView.prototype + __proto__: WebInspector.ThrottledWidget.prototype } /** diff --git a/front_end/sources/XHRBreakpointsSidebarPane.js b/front_end/sources/XHRBreakpointsSidebarPane.js index 0e228dd5ad..9acc0a31f1 100644 --- a/front_end/sources/XHRBreakpointsSidebarPane.js +++ b/front_end/sources/XHRBreakpointsSidebarPane.js @@ -5,6 +5,7 @@ /** * @constructor * @extends {WebInspector.BreakpointsSidebarPaneBase} + * @implements {WebInspector.ContextFlavorListener} * @implements {WebInspector.TargetManager.Observer} * @implements {WebInspector.ToolbarItem.ItemsProvider} */ @@ -20,8 +21,8 @@ WebInspector.XHRBreakpointsSidebarPane = function() this._addButton.addEventListener("click", this._addButtonClicked.bind(this)); this.emptyElement.addEventListener("contextmenu", this._emptyElementContextMenu.bind(this), true); - WebInspector.targetManager.observeTargets(this, WebInspector.Target.Capability.Browser); + this._update(); } WebInspector.XHRBreakpointsSidebarPane.prototype = { @@ -61,7 +62,7 @@ WebInspector.XHRBreakpointsSidebarPane.prototype = { if (event) event.consume(); - WebInspector.viewManager.revealViewWithWidget(this); + WebInspector.viewManager.showView("sources.xhrBreakpoints"); var inputElementContainer = createElementWithClass("p", "breakpoint-condition"); inputElementContainer.textContent = WebInspector.UIString("Break when URL contains:"); @@ -223,10 +224,16 @@ WebInspector.XHRBreakpointsSidebarPane.prototype = { /** * @override - * @param {?WebInspector.DebuggerPausedDetails} details + * @param {?Object} object */ - highlightDetails: function(details) + flavorChanged: function(object) + { + this._update(); + }, + + _update: function() { + var details = WebInspector.context.flavor(WebInspector.DebuggerPausedDetails); if (!details || details.reason !== WebInspector.DebuggerModel.BreakReason.XHR) { if (this._highlightedElement) { this._highlightedElement.classList.remove("breakpoint-hit"); @@ -238,7 +245,7 @@ WebInspector.XHRBreakpointsSidebarPane.prototype = { var element = this._breakpointElements.get(url); if (!element) return; - WebInspector.viewManager.revealViewWithWidget(this); + WebInspector.viewManager.showView("sources.xhrBreakpoints"); element.classList.add("breakpoint-hit"); this._highlightedElement = element; }, diff --git a/front_end/sources/module.json b/front_end/sources/module.json index ace91f89d3..afeede4091 100644 --- a/front_end/sources/module.json +++ b/front_end/sources/module.json @@ -9,8 +9,8 @@ }, { "type": "@WebInspector.ContextMenu.Provider", - "contextTypes": ["WebInspector.UISourceCode", "WebInspector.UILocation", "WebInspector.RemoteObject", "WebInspector.NetworkRequest"], - "className": "WebInspector.SourcesPanel.ContextMenuProvider" + "contextTypes": ["WebInspector.UISourceCode", "WebInspector.UILocation", "WebInspector.RemoteObject", "WebInspector.NetworkRequest", "WebInspector.UISourceCodeFrame"], + "className": "WebInspector.SourcesPanel" }, { "type": "@WebInspector.ActionDelegate", @@ -145,6 +145,35 @@ } ] }, + { + "type": "@WebInspector.ActionDelegate", + "actionId": "sources.add-to-watch", + "className": "WebInspector.WatchExpressionsSidebarPane", + "title": "Add selected text to watches", + "contextTypes": ["WebInspector.UISourceCodeFrame"], + "bindings": [ + { + "shortcut": "Ctrl+Shift+A'" + } + ] + }, + { + "type": "@WebInspector.ContextMenu.Provider", + "contextTypes": ["WebInspector.CodeMirrorTextEditor"], + "className": "WebInspector.WatchExpressionsSidebarPane" + }, + { + "type": "@WebInspector.ActionDelegate", + "actionId": "debugger.evaluate-selection", + "className": "WebInspector.SourcesPanel.DebuggingActionDelegate", + "title": "Evaluate in console", + "contextTypes": ["WebInspector.UISourceCodeFrame"], + "bindings": [ + { + "shortcut": "Ctrl+E'" + } + ] + }, { "type": "context-menu-item", "location": "mainMenu/navigate", @@ -408,6 +437,60 @@ "order": 9, "persistence": "permanent", "className": "WebInspector.EventListenerBreakpointsSidebarPane" + }, + { + "type": "view", + "id": "sources.threads", + "title": "Threads", + "persistence": "permanent", + "className": "WebInspector.ThreadsSidebarPane" + }, + { + "type": "view", + "id": "sources.scopeChain", + "title": "Scope", + "persistence": "permanent", + "className": "WebInspector.ScopeChainSidebarPane" + }, + { + "type": "view", + "id": "sources.watch", + "title": "Watch", + "hasToolbar": true, + "persistence": "permanent", + "className": "WebInspector.WatchExpressionsSidebarPane" + }, + { + "type": "view", + "id": "sources.jsBreakpoints", + "title": "Breakpoints", + "persistence": "permanent", + "className": "WebInspector.JavaScriptBreakpointsSidebarPane" + }, + { + "type": "@WebInspector.ContextFlavorListener", + "contextTypes": ["WebInspector.DebuggerPausedDetails"], + "className": "WebInspector.JavaScriptBreakpointsSidebarPane" + }, + { + "type": "@WebInspector.ContextFlavorListener", + "contextTypes": ["WebInspector.DebuggerPausedDetails"], + "className": "WebInspector.XHRBreakpointsSidebarPane" + }, + { + "type": "@WebInspector.ContextFlavorListener", + "contextTypes": ["WebInspector.DebuggerPausedDetails"], + "className": "WebInspector.DOMBreakpointsSidebarPane" + }, + { + "type": "@WebInspector.ContextFlavorListener", + "contextTypes": ["WebInspector.DebuggerPausedDetails"], + "className": "WebInspector.CallStackSidebarPane" + }, + { + "type": "@WebInspector.ContextFlavorListener", + "contextTypes": ["WebInspector.DebuggerModel.CallFrame"], + "className": "WebInspector.ScopeChainSidebarPane" } ], "dependencies": [ diff --git a/front_end/sources/uiList.css b/front_end/sources/uiList.css index 0cf14f83ff..bc149b2d95 100644 --- a/front_end/sources/uiList.css +++ b/front_end/sources/uiList.css @@ -10,6 +10,9 @@ min-height: 18px; white-space: nowrap; line-height: 20px; +} + +.list-item:not(:last-child) { border-bottom: 1px solid #eee; } diff --git a/front_end/timeline/timelineStatusDialog.css b/front_end/timeline/timelineStatusDialog.css index 1acffc4eea..846e7f4d6f 100644 --- a/front_end/timeline/timelineStatusDialog.css +++ b/front_end/timeline/timelineStatusDialog.css @@ -10,8 +10,9 @@ padding: 12px 16px; align-self: center; background-color: white; - border: 1px solid lightgrey; - box-shadow: grey 0 0 14px; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), + 0 2px 4px rgba(0, 0, 0, 0.2), + 0 2px 6px rgba(0, 0, 0, 0.1); margin-top: -1px; } diff --git a/front_end/ui/ColorSwatch.js b/front_end/ui/ColorSwatch.js index f35a7cfb36..d696846f17 100644 --- a/front_end/ui/ColorSwatch.js +++ b/front_end/ui/ColorSwatch.js @@ -163,3 +163,16 @@ WebInspector.ColorSwatch._nextColorFormat = function(color, curFormat) return cf.RGBA; } } + +WebInspector.BezierSwatch = {} + +/** + * @return {!Element} + */ +WebInspector.BezierSwatch.create = function() +{ + var element = createElementWithClass("span", "bezier-icon"); + var root = WebInspector.createShadowRootWithCoreStyles(element, "ui/bezierSwatch.css"); + root.createChild("span", "bezier-swatch"); + return element; +} diff --git a/front_end/ui/Context.js b/front_end/ui/Context.js index 9ee5fb851e..c657cb1910 100644 --- a/front_end/ui/Context.js +++ b/front_end/ui/Context.js @@ -44,6 +44,10 @@ WebInspector.Context.prototype = { */ _dispatchFlavorChange: function(flavorType, flavorValue) { + self.runtime.extensions(WebInspector.ContextFlavorListener, flavorValue).map(extension => { + extension.instance().then(instance => /** @type {!WebInspector.ContextFlavorListener} */ (instance).flavorChanged(flavorValue)); + }); + var dispatcher = this._eventDispatchers.get(flavorType); if (!dispatcher) return; @@ -116,4 +120,16 @@ WebInspector.Context.prototype = { } } +/** + * @interface + */ +WebInspector.ContextFlavorListener = function() { } + +WebInspector.ContextFlavorListener.prototype = { + /** + * @param {?Object} object + */ + flavorChanged: function(object) { } +} + WebInspector.context = new WebInspector.Context(); diff --git a/front_end/ui/View.js b/front_end/ui/View.js index 5b866d8d44..a5f3fe2b01 100644 --- a/front_end/ui/View.js +++ b/front_end/ui/View.js @@ -301,16 +301,6 @@ WebInspector.ViewManager = function() } WebInspector.ViewManager.prototype = { - /** - * @param {!WebInspector.Widget} widget - */ - revealViewWithWidget: function(widget) - { - var view = widget[WebInspector.View._symbol]; - if (view) - this.revealView(view); - }, - /** * @param {!WebInspector.View} view * @return {!Promise} @@ -324,6 +314,15 @@ WebInspector.ViewManager.prototype = { return location.showView(view); }, + /** + * @param {string} viewId + * @return {?WebInspector.View} + */ + view: function(viewId) + { + return this._views.get(viewId); + }, + /** * @param {string} viewId * @return {!Promise} @@ -335,13 +334,20 @@ WebInspector.ViewManager.prototype = { console.error("Could not find view for id: '" + viewId + "' " + new Error().stack); return Promise.resolve(); } + var locationName = this._locationNameByViewId.get(viewId); if (locationName === "drawer-view") WebInspector.userMetrics.drawerShown(viewId); + var location = view[WebInspector.ViewManager._Location.symbol]; + if (location) { + location._reveal(); + return location.showView(view); + } + return this._resolveLocation(locationName).then(location => { if (!location) - return; + throw new Error("Could not resolve location for view: " + viewId); location._reveal(); return location.showView(view); }); @@ -672,6 +678,7 @@ WebInspector.ViewManager._TabbedLocation.prototype = { throw new Error("Insert before in tabbed pane is not supported"); if (!this._tabbedPane.hasTab(view.viewId())) { view[WebInspector.ViewManager._Location.symbol] = this; + this._manager._views.set(view.viewId(), view); this._views.set(view.viewId(), view); this._appendTab(view); } @@ -772,6 +779,7 @@ WebInspector.ViewManager._StackLocation.prototype = { var container = this._expandableContainers.get(view.viewId()); if (!container) { view[WebInspector.ViewManager._Location.symbol] = this; + this._manager._views.set(view.viewId(), view); container = new WebInspector.ViewManager._ExpandableContainerWidget(view); var beforeElement = null; if (insertBefore) { diff --git a/front_end/ui/bezierSwatch.css b/front_end/ui/bezierSwatch.css new file mode 100644 index 0000000000..20f30c05fe --- /dev/null +++ b/front_end/ui/bezierSwatch.css @@ -0,0 +1,35 @@ +/* + * Copyright 2016 The Chromium Authors. All rights reserved. + * Use of this source code is governed by a BSD-style license that can be + * found in the LICENSE file. + */ + +:host { + white-space: nowrap; +} + +.bezier-swatch { + position: relative; + margin-left: 1px; + margin-right: 2px; + width: 10px; + height: 10px; + top: 1px; + display: inline-block; + -webkit-user-select: none; + line-height: 10px; + -webkit-mask-image: url(Images/smallIcons.png); + -webkit-mask-size: 190px 30px; + -webkit-mask-position: -80px -20px; + background-color: #9C27B0; +} + +@media (-webkit-min-device-pixel-ratio: 1.5) { +.bezier-swatch { + -webkit-mask-image: url(Images/smallIcons_2x.png); +} +} /* media */ + +.bezier-swatch:hover { + background-color: #800080; +} diff --git a/front_end/ui/dialog.css b/front_end/ui/dialog.css index 36fbdfd430..7a3df44ec7 100644 --- a/front_end/ui/dialog.css +++ b/front_end/ui/dialog.css @@ -6,8 +6,9 @@ :host { position: absolute; - border: 1px solid rgb(204, 204, 204); - box-shadow: rgb(140, 140, 140) 0 3px 14px; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), + 0 2px 4px rgba(0, 0, 0, 0.2), + 0 2px 6px rgba(0, 0, 0, 0.1); background: white; justify-content: flex-start; align-items: stretch; diff --git a/front_end/ui/inspectorCommon.css b/front_end/ui/inspectorCommon.css index 45ddbb882b..9bc0fef343 100644 --- a/front_end/ui/inspectorCommon.css +++ b/front_end/ui/inspectorCommon.css @@ -187,8 +187,9 @@ input[type="text"]:focus { .editing { -webkit-user-select: text; - box-shadow: rgba(0, 0, 0, .5) 3px 3px 4px; - outline: 1px solid rgb(66%, 66%, 66%) !important; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), + 0 2px 4px rgba(0, 0, 0, 0.2), + 0 2px 6px rgba(0, 0, 0, 0.1); background-color: white; -webkit-user-modify: read-write-plaintext-only; text-overflow: clip !important; diff --git a/front_end/ui/module.json b/front_end/ui/module.json index e587163650..32269fae24 100644 --- a/front_end/ui/module.json +++ b/front_end/ui/module.json @@ -50,6 +50,7 @@ "ZoomManager.js" ], "resources": [ + "bezierSwatch.css", "checkboxTextLabel.css", "closeButton.css", "colorSwatch.css", diff --git a/front_end/ui/suggestBox.css b/front_end/ui/suggestBox.css index 52bb4bbde4..085b8b0b8c 100644 --- a/front_end/ui/suggestBox.css +++ b/front_end/ui/suggestBox.css @@ -72,7 +72,9 @@ display: flex; flex-direction: column; flex: 0 0 auto; - box-shadow: 0 0 2px hsla(0, 0%, 0%, 0.3); + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), + 0 2px 4px rgba(0, 0, 0, 0.2), + 0 2px 6px rgba(0, 0, 0, 0.1); } .suggest-box .suggest-box-content-item { diff --git a/front_end/ui/textPrompt.css b/front_end/ui/textPrompt.css index 54e7a41de2..e0f93cef73 100644 --- a/front_end/ui/textPrompt.css +++ b/front_end/ui/textPrompt.css @@ -6,8 +6,9 @@ .text-prompt-editing { -webkit-user-select: text; - box-shadow: rgba(0, 0, 0, .5) 3px 3px 4px; - outline: 1px solid rgb(66%, 66%, 66%) !important; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), + 0 2px 4px rgba(0, 0, 0, 0.2), + 0 2px 6px rgba(0, 0, 0, 0.1); background-color: white; -webkit-user-modify: read-write-plaintext-only; text-overflow: clip !important; diff --git a/front_end/ui_lazy/filteredListWidget.css b/front_end/ui_lazy/filteredListWidget.css index 0f3299b738..ab169660a4 100644 --- a/front_end/ui_lazy/filteredListWidget.css +++ b/front_end/ui_lazy/filteredListWidget.css @@ -13,7 +13,7 @@ .filtered-list-widget-prompt-element { flex: 0 0 36px; border: 0; - box-shadow: rgba(140, 140, 140, 0.2) 0 2px 2px; + border-bottom:1px solid rgba(0, 0, 0, 0.2); margin: 0; padding: 0 6px; z-index: 1; diff --git a/front_end/ui_lazy/flameChart.css b/front_end/ui_lazy/flameChart.css index ef387fea1e..b6aef7c74a 100644 --- a/front_end/ui_lazy/flameChart.css +++ b/front_end/ui_lazy/flameChart.css @@ -86,7 +86,9 @@ background-color: white; pointer-events: none; padding: 2px; - box-shadow: hsla(0, 0%, 0%, 0.4) 1px 1px 8px; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), + 0 2px 4px rgba(0, 0, 0, 0.2), + 0 2px 6px rgba(0, 0, 0, 0.1); } .flame-chart-entry-info table tr td:empty {