From 2dead10a56f3366951f15c7ec10fa0db886a4b57 Mon Sep 17 00:00:00 2001 From: Antonin Hildebrand Date: Fri, 19 May 2017 12:20:22 +0200 Subject: [PATCH] squash 'resources/unpacked/devtools' changes from adf72099a..18b86b07d 18b86b07d DevTools: WebSocketFrameView - Add frames display control toolbar 544b916b7 Revert of DevTools: Roll Lighthouse binary to 2.0.0-alpha.7 (patchset #3 id:20001 of https://codereview.chromium.org/2888263002/ ) d658f9ac3 [DevTools] Show icon in top toolbar when Node target is available 993b27c8c DevTools: Roll Lighthouse binary to 2.0.0-alpha.7 Hash: aebc9bdf53754ffd360f7c54c752b046383c2d1b b0155de25 DevTools: Show badges instead of products in ConsoleContextSelector d5903afee [Devtools][Regression] Fixed network film strip sometimes errored 123fed4e4 [DevTools] breakpoint manager should be ready for location from different model 47fe6ba07 DevTools: fix exception on heap snapshot error reporting. fe5908905 DevTools: prep audits panel for Lighthouse roll a60632564 [Devtools] Updated frontend version to 24 - remove products column b1a60f266 [DevTools] update decorations when there is no pending possibleBreakpoints git-subtree-dir: resources/unpacked/devtools git-subtree-split: 18b86b07dc21954f7265146ebb5862c543d7a58b --- BUILD.gn | 2 + front_end/Images/nodeIcon.png | Bin 0 -> 1674 bytes front_end/audits2/Audits2Panel.js | 90 +++----------- front_end/audits2/audits2Panel.css | 62 ---------- front_end/audits2_worker/Audits2Service.js | 6 +- front_end/bindings/BreakpointManager.js | 2 + front_end/common/Settings.js | 10 +- front_end/console/ConsoleContextSelector.js | 115 +++++++++++------- front_end/console/consoleContextSelector.css | 9 +- .../heap_snapshot_worker/HeapSnapshot.js | 2 +- front_end/main/Main.js | 31 +++++ front_end/main/module.json | 8 ++ front_end/main/nodeIcon.css | 23 ++++ front_end/network/NetworkPanel.js | 8 +- .../network/ResourceWebSocketFrameView.js | 80 ++++++++++-- front_end/network/webSocketFrameView.css | 4 + front_end/product_registry/BadgePool.js | 8 +- front_end/sdk/TargetManager.js | 23 ++-- front_end/sources/JavaScriptSourceFrame.js | 102 +++++++++------- front_end/sources/ThreadsSidebarPane.js | 29 +---- front_end/sources/threadsSidebarPane.css | 14 --- 21 files changed, 332 insertions(+), 296 deletions(-) create mode 100644 front_end/Images/nodeIcon.png create mode 100644 front_end/main/nodeIcon.css diff --git a/BUILD.gn b/BUILD.gn index 6814730f26..a976800d61 100644 --- a/BUILD.gn +++ b/BUILD.gn @@ -300,6 +300,7 @@ all_devtools_files = [ "front_end/main/GCActionDelegate.js", "front_end/main/Main.js", "front_end/main/module.json", + "front_end/main/nodeIcon.css", "front_end/main/remoteDebuggingTerminatedScreen.css", "front_end/main/renderingOptions.css", "front_end/main/RenderingOptions.js", @@ -804,6 +805,7 @@ devtools_image_files = [ "front_end/Images/ic_warning_black_18dp.svg", "front_end/Images/navigationControls.png", "front_end/Images/navigationControls_2x.png", + "front_end/Images/nodeIcon.png", "front_end/Images/popoverArrows.png", "front_end/Images/profileGroupIcon.png", "front_end/Images/profileIcon.png", diff --git a/front_end/Images/nodeIcon.png b/front_end/Images/nodeIcon.png new file mode 100644 index 0000000000000000000000000000000000000000..a7929a98eb465e9bcb81fa2ff86fe9c22b0fddab GIT binary patch literal 1674 zcmV;526g#~P)DImx|e?ce^d$64nJ6SQ5un^?bS3%h!|nsUX=2P#qZ`$^S#mjr9Cnl<;(`p&Nw zzxmW=HZI>hA-}?9*!CkEmk*bRAN1D0-6r6zr%;Gc4gWf8`s@vxRy=TMqCO`CvaR>- zYf9DZ!_}y~+&hCf!C3(Z)oMby5~Ie@($Mnj=5*7SzP9qgzDxD37y9y{=Qjed@0G`! z?t5m{e?Y-|W z*t`L_;p_8w>ZM;@dT6?y`~0#(l)K+rcfC4A#eg#yr-&209~~NJJ3N5!4tAHJI8`8XKDSHl~_B{hn)Y%rBa^gdg_q#A5ml>960bu`rr!( zyJ8=$_dc11H;e|kG)1g+L{UO)Eyf6Ue;(O1lnp8NABo`3n zbet6S6N8c3E!I1n^Ef=-f%6W*b8={KRIQu^2~;q~Q0!~KyD4hIA~gs%q68igvZW%! z#X>D?V?k83mg&wAWdo+loby;WqKb3G*74fF8A34x^%|Nnii)DDR0mR12jU&h)t2|3 zOsRmi4kwE9^%T(&7*()_%IOp$Qv*{;qLJ{xnS2(}+QxEDWsC}qieOaGK#21pE|Muy z#ZygU28(%|vv2Gy{(KNo(12Rw5y6O1$>?QQ%~&f%6^hj|sv$-VN^PGyAc7)@GSU&1 ze;*qriS1=hEn`%{;}KFSD2i%OKQySvn_3H2RWhYKrD~Ob{4Im3FlibOiBAAeXp~SD zQ$I%>A`TQ{m(ZUbLRBahV+MyRQ`2reRFfDZU=)nj0deX<9U_+3GegKZ3iS8qYhL{1 zVPcoy0V9f$I(@{7#j7WBF_~g%)cu)kg={XGvU1K=%NPkTYU+U`SWP%~Y7jr>a%{$dG?Ni7&iKHA?tT|L{mTPfigLpo!oQ|$cN{AhIOC#RC32hHf-*g z(eakH<{5j(g;C*OCkHPZq`i5@&pW1fT>azQ_H0=&_qt@~x*Zpuc0Sv)dg+OQ6Zci) zXrUidEh55#`EzJWr*X;o!*h~25@(4MN1Vh|k{Ch$*xKB_dH3o)hcD>`>!&aL1a5*y zSNH6n+0wRn?(DfsQ$eaQcG!9K_$iFJ_<$RlRPLIYS9eaI*1BZ(>OF^V+}6n>&-~!x zAU9uk3+$_1w>Gug$JRW4;GR$3J-fM~>3e|*a{rr0vxO3;2D5dm%mYSErXiL7&OIwP zy=mLWcOAa6y~6?=yz}>bamj6y8$@q?^p-1g#oWV#`Jt5njp;P+c this._protocolService.startLighthouse(this._inspectedURL, categoryIDs)) - .then(lighthouseResult => - this._stopAndReattach().then(() => this._buildReportUI(lighthouseResult)) - ).catch(err => { + .then(lighthouseResult => { + if (lighthouseResult && lighthouseResult.fatal) { + const error = new Error(lighthouseResult.message); + error.stack = lighthouseResult.stack; + throw error; + } + + return this._stopAndReattach().then(() => this._buildReportUI(lighthouseResult)); + }) + .catch(err => { if (err instanceof Error) this._renderBugReport(err); - }); + }); } _hideDialog() { @@ -266,6 +273,8 @@ Audits2.Audits2Panel = class extends UI.PanelWithSidebar { var title = encodeURI('title=DevTools Error: ' + err.message.substring(0, 60)); var qsBody = ''; + qsBody += '**Initial URL**: ' + this._inspectedURL + '\n'; + qsBody += '**Chrome Version**: ' + navigator.userAgent.match(/Chrome\/(\S+)/)[1] + '\n'; qsBody += '**Error Message**: ' + err.message + '\n'; qsBody += '**Stack Trace**:\n ```' + err.stack + '```'; var body = '&body=' + encodeURI(qsBody); @@ -540,7 +549,7 @@ Audits2.Audits2Panel.TreeElement = class extends UI.TreeElement { return; } - this._reportContainer = this._resultsView.createChild('div', 'report-container lh-vars lh-root'); + this._reportContainer = this._resultsView.createChild('div', 'report-container lh-vars lh-root lh-devtools'); var dom = new DOM(/** @type {!Document} */ (this._resultsView.ownerDocument)); var detailsRenderer = new Audits2.DetailsRenderer(dom); @@ -554,77 +563,6 @@ Audits2.Audits2Panel.TreeElement = class extends UI.TreeElement { renderer.setTemplateContext(templatesDOM); renderer.renderReport(this._lighthouseResult, this._reportContainer); - - var performanceScoreElement = this._reportContainer.querySelector('.lh-category[id=performance] .lh-score'); - var artifacts = this._lighthouseResult['artifacts']; - if (!performanceScoreElement || !artifacts) - return; - var tracePass = artifacts['traces'] ? artifacts['traces']['defaultPass'] : null; - if (!tracePass) - return; - - var fmp = this._lighthouseResult['audits']['first-meaningful-paint']; - if (!fmp || !fmp['extendedInfo']) - return; - - var tti = this._lighthouseResult['audits']['time-to-interactive']; - if (!tti || !tti['extendedInfo']) - return; - - var navStart = fmp['extendedInfo']['value']['timestamps']['navStart']; - var markers = [ - { - title: Common.UIString('First contentful paint'), - value: (fmp['extendedInfo']['value']['timestamps']['fCP'] - navStart) / 1000 - }, - { - title: Common.UIString('First meaningful paint'), - value: (fmp['extendedInfo']['value']['timestamps']['fMP'] - navStart) / 1000 - }, - { - title: Common.UIString('Time to interactive'), - value: (tti['extendedInfo']['value']['timestamps']['timeToInteractive'] - navStart) / 1000 - }, - { - title: Common.UIString('Visually ready'), - value: (tti['extendedInfo']['value']['timestamps']['visuallyReady'] - navStart) / 1000 - } - ]; - - var timeSpan = Math.max(...markers.map(marker => marker.value)); - var screenshots = tracePass.traceEvents.filter(e => e.cat === 'disabled-by-default-devtools.screenshot'); - var timelineElement = createElementWithClass('div', 'audits2-timeline'); - var filmStripElement = timelineElement.createChild('div', 'audits2-filmstrip'); - - var numberOfFrames = 8; - var roundToMs = 100; - var timeStep = (Math.ceil(timeSpan / numberOfFrames / roundToMs)) * roundToMs; - - for (var time = 0; time < timeSpan; time += timeStep) { - var frameForTime = null; - for (var e of screenshots) { - if ((e.ts - navStart) / 1000 < time + timeStep) - frameForTime = e.args.snapshot; - } - var frame = filmStripElement.createChild('div', 'frame'); - frame.createChild('div', 'time').textContent = Number.millisToString(time + timeStep); - - var thumbnail = frame.createChild('div', 'thumbnail'); - if (frameForTime) { - var img = thumbnail.createChild('img'); - img.src = 'data:image/jpg;base64,' + frameForTime; - } - } - - for (var marker of markers) { - var markerElement = timelineElement.createChild('div', 'audits2-timeline-marker'); - markerElement.createChild('div', 'audits2-timeline-bar').style.width = - (100 * (marker.value / timeSpan) | 0) + '%'; - markerElement.createChild('span').textContent = Common.UIString('%s: ', marker.title); - markerElement.createChild('span', 'audits2-timeline-subtitle').textContent = Number.millisToString(marker.value); - } - - performanceScoreElement.parentElement.insertBefore(timelineElement, performanceScoreElement.nextSibling); } }; diff --git a/front_end/audits2/audits2Panel.css b/front_end/audits2/audits2Panel.css index 136e787726..f4538ea5ed 100644 --- a/front_end/audits2/audits2Panel.css +++ b/front_end/audits2/audits2Panel.css @@ -54,65 +54,3 @@ overflow: auto; position: relative; } - -.audits2-timeline { - display: flex; - flex-direction: column; - border-top: 1px solid #ccc; - border-bottom: 1px solid #ccc; - padding: 5px 0; - margin: 5px 0 0 68px; - overflow: auto; -} - -.lh-filmstrip { - display: none !important; -} - -.audits2-filmstrip { - display: flex; - flex-direction: row; - margin-bottom: 20px; -} - -.audits2-filmstrip .frame { - display: flex; - flex-direction: column; - align-items: center; - padding: 4px; - flex: none; -} - -.audits2-filmstrip .frame .thumbnail { - display: flex; - width: 54px; - height: 100%; - flex-direction: row; - align-items: center; - margin: 4px 0 2px; - border: 2px solid transparent; - box-shadow: 0 0 3px #bbb; -} - -.audits2-filmstrip .frame .thumbnail img { - height: auto; - width: 50px; - flex: 0 0 auto; -} - -.audits2-filmstrip .frame .time { - margin-top: 2px; -} - -.audits2-timeline-marker { - margin: 4px 0 6px; - width: calc(68px * 7); -} - -.audits2-timeline-subtitle { - color: #01579B; -} - -.audits2-timeline-bar { - border-top: 4px solid #03A9F4; -} diff --git a/front_end/audits2_worker/Audits2Service.js b/front_end/audits2_worker/Audits2Service.js index 65dd3543a1..1602c38a7c 100644 --- a/front_end/audits2_worker/Audits2Service.js +++ b/front_end/audits2_worker/Audits2Service.js @@ -56,7 +56,11 @@ var Audits2Service = class { result.artifacts = {traces: traces}; return result; }) - .catchException(null); + .catch(err => ({ + fatal: true, + message: err.message, + stack: err.stack, + })); } /** diff --git a/front_end/bindings/BreakpointManager.js b/front_end/bindings/BreakpointManager.js index 2883d3756e..0098240bce 100644 --- a/front_end/bindings/BreakpointManager.js +++ b/front_end/bindings/BreakpointManager.js @@ -816,6 +816,8 @@ Bindings.BreakpointManager.ModelBreakpoint = class { var debuggerLocation = uiSourceCode && Bindings.debuggerWorkspaceBinding.uiLocationToRawLocation(uiSourceCode, lineNumber, columnNumber); + if (debuggerLocation && debuggerLocation.debuggerModel !== this._debuggerModel) + debuggerLocation = null; var newState; if (this._breakpoint._isRemoved || !this._breakpoint.enabled() || this._scriptDiverged()) { newState = null; diff --git a/front_end/common/Settings.js b/front_end/common/Settings.js index 280e168499..794630a2f9 100644 --- a/front_end/common/Settings.js +++ b/front_end/common/Settings.js @@ -766,6 +766,14 @@ Common.VersionController = class { oldSetting.remove(); } + _updateVersionFrom24To25() { + var defaultColumns = {status: true, type: true, initiator: true, size: true, time: true}; + var networkLogColumnsSetting = Common.settings.createSetting('networkLogColumns', defaultColumns); + var columns = networkLogColumnsSetting.get(); + delete columns.product; + networkLogColumnsSetting.set(columns); + } + _migrateSettingsFromLocalStorage() { // This step migrates all the settings except for the ones below into the browser profile. var localSettings = new Set([ @@ -798,7 +806,7 @@ Common.VersionController = class { }; Common.VersionController._currentVersionName = 'inspectorVersion'; -Common.VersionController.currentVersion = 24; +Common.VersionController.currentVersion = 25; /** * @type {!Common.Settings} diff --git a/front_end/console/ConsoleContextSelector.js b/front_end/console/ConsoleContextSelector.js index d1ca0b8632..673b08a7b3 100644 --- a/front_end/console/ConsoleContextSelector.js +++ b/front_end/console/ConsoleContextSelector.js @@ -11,12 +11,10 @@ Console.ConsoleContextSelector = class { var shadowRoot = UI.createShadowRootWithCoreStyles(this._toolbarItem.element, 'console/consoleContextSelectorButton.css'); this._titleElement = shadowRoot.createChild('span', 'title'); - this._productRegistry = null; - ProductRegistry.instance().then(registry => { - this._productRegistry = registry; - this._list.refreshAllItems(); - }); + /** @type {!Map} */ + this._badgePoolForExecutionContext = new Map(); + this._toolbarItem.element.classList.add('toolbar-has-dropdown'); this._toolbarItem.element.tabIndex = 0; this._glassPane = new UI.GlassPane(); @@ -27,7 +25,7 @@ Console.ConsoleContextSelector = class { this._list = new UI.ListControl(this, UI.ListMode.EqualHeightItems); this._list.element.classList.add('context-list'); this._list.element.tabIndex = -1; - this._rowHeight = 34; + this._rowHeight = 36; UI.createShadowRootWithCoreStyles(this._glassPane.contentElement, 'console/consoleContextSelector.css') .appendChild(this._list.element); @@ -88,9 +86,11 @@ Console.ConsoleContextSelector = class { this._glassPane.setContentAnchorBox(this._toolbarItem.element.boxInWindow()); this._glassPane.show(/** @type {!Document} **/ (this._toolbarItem.element.ownerDocument)); this._updateGlasspaneSize(); - var selectedItem = this._list.selectedItem(); - if (selectedItem) - this._list.scrollItemIntoView(selectedItem, true); + var selectedContext = UI.context.flavor(SDK.ExecutionContext); + if (selectedContext) { + this._list.selectItem(selectedContext); + this._list.scrollItemIntoView(selectedContext, true); + } this._toolbarItem.element.focus(); event.consume(true); setTimeout(() => this._listWasShowing200msAgo = true, 200); @@ -109,9 +109,6 @@ Console.ConsoleContextSelector = class { setTimeout(() => this._listWasShowing200msAgo = false, 200); this._glassPane.hide(); SDK.OverlayModel.hideDOMNodeHighlight(); - var selectedContext = UI.context.flavor(SDK.ExecutionContext); - if (selectedContext) - this._list.selectItem(selectedContext); event.consume(true); } @@ -264,6 +261,33 @@ Console.ConsoleContextSelector = class { return depth; } + /** + * @param {!SDK.ExecutionContext} executionContext + * @return {?Element} + */ + _badgeFor(executionContext) { + if (!executionContext.frameId || !executionContext.isDefault) + return null; + var resourceTreeModel = executionContext.target().model(SDK.ResourceTreeModel); + var frame = resourceTreeModel && resourceTreeModel.frameForId(executionContext.frameId); + if (!frame) + return null; + var badgePool = new ProductRegistry.BadgePool(); + this._badgePoolForExecutionContext.set(executionContext, badgePool); + return badgePool.badgeForFrame(frame); + } + + /** + * @param {!SDK.ExecutionContext} executionContext + */ + _disposeExecutionContextBadge(executionContext) { + var badgePool = this._badgePoolForExecutionContext.get(executionContext); + if (!badgePool) + return; + badgePool.reset(); + this._badgePoolForExecutionContext.delete(executionContext); + } + /** * @param {!SDK.ExecutionContext} executionContext */ @@ -275,10 +299,8 @@ Console.ConsoleContextSelector = class { this._list.insertItemWithComparator(executionContext, executionContext.runtimeModel.executionContextComparator()); - if (executionContext === UI.context.flavor(SDK.ExecutionContext)) { - this._list.selectItem(executionContext); - this._updateSelectedContext(); - } + if (executionContext === UI.context.flavor(SDK.ExecutionContext)) + this._updateSelectionTitle(); } /** @@ -287,7 +309,7 @@ Console.ConsoleContextSelector = class { _onExecutionContextCreated(event) { var executionContext = /** @type {!SDK.ExecutionContext} */ (event.data); this._executionContextCreated(executionContext); - this._updateSelectionWarning(); + this._updateSelectionTitle(); this._updateGlasspaneSize(); } @@ -300,7 +322,7 @@ Console.ConsoleContextSelector = class { return; this._executionContextDestroyed(executionContext); this._executionContextCreated(executionContext); - this._updateSelectionWarning(); + this._updateSelectionTitle(); } /** @@ -309,6 +331,7 @@ Console.ConsoleContextSelector = class { _executionContextDestroyed(executionContext) { if (this._list.indexOfItem(executionContext) === -1) return; + this._disposeExecutionContextBadge(executionContext); this._list.removeItem(executionContext); this._updateGlasspaneSize(); } @@ -319,7 +342,7 @@ Console.ConsoleContextSelector = class { _onExecutionContextDestroyed(event) { var executionContext = /** @type {!SDK.ExecutionContext} */ (event.data); this._executionContextDestroyed(executionContext); - this._updateSelectionWarning(); + this._updateSelectionTitle(); } /** @@ -333,8 +356,12 @@ Console.ConsoleContextSelector = class { this._updateSelectedContext(); } - _updateSelectionWarning() { + _updateSelectionTitle() { var executionContext = UI.context.flavor(SDK.ExecutionContext); + if (executionContext) + this._titleElement.textContent = this._titleFor(executionContext); + else + this._titleElement.textContent = ''; this._toolbarItem.element.classList.toggle( 'warning', !this._isTopContext(executionContext) && this._hasTopContext()); } @@ -391,8 +418,16 @@ Console.ConsoleContextSelector = class { createElementForItem(item) { var element = createElementWithClass('div', 'context'); element.style.paddingLeft = (8 + this._depthFor(item) * 15) + 'px'; - element.createChild('div', 'title').textContent = this._titleFor(item).trimEnd(100); - element.createChild('div', 'subtitle').textContent = this._subtitleFor(item); + // var titleArea = element.createChild('div', 'title-area'); + var title = element.createChild('div', 'title'); + title.createTextChild(this._titleFor(item).trimEnd(100)); + var subTitle = element.createChild('div', 'subtitle'); + var badgeElement = this._badgeFor(item); + if (badgeElement) { + badgeElement.classList.add('badge'); + subTitle.appendChild(badgeElement); + } + subTitle.createTextChild(this._subtitleFor(item)); element.addEventListener('mousemove', e => { if ((e.movementX || e.movementY) && this.isItemSelectable(item)) this._list.selectItem(item, false, /* Don't scroll */ true); @@ -415,27 +450,15 @@ Console.ConsoleContextSelector = class { return Common.UIString('Extension'); if (!frame || !frame.parentFrame || frame.parentFrame.securityOrigin !== executionContext.origin) { var url = executionContext.origin.asParsedURL(); - if (url) { - if (this._productRegistry) { - var product = this._productRegistry.nameForUrl(url); - if (product) - return product; - } + if (url) return url.domain(); - } } if (frame) { var callFrame = frame.findCreationCallFrame(callFrame => !!callFrame.url); - if (callFrame) { - var url = new Common.ParsedURL(callFrame.url); - if (this._productRegistry) { - var product = this._productRegistry.nameForUrl(url); - if (product) - return product; - } - return url.domain(); - } + if (callFrame) + return new Common.ParsedURL(callFrame.url).domain(); + return Common.UIString('IFrame'); } return ''; } @@ -446,7 +469,7 @@ Console.ConsoleContextSelector = class { * @return {number} */ heightForItem(item) { - return 0; + return this._rowHeight; } /** @@ -482,12 +505,8 @@ Console.ConsoleContextSelector = class { _updateSelectedContext() { var context = this._list.selectedItem(); - if (context) - this._titleElement.textContent = this._titleFor(context); - else - this._titleElement.textContent = ''; UI.context.setFlavor(SDK.ExecutionContext, context); - this._updateSelectionWarning(); + this._updateSelectionTitle(); } _callFrameSelectedInUI() { @@ -503,8 +522,10 @@ Console.ConsoleContextSelector = class { _callFrameSelectedInModel(event) { var debuggerModel = /** @type {!SDK.DebuggerModel} */ (event.data); for (var i = 0; i < this._list.length(); i++) { - if (this._list.itemAtIndex(i).debuggerModel === debuggerModel) + if (this._list.itemAtIndex(i).debuggerModel === debuggerModel) { + this._disposeExecutionContextBadge(this._list.itemAtIndex(i)); this._list.refreshItemsInRange(i, i + 1); + } } } @@ -514,8 +535,10 @@ Console.ConsoleContextSelector = class { _frameNavigated(event) { var frameId = event.data.id; for (var i = 0; i < this._list.length(); i++) { - if (frameId === this._list.itemAtIndex(i).frameId) + if (frameId === this._list.itemAtIndex(i).frameId) { + this._disposeExecutionContextBadge(this._list.itemAtIndex(i)); this._list.refreshItemsInRange(i, i + 1); + } } } }; diff --git a/front_end/console/consoleContextSelector.css b/front_end/console/consoleContextSelector.css index 845c9ae76b..1bc81794e8 100644 --- a/front_end/console/consoleContextSelector.css +++ b/front_end/console/consoleContextSelector.css @@ -8,7 +8,7 @@ white-space: nowrap; display: flex; flex-direction: column; - height: 34px; + height: 36px; justify-content: center; } @@ -22,6 +22,13 @@ flex-grow: 0; } +.badge { + pointer-events: none; + margin-right: 4px; + display: inline-block; + height: 15px; +} + .subtitle { color: #999; margin-right: 3px; diff --git a/front_end/heap_snapshot_worker/HeapSnapshot.js b/front_end/heap_snapshot_worker/HeapSnapshot.js index 247a40c4bc..c1dd719b22 100644 --- a/front_end/heap_snapshot_worker/HeapSnapshot.js +++ b/front_end/heap_snapshot_worker/HeapSnapshot.js @@ -2414,8 +2414,8 @@ HeapSnapshotWorker.JSHeapSnapshot = class extends HeapSnapshotWorker.HeapSnapsho detachedDOMTreeNode: 2, pageObject: 4 // The idea is to track separately the objects owned by the page and the objects owned by debugger. }; - this.initialize(); this._lazyStringCache = {}; + this.initialize(); } /** diff --git a/front_end/main/Main.js b/front_end/main/Main.js index 576a84000c..22660ca2fe 100644 --- a/front_end/main/Main.js +++ b/front_end/main/Main.js @@ -728,6 +728,37 @@ Main.Main.MainMenuItem = class { } }; +/** + * @implements {UI.ToolbarItem.Provider} + */ +Main.Main.NodeIndicator = class { + constructor() { + var element = createElement('div'); + var shadowRoot = UI.createShadowRootWithCoreStyles(element, 'main/nodeIcon.css'); + this._element = shadowRoot.createChild('div', 'node-icon'); + element.addEventListener('click', () => InspectorFrontendHost.openNodeFrontend(), false); + this._button = new UI.ToolbarItem(element); + this._button.setTitle(Common.UIString('Open dedicated DevTools for Node.js')); + SDK.targetManager.addEventListener(SDK.TargetManager.Events.AvailableNodeTargetsChanged, this._update, this); + this._button.setVisible(false); + this._update(); + } + + _update() { + this._element.classList.toggle('inactive', !SDK.targetManager.availableNodeTargetsCount()); + if (SDK.targetManager.availableNodeTargetsCount()) + this._button.setVisible(true); + } + + /** + * @override + * @return {?UI.ToolbarItem} + */ + item() { + return this._button; + } +}; + Main.NetworkPanelIndicator = class { constructor() { // TODO: we should not access network from other modules. diff --git a/front_end/main/module.json b/front_end/main/module.json index 2a7f138cdc..d911c77ae7 100644 --- a/front_end/main/module.json +++ b/front_end/main/module.json @@ -202,6 +202,13 @@ "location": "main-toolbar-left", "order": 100 }, + { + "type": "@UI.ToolbarItem.Provider", + "className": "Main.Main.NodeIndicator", + "order": 2, + "location": "main-toolbar-left", + "condition": "!nodeFrontend" + }, { "type": "@UI.ToolbarItem.Provider", "className": "Main.Main.WarningErrorCounter", @@ -438,6 +445,7 @@ ], "resources": [ "errorWarningCounter.css", + "nodeIcon.css", "remoteDebuggingTerminatedScreen.css", "renderingOptions.css", "targetCrashedScreen.css" diff --git a/front_end/main/nodeIcon.css b/front_end/main/nodeIcon.css new file mode 100644 index 0000000000..326247d333 --- /dev/null +++ b/front_end/main/nodeIcon.css @@ -0,0 +1,23 @@ +/* + * Copyright 2017 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. + */ + +.node-icon { + width: 28px; + height: 26px; + background-image: url(Images/nodeIcon.png); + background-size: 17px 17px; + background-repeat: no-repeat; + background-position: center; + opacity: 0.8; +} + +.node-icon:hover { + opacity: 1.0; +} + +.node-icon.inactive { + filter: grayscale(100%); +} diff --git a/front_end/network/NetworkPanel.js b/front_end/network/NetworkPanel.js index ad034bdf59..4546ccc77d 100644 --- a/front_end/network/NetworkPanel.js +++ b/front_end/network/NetworkPanel.js @@ -51,6 +51,8 @@ Network.NetworkPanel = class extends UI.Panel { this._filterBar = new UI.FilterBar('networkPanel', true); this._filterBar.show(this.element); + this._filmStripPlaceholderElement = this.element.createChild('div'); + // Create top overview component. this._overviewPane = new PerfUI.TimelineOverviewPane('network'); this._overviewPane.addEventListener( @@ -58,6 +60,8 @@ Network.NetworkPanel = class extends UI.Panel { this._overviewPane.element.id = 'network-overview-panel'; this._networkOverview = new Network.NetworkOverview(); this._overviewPane.setOverviewControls([this._networkOverview]); + this._overviewPlaceholderElement = this.element.createChild('div'); + this._calculator = new Network.NetworkTransferTimeCalculator(); this._splitWidget = new UI.SplitWidget(true, false, 'networkPanelSplitViewState'); @@ -296,7 +300,7 @@ Network.NetworkPanel = class extends UI.Panel { _toggleShowOverview() { var toggled = this._networkLogShowOverviewSetting.get(); if (toggled) - this._overviewPane.show(this.element, this._splitWidget.element); + this._overviewPane.show(this._overviewPlaceholderElement); else this._overviewPane.detach(); this.doResize(); @@ -310,7 +314,7 @@ Network.NetworkPanel = class extends UI.Panel { this._filmStripView.element.classList.add('network-film-strip'); this._filmStripRecorder = new Network.NetworkPanel.FilmStripRecorder(this._networkLogView.timeCalculator(), this._filmStripView); - this._filmStripView.show(this.element, this._overviewPane.element); + this._filmStripView.show(this._filmStripPlaceholderElement); this._filmStripView.addEventListener(PerfUI.FilmStripView.Events.FrameSelected, this._onFilmFrameSelected, this); this._filmStripView.addEventListener(PerfUI.FilmStripView.Events.FrameEnter, this._onFilmFrameEnter, this); this._filmStripView.addEventListener(PerfUI.FilmStripView.Events.FrameExit, this._onFilmFrameExit, this); diff --git a/front_end/network/ResourceWebSocketFrameView.js b/front_end/network/ResourceWebSocketFrameView.js index acf15e9b77..194848ad23 100644 --- a/front_end/network/ResourceWebSocketFrameView.js +++ b/front_end/network/ResourceWebSocketFrameView.js @@ -44,7 +44,7 @@ Network.ResourceWebSocketFrameView = class extends UI.VBox { ]); this._dataGrid = new DataGrid.SortableDataGrid(columns); - this._dataGrid.setRowContextMenuCallback(onRowContextMenu); + this._dataGrid.setRowContextMenuCallback(onRowContextMenu.bind(this)); this._dataGrid.setStickToBottom(true); this._dataGrid.setCellClass('websocket-frame-view-td'); this._timeComparator = @@ -57,10 +57,34 @@ Network.ResourceWebSocketFrameView = class extends UI.VBox { this._dataGrid.setName('ResourceWebSocketFrameView'); this._dataGrid.addEventListener(DataGrid.DataGrid.Events.SelectedNode, this._onFrameSelected, this); this._dataGrid.addEventListener(DataGrid.DataGrid.Events.DeselectedNode, this._onFrameDeselected, this); - this._splitWidget.setMainWidget(this._dataGrid.asWidget()); - var view = new UI.EmptyWidget('Select frame to browse its content.'); - this._splitWidget.setSidebarWidget(view); + this._mainToolbar = new UI.Toolbar(''); + + this._clearAllButton = new UI.ToolbarButton(Common.UIString('Clear All'), 'largeicon-clear'); + this._clearAllButton.addEventListener(UI.ToolbarButton.Events.Click, this._clearFrames, this); + this._mainToolbar.appendToolbarItem(this._clearAllButton); + + this._filterTypeCombobox = new UI.ToolbarComboBox(this._updateFilterSetting.bind(this)); + for (var filterItem of Network.ResourceWebSocketFrameView._filterTypes) { + var option = this._filterTypeCombobox.createOption(filterItem.label, filterItem.label, filterItem.name); + this._filterTypeCombobox.addOption(option); + } + this._mainToolbar.appendToolbarItem(this._filterTypeCombobox); + this._filterType = null; + + var placeholder = 'Enter regex, for example: (web)?socket'; + this._filterTextInput = new UI.ToolbarInput(Common.UIString(placeholder), 0.4, undefined, true); + this._filterTextInput.addEventListener(UI.ToolbarInput.Event.TextChanged, this._updateFilterSetting, this); + this._mainToolbar.appendToolbarItem(this._filterTextInput); + this._filterRegex = null; + + var mainContainer = new UI.VBox(); + mainContainer.element.appendChild(this._mainToolbar.element); + this._dataGrid.asWidget().show(mainContainer.element); + this._splitWidget.setMainWidget(mainContainer); + + this._frameEmptyWidget = new UI.EmptyWidget(Common.UIString('Select frame to browse its content.')); + this._splitWidget.setSidebarWidget(this._frameEmptyWidget); /** @type {?Network.ResourceWebSocketFrameNode} */ this._selectedNode = null; @@ -68,11 +92,14 @@ Network.ResourceWebSocketFrameView = class extends UI.VBox { /** * @param {!UI.ContextMenu} contextMenu * @param {!DataGrid.DataGridNode} node + * @this {Network.ResourceWebSocketFrameView} */ function onRowContextMenu(contextMenu, node) { contextMenu.appendItem( Common.UIString.capitalize('Copy ^message'), InspectorFrontendHost.copyText.bind(InspectorFrontendHost, node.data.data)); + contextMenu.appendSeparator(); + contextMenu.appendItem(Common.UIString.capitalize('Clear ^all'), this._clearFrames.bind(this)); } } @@ -107,11 +134,37 @@ Network.ResourceWebSocketFrameView = class extends UI.VBox { */ _frameAdded(event) { var frame = /** @type {!SDK.NetworkRequest.WebSocketFrame} */ (event.data); + if (!this._frameFilter(frame)) + return; this._dataGrid.insertChild(new Network.ResourceWebSocketFrameNode(this._request.url(), frame)); } /** - * @param {!Common.Event} event + * @param {!SDK.NetworkRequest.WebSocketFrame} frame + * @return {boolean} + */ + _frameFilter(frame) { + if (this._filterType && frame.type !== this._filterType) + return false; + return !this._filterRegex || this._filterRegex.test(frame.text); + } + + _clearFrames() { + // TODO(allada): actially remove frames from request. + this._request[Network.ResourceWebSocketFrameView._clearFrameOffsetSymbol] = this._request.frames().length; + this.refresh(); + } + + _updateFilterSetting() { + var text = this._filterTextInput.value(); + var type = this._filterTypeCombobox.selectedOption().value; + this._filterRegex = text ? new RegExp(text, 'i') : null; + this._filterType = type === 'all' ? null : type; + this.refresh(); + } + + /** + * @param {!Common.Event} event */ _onFrameSelected(event) { var selectedNode = /** @type {!Network.ResourceWebSocketFrameNode} */ (event.data); @@ -148,13 +201,18 @@ Network.ResourceWebSocketFrameView = class extends UI.VBox { */ _onFrameDeselected(event) { this._currentSelectedNode = null; + this._splitWidget.setSidebarWidget(this._frameEmptyWidget); } refresh() { this._dataGrid.rootNode().removeChildren(); + + var url = this._request.url(); var frames = this._request.frames(); - for (var i = 0; i < frames.length; ++i) - this._dataGrid.insertChild(new Network.ResourceWebSocketFrameNode(this._request.url(), frames[i])); + var offset = this._request[Network.ResourceWebSocketFrameView._clearFrameOffsetSymbol] || 0; + frames = frames.slice(offset); + frames = frames.filter(this._frameFilter.bind(this)); + frames.forEach(frame => this._dataGrid.insertChild(new Network.ResourceWebSocketFrameNode(url, frame))); } _sortItems() { @@ -185,6 +243,12 @@ Network.ResourceWebSocketFrameView.opCodeDescriptions = (function() { return map; })(); +/** @type {!Array} */ +Network.ResourceWebSocketFrameView._filterTypes = [ + {name: 'all', label: Common.UIString('All')}, + {name: 'send', label: Common.UIString('Send')}, + {name: 'receive', label: Common.UIString('Receive')}, +]; /** * @unrestricted @@ -253,3 +317,5 @@ Network.ResourceWebSocketFrameNode = class extends DataGrid.SortableDataGridNode Network.ResourceWebSocketFrameNodeTimeComparator = function(a, b) { return a._frame.time - b._frame.time; }; + +Network.ResourceWebSocketFrameView._clearFrameOffsetSymbol = Symbol('ClearFrameOffset'); diff --git a/front_end/network/webSocketFrameView.css b/front_end/network/webSocketFrameView.css index 4e2230ec1c..f1d2d481e1 100644 --- a/front_end/network/webSocketFrameView.css +++ b/front_end/network/webSocketFrameView.css @@ -43,3 +43,7 @@ background-color: rgb(255, 237, 237); color: rgb(182, 0, 0); } + +.websocket-frame-view .toolbar { + border-bottom: 1px solid #dadada; +} diff --git a/front_end/product_registry/BadgePool.js b/front_end/product_registry/BadgePool.js index 133d8dff23..31f719cf4e 100644 --- a/front_end/product_registry/BadgePool.js +++ b/front_end/product_registry/BadgePool.js @@ -35,9 +35,9 @@ ProductRegistry.BadgePool = class { * @return {!Element} */ _badgeForFrameOrUrl(urlResolver) { - var element = createElement('span'); + var element = createElementWithClass('span', 'hidden'); var root = UI.createShadowRootWithCoreStyles(element, 'product_registry/badge.css'); - var badgeElement = root.createChild('span', 'product-registry-badge monospace hidden'); + var badgeElement = root.createChild('span', 'product-registry-badge monospace'); badgeElement.setAttribute('data-initial', ' '); badgeElement.title = ''; badgeElement.addEventListener('mousedown', event => event.consume()); @@ -98,14 +98,14 @@ ProductRegistry.BadgePool = class { badgeElement.setAttribute('data-initial', label.substring(0, 2).toUpperCase()); badgeElement.title = entryName; badgeElement.style.backgroundColor = ProductRegistry.BadgePool.colorForEntryName(entryName); - badgeElement.classList.toggle('hidden', !this._setting.get()); + badgeElement.parentNodeOrShadowHost().parentNodeOrShadowHost().classList.toggle('hidden', !this._setting.get()); } _settingUpdated() { var enabled = this._setting.get(); if (!enabled) { for (var badgeElement of this._badgeElements.keys()) - badgeElement.classList.add('hidden'); + badgeElement.parentNodeOrShadowHost().parentNodeOrShadowHost().classList.add('hidden'); return; } for (var badgeElement of this._badgeElements.keys()) diff --git a/front_end/sdk/TargetManager.js b/front_end/sdk/TargetManager.js index cc8ee55fe6..eeb0e03da4 100644 --- a/front_end/sdk/TargetManager.js +++ b/front_end/sdk/TargetManager.js @@ -328,9 +328,9 @@ SDK.TargetManager = class extends Common.Object { _connectAndCreateMainTarget() { if (Runtime.queryParam('nodeFrontend')) { var target = new SDK.Target( - this, 'main', Common.UIString('Node'), SDK.Target.Capability.Target, this._createMainConnection.bind(this), + this, 'main', Common.UIString('Node.js'), SDK.Target.Capability.Target, this._createMainConnection.bind(this), null); - target.setInspectedURL('Node'); + target.setInspectedURL('Node.js'); this._childTargetManagers.set(target, new SDK.ChildTargetManager(this, target)); Host.userMetrics.actionTaken(Host.UserMetrics.Action.ConnectToNodeJSFromFrontend); return; @@ -410,13 +410,15 @@ SDK.ChildTargetManager = class { if (Runtime.experiments.isEnabled('autoAttachToCrossProcessSubframes')) this._targetAgent.setAttachToFrames(true); - if (!parentTarget.parentTarget()) + if (!parentTarget.parentTarget()) { this._targetAgent.setDiscoverTargets(true); - - if (Runtime.queryParam('nodeFrontend') && !this._parentTarget.parentTarget()) { - InspectorFrontendHost.setDevicesUpdatesEnabled(true); - InspectorFrontendHost.events.addEventListener( - InspectorFrontendHostAPI.Events.DevicesDiscoveryConfigChanged, this._devicesDiscoveryConfigChanged, this); + if (Runtime.queryParam('nodeFrontend')) { + InspectorFrontendHost.setDevicesUpdatesEnabled(true); + InspectorFrontendHost.events.addEventListener( + InspectorFrontendHostAPI.Events.DevicesDiscoveryConfigChanged, this._devicesDiscoveryConfigChanged, this); + } else { + this._targetAgent.setRemoteLocations([{host: 'localhost', port: 9229}]); + } } } @@ -429,7 +431,8 @@ SDK.ChildTargetManager = class { for (var address of config.networkDiscoveryConfig) { var parts = address.split(':'); var port = parseInt(parts[1], 10); - locations.push({host: parts[0] || 'localhost', port: port || 9229}); + if (parts[0] && port) + locations.push({host: parts[0], port: port}); } this._targetAgent.setRemoteLocations(locations); } @@ -513,7 +516,7 @@ SDK.ChildTargetManager = class { attachedToTarget(targetInfo, waitingForDebugger) { var targetName = ''; if (targetInfo.type === 'node') { - targetName = Common.UIString('Node: %s', targetInfo.url); + targetName = Common.UIString('Node.js: %s', targetInfo.url); } else if (targetInfo.type !== 'iframe') { var parsedURL = targetInfo.url.asParsedURL(); targetName = diff --git a/front_end/sources/JavaScriptSourceFrame.js b/front_end/sources/JavaScriptSourceFrame.js index c547c015cd..735887aa67 100644 --- a/front_end/sources/JavaScriptSourceFrame.js +++ b/front_end/sources/JavaScriptSourceFrame.js @@ -82,6 +82,8 @@ Sources.JavaScriptSourceFrame = class extends SourceFrame.UISourceCodeFrame { this._breakpointDecorations = new Set(); /** @type {!Map} */ this._decorationByBreakpoint = new Map(); + /** @type {!Set} */ + this._possibleBreakpointsRequested = new Set(); /** @type {!Map.}*/ this._scriptFileForDebuggerModel = new Map(); @@ -1080,42 +1082,67 @@ Sources.JavaScriptSourceFrame = class extends SourceFrame.UISourceCodeFrame { lineNumbers.add(location.lineNumber); } delete this._scheduledBreakpointDecorationUpdates; + var waitingForInlineDecorations = false; for (var lineNumber of lineNumbers) { - this.textEditor.toggleLineClass(lineNumber, 'cm-breakpoint', false); - this.textEditor.toggleLineClass(lineNumber, 'cm-breakpoint-disabled', false); - this.textEditor.toggleLineClass(lineNumber, 'cm-breakpoint-conditional', false); - var decorations = this._lineBreakpointDecorations(lineNumber); - var actualBookmarks = - new Set(decorations.map(decoration => decoration.bookmark).filter(bookmark => !!bookmark)); - var lineEnd = this.textEditor.line(lineNumber).length; - var bookmarks = this.textEditor.bookmarks( - new TextUtils.TextRange(lineNumber, 0, lineNumber, lineEnd), - Sources.JavaScriptSourceFrame.BreakpointDecoration.bookmarkSymbol); - for (var bookmark of bookmarks) { - if (!actualBookmarks.has(bookmark)) - bookmark.clear(); - } - if (!decorations.length) + updateGutter.call(this, lineNumber, decorations); + if (this._possibleBreakpointsRequested.has(location.lineNumber)) { + waitingForInlineDecorations = true; continue; + } + updateInlineDecorations.call(this, lineNumber, decorations); + } + if (!waitingForInlineDecorations) + this._breakpointDecorationsUpdatedForTest(); + } + + /** + * @param {number} lineNumber + * @param {!Array} decorations + * @this {Sources.JavaScriptSourceFrame} + */ + function updateGutter(lineNumber, decorations) { + this.textEditor.toggleLineClass(lineNumber, 'cm-breakpoint', false); + this.textEditor.toggleLineClass(lineNumber, 'cm-breakpoint-disabled', false); + this.textEditor.toggleLineClass(lineNumber, 'cm-breakpoint-conditional', false); + + if (decorations.length) { decorations.sort(Sources.JavaScriptSourceFrame.BreakpointDecoration.mostSpecificFirst); this.textEditor.toggleLineClass(lineNumber, 'cm-breakpoint', true); this.textEditor.toggleLineClass(lineNumber, 'cm-breakpoint-disabled', !decorations[0].enabled || this._muted); this.textEditor.toggleLineClass(lineNumber, 'cm-breakpoint-conditional', !!decorations[0].condition); - if (decorations.length > 1) { - for (var decoration of decorations) { - decoration.update(); - if (!this._muted) - decoration.show(); - else - decoration.hide(); - } - } else { - decorations[0].update(); - decorations[0].hide(); + } + } + + /** + * @param {number} lineNumber + * @param {!Array} decorations + * @this {Sources.JavaScriptSourceFrame} + */ + function updateInlineDecorations(lineNumber, decorations) { + var actualBookmarks = new Set(decorations.map(decoration => decoration.bookmark).filter(bookmark => !!bookmark)); + var lineEnd = this.textEditor.line(lineNumber).length; + var bookmarks = this.textEditor.bookmarks( + new TextUtils.TextRange(lineNumber, 0, lineNumber, lineEnd), + Sources.JavaScriptSourceFrame.BreakpointDecoration.bookmarkSymbol); + for (var bookmark of bookmarks) { + if (!actualBookmarks.has(bookmark)) + bookmark.clear(); + } + if (!decorations.length) + return; + if (decorations.length > 1) { + for (var decoration of decorations) { + decoration.update(); + if (!this._muted) + decoration.show(); + else + decoration.hide(); } + } else { + decorations[0].update(); + decorations[0].hide(); } - this._breakpointDecorationsUpdatedForTest(); } } @@ -1220,7 +1247,7 @@ Sources.JavaScriptSourceFrame = class extends SourceFrame.UISourceCodeFrame { this._decorationByBreakpoint.set(breakpoint, decoration); this._updateBreakpointDecoration(decoration); if (!lineDecorations.length) { - this._willAddInlineDecorationsForTest(); + this._possibleBreakpointsRequested.add(uiLocation.lineNumber); this._breakpointManager .possibleBreakpoints( this._debuggerSourceCode, new TextUtils.TextRange(uiLocation.lineNumber, 0, uiLocation.lineNumber + 1, 0)) @@ -1233,11 +1260,12 @@ Sources.JavaScriptSourceFrame = class extends SourceFrame.UISourceCodeFrame { * @param {!Array} possibleLocations */ function addInlineDecorations(lineNumber, possibleLocations) { + this._possibleBreakpointsRequested.delete(lineNumber); var decorations = this._lineBreakpointDecorations(lineNumber); - if (!decorations.some(decoration => !!decoration.breakpoint)) { - this._didAddInlineDecorationsForTest(false); + for (var decoration of decorations) + this._updateBreakpointDecoration(decoration); + if (!decorations.some(decoration => !!decoration.breakpoint)) return; - } /** @type {!Set} */ var columns = new Set(); for (var decoration of decorations) { @@ -1246,7 +1274,6 @@ Sources.JavaScriptSourceFrame = class extends SourceFrame.UISourceCodeFrame { continue; columns.add(location.columnNumber); } - var updateWasScheduled = false; for (var location of possibleLocations) { if (columns.has(location.columnNumber)) continue; @@ -1257,22 +1284,11 @@ Sources.JavaScriptSourceFrame = class extends SourceFrame.UISourceCodeFrame { decoration.element.addEventListener( 'contextmenu', this._inlineBreakpointContextMenu.bind(this, decoration), true); this._breakpointDecorations.add(decoration); - updateWasScheduled = true; this._updateBreakpointDecoration(decoration); } - this._didAddInlineDecorationsForTest(updateWasScheduled); } } - _willAddInlineDecorationsForTest() { - } - - /** - * @param {boolean} updateWasScheduled - */ - _didAddInlineDecorationsForTest(updateWasScheduled) { - } - /** * @param {!Common.Event} event */ diff --git a/front_end/sources/ThreadsSidebarPane.js b/front_end/sources/ThreadsSidebarPane.js index 2c42598901..80095851c8 100644 --- a/front_end/sources/ThreadsSidebarPane.js +++ b/front_end/sources/ThreadsSidebarPane.js @@ -14,14 +14,7 @@ Sources.ThreadsSidebarPane = class extends UI.VBox { this._list = new UI.ListControl(this, UI.ListMode.NonViewport); this.contentElement.appendChild(this._list.element); - this._availableNodeTargetsElement = this.contentElement.createChild('div', 'hidden available-node-targets'); - UI.context.addFlavorChangeListener(SDK.Target, this._targetFlavorChanged, this); - - SDK.targetManager.addEventListener( - SDK.TargetManager.Events.AvailableNodeTargetsChanged, this._availableNodeTargetsChanged, this); - this._availableNodeTargetsChanged(); - SDK.targetManager.observeModels(SDK.DebuggerModel, this); } @@ -30,27 +23,7 @@ Sources.ThreadsSidebarPane = class extends UI.VBox { */ static shouldBeShown() { var minJSTargets = Runtime.queryParam('nodeFrontend') ? 1 : 2; - if (SDK.targetManager.models(SDK.DebuggerModel).length >= minJSTargets) - return true; - return !!SDK.targetManager.availableNodeTargetsCount(); - } - - _availableNodeTargetsChanged() { - var count = SDK.targetManager.availableNodeTargetsCount(); - if (!count) { - this._availableNodeTargetsElement.classList.add('hidden'); - return; - } - this._availableNodeTargetsElement.removeChildren(); - this._availableNodeTargetsElement.createTextChild( - count === 1 ? Common.UIString('Node instance available.') : - Common.UIString('%d Node instances available.', count)); - var link = this._availableNodeTargetsElement.createChild('span', 'link'); - link.textContent = Common.UIString('Connect'); - link.addEventListener('click', () => { - InspectorFrontendHost.openNodeFrontend(); - }, false); - this._availableNodeTargetsElement.classList.remove('hidden'); + return SDK.targetManager.models(SDK.DebuggerModel).length >= minJSTargets; } /** diff --git a/front_end/sources/threadsSidebarPane.css b/front_end/sources/threadsSidebarPane.css index f4a8d8fde5..6863de6d1e 100644 --- a/front_end/sources/threadsSidebarPane.css +++ b/front_end/sources/threadsSidebarPane.css @@ -4,20 +4,6 @@ * found in the LICENSE file. */ -.available-node-targets { - height: 22px; - display: flex; - align-items: center; - justify-content: flex-start; - padding-left: 20px; - border-top: 1px solid #eee; - font-style: italic; -} - -.available-node-targets > span { - margin-left: 5px; -} - .thread-item { padding: 3px 8px 3px 20px; position: relative;