From 699cf5a382854b65b55d0ca59cc75d4bf48c8c40 Mon Sep 17 00:00:00 2001 From: Antonin Hildebrand Date: Sat, 10 Jun 2017 20:19:10 +0200 Subject: [PATCH] squash 'resources/unpacked/devtools' changes from 8f5fe51ab..f044be56d f044be56d DevTools: Add setting to toggle default mouse wheel scroll/zoom flamechart behavior. ceced399a DevTools: support object destructuring in pretty print 8ecaab1e2 DevTools: Fix isCaretAtEndOfPrompt if ghost text is visible 89b7146e8 DevTools: remove stray error messages while devtools on devtools. 9a11b0d49 DevTools: Avoid reflow when selecting items in TreeOutline 29c0f8fad ChromeDriver: Handle key events properly on Mac daf5c5e98 DevTools: add use strict in check gn 39dc3c9ab DevTools: Account for border when measuring StylesSidebarPane section be7df7ed5 DevTools: Clean up selection 26630bd91 DevTools: Make the performance recording 'Stop' button default. 49541bcac Revert "DevTools: remove stray error messages while devtools on devtools." 42660a485 DevTools: migrate ComputedStyleWidget to shadow 312df77b4 DevTools: Promisify searchInContent calls. f3c2a82ba DevTools: kill DebuggerWorkspaceBinding.{push,pop,set}SourceMapping ea2a4d81b DevTools: remove stray error messages while devtools on devtools. 7ac8e7567 Timeline: fix saving when switching models trough history dialog 44b1ff8df DevTools: check BUILD.gn file as part of PRESUBMIT 8a42b0771 Added refresh button to category view of cache storage and indexeddb 74345fa4f Right-click 'Refresh' on database now updates object store view, also fixed IndexedDB view crash. fd95b425a DevTools: remove UIString.capitalize. 1f347dac2 DevTools: Avoid a race in WorkspaceDiff when UISourceCodes are removed 6b265763f Revert of [DevTools] Show icon in top toolbar when Node target is available (patchset #3 id:40001 of https://codereview.chromium.org/2890973002/ ) 514aac94c DevTools: Limit screenshot overview popover height. 3bb3592f5 DevTools: migrate MetricsSidebarPane to shadow 573c227f1 DevTools: reveal and highlight dom nodes when searching in elements panel. ba9bc8708 DevTools: Extract formatter module 6c19df3ec DevTools: rename Multimap.(remove|removeAll) into delete and deleteAll 9da32f85c DevTools: migrate SSP Classes and ElementState toolbar widgets to shadow 87b2fbdf0 DevTools: make EventListenersView a proper widget a552498c1 DevTools: fix offset condition in console viewport _selectedText and add tests 3c20bd75f DevTools: Add close button to Audits2 dialog 68603e6bc DevTools: linkify terminal errors in the term extension. 5b6264069 DevTools: Promisify domains clean up git-subtree-dir: resources/unpacked/devtools git-subtree-split: f044be56db1c9dfa53648ed5fbb1c1e0c7486e7c --- .eslintrc.js | 1 - BUILD.gn | 21 +- PRESUBMIT.py | 21 ++ front_end/Images/nodeIcon.png | Bin 1674 -> 0 bytes front_end/Tests.js | 55 +++++ front_end/audits/AuditRules.js | 18 +- front_end/audits/module.json | 3 +- front_end/audits2/Audits2Panel.js | 9 + front_end/audits2/audits2Dialog.css | 6 + front_end/bindings/BreakpointManager.js | 20 +- front_end/bindings/CSSWorkspaceBinding.js | 9 +- front_end/bindings/CompilerScriptMapping.js | 21 +- .../bindings/ContentProviderBasedProject.js | 76 ++----- .../bindings/DebuggerWorkspaceBinding.js | 205 ++++++------------ front_end/bindings/DefaultScriptMapping.js | 24 +- front_end/bindings/ResourceScriptMapping.js | 26 +-- front_end/common/ContentProvider.js | 4 +- front_end/common/StaticContentProvider.js | 18 +- front_end/common/UIString.js | 28 --- front_end/common/module.json | 1 - .../components/DOMBreakpointsSidebarPane.js | 4 +- front_end/components/Linkifier.js | 90 +------- front_end/console/ConsoleView.js | 11 +- front_end/console/ConsoleViewMessage.js | 66 +++++- front_end/console/ConsoleViewport.js | 4 +- front_end/data_grid/DataGrid.js | 4 +- front_end/dom_extension/DOMExtension.js | 31 +-- front_end/elements/ClassesPaneWidget.js | 9 +- front_end/elements/ComputedStyleWidget.js | 14 +- front_end/elements/ElementStatePaneWidget.js | 9 +- front_end/elements/ElementsPanel.js | 11 +- front_end/elements/ElementsSidebarPane.js | 7 +- front_end/elements/ElementsTreeElement.js | 29 +-- front_end/elements/ElementsTreeOutline.js | 143 ++++++------ front_end/elements/EventListenersWidget.js | 7 +- front_end/elements/MetricsSidebarPane.js | 9 +- front_end/elements/PropertiesWidget.js | 2 +- front_end/elements/StylesSidebarPane.js | 27 +-- front_end/elements/classesPaneWidget.css | 37 ++++ .../elements/computedStyleSidebarPane.css | 112 ++-------- .../elements/computedStyleWidgetTree.css | 115 ++++++++++ front_end/elements/elementStatePaneWidget.css | 27 +++ front_end/elements/elementsPanel.css | 186 +--------------- front_end/elements/metricsSidebarPane.css | 113 ++++++++++ front_end/elements/module.json | 4 + front_end/emulation/MediaQueryInspector.js | 2 +- .../event_listeners/EventListenersView.js | 11 +- .../FormatterWorkerPool.js | 92 ++++---- .../{sources => formatter}/ScriptFormatter.js | 57 ++--- front_end/formatter/module.json | 9 + front_end/formatter_worker/ESTreeWalker.js | 1 + .../formatter_worker/JavaScriptFormatter.js | 5 + front_end/host/InspectorFrontendHost.js | 1 - front_end/inspector.json | 3 +- front_end/layer_viewer/LayerDetailsView.js | 2 +- front_end/layers/LayerTreeModel.js | 9 +- front_end/main/Main.js | 32 --- front_end/main/module.json | 8 - front_end/main/nodeIcon.css | 23 -- front_end/network/JSONView.js | 2 +- front_end/network/NetworkLogView.js | 34 ++- front_end/network/NetworkPanel.js | 2 +- front_end/network/RequestResponseView.js | 6 +- .../network/ResourceWebSocketFrameView.js | 5 +- front_end/network/module.json | 3 +- front_end/object_ui/CustomPreviewComponent.js | 2 +- .../object_ui/ObjectPropertiesSection.js | 2 +- front_end/perf_ui/ChartViewport.js | 6 +- front_end/perf_ui/module.json | 20 ++ front_end/perf_ui/timelineOverviewInfo.css | 4 +- .../persistence/FileSystemWorkspaceBinding.js | 61 ++---- front_end/persistence/IsolatedFileSystem.js | 25 ++- front_end/persistence/Persistence.js | 2 +- front_end/platform/utilities.js | 62 +----- front_end/profiler/HeapProfilerPanel.js | 2 +- front_end/profiler/HeapSnapshotDataGrids.js | 2 +- front_end/profiler/module.json | 6 +- front_end/protocol/InspectorBackend.js | 72 ++---- .../resources/ApplicationPanelSidebar.js | 31 ++- front_end/resources/DOMStorageItemsView.js | 7 +- front_end/resources/DOMStorageModel.js | 6 +- front_end/resources/DatabaseQueryView.js | 4 +- front_end/resources/IndexedDBModel.js | 8 +- front_end/resources/IndexedDBViews.js | 9 +- front_end/resources/resourcesSidebar.css | 15 ++ front_end/sass/ASTSourceMap.js | 2 +- front_end/sass/SASSSupport.js | 4 +- front_end/sass/module.json | 8 +- front_end/sdk/CSSStyleSheetHeader.js | 12 +- front_end/sdk/ContentProviders.js | 21 +- front_end/sdk/DOMModel.js | 39 ++-- front_end/sdk/LayerTreeBase.js | 4 +- front_end/sdk/NetworkRequest.js | 6 +- front_end/sdk/Resource.js | 17 +- front_end/sdk/Script.js | 22 +- front_end/sdk/SourceMapManager.js | 6 +- front_end/sdk/TargetManager.js | 26 +-- front_end/sdk/TracingModel.js | 56 ++--- front_end/services/ServiceManager.js | 24 +- front_end/settings/SettingsScreen.js | 2 +- front_end/snippets/ScriptSnippetModel.js | 68 +++--- front_end/source_frame/ImageView.js | 13 +- front_end/sources/CallStackSidebarPane.js | 15 +- .../sources/InplaceFormatterEditorAction.js | 4 +- front_end/sources/JavaScriptSourceFrame.js | 24 +- front_end/sources/NavigatorView.js | 2 +- .../ObjectEventListenersSidebarPane.js | 5 +- front_end/sources/OutlineQuickOpen.js | 4 +- front_end/sources/SourceFormatter.js | 42 +--- front_end/sources/SourceMapNamesResolver.js | 5 +- front_end/sources/SourcesPanel.js | 27 +-- front_end/sources/SourcesSearchScope.js | 43 ++-- front_end/sources/ThreadsSidebarPane.js | 29 ++- .../sources/WatchExpressionsSidebarPane.js | 18 +- .../sources/XHRBreakpointsSidebarPane.js | 8 +- front_end/sources/module.json | 4 +- front_end/sources/sourcesPanel.css | 4 - front_end/sources/threadsSidebarPane.css | 14 ++ front_end/terminal/TerminalWidget.js | 85 +++++--- front_end/terminal/terminal.css | 9 +- front_end/text_editor/CodeMirrorTextEditor.js | 2 +- front_end/timeline/ExtensionTracingSession.js | 3 +- front_end/timeline/PerformanceModel.js | 13 +- front_end/timeline/TimelineController.js | 6 +- front_end/timeline/TimelineLoader.js | 7 +- front_end/timeline/TimelinePanel.js | 24 +- front_end/timeline/module.json | 2 +- front_end/timeline/timelineStatusDialog.css | 7 +- front_end/timeline_model/TracingLayerTree.js | 6 +- front_end/ui/ReportView.js | 12 +- front_end/ui/TabbedPane.js | 8 +- front_end/ui/TextPrompt.js | 3 + front_end/ui/UIUtils.js | 4 +- front_end/ui/View.js | 35 ++- front_end/ui/Widget.js | 14 +- front_end/ui/treeoutline.js | 12 +- front_end/workspace/UISourceCode.js | 29 +-- front_end/workspace/Workspace.js | 8 +- front_end/workspace_diff/WorkspaceDiff.js | 34 ++- package.json | 3 +- scripts/check_gn.js | 66 ++++++ scripts/extract_module/extract_module.js | 11 +- 142 files changed, 1559 insertions(+), 1712 deletions(-) delete mode 100644 front_end/Images/nodeIcon.png create mode 100644 front_end/elements/classesPaneWidget.css create mode 100644 front_end/elements/computedStyleWidgetTree.css create mode 100644 front_end/elements/elementStatePaneWidget.css create mode 100644 front_end/elements/metricsSidebarPane.css rename front_end/{common => formatter}/FormatterWorkerPool.js (69%) rename front_end/{sources => formatter}/ScriptFormatter.js (74%) create mode 100644 front_end/formatter/module.json delete mode 100644 front_end/main/nodeIcon.css create mode 100644 scripts/check_gn.js diff --git a/.eslintrc.js b/.eslintrc.js index e7d2aa51ae..ac36411f54 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -38,7 +38,6 @@ module.exports = { "markers": ["*"] }], "eqeqeq": [2], - "arrow-body-style": [2, "as-needed"], "accessor-pairs": [2, { "getWithoutSet": false, "setWithoutGet": false diff --git a/BUILD.gn b/BUILD.gn index 25ec3a48a4..5acadc5153 100644 --- a/BUILD.gn +++ b/BUILD.gn @@ -109,7 +109,6 @@ all_devtools_files = [ "front_end/common/Color.js", "front_end/common/Console.js", "front_end/common/ContentProvider.js", - "front_end/common/FormatterWorkerPool.js", "front_end/common/module.json", "front_end/common/ModuleExtensionInterfaces.js", "front_end/common/Object.js", @@ -171,15 +170,18 @@ all_devtools_files = [ "front_end/dom_extension/DOMExtension.js", "front_end/dom_extension/module.json", "front_end/elements/breadcrumbs.css", + "front_end/elements/classesPaneWidget.css", "front_end/elements/ClassesPaneWidget.js", "front_end/elements/ColorSwatchPopoverIcon.js", "front_end/elements/ComputedStyleModel.js", "front_end/elements/computedStyleSidebarPane.css", + "front_end/elements/computedStyleWidgetTree.css", "front_end/elements/ComputedStyleWidget.js", "front_end/elements/ElementsBreadcrumbs.js", "front_end/elements/elementsPanel.css", "front_end/elements/ElementsPanel.js", "front_end/elements/ElementsSidebarPane.js", + "front_end/elements/elementStatePaneWidget.css", "front_end/elements/ElementStatePaneWidget.js", "front_end/elements/ElementsTreeElement.js", "front_end/elements/ElementsTreeElementHighlighter.js", @@ -187,6 +189,7 @@ all_devtools_files = [ "front_end/elements/ElementsTreeOutline.js", "front_end/elements/EventListenersWidget.js", "front_end/elements/InspectElementModeController.js", + "front_end/elements/metricsSidebarPane.css", "front_end/elements/MetricsSidebarPane.js", "front_end/elements/module.json", "front_end/elements/platformFontsWidget.css", @@ -224,6 +227,9 @@ all_devtools_files = [ "front_end/extensions/ExtensionServer.js", "front_end/extensions/ExtensionView.js", "front_end/extensions/module.json", + "front_end/formatter/FormatterWorkerPool.js", + "front_end/formatter/module.json", + "front_end/formatter/ScriptFormatter.js", "front_end/formatter_worker.js", "front_end/formatter_worker.json", "front_end/formatter_worker/AcornTokenizer.js", @@ -298,7 +304,6 @@ 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", @@ -572,7 +577,6 @@ all_devtools_files = [ "front_end/sources/RevisionHistoryView.js", "front_end/sources/scopeChainSidebarPane.css", "front_end/sources/ScopeChainSidebarPane.js", - "front_end/sources/ScriptFormatter.js", "front_end/sources/ScriptFormatterEditorAction.js", "front_end/sources/serviceWorkersSidebar.css", "front_end/sources/SimpleHistoryManager.js", @@ -815,7 +819,6 @@ 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", @@ -860,7 +863,7 @@ generated_scripts = [ "$resources_out_dir/SupportedCSSProperties.js", ] -generated_resources = [ +generated_applications = [ "$resources_out_dir/inspector.html", "$resources_out_dir/inspector.js", "$resources_out_dir/toolbox.html", @@ -869,8 +872,9 @@ generated_resources = [ "$resources_out_dir/formatter_worker.js", "$resources_out_dir/heap_snapshot_worker.js", "$resources_out_dir/utility_shared_worker.js", +] - # this contains non-autostart non-remote modules only. +generated_non_autostart_non_remote_modules = [ "$resources_out_dir/animation/animation_module.js", "$resources_out_dir/audits/audits_module.js", "$resources_out_dir/audits2/audits2_module.js", @@ -885,6 +889,7 @@ generated_resources = [ "$resources_out_dir/diff/diff_module.js", "$resources_out_dir/elements/elements_module.js", "$resources_out_dir/event_listeners/event_listeners_module.js", + "$resources_out_dir/formatter/formatter_module.js", "$resources_out_dir/heap_snapshot_model/heap_snapshot_model_module.js", "$resources_out_dir/inline_editor/inline_editor_module.js", "$resources_out_dir/layer_viewer/layer_viewer_module.js", @@ -902,13 +907,15 @@ generated_resources = [ "$resources_out_dir/snippets/snippets_module.js", "$resources_out_dir/source_frame/source_frame_module.js", "$resources_out_dir/sources/sources_module.js", - "$resources_out_dir/terminal/terminal_module.js", "$resources_out_dir/text_editor/text_editor_module.js", "$resources_out_dir/timeline_model/timeline_model_module.js", "$resources_out_dir/timeline/timeline_module.js", "$resources_out_dir/workspace_diff/workspace_diff_module.js", ] +generated_resources = + generated_applications + generated_non_autostart_non_remote_modules + generated_remote_modules = [ "$resources_out_dir/accessibility/accessibility_module.js", "$resources_out_dir/audits2_worker/audits2_worker_module.js", diff --git a/PRESUBMIT.py b/PRESUBMIT.py index 162369251e..bbd0cf4b07 100644 --- a/PRESUBMIT.py +++ b/PRESUBMIT.py @@ -44,6 +44,26 @@ def _CheckNodeAndNPMModules(input_api, output_api): return [output_api.PresubmitNotifyResult(out)] +def _CheckBuildGN(input_api, output_api): + original_sys_path = sys.path + try: + sys.path = sys.path + [input_api.os_path.join(input_api.PresubmitLocalPath(), "scripts")] + import install_node_deps + finally: + sys.path = original_sys_path + + node_path, _ = install_node_deps.resolve_node_paths() + + script_path = input_api.os_path.join(input_api.PresubmitLocalPath(), "scripts", "check_gn.js") + process = input_api.subprocess.Popen( + [node_path, script_path], stdout=input_api.subprocess.PIPE, stderr=input_api.subprocess.STDOUT) + out, _ = process.communicate() + + if process.returncode != 0: + return [output_api.PresubmitError(out)] + return [output_api.PresubmitNotifyResult(out)] + + def _CheckFormat(input_api, output_api): def popen(args): @@ -185,6 +205,7 @@ def _CheckCSSViolations(input_api, output_api): def CheckChangeOnUpload(input_api, output_api): results = [] results.extend(_CheckNodeAndNPMModules(input_api, output_api)) + results.extend(_CheckBuildGN(input_api, output_api)) results.extend(_CheckFormat(input_api, output_api)) results.extend(_CheckDevtoolsStyle(input_api, output_api)) results.extend(_CompileDevtoolsFrontend(input_api, output_api)) diff --git a/front_end/Images/nodeIcon.png b/front_end/Images/nodeIcon.png deleted file mode 100644 index a7929a98eb465e9bcb81fa2ff86fe9c22b0fddab..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 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}} + * @typedef {!{sourceURL: string, rules: !Array.}} */ Audits.AuditRules.ParsedStyleSheet; @@ -517,11 +517,11 @@ Audits.AuditRules.StyleSheetProcessor = class { var allRules = []; this._currentStyleSheetHeader.requestContent().then( - content => Common.formatterWorkerPool.parseCSS(content || '', onRulesParsed.bind(this))); + content => Formatter.formatterWorkerPool().parseCSS(content || '', onRulesParsed.bind(this))); /** * @param {boolean} isLastChunk - * @param {!Array} rules + * @param {!Array} rules * @this {Audits.AuditRules.StyleSheetProcessor} */ function onRulesParsed(isLastChunk, rules) { @@ -532,7 +532,7 @@ Audits.AuditRules.StyleSheetProcessor = class { } /** - * @param {!Array.} rules + * @param {!Array.} rules */ _onStyleSheetParsed(rules) { if (this._progress.isCanceled()) { @@ -1205,7 +1205,7 @@ Audits.AuditRules.CSSRuleBase = class extends Audits.AuditRule { /** * @param {!Audits.AuditRules.ParsedStyleSheet} styleSheet - * @param {!Common.FormatterWorkerPool.CSSStyleRule} rule + * @param {!Formatter.FormatterWorkerPool.CSSStyleRule} rule * @param {!Audits.AuditRuleResult} result */ _visitRule(styleSheet, rule, result) { @@ -1234,7 +1234,7 @@ Audits.AuditRules.CSSRuleBase = class extends Audits.AuditRule { /** * @param {!Audits.AuditRules.ParsedStyleSheet} styleSheet - * @param {!Common.FormatterWorkerPool.CSSStyleRule} rule + * @param {!Formatter.FormatterWorkerPool.CSSStyleRule} rule * @param {!Audits.AuditRuleResult} result */ visitRule(styleSheet, rule, result) { @@ -1243,7 +1243,7 @@ Audits.AuditRules.CSSRuleBase = class extends Audits.AuditRule { /** * @param {!Audits.AuditRules.ParsedStyleSheet} styleSheet - * @param {!Common.FormatterWorkerPool.CSSStyleRule} rule + * @param {!Formatter.FormatterWorkerPool.CSSStyleRule} rule * @param {!Audits.AuditRuleResult} result */ didVisitRule(styleSheet, rule, result) { @@ -1252,8 +1252,8 @@ Audits.AuditRules.CSSRuleBase = class extends Audits.AuditRule { /** * @param {!Audits.AuditRules.ParsedStyleSheet} styleSheet - * @param {!Common.FormatterWorkerPool.CSSStyleRule} rule - * @param {!Common.FormatterWorkerPool.CSSProperty} property + * @param {!Formatter.FormatterWorkerPool.CSSStyleRule} rule + * @param {!Formatter.FormatterWorkerPool.CSSProperty} property * @param {!Audits.AuditRuleResult} result */ visitProperty(styleSheet, rule, property, result) { diff --git a/front_end/audits/module.json b/front_end/audits/module.json index 845909111f..1d48d5e756 100644 --- a/front_end/audits/module.json +++ b/front_end/audits/module.json @@ -24,7 +24,8 @@ "components", "extensions", "network_log", - "object_ui" + "object_ui", + "formatter" ], "scripts": [ "AuditsPanel.js", diff --git a/front_end/audits2/Audits2Panel.js b/front_end/audits2/Audits2Panel.js index b78a30a72d..bc5f59761b 100644 --- a/front_end/audits2/Audits2Panel.js +++ b/front_end/audits2/Audits2Panel.js @@ -169,6 +169,10 @@ Audits2.Audits2Panel = class extends UI.PanelWithSidebar { this._dialog.setOutsideClickCallback(event => event.consume(true)); var root = UI.createShadowRootWithCoreStyles(this._dialog.contentElement, 'audits2/audits2Dialog.css'); var auditsViewElement = root.createChild('div', 'audits2-view'); + + var closeButton = auditsViewElement.createChild('div', 'dialog-close-button', 'dt-close-button'); + closeButton.addEventListener('click', () => this._cancelAndClose()); + var uiElement = auditsViewElement.createChild('div'); var headerElement = uiElement.createChild('header'); this._headerTitleElement = headerElement.createChild('p'); @@ -304,6 +308,11 @@ Audits2.Audits2Panel = class extends UI.PanelWithSidebar { delete this._emulationOutlineEnabledBefore; } + _cancelAndClose() { + this._cancel(); + this._hideDialog(); + } + _cancel() { if (this._auditRunning) { this._updateStatus(Common.UIString('Cancelling\u2026')); diff --git a/front_end/audits2/audits2Dialog.css b/front_end/audits2/audits2Dialog.css index ec1f492e84..3d098c744a 100644 --- a/front_end/audits2/audits2Dialog.css +++ b/front_end/audits2/audits2Dialog.css @@ -10,6 +10,12 @@ align-items: center; } +.audits2-view .dialog-close-button { + position: absolute; + top: 10px; + right: 10px; +} + header { color: #666; font-weight: bold; diff --git a/front_end/bindings/BreakpointManager.js b/front_end/bindings/BreakpointManager.js index 69a2772b99..9776857117 100644 --- a/front_end/bindings/BreakpointManager.js +++ b/front_end/bindings/BreakpointManager.js @@ -56,8 +56,6 @@ Bindings.BreakpointManager = class extends Common.Object { this._workspace.addEventListener(Workspace.Workspace.Events.ProjectRemoved, this._projectRemoved, this); this._workspace.addEventListener(Workspace.Workspace.Events.UISourceCodeAdded, this._uiSourceCodeAdded, this); this._workspace.addEventListener(Workspace.Workspace.Events.UISourceCodeRemoved, this._uiSourceCodeRemoved, this); - this._debuggerWorkspaceBinding.addEventListener( - Bindings.DebuggerWorkspaceBinding.Events.SourceMappingChanged, this._uiSourceCodeMappingChanged, this); targetManager.observeModels(SDK.DebuggerModel, this); } @@ -152,7 +150,7 @@ Bindings.BreakpointManager = class extends Common.Object { breakpointItem.enabled); } } - this._provisionalBreakpoints.removeAll(url); + this._provisionalBreakpoints.deleteAll(url); this._storage.unmute(); } @@ -172,20 +170,6 @@ Bindings.BreakpointManager = class extends Common.Object { this._removeUISourceCode(uiSourceCode); } - /** - * @param {!Common.Event} event - */ - _uiSourceCodeMappingChanged(event) { - var uiSourceCode = /** @type {!Workspace.UISourceCode} */ (event.data.uiSourceCode); - var isIdentity = /** @type {boolean} */ (event.data.isIdentity); - var debuggerModel = /** @type {!SDK.DebuggerModel} */ (event.data.debuggerModel); - if (isIdentity) - return; - var breakpoints = this._breakpointsForPrimaryUISourceCode.get(uiSourceCode) || []; - for (var i = 0; i < breakpoints.length; ++i) - breakpoints[i]._updateInDebuggerForModel(debuggerModel); - } - /** * @param {!Workspace.UISourceCode} uiSourceCode */ @@ -412,7 +396,7 @@ Bindings.BreakpointManager = class extends Common.Object { breakpoints.remove(breakpoint); if (removeFromStorage) this._storage._removeBreakpoint(breakpoint); - this._provisionalBreakpoints.remove(breakpoint._url, breakpoint); + this._provisionalBreakpoints.delete(breakpoint._url, breakpoint); } /** diff --git a/front_end/bindings/CSSWorkspaceBinding.js b/front_end/bindings/CSSWorkspaceBinding.js index f0278e20d4..c1f972b677 100644 --- a/front_end/bindings/CSSWorkspaceBinding.js +++ b/front_end/bindings/CSSWorkspaceBinding.js @@ -179,9 +179,9 @@ Bindings.CSSWorkspaceBinding.ModelInfo = class { */ _disposeLocation(location) { if (location._header) - this._locations.remove(location._header, location); + this._locations.delete(location._header, location); else - this._unboundLocations.remove(location._url, location); + this._unboundLocations.delete(location._url, location); } /** @@ -205,7 +205,7 @@ Bindings.CSSWorkspaceBinding.ModelInfo = class { this._locations.set(header, location); location.update(); } - this._unboundLocations.removeAll(header.sourceURL); + this._unboundLocations.deleteAll(header.sourceURL); } /** @@ -218,7 +218,7 @@ Bindings.CSSWorkspaceBinding.ModelInfo = class { this._unboundLocations.set(location._url, location); location.update(); } - this._locations.removeAll(header); + this._locations.deleteAll(header); } /** @@ -243,7 +243,6 @@ Bindings.CSSWorkspaceBinding.ModelInfo = class { return this._stylesSourceMapping.uiLocationToRawLocations(uiLocation); } - _dispose() { Common.EventTarget.removeEventListeners(this._eventListeners); this._stylesSourceMapping.dispose(); diff --git a/front_end/bindings/CompilerScriptMapping.js b/front_end/bindings/CompilerScriptMapping.js index 16bf022c64..612ab4a4ac 100644 --- a/front_end/bindings/CompilerScriptMapping.js +++ b/front_end/bindings/CompilerScriptMapping.js @@ -181,7 +181,7 @@ Bindings.CompilerScriptMapping = class { var script = /** @type {!SDK.Script} */ (event.data); // Create stub UISourceCode for the time source mapping is being loaded. this._addStubUISourceCode(script); - this._debuggerWorkspaceBinding.pushSourceMapping(script, this); + this._debuggerWorkspaceBinding.updateLocations(script); } /** @@ -220,12 +220,10 @@ Bindings.CompilerScriptMapping = class { var project = script.isContentScript() ? this._contentScriptsProject : this._regularProject; for (var sourceURL of sourceMap.sourceURLs()) { var uiSourceCode = /** @type {!Workspace.UISourceCode} */ (project.uiSourceCodeForURL(sourceURL)); - if (hasOtherScripts) { + if (hasOtherScripts) Bindings.NetworkProject.removeFrameAttribution(uiSourceCode, frameId); - } else { - this._debuggerWorkspaceBinding.setSourceMapping(this._debuggerModel, uiSourceCode, null); + else project.removeFile(sourceURL); - } } this._debuggerWorkspaceBinding.updateLocations(script); } @@ -278,26 +276,17 @@ Bindings.CompilerScriptMapping = class { uiSourceCode[Bindings.CompilerScriptMapping._sourceMapSymbol] = sourceMap; Bindings.NetworkProject.setInitialFrameAttribution(uiSourceCode, frameId); project.addUISourceCodeWithProvider(uiSourceCode, contentProvider, metadata, mimeType); - this._debuggerWorkspaceBinding.setSourceMapping(this._debuggerModel, uiSourceCode, this); } this._debuggerWorkspaceBinding.updateLocations(script); } - /** - * @override - * @return {boolean} - */ - isIdentity() { - return false; - } - /** * @override * @param {!Workspace.UISourceCode} uiSourceCode * @param {number} lineNumber * @return {boolean} */ - uiLineHasMapping(uiSourceCode, lineNumber) { + static uiLineHasMapping(uiSourceCode, lineNumber) { var sourceMap = uiSourceCode[Bindings.CompilerScriptMapping._sourceMapSymbol]; if (!sourceMap) return true; @@ -313,4 +302,4 @@ Bindings.CompilerScriptMapping = class { }; Bindings.CompilerScriptMapping._frameIdSymbol = Symbol('Bindings.CompilerScriptMapping._frameIdSymbol'); -Bindings.CompilerScriptMapping._sourceMapSymbol = Symbol('Bindings.CompilerScriptMapping._sourceMapSymbol'); \ No newline at end of file +Bindings.CompilerScriptMapping._sourceMapSymbol = Symbol('Bindings.CompilerScriptMapping._sourceMapSymbol'); diff --git a/front_end/bindings/ContentProviderBasedProject.js b/front_end/bindings/ContentProviderBasedProject.js index e6ff440339..1cb9170d41 100644 --- a/front_end/bindings/ContentProviderBasedProject.js +++ b/front_end/bindings/ContentProviderBasedProject.js @@ -197,85 +197,45 @@ Bindings.ContentProviderBasedProject = class extends Workspace.ProjectStore { * @param {string} query * @param {boolean} caseSensitive * @param {boolean} isRegex - * @param {function(!Array.)} callback + * @return {!Promise>} */ - searchInFileContent(uiSourceCode, query, caseSensitive, isRegex, callback) { + searchInFileContent(uiSourceCode, query, caseSensitive, isRegex) { var contentProvider = this._contentProviders[uiSourceCode.url()]; - contentProvider.searchInContent(query, caseSensitive, isRegex, callback); + return contentProvider.searchInContent(query, caseSensitive, isRegex); } /** * @override * @param {!Workspace.ProjectSearchConfig} searchConfig - * @param {!Array.} filesMathingFileQuery + * @param {!Array} filesMathingFileQuery * @param {!Common.Progress} progress - * @param {function(!Array.)} callback + * @return {!Promise>} */ - findFilesMatchingSearchRequest(searchConfig, filesMathingFileQuery, progress, callback) { + async findFilesMatchingSearchRequest(searchConfig, filesMathingFileQuery, progress) { var result = []; - var paths = filesMathingFileQuery; - var totalCount = paths.length; - if (totalCount === 0) { - // searchInContent should call back later. - setTimeout(doneCallback, 0); - return; - } - - var barrier = new CallbackBarrier(); - progress.setTotalWork(paths.length); - for (var i = 0; i < paths.length; ++i) - searchInContent.call(this, paths[i], barrier.createCallback(searchInContentCallback.bind(null, paths[i]))); - barrier.callWhenDone(doneCallback); + progress.setTotalWork(filesMathingFileQuery.length); + await Promise.all(filesMathingFileQuery.map(searchInContent.bind(this))); + progress.done(); + return result; /** * @param {string} path - * @param {function(boolean)} callback * @this {Bindings.ContentProviderBasedProject} */ - function searchInContent(path, callback) { - var queriesToRun = searchConfig.queries().slice(); - searchNextQuery.call(this); - - /** - * @this {Bindings.ContentProviderBasedProject} - */ - function searchNextQuery() { - if (!queriesToRun.length) { - callback(true); - return; - } - var query = queriesToRun.shift(); - this._contentProviders[path].searchInContent( - query, !searchConfig.ignoreCase(), searchConfig.isRegex(), contentCallback.bind(this)); - } - - /** - * @param {!Array.} searchMatches - * @this {Bindings.ContentProviderBasedProject} - */ - function contentCallback(searchMatches) { + async function searchInContent(path) { + var provider = this._contentProviders[path]; + var allMatchesFound = true; + for (var query of searchConfig.queries().slice()) { + var searchMatches = await provider.searchInContent(query, !searchConfig.ignoreCase(), searchConfig.isRegex()); if (!searchMatches.length) { - callback(false); - return; + allMatchesFound = false; + break; } - searchNextQuery.call(this); } - } - - /** - * @param {string} path - * @param {boolean} matches - */ - function searchInContentCallback(path, matches) { - if (matches) + if (allMatchesFound) result.push(path); progress.worked(1); } - - function doneCallback() { - callback(result); - progress.done(); - } } /** diff --git a/front_end/bindings/DebuggerWorkspaceBinding.js b/front_end/bindings/DebuggerWorkspaceBinding.js index fa951dc6c8..fd440e77af 100644 --- a/front_end/bindings/DebuggerWorkspaceBinding.js +++ b/front_end/bindings/DebuggerWorkspaceBinding.js @@ -5,26 +5,33 @@ * @unrestricted * @implements {SDK.SDKModelObserver} */ -Bindings.DebuggerWorkspaceBinding = class extends Common.Object { +Bindings.DebuggerWorkspaceBinding = class { /** * @param {!SDK.TargetManager} targetManager * @param {!Workspace.Workspace} workspace */ constructor(targetManager, workspace) { - super(); this._workspace = workspace; + /** @type {!Array} */ + this._sourceMappings = []; + /** @type {!Map.} */ this._debuggerModelToData = new Map(); targetManager.addModelListener( SDK.DebuggerModel, SDK.DebuggerModel.Events.GlobalObjectCleared, this._globalObjectCleared, this); targetManager.addModelListener( SDK.DebuggerModel, SDK.DebuggerModel.Events.DebuggerResumed, this._debuggerResumed, this); - workspace.addEventListener(Workspace.Workspace.Events.UISourceCodeRemoved, this._onUISourceCodeRemoved, this); - workspace.addEventListener(Workspace.Workspace.Events.ProjectRemoved, this._projectRemoved, this); targetManager.observeModels(SDK.DebuggerModel, this); } + /** + * @param {!Bindings.DebuggerSourceMapping} sourceMapping + */ + addSourceMapping(sourceMapping) { + this._sourceMappings.push(sourceMapping); + } + /** * @override * @param {!SDK.DebuggerModel} debuggerModel @@ -43,64 +50,6 @@ Bindings.DebuggerWorkspaceBinding = class extends Common.Object { this._debuggerModelToData.remove(debuggerModel); } - /** - * @param {!Common.Event} event - */ - _onUISourceCodeRemoved(event) { - var uiSourceCode = /** @type {!Workspace.UISourceCode} */ (event.data); - this._uiSourceCodeRemoved(uiSourceCode); - } - - /** - * @param {!Common.Event} event - */ - _projectRemoved(event) { - var project = /** @type {!Workspace.Project} */ (event.data); - var uiSourceCodes = project.uiSourceCodes(); - for (var uiSourceCode of uiSourceCodes) - this._uiSourceCodeRemoved(uiSourceCode); - } - - /** - * @param {!SDK.Script} script - * @param {!Bindings.DebuggerSourceMapping} sourceMapping - */ - pushSourceMapping(script, sourceMapping) { - var info = this._ensureInfoForScript(script); - info._pushSourceMapping(sourceMapping); - } - - /** - * @param {!SDK.Script} script - * @return {!Bindings.DebuggerSourceMapping} - */ - popSourceMapping(script) { - var info = this._infoForScript(script); - console.assert(info); - return info._popSourceMapping(); - } - - /** - * @param {!SDK.DebuggerModel} debuggerModel - * @param {!Workspace.UISourceCode} uiSourceCode - * @param {?Bindings.DebuggerSourceMapping} sourceMapping - */ - setSourceMapping(debuggerModel, uiSourceCode, sourceMapping) { - if (uiSourceCode[Bindings.DebuggerWorkspaceBinding._sourceMappingSymbol] === sourceMapping) - return; - - if (sourceMapping) - uiSourceCode[Bindings.DebuggerWorkspaceBinding._sourceMappingSymbol] = sourceMapping; - else - delete uiSourceCode[Bindings.DebuggerWorkspaceBinding._sourceMappingSymbol]; - - this.dispatchEventToListeners(Bindings.DebuggerWorkspaceBinding.Events.SourceMappingChanged, { - uiSourceCode: uiSourceCode, - debuggerModel: debuggerModel, - isIdentity: sourceMapping ? sourceMapping.isIdentity() : false - }); - } - /** * @param {!SDK.Script} script */ @@ -117,8 +66,9 @@ Bindings.DebuggerWorkspaceBinding = class extends Common.Object { * @return {!Bindings.DebuggerWorkspaceBinding.Location} */ createLiveLocation(rawLocation, updateDelegate, locationPool) { - var info = this._infoForScript(rawLocation.script()); - console.assert(info); + var script = /** @type {!SDK.Script} */ (rawLocation.script()); + console.assert(script); + var info = this._ensureInfoForScript(script); var location = new Bindings.DebuggerWorkspaceBinding.Location(info._script, rawLocation, this, updateDelegate, locationPool); info._addLocation(location); @@ -161,9 +111,13 @@ Bindings.DebuggerWorkspaceBinding = class extends Common.Object { * @return {!Workspace.UILocation} */ rawLocationToUILocation(rawLocation) { - var info = this._infoForScript(rawLocation.script()); - console.assert(info); - return info._rawLocationToUILocation(rawLocation); + for (var i = 0; i < this._sourceMappings.length; ++i) { + var uiLocation = this._sourceMappings[i].rawLocationToUILocation(rawLocation); + if (uiLocation) + return uiLocation; + } + var modelData = this._debuggerModelToData.get(rawLocation.debuggerModel); + return modelData._rawLocationToUILocation(rawLocation); } /** @@ -185,8 +139,18 @@ Bindings.DebuggerWorkspaceBinding = class extends Common.Object { * @return {?SDK.DebuggerModel.Location} */ uiLocationToRawLocation(uiSourceCode, lineNumber, columnNumber) { - var sourceMapping = uiSourceCode[Bindings.DebuggerWorkspaceBinding._sourceMappingSymbol]; - return sourceMapping && sourceMapping.uiLocationToRawLocation(uiSourceCode, lineNumber, columnNumber); + for (var i = 0; i < this._sourceMappings.length; ++i) { + var rawLocation = this._sourceMappings[i].uiLocationToRawLocation(uiSourceCode, lineNumber, columnNumber); + if (rawLocation) + return rawLocation; + } + + for (var modelData of this._debuggerModelToData.values()) { + var rawLocation = modelData._uiLocationToRawLocation(uiSourceCode, lineNumber, columnNumber); + if (rawLocation) + return rawLocation; + } + return null; } /** @@ -201,23 +165,6 @@ Bindings.DebuggerWorkspaceBinding = class extends Common.Object { return uiLocation; } - /** - * @param {!Workspace.UISourceCode} uiSourceCode - * @param {number} lineNumber - * @return {boolean} - */ - uiLineHasMapping(uiSourceCode, lineNumber) { - var sourceMapping = uiSourceCode[Bindings.DebuggerWorkspaceBinding._sourceMappingSymbol]; - return sourceMapping ? sourceMapping.uiLineHasMapping(uiSourceCode, lineNumber) : true; - } - - /** - * @param {!Workspace.UISourceCode} uiSourceCode - */ - _uiSourceCodeRemoved(uiSourceCode) { - delete uiSourceCode[Bindings.DebuggerWorkspaceBinding._sourceMappingSymbol]; - } - /** * @param {!Workspace.UISourceCode} uiSourceCode * @param {!SDK.DebuggerModel} debuggerModel @@ -317,7 +264,6 @@ Bindings.DebuggerWorkspaceBinding = class extends Common.Object { }; Bindings.DebuggerWorkspaceBinding._scriptInfoSymbol = Symbol('scriptDataMap'); -Bindings.DebuggerWorkspaceBinding._sourceMappingSymbol = Symbol('sourceMapping'); /** * @unrestricted @@ -350,6 +296,34 @@ Bindings.DebuggerWorkspaceBinding.ModelData = class { ]; } + /** + * @param {!SDK.DebuggerModel.Location} rawLocation + * @return {!Workspace.UILocation} + */ + _rawLocationToUILocation(rawLocation) { + var uiLocation = null; + uiLocation = uiLocation || this._compilerMapping.rawLocationToUILocation(rawLocation); + uiLocation = uiLocation || this._resourceMapping.rawLocationToUILocation(rawLocation); + uiLocation = uiLocation || this._defaultMapping.rawLocationToUILocation(rawLocation); + // DefaultMapping ensures uiLocation for every rawLocation. + console.assert(uiLocation); + return /** @type {!Workspace.UILocation} */ (uiLocation); + } + + /** + * @param {!Workspace.UISourceCode} uiSourceCode + * @param {number} lineNumber + * @param {number} columnNumber + * @return {?SDK.DebuggerModel.Location} + */ + _uiLocationToRawLocation(uiSourceCode, lineNumber, columnNumber) { + var rawLocation = null; + rawLocation = rawLocation || this._compilerMapping.uiLocationToRawLocation(uiSourceCode, lineNumber, columnNumber); + rawLocation = rawLocation || this._resourceMapping.uiLocationToRawLocation(uiSourceCode, lineNumber, columnNumber); + rawLocation = rawLocation || this._defaultMapping.uiLocationToRawLocation(uiSourceCode, lineNumber, columnNumber); + return rawLocation; + } + /** * @param {!SDK.DebuggerPausedDetails} debuggerPausedDetails * @return {boolean} @@ -384,12 +358,6 @@ Bindings.DebuggerWorkspaceBinding.ModelData = class { } }; -/** @enum {symbol} */ -Bindings.DebuggerWorkspaceBinding.Events = { - SourceMappingChanged: Symbol('SourceMappingChanged'), -}; - - /** * @unrestricted */ @@ -402,31 +370,6 @@ Bindings.DebuggerWorkspaceBinding.ScriptInfo = class { // We create a lot of these, do not add arrays/collections/expensive data structures. } - /** - * @param {!Bindings.DebuggerSourceMapping} sourceMapping - */ - _pushSourceMapping(sourceMapping) { - if (this._sourceMapping) { - if (!this._backupMappings) { - /** @type {!Array.} */ - this._backupMappings = []; - } - this._backupMappings.push(this._sourceMapping); - } - this._sourceMapping = sourceMapping; - this._updateLocations(); - } - - /** - * @return {!Bindings.DebuggerSourceMapping} - */ - _popSourceMapping() { - var sourceMapping = this._sourceMapping; - this._sourceMapping = this._backupMappings ? this._backupMappings.pop() : undefined; - this._updateLocations(); - return sourceMapping; - } - /** * @param {!Bindings.LiveLocation} location */ @@ -454,20 +397,6 @@ Bindings.DebuggerWorkspaceBinding.ScriptInfo = class { for (var location of this._locations) location.update(); } - - /** - * @param {!SDK.DebuggerModel.Location} rawLocation - * @return {!Workspace.UILocation} - */ - _rawLocationToUILocation(rawLocation) { - var uiLocation = this._sourceMapping ? this._sourceMapping.rawLocationToUILocation(rawLocation) : null; - if (!uiLocation && this._backupMappings) { - for (var i = this._backupMappings.length - 1; !uiLocation && i >= 0; --i) - uiLocation = this._backupMappings[i].rawLocationToUILocation(rawLocation); - } - console.assert(uiLocation, 'Script raw location cannot be mapped to any UI location.'); - return /** @type {!Workspace.UILocation} */ (uiLocation); - } }; /** @@ -599,18 +528,6 @@ Bindings.DebuggerSourceMapping.prototype = { * @return {?SDK.DebuggerModel.Location} */ uiLocationToRawLocation(uiSourceCode, lineNumber, columnNumber) {}, - - /** - * @return {boolean} - */ - isIdentity() {}, - - /** - * @param {!Workspace.UISourceCode} uiSourceCode - * @param {number} lineNumber - * @return {boolean} - */ - uiLineHasMapping(uiSourceCode, lineNumber) {} }; /** diff --git a/front_end/bindings/DefaultScriptMapping.js b/front_end/bindings/DefaultScriptMapping.js index c98dce7f8d..985de7dc9e 100644 --- a/front_end/bindings/DefaultScriptMapping.js +++ b/front_end/bindings/DefaultScriptMapping.js @@ -88,6 +88,8 @@ Bindings.DefaultScriptMapping = class { */ uiLocationToRawLocation(uiSourceCode, lineNumber, columnNumber) { var script = uiSourceCode[Bindings.DefaultScriptMapping._scriptSymbol]; + if (!script) + return null; if (script.isInlineScriptWithSourceURL()) { return this._debuggerModel.createRawLocation( script, lineNumber + script.lineOffset, lineNumber ? columnNumber : columnNumber + script.columnOffset); @@ -106,9 +108,7 @@ Bindings.DefaultScriptMapping = class { uiSourceCode[Bindings.DefaultScriptMapping._scriptSymbol] = script; script[Bindings.DefaultScriptMapping._uiSourceCodeSymbol] = uiSourceCode; this._project.addUISourceCodeWithProvider(uiSourceCode, script, null, 'text/javascript'); - - this._debuggerWorkspaceBinding.setSourceMapping(this._debuggerModel, uiSourceCode, this); - this._debuggerWorkspaceBinding.pushSourceMapping(script, this); + this._debuggerWorkspaceBinding.updateLocations(script); } /** @@ -123,24 +123,6 @@ Bindings.DefaultScriptMapping = class { this._project.removeUISourceCode(uiSourceCode.url()); } - /** - * @override - * @return {boolean} - */ - isIdentity() { - return true; - } - - /** - * @override - * @param {!Workspace.UISourceCode} uiSourceCode - * @param {number} lineNumber - * @return {boolean} - */ - uiLineHasMapping(uiSourceCode, lineNumber) { - return true; - } - _debuggerReset() { this._project.reset(); } diff --git a/front_end/bindings/ResourceScriptMapping.js b/front_end/bindings/ResourceScriptMapping.js index fead041298..49977602fc 100644 --- a/front_end/bindings/ResourceScriptMapping.js +++ b/front_end/bindings/ResourceScriptMapping.js @@ -87,7 +87,8 @@ Bindings.ResourceScriptMapping = class { */ uiLocationToRawLocation(uiSourceCode, lineNumber, columnNumber) { var scripts = this._scriptsForUISourceCode(uiSourceCode); - console.assert(scripts.length); + if (!scripts.length) + return null; var script = scripts[scripts.length - 1]; if (script.isInlineScriptWithSourceURL()) { return this._debuggerModel.createRawLocationByURL( @@ -103,7 +104,6 @@ Bindings.ResourceScriptMapping = class { addScript(script) { if (script.isAnonymousScript()) return; - this._debuggerWorkspaceBinding.pushSourceMapping(script, this); var uiSourceCode = this._workspaceUISourceCodeForScript(script); if (!uiSourceCode) @@ -112,24 +112,6 @@ Bindings.ResourceScriptMapping = class { this._bindUISourceCodeToScripts(uiSourceCode, [script]); } - /** - * @override - * @return {boolean} - */ - isIdentity() { - return true; - } - - /** - * @override - * @param {!Workspace.UISourceCode} uiSourceCode - * @param {number} lineNumber - * @return {boolean} - */ - uiLineHasMapping(uiSourceCode, lineNumber) { - return true; - } - /** * @param {!Workspace.UISourceCode} uiSourceCode * @return {?Bindings.ResourceScriptFile} @@ -222,7 +204,6 @@ Bindings.ResourceScriptMapping = class { this._setScriptFile(uiSourceCode, scriptFile); for (var i = 0; i < scripts.length; ++i) this._debuggerWorkspaceBinding.updateLocations(scripts[i]); - this._debuggerWorkspaceBinding.setSourceMapping(this._debuggerModel, uiSourceCode, this); this._boundUISourceCodes.add(uiSourceCode); } @@ -235,8 +216,9 @@ Bindings.ResourceScriptMapping = class { scriptFile.dispose(); this._setScriptFile(uiSourceCode, null); } - this._debuggerWorkspaceBinding.setSourceMapping(this._debuggerModel, uiSourceCode, null); this._boundUISourceCodes.delete(uiSourceCode); + if (scriptFile._script) + this._debuggerWorkspaceBinding.updateLocations(scriptFile._script); } _debuggerReset() { diff --git a/front_end/common/ContentProvider.js b/front_end/common/ContentProvider.js index 8670091d18..d56ad2c463 100644 --- a/front_end/common/ContentProvider.js +++ b/front_end/common/ContentProvider.js @@ -52,9 +52,9 @@ Common.ContentProvider.prototype = { * @param {string} query * @param {boolean} caseSensitive * @param {boolean} isRegex - * @param {function(!Array.)} callback + * @return {!Promise>} */ - searchInContent(query, caseSensitive, isRegex, callback) {} + searchInContent(query, caseSensitive, isRegex) {} }; /** diff --git a/front_end/common/StaticContentProvider.js b/front_end/common/StaticContentProvider.js index 6111e3b56b..337c3be5d8 100644 --- a/front_end/common/StaticContentProvider.js +++ b/front_end/common/StaticContentProvider.js @@ -57,20 +57,10 @@ Common.StaticContentProvider = class { * @param {string} query * @param {boolean} caseSensitive * @param {boolean} isRegex - * @param {function(!Array.)} callback + * @return {!Promise>} */ - searchInContent(query, caseSensitive, isRegex, callback) { - /** - * @param {?string} content - */ - function performSearch(content) { - if (!content) { - callback(/** @type {!Array} */ ([])); - return; - } - callback(Common.ContentProvider.performSearchInContent(content, query, caseSensitive, isRegex)); - } - - this._lazyContent().then(performSearch); + async searchInContent(query, caseSensitive, isRegex) { + var content = await this._lazyContent(); + return content ? Common.ContentProvider.performSearchInContent(content, query, caseSensitive, isRegex) : []; } }; diff --git a/front_end/common/UIString.js b/front_end/common/UIString.js index 45f73639aa..9333b764fe 100644 --- a/front_end/common/UIString.js +++ b/front_end/common/UIString.js @@ -40,34 +40,6 @@ Common.UIString = function(string, vararg) { return String.vsprintf(Common.localize(string), Array.prototype.slice.call(arguments, 1)); }; -/** - * @param {string} string - * @param {...*} vararg - * @return {string} - */ -Common.UIString.capitalize = function(string, vararg) { - if (Common._useLowerCaseMenuTitles === undefined) - throw 'Common.setLocalizationPlatform() has not been called'; - - var localized = Common.localize(string); - var capitalized; - if (Common._useLowerCaseMenuTitles) { - capitalized = localized.replace(/\^(.)/g, '$1'); - } else { - capitalized = localized.replace(/\^(.)/g, function(str, char) { - return char.toUpperCase(); - }); - } - return String.vsprintf(capitalized, Array.prototype.slice.call(arguments, 1)); -}; - -/** - * @param {string} platform - */ -Common.setLocalizationPlatform = function(platform) { - Common._useLowerCaseMenuTitles = platform === 'windows'; -}; - /** * @param {string} string * @return {string} diff --git a/front_end/common/module.json b/front_end/common/module.json index 0ad0a41e5a..99b5427a8a 100644 --- a/front_end/common/module.json +++ b/front_end/common/module.json @@ -21,7 +21,6 @@ "Trie.js", "UIString.js", "ModuleExtensionInterfaces.js", - "FormatterWorkerPool.js", "CharacterIdMap.js" ] } diff --git a/front_end/components/DOMBreakpointsSidebarPane.js b/front_end/components/DOMBreakpointsSidebarPane.js index 5c4d60d3df..dd56c97e0c 100644 --- a/front_end/components/DOMBreakpointsSidebarPane.js +++ b/front_end/components/DOMBreakpointsSidebarPane.js @@ -174,10 +174,10 @@ Components.DOMBreakpointsSidebarPane = class extends UI.VBox { */ _contextMenu(breakpoint, event) { var contextMenu = new UI.ContextMenu(event); - contextMenu.appendItem(Common.UIString.capitalize('Remove ^breakpoint'), () => { + contextMenu.appendItem(Common.UIString('Remove breakpoint'), () => { breakpoint.domDebuggerModel.removeDOMBreakpoint(breakpoint.node, breakpoint.type); }); - contextMenu.appendItem(Common.UIString.capitalize('Remove ^all DOM breakpoints'), () => { + contextMenu.appendItem(Common.UIString('Remove all DOM breakpoints'), () => { breakpoint.domDebuggerModel.removeAllDOMBreakpoints(); }); contextMenu.show(); diff --git a/front_end/components/Linkifier.js b/front_end/components/Linkifier.js index 4b6c055506..b579464925 100644 --- a/front_end/components/Linkifier.js +++ b/front_end/components/Linkifier.js @@ -551,30 +551,22 @@ Components.Linkifier = class { if (info.revealable) result.push({title: Common.UIString('Reveal'), handler: () => Common.Revealer.reveal(info.revealable)}); - if (uiLocation) { - result.push({ - title: Common.UIString.capitalize('Open in Sources ^panel'), - handler: () => Common.Revealer.reveal(uiLocation) - }); - } + if (uiLocation) + result.push({title: Common.UIString('Open in Sources panel'), handler: () => Common.Revealer.reveal(uiLocation)}); + if (resource) { - result.push({ - title: Common.UIString.capitalize('Open in Application ^panel'), - handler: () => Common.Revealer.reveal(resource) - }); - } - if (request) { - result.push({ - title: Common.UIString.capitalize('Open in Network ^panel'), - handler: () => Common.Revealer.reveal(request) - }); + result.push( + {title: Common.UIString('Open in Application panel'), handler: () => Common.Revealer.reveal(resource)}); } + if (request) + result.push({title: Common.UIString('Open in Network panel'), handler: () => Common.Revealer.reveal(request)}); + if (contentProvider) { var lineNumber = uiLocation ? uiLocation.lineNumber : info.lineNumber || 0; for (var title of Components.Linkifier._linkHandlers.keys()) { var handler = Components.Linkifier._linkHandlers.get(title); var action = { - title: Common.UIString.capitalize('Open using %s', title), + title: Common.UIString('Open using %s', title), handler: handler.bind(null, contentProvider, lineNumber) }; if (title === Components.Linkifier._linkHandlerSetting().get()) @@ -660,65 +652,6 @@ Components.LinkDecorator.Events = { LinkIconChanged: Symbol('LinkIconChanged') }; -/** - * @param {string} string - * @param {function(string,string,number=,number=):!Node} linkifier - * @return {!DocumentFragment} - */ -Components.linkifyStringAsFragmentWithCustomLinkifier = function(string, linkifier) { - var container = createDocumentFragment(); - var linkStringRegEx = - /(?:[a-zA-Z][a-zA-Z0-9+.-]{2,}:\/\/|data:|www\.)[\w$\-_+*'=\|\/\\(){}[\]^%@&#~,:;.!?]{2,}[\w$\-_+*=\|\/\\({^%@&#~]/; - var pathLineRegex = /(?:\/[\w\.-]*)+\:[\d]+/; - - while (string && string.length < Components.Linkifier.MaxLengthToIgnoreLinkifier) { - var linkString = linkStringRegEx.exec(string) || pathLineRegex.exec(string); - if (!linkString) - break; - - linkString = linkString[0]; - var linkIndex = string.indexOf(linkString); - var nonLink = string.substring(0, linkIndex); - container.appendChild(createTextNode(nonLink)); - - var title = linkString; - var realURL = (linkString.startsWith('www.') ? 'http://' + linkString : linkString); - var splitResult = Common.ParsedURL.splitLineAndColumn(realURL); - var linkNode; - if (splitResult) - linkNode = linkifier(title, splitResult.url, splitResult.lineNumber, splitResult.columnNumber); - else - linkNode = linkifier(title, realURL); - - container.appendChild(linkNode); - string = string.substring(linkIndex + linkString.length, string.length); - } - - if (string) - container.appendChild(createTextNode(string)); - - return container; -}; - -/** - * @param {string} string - * @return {!DocumentFragment} - */ -Components.linkifyStringAsFragment = function(string) { - /** - * @param {string} title - * @param {string} url - * @param {number=} lineNumber - * @param {number=} columnNumber - * @return {!Node} - */ - function linkifier(title, url, lineNumber, columnNumber) { - return Components.Linkifier.linkifyURL(url, {text: title, lineNumber: lineNumber, columnNumber: columnNumber}); - } - - return Components.linkifyStringAsFragmentWithCustomLinkifier(string, linkifier); -}; - /** * @implements {UI.ContextMenu.Provider} * @unrestricted @@ -802,8 +735,7 @@ Components.Linkifier.ContentProviderContextMenuProvider = class { UI.openLinkExternallyLabel(), () => InspectorFrontendHost.openInNewTab(contentProvider.contentURL())); for (var title of Components.Linkifier._linkHandlers.keys()) { var handler = Components.Linkifier._linkHandlers.get(title); - contextMenu.appendItem( - Common.UIString.capitalize('Open using %s', title), handler.bind(null, contentProvider, 0)); + contextMenu.appendItem(Common.UIString('Open using %s', title), handler.bind(null, contentProvider, 0)); } if (contentProvider instanceof SDK.NetworkRequest) return; @@ -844,7 +776,7 @@ Components.Linkifier.ContentProviderContextMenuProvider = class { if (contentProvider instanceof Workspace.UISourceCode) { var uiSourceCode = /** @type {!Workspace.UISourceCode} */ (contentProvider); if (!uiSourceCode.project().canSetFileContent()) - contextMenu.appendItem(Common.UIString.capitalize('Save ^as...'), save.bind(null, true)); + contextMenu.appendItem(Common.UIString('Save as...'), save.bind(null, true)); } } }; diff --git a/front_end/console/ConsoleView.js b/front_end/console/ConsoleView.js index 3cc5a05d7e..74a8a514f9 100644 --- a/front_end/console/ConsoleView.js +++ b/front_end/console/ConsoleView.js @@ -548,14 +548,13 @@ Console.ConsoleView = class extends UI.VBox { var filterSubMenu = contextMenu.appendSubMenuItem(Common.UIString('Filter')); if (consoleMessage && consoleMessage.url) { - var menuTitle = - Common.UIString.capitalize('Hide ^messages from %s', new Common.ParsedURL(consoleMessage.url).displayName); + var menuTitle = Common.UIString('Hide messages from %s', new Common.ParsedURL(consoleMessage.url).displayName); filterSubMenu.appendItem(menuTitle, this._filter.addMessageURLFilter.bind(this._filter, consoleMessage.url)); } filterSubMenu.appendSeparator(); - var unhideAll = filterSubMenu.appendItem( - Common.UIString.capitalize('Unhide ^all'), this._filter.removeMessageURLFilter.bind(this._filter)); + var unhideAll = + filterSubMenu.appendItem(Common.UIString('Unhide all'), this._filter.removeMessageURLFilter.bind(this._filter)); filterSubMenu.appendSeparator(); var hasFilters = false; @@ -670,10 +669,8 @@ Console.ConsoleView = class extends UI.VBox { * @param {!Event} event */ _messagesClicked(event) { - var targetElement = event.deepElementFromPoint(); - // Do not focus prompt if messages have selection. - if (!targetElement || targetElement.isComponentSelectionCollapsed()) { + if (!this._messagesElement.hasSelection()) { var clickedOutsideMessageList = event.target === this._messagesElement; if (clickedOutsideMessageList) this._prompt.moveCaretToEndOfPrompt(); diff --git a/front_end/console/ConsoleViewMessage.js b/front_end/console/ConsoleViewMessage.js index e6c9e537a6..a0d3ec7330 100644 --- a/front_end/console/ConsoleViewMessage.js +++ b/front_end/console/ConsoleViewMessage.js @@ -241,7 +241,7 @@ Console.ConsoleViewMessage = class { messageElement.createTextChildren(' ', String(request.statusCode), ' (', request.statusText, ')'); } else { - var fragment = Components.linkifyStringAsFragmentWithCustomLinkifier( + var fragment = Console.ConsoleViewMessage._linkifyWithCustomLinkifier( messageText, title => Components.Linkifier.linkifyRevealable( /** @type {!SDK.NetworkRequest} */ (request), title, request.url())); @@ -481,7 +481,7 @@ Console.ConsoleViewMessage = class { for (var i = 0; i < parameters.length; ++i) { // Inline strings when formatting. if (shouldFormatMessage && parameters[i].type === 'string') - formattedResult.appendChild(Components.linkifyStringAsFragment(parameters[i].description)); + formattedResult.appendChild(Console.ConsoleViewMessage._linkifyStringAsFragment(parameters[i].description)); else formattedResult.appendChild(this._formatParameter(parameters[i], false, true)); if (i < parameters.length - 1) @@ -669,7 +669,7 @@ Console.ConsoleViewMessage = class { */ _formatParameterAsString(output) { var span = createElement('span'); - span.appendChild(Components.linkifyStringAsFragment(output.description || '')); + span.appendChild(Console.ConsoleViewMessage._linkifyStringAsFragment(output.description || '')); var result = createElement('span'); result.createChild('span', 'object-value-string-quote').textContent = '"'; @@ -685,7 +685,8 @@ Console.ConsoleViewMessage = class { _formatParameterAsError(output) { var result = createElement('span'); var errorSpan = this._tryFormatAsError(output.description || ''); - result.appendChild(errorSpan ? errorSpan : Components.linkifyStringAsFragment(output.description || '')); + result.appendChild( + errorSpan ? errorSpan : Console.ConsoleViewMessage._linkifyStringAsFragment(output.description || '')); return result; } @@ -823,7 +824,7 @@ Console.ConsoleViewMessage = class { if (b instanceof Node) { a.appendChild(b); } else if (typeof b !== 'undefined') { - var toAppend = Components.linkifyStringAsFragment(String(b)); + var toAppend = Console.ConsoleViewMessage._linkifyStringAsFragment(String(b)); if (currentStyle) { var wrapper = createElement('span'); wrapper.appendChild(toAppend); @@ -1223,17 +1224,68 @@ Console.ConsoleViewMessage = class { var formattedResult = createElement('span'); var start = 0; for (var i = 0; i < links.length; ++i) { - formattedResult.appendChild(Components.linkifyStringAsFragment(string.substring(start, links[i].positionLeft))); + formattedResult.appendChild( + Console.ConsoleViewMessage._linkifyStringAsFragment(string.substring(start, links[i].positionLeft))); formattedResult.appendChild(this._linkifier.linkifyScriptLocation( debuggerModel.target(), null, links[i].url, links[i].lineNumber, links[i].columnNumber)); start = links[i].positionRight; } if (start !== string.length) - formattedResult.appendChild(Components.linkifyStringAsFragment(string.substring(start))); + formattedResult.appendChild(Console.ConsoleViewMessage._linkifyStringAsFragment(string.substring(start))); return formattedResult; } + + /** + * @param {string} string + * @param {function(string,string,number=,number=):!Node} linkifier + * @return {!DocumentFragment} + */ + static _linkifyWithCustomLinkifier(string, linkifier) { + var container = createDocumentFragment(); + var linkStringRegEx = + /(?:[a-zA-Z][a-zA-Z0-9+.-]{2,}:\/\/|data:|www\.)[\w$\-_+*'=\|\/\\(){}[\]^%@&#~,:;.!?]{2,}[\w$\-_+*=\|\/\\({^%@&#~]/; + var pathLineRegex = /(?:\/[\w\.-]*)+\:[\d]+/; + + while (string && string.length < Components.Linkifier.MaxLengthToIgnoreLinkifier) { + var linkString = linkStringRegEx.exec(string) || pathLineRegex.exec(string); + if (!linkString) + break; + + linkString = linkString[0]; + var linkIndex = string.indexOf(linkString); + var nonLink = string.substring(0, linkIndex); + container.appendChild(createTextNode(nonLink)); + + var title = linkString; + var realURL = (linkString.startsWith('www.') ? 'http://' + linkString : linkString); + var splitResult = Common.ParsedURL.splitLineAndColumn(realURL); + var linkNode; + if (splitResult) + linkNode = linkifier(title, splitResult.url, splitResult.lineNumber, splitResult.columnNumber); + else + linkNode = linkifier(title, realURL); + + container.appendChild(linkNode); + string = string.substring(linkIndex + linkString.length, string.length); + } + + if (string) + container.appendChild(createTextNode(string)); + + return container; + } + + /** + * @param {string} string + * @return {!DocumentFragment} + */ + static _linkifyStringAsFragment(string) { + return Console.ConsoleViewMessage._linkifyWithCustomLinkifier(string, (text, url, lineNumber, columnNumber) => { + return Components.Linkifier.linkifyURL(url, {text, lineNumber, columnNumber}); + }); + } }; /** diff --git a/front_end/console/ConsoleViewport.js b/front_end/console/ConsoleViewport.js index 6341e4a282..f61e49ac56 100644 --- a/front_end/console/ConsoleViewport.js +++ b/front_end/console/ConsoleViewport.js @@ -466,9 +466,9 @@ Console.ConsoleViewport = class { continue; chars += Components.Linkifier.untruncatedNodeText(node).length; } - // If the selection offset is at the end of a link's ellipsis, use the untruncated length as offset. + // If the selected node text was truncated, treat any non-zero offset as the full length. var untruncatedContainerLength = Components.Linkifier.untruncatedNodeText(selectionNode).length; - if (offset === 1 && untruncatedContainerLength > offset) + if (offset > 0 && untruncatedContainerLength !== selectionNode.textContent.length) offset = untruncatedContainerLength; return chars + offset; } diff --git a/front_end/data_grid/DataGrid.js b/front_end/data_grid/DataGrid.js index d1c647225f..3e5c12cd76 100644 --- a/front_end/data_grid/DataGrid.js +++ b/front_end/data_grid/DataGrid.js @@ -1011,7 +1011,7 @@ DataGrid.DataGrid = class extends Common.Object { if (gridNode && gridNode.selectable && !gridNode.isEventWithinDisclosureTriangle(event)) { if (this._editCallback) { if (gridNode === this.creationNode) { - contextMenu.appendItem(Common.UIString.capitalize('Add ^new'), this._startEditing.bind(this, target)); + contextMenu.appendItem(Common.UIString('Add new'), this._startEditing.bind(this, target)); } else { var columnId = this.columnIdFromNode(target); if (columnId && this._columns[columnId].editable) { @@ -1021,7 +1021,7 @@ DataGrid.DataGrid = class extends Common.Object { } } if (this._deleteCallback && gridNode !== this.creationNode) - contextMenu.appendItem(Common.UIString.capitalize('Delete'), this._deleteCallback.bind(this, gridNode)); + contextMenu.appendItem(Common.UIString('Delete'), this._deleteCallback.bind(this, gridNode)); if (this._rowContextMenuCallback) this._rowContextMenuCallback(contextMenu, gridNode); } diff --git a/front_end/dom_extension/DOMExtension.js b/front_end/dom_extension/DOMExtension.js index 8f6733c042..235438c540 100644 --- a/front_end/dom_extension/DOMExtension.js +++ b/front_end/dom_extension/DOMExtension.js @@ -263,16 +263,6 @@ Node.prototype.getComponentSelection = function() { return parent instanceof ShadowRoot ? parent.getSelection() : this.window().getSelection(); }; -/** - * @return {boolean} - */ -Node.prototype.isComponentSelectionCollapsed = function() { - // FIXME: crbug.com/447523, use selection.isCollapsed when it is fixed for shadow dom. - var selection = this.getComponentSelection(); - var range = selection && selection.rangeCount ? selection.getRangeAt(0) : null; - return range ? range.collapsed : true; -}; - /** * @return {boolean} */ @@ -283,23 +273,12 @@ Node.prototype.hasSelection = function() { if (Array.prototype.some.call(content.getDistributedNodes(), node => node.hasSelection())) return true; } - if (this.isComponentSelectionCollapsed()) - return false; - return this.getComponentSelection().containsNode(this, true); -}; - -/** - * @return {!Selection} - */ -Node.prototype.getDeepSelection = function() { - var activeElement = this.ownerDocument.activeElement; - var shadowRoot = null; - while (activeElement && activeElement.shadowRoot) { - shadowRoot = activeElement.shadowRoot; - activeElement = shadowRoot.activeElement; - } - return shadowRoot ? shadowRoot.getSelection() : this.window().getSelection(); + var selection = this.getComponentSelection(); + if (selection.type !== 'Range') + return false; + return selection.containsNode(this, true) || selection.anchorNode.isSelfOrDescendant(this) || + selection.focusNode.isSelfOrDescendant(this); }; /** diff --git a/front_end/elements/ClassesPaneWidget.js b/front_end/elements/ClassesPaneWidget.js index 747bd96b9f..e9de7285c4 100644 --- a/front_end/elements/ClassesPaneWidget.js +++ b/front_end/elements/ClassesPaneWidget.js @@ -6,12 +6,13 @@ */ Elements.ClassesPaneWidget = class extends UI.Widget { constructor() { - super(); - this.element.className = 'styles-element-classes-pane'; - var container = this.element.createChild('div', 'title-container'); + super(true); + this.registerRequiredCSS('elements/classesPaneWidget.css'); + this.contentElement.className = 'styles-element-classes-pane'; + var container = this.contentElement.createChild('div', 'title-container'); this._input = container.createChild('div', 'new-class-input monospace'); this.setDefaultFocusedElement(this._input); - this._classesContainer = this.element.createChild('div', 'source-code'); + this._classesContainer = this.contentElement.createChild('div', 'source-code'); this._classesContainer.classList.add('styles-element-classes-container'); this._prompt = new Elements.ClassesPaneWidget.ClassNamePrompt(); this._prompt.setAutocompletionTimeout(0); diff --git a/front_end/elements/ComputedStyleWidget.js b/front_end/elements/ComputedStyleWidget.js index 40056c8ad0..9bde158e06 100644 --- a/front_end/elements/ComputedStyleWidget.js +++ b/front_end/elements/ComputedStyleWidget.js @@ -32,9 +32,7 @@ */ Elements.ComputedStyleWidget = class extends UI.ThrottledWidget { constructor() { - super(); - this.element.classList.add('computed-style-sidebar-pane'); - + super(true); this.registerRequiredCSS('elements/computedStyleSidebarPane.css'); this._alwaysShowComputedProperties = {'display': true, 'height': true, 'width': true}; @@ -47,10 +45,10 @@ Elements.ComputedStyleWidget = class extends UI.ThrottledWidget { this._showInheritedComputedStylePropertiesSetting.addChangeListener( this._showInheritedComputedStyleChanged.bind(this)); - var hbox = this.element.createChild('div', 'hbox styles-sidebar-pane-toolbar'); + var hbox = this.contentElement.createChild('div', 'hbox styles-sidebar-pane-toolbar'); var filterContainerElement = hbox.createChild('div', 'styles-sidebar-pane-filter-box'); var filterInput = Elements.StylesSidebarPane.createPropertyFilterElement( - Common.UIString('Filter'), hbox, filterCallback.bind(this)); + Common.UIString('Filter'), hbox, filterCallback.bind(this), 'styles-filter-engaged'); UI.ARIAUtils.setAccessibleName(filterInput, Common.UIString('Filter Computed Styles')); filterContainerElement.appendChild(filterInput); @@ -60,9 +58,9 @@ Elements.ComputedStyleWidget = class extends UI.ThrottledWidget { this._propertiesOutline = new UI.TreeOutlineInShadow(); this._propertiesOutline.hideOverflow(); - this._propertiesOutline.registerRequiredCSS('elements/computedStyleSidebarPane.css'); + this._propertiesOutline.registerRequiredCSS('elements/computedStyleWidgetTree.css'); this._propertiesOutline.element.classList.add('monospace', 'computed-properties'); - this.element.appendChild(this._propertiesOutline.element); + this.contentElement.appendChild(this._propertiesOutline.element); this._linkifier = new Components.Linkifier(Elements.ComputedStyleWidget._maxLinkLength); @@ -76,7 +74,7 @@ Elements.ComputedStyleWidget = class extends UI.ThrottledWidget { } var fontsWidget = new Elements.PlatformFontsWidget(this._computedStyleModel); - fontsWidget.show(this.element); + fontsWidget.show(this.contentElement); } _showInheritedComputedStyleChanged() { diff --git a/front_end/elements/ElementStatePaneWidget.js b/front_end/elements/ElementStatePaneWidget.js index 61d3b8ca1e..a4c3edfef3 100644 --- a/front_end/elements/ElementStatePaneWidget.js +++ b/front_end/elements/ElementStatePaneWidget.js @@ -6,9 +6,10 @@ */ Elements.ElementStatePaneWidget = class extends UI.Widget { constructor() { - super(); - this.element.className = 'styles-element-state-pane'; - this.element.createChild('div').createTextChild(Common.UIString('Force element state')); + super(true); + this.registerRequiredCSS('elements/elementStatePaneWidget.css'); + this.contentElement.className = 'styles-element-state-pane'; + this.contentElement.createChild('div').createTextChild(Common.UIString('Force element state')); var table = createElementWithClass('table', 'source-code'); var inputs = []; @@ -47,7 +48,7 @@ Elements.ElementStatePaneWidget = class extends UI.Widget { tr.appendChild(createCheckbox.call(null, 'focus')); tr.appendChild(createCheckbox.call(null, 'visited')); - this.element.appendChild(table); + this.contentElement.appendChild(table); UI.context.addFlavorChangeListener(SDK.DOMNode, this._update, this); } diff --git a/front_end/elements/ElementsPanel.js b/front_end/elements/ElementsPanel.js index d5afb49a08..4b345275a7 100644 --- a/front_end/elements/ElementsPanel.js +++ b/front_end/elements/ElementsPanel.js @@ -27,6 +27,7 @@ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */ + /** * @implements {UI.Searchable} * @implements {SDK.SDKModelObserver} @@ -415,12 +416,9 @@ Elements.ElementsPanel = class extends UI.Panel { this._searchConfig = searchConfig; - var promises = []; + var showUAShadowDOM = Common.moduleSetting('showUAShadowDOM').get(); var domModels = SDK.targetManager.models(SDK.DOMModel); - for (var domModel of domModels) { - promises.push( - domModel.performSearchPromise(whitespaceTrimmedQuery, Common.moduleSetting('showUAShadowDOM').get())); - } + var promises = domModels.map(domModel => domModel.performSearch(whitespaceTrimmedQuery, showUAShadowDOM)); Promise.all(promises).then(resultCountCallback.bind(this)); /** @@ -552,6 +550,7 @@ Elements.ElementsPanel = class extends UI.Panel { } var treeElement = this._treeElementForNode(searchResult.node); + searchResult.node.scrollIntoView(); if (treeElement) { treeElement.highlightSearchResults(this._searchConfig.query); treeElement.reveal(); @@ -871,7 +870,7 @@ Elements.ElementsPanel.ContextMenuProvider = class { if (Elements.ElementsPanel.instance().element.isAncestor(/** @type {!Node} */ (event.target))) return; var commandCallback = Common.Revealer.reveal.bind(Common.Revealer, object); - contextMenu.appendItem(Common.UIString.capitalize('Reveal in Elements ^panel'), commandCallback); + contextMenu.appendItem(Common.UIString('Reveal in Elements panel'), commandCallback); } }; diff --git a/front_end/elements/ElementsSidebarPane.js b/front_end/elements/ElementsSidebarPane.js index 0344456408..6844eaf2d8 100644 --- a/front_end/elements/ElementsSidebarPane.js +++ b/front_end/elements/ElementsSidebarPane.js @@ -5,8 +5,11 @@ * @unrestricted */ Elements.ElementsSidebarPane = class extends UI.VBox { - constructor() { - super(); + /** + * @param {boolean=} isWebComponent + */ + constructor(isWebComponent) { + super(isWebComponent); this.element.classList.add('flex-none'); this._computedStyleModel = new Elements.ComputedStyleModel(); this._computedStyleModel.addEventListener( diff --git a/front_end/elements/ElementsTreeElement.js b/front_end/elements/ElementsTreeElement.js index 32f18f1ca3..9b8180d47a 100644 --- a/front_end/elements/ElementsTreeElement.js +++ b/front_end/elements/ElementsTreeElement.js @@ -460,15 +460,13 @@ Elements.ElementsTreeElement = class extends UI.TreeElement { populateTagContextMenu(contextMenu, event) { // Add attribute-related actions. var treeElement = this._elementCloseTag ? this.treeOutline.findTreeElement(this._node) : this; - contextMenu.appendItem( - Common.UIString.capitalize('Add ^attribute'), treeElement._addNewAttribute.bind(treeElement)); + contextMenu.appendItem(Common.UIString('Add attribute'), treeElement._addNewAttribute.bind(treeElement)); var attribute = event.target.enclosingNodeOrSelfWithClass('webkit-html-attribute'); var newAttribute = event.target.enclosingNodeOrSelfWithClass('add-attribute'); if (attribute && !newAttribute) { contextMenu.appendItem( - Common.UIString.capitalize('Edit ^attribute'), - this._startEditingAttribute.bind(this, attribute, event.target)); + Common.UIString('Edit attribute'), this._startEditingAttribute.bind(this, attribute, event.target)); } this.populateNodeContextMenu(contextMenu); Elements.ElementsTreeElement.populateForcedPseudoStateItems(contextMenu, treeElement.node()); @@ -480,12 +478,12 @@ Elements.ElementsTreeElement = class extends UI.TreeElement { * @param {!UI.ContextMenu} contextMenu */ populateScrollIntoView(contextMenu) { - contextMenu.appendItem(Common.UIString.capitalize('Scroll into ^view'), this._scrollIntoView.bind(this)); + contextMenu.appendItem(Common.UIString('Scroll into view'), () => this._node.scrollIntoView()); } populateTextContextMenu(contextMenu, textNode) { if (!this._editing) - contextMenu.appendItem(Common.UIString.capitalize('Edit ^text'), this._startEditingTextNode.bind(this, textNode)); + contextMenu.appendItem(Common.UIString('Edit text'), this._startEditingTextNode.bind(this, textNode)); this.populateNodeContextMenu(contextMenu); } @@ -508,7 +506,7 @@ Elements.ElementsTreeElement = class extends UI.TreeElement { menuItem.setShortcut(createShortcut('V', modifier)); } if (this._node.nodeType() === Node.ELEMENT_NODE) - copyMenu.appendItem(Common.UIString.capitalize('Copy selector'), this._copyCSSPath.bind(this)); + copyMenu.appendItem(Common.UIString('Copy selector'), this._copyCSSPath.bind(this)); if (!isShadowRoot) copyMenu.appendItem(Common.UIString('Copy XPath'), this._copyXPath.bind(this)); if (!isShadowRoot) { @@ -1629,23 +1627,6 @@ Elements.ElementsTreeElement = class extends UI.TreeElement { UI.highlightSearchResults(this.listItemElement, matchRanges, this._highlightResult); } - _scrollIntoView() { - function scrollIntoViewCallback(object) { - /** - * @suppressReceiverCheck - * @this {!Element} - */ - function scrollIntoView() { - this.scrollIntoViewIfNeeded(true); - } - - if (object) - object.callFunction(scrollIntoView); - } - - this._node.resolveToObject('', scrollIntoViewCallback); - } - _editAsHTML() { var promise = Common.Revealer.revealPromise(this.node()); promise.then(() => UI.actionRegistry.action('elements.edit-as-html').execute()); diff --git a/front_end/elements/ElementsTreeOutline.js b/front_end/elements/ElementsTreeOutline.js index 322fadc5a7..67ec7d9296 100644 --- a/front_end/elements/ElementsTreeOutline.js +++ b/front_end/elements/ElementsTreeOutline.js @@ -192,7 +192,7 @@ Elements.ElementsTreeOutline = class extends UI.TreeOutline { var originalEvent = event['original']; // Don't prevent the normal copy if the user has a selection. - if (!originalEvent.target.isComponentSelectionCollapsed()) + if (originalEvent.target.hasSelection()) return; // Do not interfere with text editing. @@ -550,38 +550,32 @@ Elements.ElementsTreeOutline = class extends UI.TreeOutline { * @param {!SDK.DOMNode} node * @return {!Promise} */ - _loadDimensionsForNode(node) { + async _loadDimensionsForNode(node) { if (!node.nodeName() || node.nodeName().toLowerCase() !== 'img') - return Promise.resolve(); + return; - var fulfill; - var promise = new Promise(x => fulfill = x); - node.resolveToObject('', resolvedNode); - return promise; + var object = await node.resolveToObject(''); - function resolvedNode(object) { - if (!object) { - fulfill(); - return; - } + if (!object) + return; - object.callFunctionJSON(features, undefined, fulfill); - object.release(); + var promise = object.callFunctionJSONPromise(features, undefined); + object.release(); + return promise; - /** - * @return {!{offsetWidth: number, offsetHeight: number, naturalWidth: number, naturalHeight: number, currentSrc: (string|undefined)}} - * @suppressReceiverCheck - * @this {!Element} - */ - function features() { - return { - offsetWidth: this.offsetWidth, - offsetHeight: this.offsetHeight, - naturalWidth: this.naturalWidth, - naturalHeight: this.naturalHeight, - currentSrc: this.currentSrc - }; - } + /** + * @return {!{offsetWidth: number, offsetHeight: number, naturalWidth: number, naturalHeight: number, currentSrc: (string|undefined)}} + * @suppressReceiverCheck + * @this {!Element} + */ + function features() { + return { + offsetWidth: this.offsetWidth, + offsetHeight: this.offsetHeight, + naturalWidth: this.naturalWidth, + naturalHeight: this.naturalHeight, + currentSrc: this.currentSrc + }; } } @@ -637,7 +631,7 @@ Elements.ElementsTreeOutline = class extends UI.TreeOutline { } _ondragstart(event) { - if (!event.target.isComponentSelectionCollapsed()) + if (event.target.hasSelection()) return false; if (event.target.nodeName === 'A') return false; @@ -896,66 +890,63 @@ Elements.ElementsTreeOutline = class extends UI.TreeOutline { * ancestors. * * @param {!SDK.DOMNode} node - * @param {function(?SDK.RemoteObject, boolean=)=} userCallback */ - toggleHideElement(node, userCallback) { + async toggleHideElement(node) { var pseudoType = node.pseudoType(); var effectiveNode = pseudoType ? node.parentNode : node; if (!effectiveNode) return; var hidden = node.marker('hidden-marker'); + var object = await effectiveNode.resolveToObject(''); - function resolvedNode(object) { - if (!object) - return; + if (!object) + return; - /** - * @param {?string} pseudoType - * @param {boolean} hidden - * @suppressGlobalPropertiesCheck - * @suppressReceiverCheck - * @this {!Element} - */ - function toggleClassAndInjectStyleRule(pseudoType, hidden) { - const classNamePrefix = '__web-inspector-hide'; - const classNameSuffix = '-shortcut__'; - const styleTagId = '__web-inspector-hide-shortcut-style__'; - var selectors = []; - selectors.push('.__web-inspector-hide-shortcut__'); - selectors.push('.__web-inspector-hide-shortcut__ *'); - selectors.push('.__web-inspector-hidebefore-shortcut__::before'); - selectors.push('.__web-inspector-hideafter-shortcut__::after'); - var selector = selectors.join(', '); - var ruleBody = ' visibility: hidden !important;'; - var rule = '\n' + selector + '\n{\n' + ruleBody + '\n}\n'; - var className = classNamePrefix + (pseudoType || '') + classNameSuffix; - this.classList.toggle(className, hidden); - - var localRoot = this; - while (localRoot.parentNode) - localRoot = localRoot.parentNode; - if (localRoot.nodeType === Node.DOCUMENT_NODE) - localRoot = document.head; - - var style = localRoot.querySelector('style#' + styleTagId); - if (style) - return; + var result = object.callFunction(toggleClassAndInjectStyleRule, [{value: pseudoType}, {value: !hidden}]); + object.release(); + node.setMarker('hidden-marker', hidden ? null : true); + return result; - style = document.createElement('style'); - style.id = styleTagId; - style.type = 'text/css'; - style.textContent = rule; + /** + * @param {?string} pseudoType + * @param {boolean} hidden + * @suppressGlobalPropertiesCheck + * @suppressReceiverCheck + * @this {!Element} + */ + function toggleClassAndInjectStyleRule(pseudoType, hidden) { + const classNamePrefix = '__web-inspector-hide'; + const classNameSuffix = '-shortcut__'; + const styleTagId = '__web-inspector-hide-shortcut-style__'; + var selectors = []; + selectors.push('.__web-inspector-hide-shortcut__'); + selectors.push('.__web-inspector-hide-shortcut__ *'); + selectors.push('.__web-inspector-hidebefore-shortcut__::before'); + selectors.push('.__web-inspector-hideafter-shortcut__::after'); + var selector = selectors.join(', '); + var ruleBody = ' visibility: hidden !important;'; + var rule = '\n' + selector + '\n{\n' + ruleBody + '\n}\n'; + var className = classNamePrefix + (pseudoType || '') + classNameSuffix; + this.classList.toggle(className, hidden); + + var localRoot = this; + while (localRoot.parentNode) + localRoot = localRoot.parentNode; + if (localRoot.nodeType === Node.DOCUMENT_NODE) + localRoot = document.head; + + var style = localRoot.querySelector('style#' + styleTagId); + if (style) + return; - localRoot.appendChild(style); - } + style = document.createElement('style'); + style.id = styleTagId; + style.type = 'text/css'; + style.textContent = rule; - object.callFunction(toggleClassAndInjectStyleRule, [{value: pseudoType}, {value: !hidden}], userCallback); - object.release(); - node.setMarker('hidden-marker', hidden ? null : true); + localRoot.appendChild(style); } - - effectiveNode.resolveToObject('', resolvedNode); } /** diff --git a/front_end/elements/EventListenersWidget.js b/front_end/elements/EventListenersWidget.js index 9a15951131..fa2081e7da 100644 --- a/front_end/elements/EventListenersWidget.js +++ b/front_end/elements/EventListenersWidget.js @@ -46,7 +46,8 @@ Elements.EventListenersWidget = class extends UI.ThrottledWidget { this._showFrameworkListenersSetting = Common.settings.createSetting('showFrameowkrListeners', true); this._showFrameworkListenersSetting.setTitle(Common.UIString('Framework listeners')); this._showFrameworkListenersSetting.addChangeListener(this._showFrameworkListenersChanged.bind(this)); - this._eventListenersView = new EventListeners.EventListenersView(this.element, this.update.bind(this)); + this._eventListenersView = new EventListeners.EventListenersView(this.update.bind(this)); + this._eventListenersView.show(this.element); var refreshButton = new UI.ToolbarButton(Common.UIString('Refresh'), 'largeicon-refresh'); refreshButton.addEventListener(UI.ToolbarButton.Events.Click, this.update.bind(this)); @@ -100,11 +101,11 @@ Elements.EventListenersWidget = class extends UI.ThrottledWidget { this._lastRequestedNode = node; var selectedNodeOnly = !this._showForAncestorsSetting.get(); var promises = []; - promises.push(node.resolveToObjectPromise(Elements.EventListenersWidget._objectGroupName)); + promises.push(node.resolveToObject(Elements.EventListenersWidget._objectGroupName)); if (!selectedNodeOnly) { var currentNode = node.parentNode; while (currentNode) { - promises.push(currentNode.resolveToObjectPromise(Elements.EventListenersWidget._objectGroupName)); + promises.push(currentNode.resolveToObject(Elements.EventListenersWidget._objectGroupName)); currentNode = currentNode.parentNode; } promises.push(this._windowObjectInNodeContext(node)); diff --git a/front_end/elements/MetricsSidebarPane.js b/front_end/elements/MetricsSidebarPane.js index 8e3a2b246a..f44b1fe8c2 100644 --- a/front_end/elements/MetricsSidebarPane.js +++ b/front_end/elements/MetricsSidebarPane.js @@ -31,7 +31,8 @@ */ Elements.MetricsSidebarPane = class extends Elements.ElementsSidebarPane { constructor() { - super(); + super(true); + this.registerRequiredCSS('elements/metricsSidebarPane.css'); /** @type {?SDK.CSSStyleDeclaration} */ this._inlineStyle = null; @@ -52,7 +53,7 @@ Elements.MetricsSidebarPane = class extends Elements.ElementsSidebarPane { var node = this.node(); var cssModel = this.cssModel(); if (!node || node.nodeType() !== Node.ELEMENT_NODE || !cssModel) { - this.element.removeChildren(); + this.contentElement.removeChildren(); return Promise.resolve(); } @@ -294,8 +295,8 @@ Elements.MetricsSidebarPane = class extends Elements.ElementsSidebarPane { metricsElement.appendChild(previousBox); metricsElement.addEventListener('mouseover', this._highlightDOMNode.bind(this, false, 'all'), false); - this.element.removeChildren(); - this.element.appendChild(metricsElement); + this.contentElement.removeChildren(); + this.contentElement.appendChild(metricsElement); } /** diff --git a/front_end/elements/PropertiesWidget.js b/front_end/elements/PropertiesWidget.js index f923fb343e..f20b517a7e 100644 --- a/front_end/elements/PropertiesWidget.js +++ b/front_end/elements/PropertiesWidget.js @@ -71,7 +71,7 @@ Elements.PropertiesWidget = class extends UI.ThrottledWidget { } this._lastRequestedNode = this._node; - return this._node.resolveToObjectPromise(Elements.PropertiesWidget._objectGroupName).then(nodeResolved.bind(this)); + return this._node.resolveToObject(Elements.PropertiesWidget._objectGroupName).then(nodeResolved.bind(this)); /** * @param {?SDK.RemoteObject} object diff --git a/front_end/elements/StylesSidebarPane.js b/front_end/elements/StylesSidebarPane.js index 85b150204d..862c142bb8 100644 --- a/front_end/elements/StylesSidebarPane.js +++ b/front_end/elements/StylesSidebarPane.js @@ -127,16 +127,17 @@ Elements.StylesSidebarPane = class extends Elements.ElementsSidebarPane { * @param {string} placeholder * @param {!Element} container * @param {function(?RegExp)} filterCallback + * @param {string} activeClassName * @return {!Element} */ - static createPropertyFilterElement(placeholder, container, filterCallback) { + static createPropertyFilterElement(placeholder, container, filterCallback, activeClassName) { var input = createElementWithClass('input'); input.placeholder = placeholder; function searchHandler() { var regex = input.value ? new RegExp(input.value.escapeForRegExp(), 'i') : null; filterCallback(regex); - container.classList.toggle('styles-filter-engaged', !!input.value); + container.classList.toggle(activeClassName, !!input.value); } input.addEventListener('input', searchHandler, false); @@ -531,7 +532,7 @@ Elements.StylesSidebarPane = class extends Elements.ElementsSidebarPane { var hbox = container.createChild('div', 'hbox styles-sidebar-pane-toolbar'); var filterContainerElement = hbox.createChild('div', 'styles-sidebar-pane-filter-box'); var filterInput = Elements.StylesSidebarPane.createPropertyFilterElement( - Common.UIString('Filter'), hbox, this._onFilterChanged.bind(this)); + Common.UIString('Filter'), hbox, this._onFilterChanged.bind(this), 'styles-filter-engaged'); UI.ARIAUtils.setAccessibleName(filterInput, Common.UIString('Filter Styles')); filterContainerElement.appendChild(filterInput); var toolbar = new UI.Toolbar('styles-pane-toolbar', hbox); @@ -1357,21 +1358,7 @@ Elements.StylePropertiesSection = class { * @param {!Event} event */ _handleEmptySpaceClick(event) { - if (!this.editable) - return; - - var targetElement = event.deepElementFromPoint(); - if (targetElement && !targetElement.isComponentSelectionCollapsed()) - return; - - if (!event.target.isComponentSelectionCollapsed()) - return; - - if (this.propertiesTreeOutline.element.shadowRoot.firstChild && - !this.propertiesTreeOutline.element.shadowRoot.firstChild.isComponentSelectionCollapsed()) - return; - - if (this._checkWillCancelEditing()) + if (!this.editable || this.element.hasSelection() || this._checkWillCancelEditing()) return; if (event.target.classList.contains('header') || this.element.classList.contains('read-only') || @@ -1682,7 +1669,7 @@ Elements.StylePropertiesSection = class { * @return {!Promise} */ _manuallySetHeight() { - this.element.style.height = this._innerElement.clientHeight + 'px'; + this.element.style.height = (this._innerElement.clientHeight + 1) + 'px'; this.element.style.contain = 'strict'; return Promise.resolve(); } @@ -2337,7 +2324,7 @@ Elements.StylePropertyTreeElement = class extends UI.TreeElement { * @param {!Event} event */ _mouseClick(event) { - if (!event.target.isComponentSelectionCollapsed()) + if (event.target.hasSelection()) return; event.consume(true); diff --git a/front_end/elements/classesPaneWidget.css b/front_end/elements/classesPaneWidget.css new file mode 100644 index 0000000000..66e3544339 --- /dev/null +++ b/front_end/elements/classesPaneWidget.css @@ -0,0 +1,37 @@ +/** + * 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. + */ + +.styles-element-classes-pane { + background-color: #f3f3f3; + border-bottom: 1px solid rgb(189, 189, 189); + padding: 6px 2px 2px; +} + +.styles-element-classes-container { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; +} + +.styles-element-classes-pane label { + margin-right: 15px; +} + +.styles-element-classes-pane .title-container { + padding-bottom: 2px; +} + +.styles-element-classes-pane .new-class-input { + padding-left: 3px; + padding-right: 3px; + overflow: hidden; + border: 1px solid #ddd; + line-height: 15px; + margin-left: 3px; + width: calc(100% - 7px); + background-color: #fff; + cursor: text; +} diff --git a/front_end/elements/computedStyleSidebarPane.css b/front_end/elements/computedStyleSidebarPane.css index a04c7aafdb..d6055adf0f 100644 --- a/front_end/elements/computedStyleSidebarPane.css +++ b/front_end/elements/computedStyleSidebarPane.css @@ -9,112 +9,28 @@ flex-shrink: 0; } -.computed-style-property { - display: flex; - overflow: hidden; - flex: auto; -} - -.computed-style-property .property-name { - min-width: 5em; - text-overflow: ellipsis; - overflow: hidden; - flex-shrink: 1; - flex-basis: 16em; - flex-grow: 1; -} - -.computed-style-property .property-value { - margin-left: 2em; - position: relative; - display: flex; +.styles-sidebar-pane-toolbar { + border-bottom: 1px solid #eee; flex-shrink: 0; - flex-basis: 5em; - flex-grow: 10; -} - -.computed-style-property .property-value-text { - overflow: hidden; - text-overflow: ellipsis; -} - -.tree-outline li:hover .goto-source-icon { - display: block; - margin-top: -2px; -} - -.goto-source-icon { - background-color: #5a5a5a; - display: none; - position: absolute; - left: -16px; -} - -.goto-source-icon:hover { - background-color: #333; -} - -.computed-style-property-inherited { - opacity: 0.5; } -.trace-link { - user-select: none; - float: right; - padding-left: 1em; - position: relative; - z-index: 1; -} - -.property-trace { - text-overflow: ellipsis; - overflow: hidden; - flex-grow: 1; -} - -.property-trace-selector { - color: gray; - padding-left: 2em; -} - -.property-trace-value { - position: relative; - display: inline-block; - margin-left: 2em; -} - -.property-trace-inactive .property-trace-value::before { - position: absolute; - content: "."; - border-bottom: 1px solid rgba(0, 0, 0, 0.35); - top: 0; - bottom: 5px; - left: 0; - right: 0; -} - -.tree-outline li.odd-row { - position: relative; - background-color: #F5F5F5; -} - -.tree-outline, .tree-outline ol { - padding-left: 0; -} - -.tree-outline li:hover { - background-color: rgb(235, 242, 252); - cursor: pointer; +.styles-sidebar-pane-filter-box { + flex: auto; + display: flex; } -.tree-outline li::before { +.styles-sidebar-pane-filter-box > input { + outline: none !important; + border: none; + width: 100%; + background: transparent; margin-left: 4px; } -.delimeter { - color: transparent; +.styles-filter-engaged { + background-color: rgba(255, 255, 0, 0.5); } -.delimeter::selection { - color: transparent; +:host-context(.-theme-with-dark-background) .styles-filter-engaged { + background-color: hsla(133, 100%, 30%, 0.5); } diff --git a/front_end/elements/computedStyleWidgetTree.css b/front_end/elements/computedStyleWidgetTree.css new file mode 100644 index 0000000000..f33a4aec02 --- /dev/null +++ b/front_end/elements/computedStyleWidgetTree.css @@ -0,0 +1,115 @@ +/* + * Copyright (c) 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. + */ + +.computed-style-property { + display: flex; + overflow: hidden; + flex: auto; +} + +.computed-style-property .property-name { + min-width: 5em; + text-overflow: ellipsis; + overflow: hidden; + flex-shrink: 1; + flex-basis: 16em; + flex-grow: 1; +} + +.computed-style-property .property-value { + margin-left: 2em; + position: relative; + display: flex; + flex-shrink: 0; + flex-basis: 5em; + flex-grow: 10; +} + +.computed-style-property .property-value-text { + overflow: hidden; + text-overflow: ellipsis; +} + +.tree-outline li:hover .goto-source-icon { + display: block; + margin-top: -2px; +} + +.goto-source-icon { + background-color: #5a5a5a; + display: none; + position: absolute; + left: -16px; +} + +.goto-source-icon:hover { + background-color: #333; +} + +.computed-style-property-inherited { + opacity: 0.5; +} + +.trace-link { + user-select: none; + float: right; + padding-left: 1em; + position: relative; + z-index: 1; +} + +.property-trace { + text-overflow: ellipsis; + overflow: hidden; + flex-grow: 1; +} + +.property-trace-selector { + color: gray; + padding-left: 2em; +} + +.property-trace-value { + position: relative; + display: inline-block; + margin-left: 2em; +} + +.property-trace-inactive .property-trace-value::before { + position: absolute; + content: "."; + border-bottom: 1px solid rgba(0, 0, 0, 0.35); + top: 0; + bottom: 5px; + left: 0; + right: 0; +} + +.tree-outline li.odd-row { + position: relative; + background-color: #F5F5F5; +} + +.tree-outline, .tree-outline ol { + padding-left: 0; +} + +.tree-outline li:hover { + background-color: rgb(235, 242, 252); + cursor: pointer; +} + +.tree-outline li::before { + margin-left: 4px; +} + +.delimeter { + color: transparent; +} + +.delimeter::selection { + color: transparent; +} diff --git a/front_end/elements/elementStatePaneWidget.css b/front_end/elements/elementStatePaneWidget.css new file mode 100644 index 0000000000..ff0dd4c027 --- /dev/null +++ b/front_end/elements/elementStatePaneWidget.css @@ -0,0 +1,27 @@ +/** + * 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. + */ + +.styles-element-state-pane { + overflow: hidden; + height: 66px; + padding-left: 2px; + background-color: #f3f3f3; + border-bottom: 1px solid rgb(189, 189, 189); + margin-top: 0; +} + +.styles-element-state-pane > div { + margin: 8px 4px 6px; +} + +.styles-element-state-pane > table { + width: 100%; + border-spacing: 0; +} + +.styles-element-state-pane td { + padding: 0; +} diff --git a/front_end/elements/elementsPanel.css b/front_end/elements/elementsPanel.css index 76b0b62c40..1c2778ee47 100644 --- a/front_end/elements/elementsPanel.css +++ b/front_end/elements/elementsPanel.css @@ -56,101 +56,6 @@ width: 100%; } -.metrics { - padding: 8px; - font-size: 10px; - text-align: center; - white-space: nowrap; -} - -.metrics .label { - position: absolute; - font-size: 10px; - margin-left: 3px; - padding-left: 2px; - padding-right: 2px; -} - -.metrics .position { - border: 1px rgb(66%, 66%, 66%) dotted; - background-color: white; - display: inline-block; - text-align: center; - padding: 3px; - margin: 3px; -} - -.metrics .margin { - border: 1px dashed; - background-color: white; - display: inline-block; - text-align: center; - vertical-align: middle; - padding: 3px; - margin: 3px; -} - -.metrics .border { - border: 1px black solid; - background-color: white; - display: inline-block; - text-align: center; - vertical-align: middle; - padding: 3px; - margin: 3px; -} - -.metrics .padding { - border: 1px grey dashed; - background-color: white; - display: inline-block; - text-align: center; - vertical-align: middle; - padding: 3px; - margin: 3px; -} - -.metrics .content { - position: static; - border: 1px gray solid; - background-color: white; - display: inline-block; - text-align: center; - vertical-align: middle; - padding: 3px; - margin: 3px; - min-width: 80px; - overflow: visible; -} - -.metrics .content span { - display: inline-block; -} - -.metrics .editing { - position: relative; - z-index: 100; - cursor: text; -} - -.metrics .left { - display: inline-block; - vertical-align: middle; -} - -.metrics .right { - display: inline-block; - vertical-align: middle; -} - -.metrics .top { - display: inline-block; -} - -.metrics .bottom { - display: inline-block; -} - .styles-section { min-height: 18px; white-space: nowrap; @@ -176,6 +81,10 @@ overflow: auto; } +.style-panes-wrapper > div:not(:first-child) { + border-top: 1px solid #ccc; +} + .styles-section.read-only { background-color: #eee; } @@ -259,13 +168,6 @@ padding-left: 0; } -.styles-element-state-pane { - overflow: hidden; - height: 66px; - padding-left: 2px; - border-bottom: 1px solid rgb(189, 189, 189); -} - @keyframes styles-element-state-pane-slidein { from { margin-top: -60px; @@ -296,57 +198,6 @@ flex-shrink: 0; } -.styles-element-state-pane { - background-color: #f3f3f3; - border-bottom: 1px solid rgb(189, 189, 189); - margin-top: 0; -} - -.styles-element-classes-pane { - background-color: #f3f3f3; - border-bottom: 1px solid rgb(189, 189, 189); - padding: 6px 2px 2px; -} - -.styles-element-classes-container { - display: flex; - flex-wrap: wrap; - justify-content: flex-start; -} - -.styles-element-classes-pane label { - margin-right: 15px; -} - -.styles-element-classes-pane .title-container { - padding-bottom: 2px; -} - -.styles-element-classes-pane .new-class-input { - padding-left: 3px; - padding-right: 3px; - overflow: hidden; - border: 1px solid #ddd; - line-height: 15px; - margin-left: 3px; - width: calc(100% - 7px); - background-color: #fff; - cursor: text; -} - -.styles-element-state-pane > div { - margin: 8px 4px 6px; -} - -.styles-element-state-pane > table { - width: 100%; - border-spacing: 0; -} - -.styles-element-state-pane td { - padding: 0; -} - .styles-animations-controls-pane > * { margin: 6px 4px; } @@ -382,31 +233,6 @@ cursor: text; } -.metrics { - border-bottom: 1px solid #ccc; -} - -.-theme-with-dark-background .metrics { - color: #222; -} - -.-theme-with-dark-background .metrics > div:hover { - color: #ccc; -} - -.metrics-and-styles .metrics { - border-top: 1px solid #ccc; - border-bottom: none; -} - -.metrics { - min-height: 190px; - display: flex; - flex-direction: column; - -webkit-align-items: center; - -webkit-justify-content: center; -} - .metrics-and-styles, .metrics-and-computed { display: flex !important; @@ -437,10 +263,6 @@ margin-left: 4px; } -.sidebar-pane.composite .metrics-and-styles .metrics { - border-bottom: none; -} - .styles-section.styles-panel-hovered:not(.read-only) span.simple-selector:hover, .styles-section.styles-panel-hovered:not(.read-only) .media-text :hover{ text-decoration: underline; diff --git a/front_end/elements/metricsSidebarPane.css b/front_end/elements/metricsSidebarPane.css new file mode 100644 index 0000000000..cab73d9d20 --- /dev/null +++ b/front_end/elements/metricsSidebarPane.css @@ -0,0 +1,113 @@ +/** + * 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. + */ + +.metrics { + padding: 8px; + font-size: 10px; + text-align: center; + white-space: nowrap; + min-height: 190px; + display: flex; + flex-direction: column; + -webkit-align-items: center; + -webkit-justify-content: center; +} + +:host-context(.-theme-with-dark-background) .metrics { + color: #222; +} + +:host-context(.-theme-with-dark-background) .metrics > div:hover { + color: #ccc; +} + +.metrics .label { + position: absolute; + font-size: 10px; + margin-left: 3px; + padding-left: 2px; + padding-right: 2px; +} + +.metrics .position { + border: 1px rgb(66%, 66%, 66%) dotted; + background-color: white; + display: inline-block; + text-align: center; + padding: 3px; + margin: 3px; +} + +.metrics .margin { + border: 1px dashed; + background-color: white; + display: inline-block; + text-align: center; + vertical-align: middle; + padding: 3px; + margin: 3px; +} + +.metrics .border { + border: 1px black solid; + background-color: white; + display: inline-block; + text-align: center; + vertical-align: middle; + padding: 3px; + margin: 3px; +} + +.metrics .padding { + border: 1px grey dashed; + background-color: white; + display: inline-block; + text-align: center; + vertical-align: middle; + padding: 3px; + margin: 3px; +} + +.metrics .content { + position: static; + border: 1px gray solid; + background-color: white; + display: inline-block; + text-align: center; + vertical-align: middle; + padding: 3px; + margin: 3px; + min-width: 80px; + overflow: visible; +} + +.metrics .content span { + display: inline-block; +} + +.metrics .editing { + position: relative; + z-index: 100; + cursor: text; +} + +.metrics .left { + display: inline-block; + vertical-align: middle; +} + +.metrics .right { + display: inline-block; + vertical-align: middle; +} + +.metrics .top { + display: inline-block; +} + +.metrics .bottom { + display: inline-block; +} diff --git a/front_end/elements/module.json b/front_end/elements/module.json index 7fe5b5a89b..5e1d48f26a 100644 --- a/front_end/elements/module.json +++ b/front_end/elements/module.json @@ -271,9 +271,13 @@ ], "resources": [ "breadcrumbs.css", + "classesPaneWidget.css", "computedStyleSidebarPane.css", + "computedStyleWidgetTree.css", "elementsPanel.css", + "elementStatePaneWidget.css", "elementsTreeOutline.css", + "metricsSidebarPane.css", "platformFontsWidget.css", "stylesSectionTree.css" ] diff --git a/front_end/emulation/MediaQueryInspector.js b/front_end/emulation/MediaQueryInspector.js index 1ac838a888..db09f98a7c 100644 --- a/front_end/emulation/MediaQueryInspector.js +++ b/front_end/emulation/MediaQueryInspector.js @@ -115,7 +115,7 @@ Emulation.MediaQueryInspector = class extends UI.Widget { var contextMenuItems = uiLocations.keysArray().sort(); var contextMenu = new UI.ContextMenu(event); - var subMenuItem = contextMenu.appendSubMenuItem(Common.UIString.capitalize('Reveal in ^source ^code')); + var subMenuItem = contextMenu.appendSubMenuItem(Common.UIString('Reveal in source code')); for (var i = 0; i < contextMenuItems.length; ++i) { var title = contextMenuItems[i]; subMenuItem.appendItem( diff --git a/front_end/event_listeners/EventListenersView.js b/front_end/event_listeners/EventListenersView.js index 109bf64709..e35dd93934 100644 --- a/front_end/event_listeners/EventListenersView.js +++ b/front_end/event_listeners/EventListenersView.js @@ -9,13 +9,12 @@ EventListeners.EventListenersResult; /** * @unrestricted */ -EventListeners.EventListenersView = class { +EventListeners.EventListenersView = class extends UI.VBox { /** - * @param {!Element} element * @param {function()} changeCallback */ - constructor(element, changeCallback) { - this._element = element; + constructor(changeCallback) { + super(); this._changeCallback = changeCallback; this._treeOutline = new UI.TreeOutlineInShadow(); this._treeOutline.hideOverflow(); @@ -23,7 +22,7 @@ EventListeners.EventListenersView = class { this._treeOutline.registerRequiredCSS('event_listeners/eventListenersView.css'); this._treeOutline.setComparator(EventListeners.EventListenersTreeElement.comparator); this._treeOutline.element.classList.add('monospace'); - this._element.appendChild(this._treeOutline.element); + this.element.appendChild(this._treeOutline.element); this._emptyHolder = createElementWithClass('div', 'gray-info-message'); this._emptyHolder.textContent = Common.UIString('No event listeners'); this._linkifier = new Components.Linkifier(); @@ -191,7 +190,7 @@ EventListeners.EventListenersView = class { allHidden = allHidden && eventType.hidden; } if (allHidden && !this._emptyHolder.parentNode) - this._element.appendChild(this._emptyHolder); + this.element.appendChild(this._emptyHolder); } reset() { diff --git a/front_end/common/FormatterWorkerPool.js b/front_end/formatter/FormatterWorkerPool.js similarity index 69% rename from front_end/common/FormatterWorkerPool.js rename to front_end/formatter/FormatterWorkerPool.js index 1898857053..3e80f73ceb 100644 --- a/front_end/common/FormatterWorkerPool.js +++ b/front_end/formatter/FormatterWorkerPool.js @@ -4,10 +4,10 @@ /** * @unrestricted */ -Common.FormatterWorkerPool = class { +Formatter.FormatterWorkerPool = class { constructor() { this._taskQueue = []; - /** @type {!Map} */ + /** @type {!Map} */ this._workerTasks = new Map(); } @@ -26,7 +26,7 @@ Common.FormatterWorkerPool = class { return; var freeWorker = this._workerTasks.keysArray().find(worker => !this._workerTasks.get(worker)); - if (!freeWorker && this._workerTasks.size < Common.FormatterWorkerPool.MaxWorkers) + if (!freeWorker && this._workerTasks.size < Formatter.FormatterWorkerPool.MaxWorkers) freeWorker = this._createWorker(); if (!freeWorker) return; @@ -74,7 +74,7 @@ Common.FormatterWorkerPool = class { * @param {function(boolean, *)} callback */ _runChunkedTask(methodName, params, callback) { - var task = new Common.FormatterWorkerPool.Task(methodName, params, onData, true); + var task = new Formatter.FormatterWorkerPool.Task(methodName, params, onData, true); this._taskQueue.push(task); this._processNextTask(); @@ -100,7 +100,7 @@ Common.FormatterWorkerPool = class { _runTask(methodName, params) { var callback; var promise = new Promise(fulfill => callback = fulfill); - var task = new Common.FormatterWorkerPool.Task(methodName, params, callback, false); + var task = new Formatter.FormatterWorkerPool.Task(methodName, params, callback, false); this._taskQueue.push(task); this._processNextTask(); return promise; @@ -116,7 +116,7 @@ Common.FormatterWorkerPool = class { /** * @param {string} content - * @return {!Promise>} + * @return {!Promise>} */ parseSCSS(content) { return this._runTask('parseSCSS', {content: content}).then(rules => rules || []); @@ -126,11 +126,11 @@ Common.FormatterWorkerPool = class { * @param {string} mimeType * @param {string} content * @param {string} indentString - * @return {!Promise} + * @return {!Promise} */ format(mimeType, content, indentString) { var parameters = {mimeType: mimeType, content: content, indentString: indentString}; - return /** @type {!Promise} */ (this._runTask('format', parameters)); + return /** @type {!Promise} */ (this._runTask('format', parameters)); } /** @@ -151,7 +151,7 @@ Common.FormatterWorkerPool = class { /** * @param {string} content - * @param {function(boolean, !Array)} callback + * @param {function(boolean, !Array)} callback */ parseCSS(content, callback) { this._runChunkedTask('parseCSS', {content: content}, onDataChunk); @@ -161,14 +161,14 @@ Common.FormatterWorkerPool = class { * @param {*} data */ function onDataChunk(isLastChunk, data) { - var rules = /** @type {!Array} */ (data || []); + var rules = /** @type {!Array} */ (data || []); callback(isLastChunk, rules); } } /** * @param {string} content - * @param {function(boolean, !Array)} callback + * @param {function(boolean, !Array)} callback */ javaScriptOutline(content, callback) { this._runChunkedTask('javaScriptOutline', {content: content}, onDataChunk); @@ -178,7 +178,7 @@ Common.FormatterWorkerPool = class { * @param {*} data */ function onDataChunk(isLastChunk, data) { - var items = /** @type {!Array.} */ (data || []); + var items = /** @type {!Array.} */ (data || []); callback(isLastChunk, items); } } @@ -186,7 +186,7 @@ Common.FormatterWorkerPool = class { /** * @param {string} content * @param {string} mimeType - * @param {function(boolean, !Array)} callback + * @param {function(boolean, !Array)} callback * @return {boolean} */ outlineForMimetype(content, mimeType, callback) { @@ -203,7 +203,7 @@ Common.FormatterWorkerPool = class { /** * @param {boolean} isLastChunk - * @param {!Array} items + * @param {!Array} items */ function javaScriptCallback(isLastChunk, items) { callback( @@ -213,7 +213,7 @@ Common.FormatterWorkerPool = class { /** * @param {boolean} isLastChunk - * @param {!Array} rules + * @param {!Array} rules */ function cssCallback(isLastChunk, rules) { callback( @@ -224,12 +224,12 @@ Common.FormatterWorkerPool = class { } }; -Common.FormatterWorkerPool.MaxWorkers = 2; +Formatter.FormatterWorkerPool.MaxWorkers = 2; /** * @unrestricted */ -Common.FormatterWorkerPool.Task = class { +Formatter.FormatterWorkerPool.Task = class { /** * @param {string} method * @param {!Object} params @@ -244,22 +244,22 @@ Common.FormatterWorkerPool.Task = class { } }; -Common.FormatterWorkerPool.FormatResult = class { +Formatter.FormatterWorkerPool.FormatResult = class { constructor() { /** @type {string} */ this.content; - /** @type {!Common.FormatterWorkerPool.FormatMapping} */ + /** @type {!Formatter.FormatterWorkerPool.FormatMapping} */ this.mapping; } }; /** @typedef {{original: !Array, formatted: !Array}} */ -Common.FormatterWorkerPool.FormatMapping; +Formatter.FormatterWorkerPool.FormatMapping; /** @typedef {{line: number, column: number, title: string, subtitle: (string|undefined) }} */ -Common.FormatterWorkerPool.OutlineItem; +Formatter.FormatterWorkerPool.OutlineItem; -Common.FormatterWorkerPool.JSOutlineItem = class { +Formatter.FormatterWorkerPool.JSOutlineItem = class { constructor() { /** @type {string} */ this.name; @@ -275,36 +275,36 @@ Common.FormatterWorkerPool.JSOutlineItem = class { /** * @typedef {{startLine: number, startColumn: number, endLine: number, endColumn: number}} */ -Common.FormatterWorkerPool.TextRange; +Formatter.FormatterWorkerPool.TextRange; -Common.FormatterWorkerPool.CSSProperty = class { +Formatter.FormatterWorkerPool.CSSProperty = class { constructor() { /** @type {string} */ this.name; - /** @type {!Common.FormatterWorkerPool.TextRange} */ + /** @type {!Formatter.FormatterWorkerPool.TextRange} */ this.nameRange; /** @type {string} */ this.value; - /** @type {!Common.FormatterWorkerPool.TextRange} */ + /** @type {!Formatter.FormatterWorkerPool.TextRange} */ this.valueRange; - /** @type {!Common.FormatterWorkerPool.TextRange} */ + /** @type {!Formatter.FormatterWorkerPool.TextRange} */ this.range; /** @type {(boolean|undefined)} */ this.disabled; } }; -Common.FormatterWorkerPool.CSSStyleRule = class { +Formatter.FormatterWorkerPool.CSSStyleRule = class { constructor() { /** @type {string} */ this.selectorText; - /** @type {!Common.FormatterWorkerPool.TextRange} */ + /** @type {!Formatter.FormatterWorkerPool.TextRange} */ this.styleRange; /** @type {number} */ this.lineNumber; /** @type {number} */ this.columnNumber; - /** @type {!Array.} */ + /** @type {!Array.} */ this.properties; } }; @@ -312,36 +312,42 @@ Common.FormatterWorkerPool.CSSStyleRule = class { /** * @typedef {{atRule: string, lineNumber: number, columnNumber: number}} */ -Common.FormatterWorkerPool.CSSAtRule; +Formatter.FormatterWorkerPool.CSSAtRule; /** - * @typedef {(Common.FormatterWorkerPool.CSSStyleRule|Common.FormatterWorkerPool.CSSAtRule)} + * @typedef {(Formatter.FormatterWorkerPool.CSSStyleRule|Formatter.FormatterWorkerPool.CSSAtRule)} */ -Common.FormatterWorkerPool.CSSRule; +Formatter.FormatterWorkerPool.CSSRule; -Common.FormatterWorkerPool.SCSSProperty = class { +Formatter.FormatterWorkerPool.SCSSProperty = class { constructor() { - /** @type {!Common.FormatterWorkerPool.TextRange} */ + /** @type {!Formatter.FormatterWorkerPool.TextRange} */ this.range; - /** @type {!Common.FormatterWorkerPool.TextRange} */ + /** @type {!Formatter.FormatterWorkerPool.TextRange} */ this.name; - /** @type {!Common.FormatterWorkerPool.TextRange} */ + /** @type {!Formatter.FormatterWorkerPool.TextRange} */ this.value; /** @type {boolean} */ this.disabled; } }; -Common.FormatterWorkerPool.SCSSRule = class { +Formatter.FormatterWorkerPool.SCSSRule = class { constructor() { - /** @type {!Array} */ + /** @type {!Array} */ this.selectors; - /** @type {!Array} */ + /** @type {!Array} */ this.properties; - /** @type {!Common.FormatterWorkerPool.TextRange} */ + /** @type {!Formatter.FormatterWorkerPool.TextRange} */ this.styleRange; } }; -/** @type {!Common.FormatterWorkerPool} */ -Common.formatterWorkerPool; +/** + * @return {!Formatter.FormatterWorkerPool} + */ +Formatter.formatterWorkerPool = function() { + if (!Formatter._formatterWorkerPool) + Formatter._formatterWorkerPool = new Formatter.FormatterWorkerPool(); + return Formatter._formatterWorkerPool; +}; diff --git a/front_end/sources/ScriptFormatter.js b/front_end/formatter/ScriptFormatter.js similarity index 74% rename from front_end/sources/ScriptFormatter.js rename to front_end/formatter/ScriptFormatter.js index 2a437353cf..1a237f5735 100644 --- a/front_end/sources/ScriptFormatter.js +++ b/front_end/formatter/ScriptFormatter.js @@ -30,19 +30,19 @@ /** * @interface */ -Sources.Formatter = function() {}; +Formatter.Formatter = function() {}; /** * @param {!Common.ResourceType} contentType * @param {string} mimeType * @param {string} content - * @param {function(string, !Sources.FormatterSourceMapping)} callback + * @param {function(string, !Formatter.FormatterSourceMapping)} callback */ -Sources.Formatter.format = function(contentType, mimeType, content, callback) { +Formatter.Formatter.format = function(contentType, mimeType, content, callback) { if (contentType.isDocumentOrScriptOrStyleSheet()) - new Sources.ScriptFormatter(mimeType, content, callback); + new Formatter.ScriptFormatter(mimeType, content, callback); else - new Sources.ScriptIdentityFormatter(mimeType, content, callback); + new Formatter.ScriptIdentityFormatter(mimeType, content, callback); }; /** @@ -51,7 +51,7 @@ Sources.Formatter.format = function(contentType, mimeType, content, callback) { * @param {number} columnNumber * @return {number} */ -Sources.Formatter.locationToPosition = function(lineEndings, lineNumber, columnNumber) { +Formatter.Formatter.locationToPosition = function(lineEndings, lineNumber, columnNumber) { var position = lineNumber ? lineEndings[lineNumber - 1] + 1 : 0; return position + columnNumber; }; @@ -61,7 +61,7 @@ Sources.Formatter.locationToPosition = function(lineEndings, lineNumber, columnN * @param {number} position * @return {!Array} */ -Sources.Formatter.positionToLocation = function(lineEndings, position) { +Formatter.Formatter.positionToLocation = function(lineEndings, position) { var lineNumber = lineEndings.upperBound(position - 1); if (!lineNumber) var columnNumber = position; @@ -71,55 +71,56 @@ Sources.Formatter.positionToLocation = function(lineEndings, position) { }; /** - * @implements {Sources.Formatter} + * @implements {Formatter.Formatter} * @unrestricted */ -Sources.ScriptFormatter = class { +Formatter.ScriptFormatter = class { /** * @param {string} mimeType * @param {string} content - * @param {function(string, !Sources.FormatterSourceMapping)} callback + * @param {function(string, !Formatter.FormatterSourceMapping)} callback */ constructor(mimeType, content, callback) { content = content.replace(/\r\n?|[\n\u2028\u2029]/g, '\n').replace(/^\uFEFF/, ''); this._callback = callback; this._originalContent = content; - Common.formatterWorkerPool.format(mimeType, content, Common.moduleSetting('textEditorIndent').get()) + Formatter.formatterWorkerPool() + .format(mimeType, content, Common.moduleSetting('textEditorIndent').get()) .then(this._didFormatContent.bind(this)); } /** - * @param {!Common.FormatterWorkerPool.FormatResult} formatResult + * @param {!Formatter.FormatterWorkerPool.FormatResult} formatResult */ _didFormatContent(formatResult) { - var sourceMapping = new Sources.FormatterSourceMappingImpl( + var sourceMapping = new Formatter.FormatterSourceMappingImpl( this._originalContent.computeLineEndings(), formatResult.content.computeLineEndings(), formatResult.mapping); this._callback(formatResult.content, sourceMapping); } }; /** - * @implements {Sources.Formatter} + * @implements {Formatter.Formatter} * @unrestricted */ -Sources.ScriptIdentityFormatter = class { +Formatter.ScriptIdentityFormatter = class { /** * @param {string} mimeType * @param {string} content - * @param {function(string, !Sources.FormatterSourceMapping)} callback + * @param {function(string, !Formatter.FormatterSourceMapping)} callback */ constructor(mimeType, content, callback) { - callback(content, new Sources.IdentityFormatterSourceMapping()); + callback(content, new Formatter.IdentityFormatterSourceMapping()); } }; /** * @interface */ -Sources.FormatterSourceMapping = function() {}; +Formatter.FormatterSourceMapping = function() {}; -Sources.FormatterSourceMapping.prototype = { +Formatter.FormatterSourceMapping.prototype = { /** * @param {number} lineNumber * @param {number=} columnNumber @@ -136,10 +137,10 @@ Sources.FormatterSourceMapping.prototype = { }; /** - * @implements {Sources.FormatterSourceMapping} + * @implements {Formatter.FormatterSourceMapping} * @unrestricted */ -Sources.IdentityFormatterSourceMapping = class { +Formatter.IdentityFormatterSourceMapping = class { /** * @override * @param {number} lineNumber @@ -162,14 +163,14 @@ Sources.IdentityFormatterSourceMapping = class { }; /** - * @implements {Sources.FormatterSourceMapping} + * @implements {Formatter.FormatterSourceMapping} * @unrestricted */ -Sources.FormatterSourceMappingImpl = class { +Formatter.FormatterSourceMappingImpl = class { /** * @param {!Array.} originalLineEndings * @param {!Array.} formattedLineEndings - * @param {!Common.FormatterWorkerPool.FormatMapping} mapping + * @param {!Formatter.FormatterWorkerPool.FormatMapping} mapping */ constructor(originalLineEndings, formattedLineEndings, mapping) { this._originalLineEndings = originalLineEndings; @@ -185,10 +186,10 @@ Sources.FormatterSourceMappingImpl = class { */ originalToFormatted(lineNumber, columnNumber) { var originalPosition = - Sources.Formatter.locationToPosition(this._originalLineEndings, lineNumber, columnNumber || 0); + Formatter.Formatter.locationToPosition(this._originalLineEndings, lineNumber, columnNumber || 0); var formattedPosition = this._convertPosition(this._mapping.original, this._mapping.formatted, originalPosition || 0); - return Sources.Formatter.positionToLocation(this._formattedLineEndings, formattedPosition); + return Formatter.Formatter.positionToLocation(this._formattedLineEndings, formattedPosition); } /** @@ -199,9 +200,9 @@ Sources.FormatterSourceMappingImpl = class { */ formattedToOriginal(lineNumber, columnNumber) { var formattedPosition = - Sources.Formatter.locationToPosition(this._formattedLineEndings, lineNumber, columnNumber || 0); + Formatter.Formatter.locationToPosition(this._formattedLineEndings, lineNumber, columnNumber || 0); var originalPosition = this._convertPosition(this._mapping.formatted, this._mapping.original, formattedPosition); - return Sources.Formatter.positionToLocation(this._originalLineEndings, originalPosition || 0); + return Formatter.Formatter.positionToLocation(this._originalLineEndings, originalPosition || 0); } /** diff --git a/front_end/formatter/module.json b/front_end/formatter/module.json new file mode 100644 index 0000000000..fb490c5b2b --- /dev/null +++ b/front_end/formatter/module.json @@ -0,0 +1,9 @@ +{ + "dependencies": [ + "common" + ], + "scripts": [ + "FormatterWorkerPool.js", + "ScriptFormatter.js" + ] +} diff --git a/front_end/formatter_worker/ESTreeWalker.js b/front_end/formatter_worker/ESTreeWalker.js index 0fb4bbe073..f3e79dc631 100644 --- a/front_end/formatter_worker/ESTreeWalker.js +++ b/front_end/formatter_worker/ESTreeWalker.js @@ -123,6 +123,7 @@ FormatterWorker.ESTreeWalker._walkOrder = { 'MethodDefinition': ['key', 'value'], 'NewExpression': ['callee', 'arguments'], 'ObjectExpression': ['properties'], + 'ObjectPattern': ['properties'], 'ParenthesizedExpression': ['expression'], 'Program': ['body'], 'Property': ['key', 'value'], diff --git a/front_end/formatter_worker/JavaScriptFormatter.js b/front_end/formatter_worker/JavaScriptFormatter.js index 116e06c77e..6f55b3f07a 100644 --- a/front_end/formatter_worker/JavaScriptFormatter.js +++ b/front_end/formatter_worker/JavaScriptFormatter.js @@ -161,6 +161,11 @@ FormatterWorker.JavaScriptFormatter = class { } else if (node.type === 'VariableDeclarator') { if (AT.punctuator(token, '=')) return 'sts'; + } else if (node.type === 'ObjectPattern') { + if (node.parent && node.parent.type === 'VariableDeclarator' && AT.punctuator(token, '{')) + return 'st'; + if (AT.punctuator(token, ',')) + return 'ts'; } else if (node.type === 'FunctionDeclaration') { if (AT.punctuator(token, ',)')) return 'ts'; diff --git a/front_end/host/InspectorFrontendHost.js b/front_end/host/InspectorFrontendHost.js index 197b438399..7573ae53a4 100644 --- a/front_end/host/InspectorFrontendHost.js +++ b/front_end/host/InspectorFrontendHost.js @@ -526,7 +526,6 @@ window.InspectorFrontendHost = InspectorFrontendHost; // so the host instance should not initialized there. initializeInspectorFrontendHost(); window.InspectorFrontendAPI = new Host.InspectorFrontendAPIImpl(); - Common.setLocalizationPlatform(InspectorFrontendHost.platform()); })(); /** diff --git a/front_end/inspector.json b/front_end/inspector.json index 956b443e8f..ad011bc4a1 100644 --- a/front_end/inspector.json +++ b/front_end/inspector.json @@ -61,7 +61,8 @@ { "name": "text_utils", "type": "autostart"}, { "name": "changes"}, { "name": "mobile_throttling", "type": "autostart"}, - { "name": "network_priorities"} + { "name": "network_priorities"}, + { "name": "formatter" } ], "has_html": true diff --git a/front_end/layer_viewer/LayerDetailsView.js b/front_end/layer_viewer/LayerDetailsView.js index 291035d22d..7199a27b9f 100644 --- a/front_end/layer_viewer/LayerDetailsView.js +++ b/front_end/layer_viewer/LayerDetailsView.js @@ -123,7 +123,7 @@ LayerViewer.LayerDetailsView = class extends UI.Widget { this._paintCountCell.parentElement.classList.toggle('hidden', !layer.paintCount()); this._paintCountCell.textContent = layer.paintCount(); this._memoryEstimateCell.textContent = Number.bytesToString(layer.gpuMemoryUsage()); - layer.requestCompositingReasons(this._updateCompositingReasons.bind(this)); + layer.requestCompositingReasons().then(this._updateCompositingReasons.bind(this)); this._scrollRectsCell.removeChildren(); layer.scrollRects().forEach(this._createScrollRectElement.bind(this)); var snapshot = this._selection.type() === LayerViewer.LayerView.Selection.Type.Snapshot ? diff --git a/front_end/layers/LayerTreeModel.js b/front_end/layers/LayerTreeModel.js index b30d627de4..32c0c9814e 100644 --- a/front_end/layers/LayerTreeModel.js +++ b/front_end/layers/LayerTreeModel.js @@ -389,12 +389,11 @@ Layers.AgentLayer = class { /** * @override - * @param {function(!Array.)} callback + * @return {!Promise>} */ - requestCompositingReasons(callback) { - var wrappedCallback = Protocol.inspectorBackend.wrapClientCallback( - callback, 'Protocol.LayerTree.reasonsForCompositingLayer(): ', undefined, []); - this._layerTreeModel._layerTreeAgent.compositingReasons(this.id(), wrappedCallback); + async requestCompositingReasons() { + var reasons = await this._layerTreeModel._layerTreeAgent.compositingReasons(this.id()); + return reasons || []; } /** diff --git a/front_end/main/Main.js b/front_end/main/Main.js index 770a33fbb2..4cf1200b83 100644 --- a/front_end/main/Main.js +++ b/front_end/main/Main.js @@ -187,7 +187,6 @@ Main.Main = class { Workspace.fileManager = new Workspace.FileManager(); Workspace.workspace = new Workspace.Workspace(); - Common.formatterWorkerPool = new Common.FormatterWorkerPool(); Persistence.fileSystemMapping = new Persistence.FileSystemMapping(Persistence.isolatedFileSystemManager); Bindings.networkProjectManager = new Bindings.NetworkProjectManager(SDK.targetManager, Workspace.workspace); @@ -729,37 +728,6 @@ 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 538e46319b..591621bfbf 100644 --- a/front_end/main/module.json +++ b/front_end/main/module.json @@ -202,13 +202,6 @@ "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", @@ -448,7 +441,6 @@ ], "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 deleted file mode 100644 index 326247d333..0000000000 --- a/front_end/main/nodeIcon.css +++ /dev/null @@ -1,23 +0,0 @@ -/* - * 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/JSONView.js b/front_end/network/JSONView.js index 2b973783f0..10f7bbb454 100644 --- a/front_end/network/JSONView.js +++ b/front_end/network/JSONView.js @@ -76,7 +76,7 @@ Network.JSONView = class extends UI.VBox { returnObj = Network.JSONView._extractJSON(/** @type {string} */ (text)); if (!returnObj) return Promise.resolve(/** @type {?Network.ParsedJSON} */ (null)); - return Common.formatterWorkerPool.parseJSONRelaxed(returnObj.data).then(handleReturnedJSON); + return Formatter.formatterWorkerPool().parseJSONRelaxed(returnObj.data).then(handleReturnedJSON); /** * @param {*} data diff --git a/front_end/network/NetworkLogView.js b/front_end/network/NetworkLogView.js index 16f0bfbbc4..c15bedf79c 100644 --- a/front_end/network/NetworkLogView.js +++ b/front_end/network/NetworkLogView.js @@ -1103,16 +1103,14 @@ Network.NetworkLogView = class extends UI.VBox { UI.copyLinkAddressLabel(), InspectorFrontendHost.copyText.bind(InspectorFrontendHost, request.contentURL())); copyMenu.appendSeparator(); - if (request.requestHeadersText()) { - copyMenu.appendItem( - Common.UIString.capitalize('Copy ^request ^headers'), this._copyRequestHeaders.bind(this, request)); - } - if (request.responseHeadersText) { - copyMenu.appendItem( - Common.UIString.capitalize('Copy ^response ^headers'), this._copyResponseHeaders.bind(this, request)); - } + if (request.requestHeadersText()) + copyMenu.appendItem(Common.UIString('Copy request headers'), this._copyRequestHeaders.bind(this, request)); + + if (request.responseHeadersText) + copyMenu.appendItem(Common.UIString('Copy response headers'), this._copyResponseHeaders.bind(this, request)); + if (request.finished) - copyMenu.appendItem(Common.UIString.capitalize('Copy ^response'), this._copyResponse.bind(this, request)); + copyMenu.appendItem(Common.UIString('Copy response'), this._copyResponse.bind(this, request)); if (Host.isWin()) { copyMenu.appendItem(Common.UIString('Copy as cURL (cmd)'), this._copyCurlCommand.bind(this, request, 'win')); @@ -1126,14 +1124,14 @@ Network.NetworkLogView = class extends UI.VBox { } else { copyMenu = contextMenu.appendSubMenuItem(Common.UIString('Copy')); } - copyMenu.appendItem(Common.UIString.capitalize('Copy ^all as HAR'), this._copyAll.bind(this)); + copyMenu.appendItem(Common.UIString('Copy all as HAR'), this._copyAll.bind(this)); contextMenu.appendSeparator(); - contextMenu.appendItem(Common.UIString.capitalize('Save as HAR with ^content'), this._exportAll.bind(this)); + contextMenu.appendItem(Common.UIString('Save as HAR with content'), this._exportAll.bind(this)); contextMenu.appendSeparator(); - contextMenu.appendItem(Common.UIString.capitalize('Clear ^browser ^cache'), this._clearBrowserCache.bind(this)); - contextMenu.appendItem(Common.UIString.capitalize('Clear ^browser ^cookies'), this._clearBrowserCookies.bind(this)); + contextMenu.appendItem(Common.UIString('Clear browser cache'), this._clearBrowserCache.bind(this)); + contextMenu.appendItem(Common.UIString('Clear browser cookies'), this._clearBrowserCookies.bind(this)); if (request) { contextMenu.appendSeparator(); @@ -1144,21 +1142,19 @@ Network.NetworkLogView = class extends UI.VBox { var urlWithoutScheme = request.parsedURL.urlWithoutScheme(); if (urlWithoutScheme && !patterns.find(pattern => pattern.url === urlWithoutScheme)) { - contextMenu.appendItem( - Common.UIString.capitalize('Block ^request URL'), addBlockedURL.bind(null, urlWithoutScheme)); + contextMenu.appendItem(Common.UIString('Block request URL'), addBlockedURL.bind(null, urlWithoutScheme)); } else if (urlWithoutScheme) { const croppedURL = urlWithoutScheme.trimMiddle(maxBlockedURLLength); contextMenu.appendItem( - Common.UIString.capitalize('Unblock ' + croppedURL), removeBlockedURL.bind(null, urlWithoutScheme)); + Common.UIString('Unblock %s', croppedURL), removeBlockedURL.bind(null, urlWithoutScheme)); } var domain = request.parsedURL.domain(); if (domain && !patterns.find(pattern => pattern.url === domain)) { - contextMenu.appendItem(Common.UIString.capitalize('Block ^request ^domain'), addBlockedURL.bind(null, domain)); + contextMenu.appendItem(Common.UIString('Block request domain'), addBlockedURL.bind(null, domain)); } else if (domain) { const croppedDomain = domain.trimMiddle(maxBlockedURLLength); - contextMenu.appendItem( - Common.UIString.capitalize('Unblock ' + croppedDomain), removeBlockedURL.bind(null, domain)); + contextMenu.appendItem(Common.UIString('Unblock %s', croppedDomain), removeBlockedURL.bind(null, domain)); } if (SDK.NetworkManager.canReplayRequest(request)) { diff --git a/front_end/network/NetworkPanel.js b/front_end/network/NetworkPanel.js index 21e4f4374f..aed400781e 100644 --- a/front_end/network/NetworkPanel.js +++ b/front_end/network/NetworkPanel.js @@ -504,7 +504,7 @@ Network.NetworkPanel = class extends UI.Panel { * @this {Network.NetworkPanel} */ function appendRevealItem(request) { - contextMenu.appendItem(Common.UIString.capitalize('Reveal in Network ^panel'), reveal.bind(this, request)); + contextMenu.appendItem(Common.UIString('Reveal in Network panel'), reveal.bind(this, request)); } if (event.target.isSelfOrDescendant(this.element)) diff --git a/front_end/network/RequestResponseView.js b/front_end/network/RequestResponseView.js index b881e35765..5b8008bb96 100644 --- a/front_end/network/RequestResponseView.js +++ b/front_end/network/RequestResponseView.js @@ -132,9 +132,9 @@ Network.RequestResponseView.ContentProvider = class { * @param {string} query * @param {boolean} caseSensitive * @param {boolean} isRegex - * @param {function(!Array.)} callback + * @return {!Promise>} */ - searchInContent(query, caseSensitive, isRegex, callback) { - this._request.searchInContent(query, caseSensitive, isRegex, callback); + searchInContent(query, caseSensitive, isRegex) { + return this._request.searchInContent(query, caseSensitive, isRegex); } }; diff --git a/front_end/network/ResourceWebSocketFrameView.js b/front_end/network/ResourceWebSocketFrameView.js index 194848ad23..f2d959ace7 100644 --- a/front_end/network/ResourceWebSocketFrameView.js +++ b/front_end/network/ResourceWebSocketFrameView.js @@ -96,10 +96,9 @@ Network.ResourceWebSocketFrameView = class extends UI.VBox { */ function onRowContextMenu(contextMenu, node) { contextMenu.appendItem( - Common.UIString.capitalize('Copy ^message'), - InspectorFrontendHost.copyText.bind(InspectorFrontendHost, node.data.data)); + Common.UIString('Copy message'), InspectorFrontendHost.copyText.bind(InspectorFrontendHost, node.data.data)); contextMenu.appendSeparator(); - contextMenu.appendItem(Common.UIString.capitalize('Clear ^all'), this._clearFrames.bind(this)); + contextMenu.appendItem(Common.UIString('Clear all'), this._clearFrames.bind(this)); } } diff --git a/front_end/network/module.json b/front_end/network/module.json index 711d4c4fb7..a53b112079 100644 --- a/front_end/network/module.json +++ b/front_end/network/module.json @@ -143,7 +143,8 @@ "network_log", "product_registry", "mobile_throttling", - "network_priorities" + "network_priorities", + "formatter" ], "scripts": [ "BlockedURLsPane.js", diff --git a/front_end/object_ui/CustomPreviewComponent.js b/front_end/object_ui/CustomPreviewComponent.js index d8c31e383c..9d8befae85 100644 --- a/front_end/object_ui/CustomPreviewComponent.js +++ b/front_end/object_ui/CustomPreviewComponent.js @@ -226,7 +226,7 @@ ObjectUI.CustomPreviewComponent = class { _contextMenuEventFired(event) { var contextMenu = new UI.ContextMenu(event); if (this._customPreviewSection) - contextMenu.appendItem(Common.UIString.capitalize('Show as Javascript ^object'), this._disassemble.bind(this)); + contextMenu.appendItem(Common.UIString('Show as JavaScript object'), this._disassemble.bind(this)); contextMenu.appendApplicableItems(this._object); contextMenu.show(); } diff --git a/front_end/object_ui/ObjectPropertiesSection.js b/front_end/object_ui/ObjectPropertiesSection.js index 861debeb0c..ea17463104 100644 --- a/front_end/object_ui/ObjectPropertiesSection.js +++ b/front_end/object_ui/ObjectPropertiesSection.js @@ -810,7 +810,7 @@ ObjectUI.ObjectPropertyTreeElement = class extends UI.TreeElement { contextMenu.appendApplicableItems(property.value); var copyPathHandler = InspectorFrontendHost.copyText.bind(InspectorFrontendHost, this.nameElement.title); contextMenu.beforeShow(() => { - contextMenu.appendItem(Common.UIString.capitalize('Copy ^property ^path'), copyPathHandler); + contextMenu.appendItem(Common.UIString('Copy property path'), copyPathHandler); }); contextMenu.show(); } diff --git a/front_end/perf_ui/ChartViewport.js b/front_end/perf_ui/ChartViewport.js index 6b674bdf85..22f3335cc5 100644 --- a/front_end/perf_ui/ChartViewport.js +++ b/front_end/perf_ui/ChartViewport.js @@ -142,9 +142,9 @@ PerfUI.ChartViewport = class extends UI.VBox { _onMouseWheel(e) { if (!this._enabled()) return; - // Pan vertically when shift down only. - var panVertically = e.shiftKey && (e.wheelDeltaY || Math.abs(e.wheelDeltaX) === 120); - var panHorizontally = Math.abs(e.wheelDeltaX) > Math.abs(e.wheelDeltaY) && !e.shiftKey; + var doZoomInstead = e.shiftKey ^ (Common.moduleSetting('flamechartMouseWheelAction').get() === 'zoom'); + var panVertically = !doZoomInstead && (e.wheelDeltaY || Math.abs(e.wheelDeltaX) === 120); + var panHorizontally = doZoomInstead && Math.abs(e.wheelDeltaX) > Math.abs(e.wheelDeltaY); if (panVertically) { this._vScrollElement.scrollTop -= (e.wheelDeltaY || e.wheelDeltaX) / 120 * this._offsetHeight / 8; } else if (panHorizontally) { diff --git a/front_end/perf_ui/module.json b/front_end/perf_ui/module.json index ce804b90d3..5d966ec3eb 100644 --- a/front_end/perf_ui/module.json +++ b/front_end/perf_ui/module.json @@ -4,6 +4,26 @@ "type": "@SourceFrame.UISourceCodeFrame.LineDecorator", "className": "PerfUI.LineLevelProfile.LineDecorator", "decoratorType": "performance" + }, + { + "type": "setting", + "category": "Performance", + "title": "Flamechart mouse wheel action:", + "settingName": "flamechartMouseWheelAction", + "settingType": "enum", + "defaultValue": "zoom", + "options": [ + { + "title": "Scroll", + "text": "Scroll", + "value": "scroll" + }, + { + "title": "Zoom", + "text": "Zoom", + "value": "zoom" + } + ] } ], "dependencies": [ diff --git a/front_end/perf_ui/timelineOverviewInfo.css b/front_end/perf_ui/timelineOverviewInfo.css index 32e6bc3cd7..1c407742dc 100644 --- a/front_end/perf_ui/timelineOverviewInfo.css +++ b/front_end/perf_ui/timelineOverviewInfo.css @@ -16,6 +16,6 @@ } .overview-info .frame .thumbnail img { - max-width: 400px; - max-height: 500px; + max-width: 50vw; + max-height: 50vh; } diff --git a/front_end/persistence/FileSystemWorkspaceBinding.js b/front_end/persistence/FileSystemWorkspaceBinding.js index 90c9904a50..7647bc2e66 100644 --- a/front_end/persistence/FileSystemWorkspaceBinding.js +++ b/front_end/persistence/FileSystemWorkspaceBinding.js @@ -399,21 +399,20 @@ Persistence.FileSystemWorkspaceBinding.FileSystem = class extends Workspace.Proj * @param {string} query * @param {boolean} caseSensitive * @param {boolean} isRegex - * @param {function(!Array.)} callback - */ - searchInFileContent(uiSourceCode, query, caseSensitive, isRegex, callback) { - var filePath = this._filePathForUISourceCode(uiSourceCode); - this._fileSystem.requestFileContent(filePath, contentCallback); - - /** - * @param {?string} content - */ - function contentCallback(content) { - var result = []; - if (content !== null) - result = Common.ContentProvider.performSearchInContent(content, query, caseSensitive, isRegex); - callback(result); - } + * @return {!Promise>} + */ + searchInFileContent(uiSourceCode, query, caseSensitive, isRegex) { + return new Promise(resolve => { + var filePath = this._filePathForUISourceCode(uiSourceCode); + this._fileSystem.requestFileContent(filePath, contentCallback); + + /** + * @param {?string} content + */ + function contentCallback(content) { + resolve(content ? Common.ContentProvider.performSearchInContent(content, query, caseSensitive, isRegex) : []); + } + }); } /** @@ -421,39 +420,23 @@ Persistence.FileSystemWorkspaceBinding.FileSystem = class extends Workspace.Proj * @param {!Workspace.ProjectSearchConfig} searchConfig * @param {!Array.} filesMathingFileQuery * @param {!Common.Progress} progress - * @param {function(!Array.)} callback + * @return {!Promise>} */ - findFilesMatchingSearchRequest(searchConfig, filesMathingFileQuery, progress, callback) { + async findFilesMatchingSearchRequest(searchConfig, filesMathingFileQuery, progress) { var result = filesMathingFileQuery; var queriesToRun = searchConfig.queries().slice(); if (!queriesToRun.length) queriesToRun.push(''); progress.setTotalWork(queriesToRun.length); - searchNextQuery.call(this); - /** - * @this {Persistence.FileSystemWorkspaceBinding.FileSystem} - */ - function searchNextQuery() { - if (!queriesToRun.length) { - progress.done(); - callback(result); - return; - } - var query = queriesToRun.shift(); - this._fileSystem.searchInPath(searchConfig.isRegex() ? '' : query, progress, innerCallback.bind(this)); - } - - /** - * @param {!Array.} files - * @this {Persistence.FileSystemWorkspaceBinding.FileSystem} - */ - function innerCallback(files) { - files = files.sort(); + for (var query of queriesToRun) { + var files = await this._fileSystem.searchInPath(searchConfig.isRegex() ? '' : query, progress); + result = result.intersectOrdered(files.sort(), String.naturalOrderComparator); progress.worked(1); - result = result.intersectOrdered(files, String.naturalOrderComparator); - searchNextQuery.call(this); } + + progress.done(); + return result; } /** diff --git a/front_end/persistence/IsolatedFileSystem.js b/front_end/persistence/IsolatedFileSystem.js index 78ee358c7a..ae76a86854 100644 --- a/front_end/persistence/IsolatedFileSystem.js +++ b/front_end/persistence/IsolatedFileSystem.js @@ -546,20 +546,21 @@ Persistence.IsolatedFileSystem = class { /** * @param {string} query * @param {!Common.Progress} progress - * @param {function(!Array.)} callback + * @return {!Promise>} */ - searchInPath(query, progress, callback) { - var requestId = this._manager.registerCallback(innerCallback); - InspectorFrontendHost.searchInPath(requestId, this._embedderPath, query); + searchInPath(query, progress) { + return new Promise(resolve => { + var requestId = this._manager.registerCallback(innerCallback); + InspectorFrontendHost.searchInPath(requestId, this._embedderPath, query); - /** - * @param {!Array.} files - */ - function innerCallback(files) { - files = files.map(embedderPath => Common.ParsedURL.platformPathToURL(embedderPath)); - progress.worked(1); - callback(files); - } + /** + * @param {!Array} files + */ + function innerCallback(files) { + resolve(files.map(path => Common.ParsedURL.platformPathToURL(path))); + progress.worked(1); + } + }); } /** diff --git a/front_end/persistence/Persistence.js b/front_end/persistence/Persistence.js index 830ae477c4..9853ca3564 100644 --- a/front_end/persistence/Persistence.js +++ b/front_end/persistence/Persistence.js @@ -296,7 +296,7 @@ Persistence.Persistence = class extends Common.Object { * @param {function()} listener */ unsubscribeFromBindingEvent(uiSourceCode, listener) { - this._subscribedBindingEventListeners.remove(uiSourceCode, listener); + this._subscribedBindingEventListeners.delete(uiSourceCode, listener); } /** diff --git a/front_end/platform/utilities.js b/front_end/platform/utilities.js index 07435b1c84..87159e469d 100644 --- a/front_end/platform/utilities.js +++ b/front_end/platform/utilities.js @@ -1225,7 +1225,7 @@ Multimap.prototype = { * @param {V} value * @return {boolean} */ - remove: function(key, value) { + delete: function(key, value) { var values = this.get(key); var result = values.delete(value); if (!values.size) @@ -1236,7 +1236,7 @@ Multimap.prototype = { /** * @param {K} key */ - removeAll: function(key) { + deleteAll: function(key) { this._map.delete(key); }, @@ -1291,64 +1291,6 @@ function loadXHR(url) { } } -/** - * @unrestricted - */ -var CallbackBarrier = class { - constructor() { - this._pendingIncomingCallbacksCount = 0; - } - - /** - * @param {function(...)=} userCallback - * @return {function(...)} - */ - createCallback(userCallback) { - console.assert( - !this._outgoingCallback, 'CallbackBarrier.createCallback() is called after CallbackBarrier.callWhenDone()'); - ++this._pendingIncomingCallbacksCount; - return this._incomingCallback.bind(this, userCallback); - } - - /** - * @param {function()} callback - */ - callWhenDone(callback) { - console.assert(!this._outgoingCallback, 'CallbackBarrier.callWhenDone() is called multiple times'); - this._outgoingCallback = callback; - if (!this._pendingIncomingCallbacksCount) - this._outgoingCallback(); - } - - /** - * @return {!Promise.} - */ - donePromise() { - return new Promise(promiseConstructor.bind(this)); - - /** - * @param {function()} success - * @this {CallbackBarrier} - */ - function promiseConstructor(success) { - this.callWhenDone(success); - } - } - - /** - * @param {function(...)=} userCallback - */ - _incomingCallback(userCallback) { - console.assert(this._pendingIncomingCallbacksCount > 0); - if (userCallback) { - var args = Array.prototype.slice.call(arguments, 1); - userCallback.apply(null, args); - } - if (!--this._pendingIncomingCallbacksCount && this._outgoingCallback) - this._outgoingCallback(); - } -}; - /** * @param {*} value */ diff --git a/front_end/profiler/HeapProfilerPanel.js b/front_end/profiler/HeapProfilerPanel.js index 2f7594a437..a271160799 100644 --- a/front_end/profiler/HeapProfilerPanel.js +++ b/front_end/profiler/HeapProfilerPanel.js @@ -52,7 +52,7 @@ Profiler.HeapProfilerPanel = class extends Profiler.ProfilesPanel { }); } - contextMenu.appendItem(Common.UIString.capitalize('Reveal in Summary ^view'), revealInView.bind(this, 'Summary')); + contextMenu.appendItem(Common.UIString('Reveal in Summary view'), revealInView.bind(this, 'Summary')); } /** diff --git a/front_end/profiler/HeapSnapshotDataGrids.js b/front_end/profiler/HeapSnapshotDataGrids.js index 56597f737e..ca7db4334f 100644 --- a/front_end/profiler/HeapSnapshotDataGrids.js +++ b/front_end/profiler/HeapSnapshotDataGrids.js @@ -134,7 +134,7 @@ Profiler.HeapSnapshotSortableDataGrid = class extends DataGrid.DataGrid { } if (node instanceof Profiler.HeapSnapshotRetainingObjectNode) - contextMenu.appendItem(Common.UIString.capitalize('Reveal in Summary ^view'), revealInSummaryView.bind(this)); + contextMenu.appendItem(Common.UIString('Reveal in Summary view'), revealInSummaryView.bind(this)); } resetSortingCache() { diff --git a/front_end/profiler/module.json b/front_end/profiler/module.json index fae0144149..f60a474e63 100644 --- a/front_end/profiler/module.json +++ b/front_end/profiler/module.json @@ -36,7 +36,7 @@ }, { "type": "setting", - "category": "Profiler", + "category": "Performance", "title": "Record heap allocation stack traces", "settingName": "recordAllocationStacks", "settingType": "boolean", @@ -44,7 +44,7 @@ }, { "type": "setting", - "category": "Profiler", + "category": "Performance", "title": "High resolution CPU profiling", "settingName": "highResolutionCpuProfiling", "settingType": "boolean", @@ -52,7 +52,7 @@ }, { "type": "setting", - "category": "Profiler", + "category": "Performance", "title": "Show native functions in JS Profile", "settingName": "showNativeFunctionsInJSProfile", "settingType": "boolean", diff --git a/front_end/protocol/InspectorBackend.js b/front_end/protocol/InspectorBackend.js index db210fdadd..8e792a3846 100644 --- a/front_end/protocol/InspectorBackend.js +++ b/front_end/protocol/InspectorBackend.js @@ -532,23 +532,22 @@ Protocol.InspectorBackend._AgentPrototype = class { * @param {string} method * @param {!Array.} signature * @param {!Array.<*>} args - * @param {boolean} allowExtraUndefinedArg * @param {function(string)} errorCallback * @return {?Object} */ - _prepareParameters(method, signature, args, allowExtraUndefinedArg, errorCallback) { + _prepareParameters(method, signature, args, errorCallback) { var params = {}; var hasParams = false; - for (var i = 0; i < signature.length; ++i) { - var param = signature[i]; + + for (var param of signature) { var paramName = param['name']; var typeName = param['type']; var optionalFlag = param['optional']; if (!args.length && !optionalFlag) { errorCallback( - 'Protocol Error: Invalid number of arguments for method \'' + method + - '\' call. It must have the following arguments \'' + JSON.stringify(signature) + '\'.'); + `Protocol Error: Invalid number of arguments for method '${method}' call. ` + + `It must have the following arguments ${JSON.stringify(signature)}'.`); return null; } @@ -558,8 +557,8 @@ Protocol.InspectorBackend._AgentPrototype = class { if (typeof value !== typeName) { errorCallback( - 'Protocol Error: Invalid type of argument \'' + paramName + '\' for method \'' + method + - '\' call. It must be \'' + typeName + '\' but it is \'' + typeof value + '\'.'); + `Protocol Error: Invalid type of argument '${paramName}' for method '${method}' call. ` + + `It must be '${typeName}' but it is '${typeof value}'.`); return null; } @@ -567,15 +566,8 @@ Protocol.InspectorBackend._AgentPrototype = class { hasParams = true; } - if (args.length === 1 && (!allowExtraUndefinedArg || (typeof args[0] !== 'undefined'))) { - errorCallback( - 'Protocol Error: Optional callback argument for method \'' + method + - '\' call must be a function but its type is \'' + typeof args[0] + '\'.'); - return null; - } - - if (args.length > 1) { - errorCallback('Protocol Error: Extra ' + args.length + ' arguments in a call to method \'' + method + '\'.'); + if (args.length) { + errorCallback(`Protocol Error: Extra ${args.length} arguments in a call to method '${method}'.`); return null; } @@ -586,7 +578,7 @@ Protocol.InspectorBackend._AgentPrototype = class { * @param {string} method * @param {!Array} signature * @param {!Array<*>} args - * @return {!Promise<*>} + * @return {!Promise} */ _sendMessageToBackendPromise(method, signature, args) { var errorMessage; @@ -597,42 +589,20 @@ Protocol.InspectorBackend._AgentPrototype = class { console.error(message); errorMessage = message; } - var userCallback = (args.length && typeof args.peekLast() === 'function') ? args.pop() : null; - var params = this._prepareParameters(method, signature, args, !userCallback, onError); + var params = this._prepareParameters(method, signature, args, onError); if (errorMessage) - return Promise.resolve([errorMessage]).then(runUserCallback); - return new Promise(promiseAction.bind(this)).then(runUserCallback); + return Promise.resolve(null); - /** - * @param {function(!Array<*>)} resolve - * @this {Protocol.InspectorBackend._AgentPrototype} - */ - function promiseAction(resolve) { - /** - * @param {?Protocol.Error} error - * @param {?Object} result - * @this {Protocol.InspectorBackend._AgentPrototype} - */ - function prepareArgsAndResolve(error, result) { - var argumentsArray = [error ? error.message : null]; - if (this._hasErrorData[method]) - argumentsArray.push(error ? error.data : null); - if (result) { - for (var paramName of this._replyArgs[method] || []) - argumentsArray.push(result[paramName]); + return new Promise(resolve => { + this._target._wrapCallbackAndSendMessageObject(this._domain, method, params, (error, result) => { + if (error) { + resolve(null); + return; } - resolve(argumentsArray); - } - this._target._wrapCallbackAndSendMessageObject(this._domain, method, params, prepareArgsAndResolve.bind(this)); - } - - /** - * @param {!Array<*>} args - * @return {?} - */ - function runUserCallback(args) { - return userCallback ? userCallback.apply(null, args) : !args[0] && args[1] || null; - } + var args = this._replyArgs[method]; + resolve(result && args.length && result[args[0]] || null); + }); + }); } /** diff --git a/front_end/resources/ApplicationPanelSidebar.js b/front_end/resources/ApplicationPanelSidebar.js index 6f7fdec89b..fa24238518 100644 --- a/front_end/resources/ApplicationPanelSidebar.js +++ b/front_end/resources/ApplicationPanelSidebar.js @@ -57,6 +57,7 @@ Resources.ApplicationPanelSidebar = class extends UI.VBox { this._applicationTreeElement.appendChild(clearStorageTreeElement); var storageTreeElement = this._addSidebarSection(Common.UIString('Storage')); + this._addRefreshSectionButton(storageTreeElement, this._refreshStorageSection.bind(this)); this.localStorageListTreeElement = new Resources.StorageCategoryTreeElement(panel, Common.UIString('Local Storage'), 'LocalStorage'); var localStorageIcon = UI.Icon.create('mediumicon-table', 'resource-tree-item'); @@ -83,6 +84,7 @@ Resources.ApplicationPanelSidebar = class extends UI.VBox { storageTreeElement.appendChild(this.cookieListTreeElement); var cacheTreeElement = this._addSidebarSection(Common.UIString('Cache')); + this._addRefreshSectionButton(cacheTreeElement, this._refreshCacheSection.bind(this)); this.cacheStorageListTreeElement = new Resources.ServiceWorkerCacheTreeElement(panel); cacheTreeElement.appendChild(this.cacheStorageListTreeElement); this.applicationCacheListTreeElement = @@ -130,6 +132,32 @@ Resources.ApplicationPanelSidebar = class extends UI.VBox { return treeElement; } + /** + * @param {!UI.TreeElement} treeElement + * @param {function()} refresh + */ + _addRefreshSectionButton(treeElement, refresh) { + var refreshIcon = UI.Icon.create('largeicon-refresh', 'sidebar-section-button'); + refreshIcon.addEventListener('click', refresh, false); + treeElement.setTrailingIcons([refreshIcon]); + } + + _refreshStorageSection() { + var visibleView = this._panel.visibleView; + if (visibleView instanceof Resources.DOMStorageItemsView || visibleView instanceof Resources.CookieItemsView) { + // Local Storage, Session Storage || Cookies + visibleView.refreshItems(); + } else if (visibleView instanceof Resources.DatabaseTableView) { + // Web SQL + visibleView.update(); + } + this.indexedDBListTreeElement.refreshIndexedDB(); + } + + _refreshCacheSection() { + this.cacheStorageListTreeElement._refreshCaches(); + } + /** * @override * @param {!SDK.Target} target @@ -1176,6 +1204,7 @@ Resources.IDBDatabaseTreeElement = class extends Resources.BaseStorageTreeElemen this._idbObjectStoreTreeElements = {}; var icon = UI.Icon.create('mediumicon-database', 'resource-tree-item'); this.setLeadingIcons([icon]); + this._model.addEventListener(Resources.IndexedDBModel.Events.DatabaseNamesRefreshed, this._refreshIndexedDB, this); } get itemURL() { @@ -1197,7 +1226,7 @@ Resources.IDBDatabaseTreeElement = class extends Resources.BaseStorageTreeElemen } _refreshIndexedDB() { - this._model.refreshDatabaseNames(); + this._model.refreshDatabase(this._databaseId); } /** diff --git a/front_end/resources/DOMStorageItemsView.js b/front_end/resources/DOMStorageItemsView.js index 26fe71cbf7..0a3fae6799 100644 --- a/front_end/resources/DOMStorageItemsView.js +++ b/front_end/resources/DOMStorageItemsView.js @@ -150,12 +150,9 @@ Resources.DOMStorageItemsView = class extends Resources.StorageItemsView { } /** - * @param {?string} error * @param {!Array>} items */ - _showDOMStorageItems(error, items) { - if (error) - return; + _showDOMStorageItems(items) { var rootNode = this._dataGrid.rootNode(); var selectedKey = null; for (var node of rootNode.children) { @@ -196,7 +193,7 @@ Resources.DOMStorageItemsView = class extends Resources.StorageItemsView { * @override */ refreshItems() { - this._domStorage.getItems((error, items) => this._showDOMStorageItems(error, items)); + this._domStorage.getItems().then(items => items && this._showDOMStorageItems(items)); } /** diff --git a/front_end/resources/DOMStorageModel.js b/front_end/resources/DOMStorageModel.js index 3b18865a4b..82600d02d8 100644 --- a/front_end/resources/DOMStorageModel.js +++ b/front_end/resources/DOMStorageModel.js @@ -68,10 +68,10 @@ Resources.DOMStorage = class extends Common.Object { } /** - * @param {function(?Protocol.Error, !Array.):void=} callback + * @return {!Promise>} */ - getItems(callback) { - this._model._agent.getDOMStorageItems(this.id, callback); + getItems() { + return this._model._agent.getDOMStorageItems(this.id); } /** diff --git a/front_end/resources/DatabaseQueryView.js b/front_end/resources/DatabaseQueryView.js index 40ff3b2f3d..4dbb9d465d 100644 --- a/front_end/resources/DatabaseQueryView.js +++ b/front_end/resources/DatabaseQueryView.js @@ -49,7 +49,7 @@ Resources.DatabaseQueryView = class extends UI.VBox { } _messagesClicked() { - if (!this._prompt.isCaretInsidePrompt() && this.element.isComponentSelectionCollapsed()) + if (!this._prompt.isCaretInsidePrompt() && !this.element.hasSelection()) this._prompt.moveCaretToEndOfPrompt(); } @@ -104,7 +104,7 @@ Resources.DatabaseQueryView = class extends UI.VBox { */ function moveBackIfOutside() { delete this._selectionTimeout; - if (!this._prompt.isCaretInsidePrompt() && this.element.isComponentSelectionCollapsed()) + if (!this._prompt.isCaretInsidePrompt() && !this.element.hasSelection()) this._prompt.moveCaretToEndOfPrompt(); this._prompt.autoCompleteSoon(); } diff --git a/front_end/resources/IndexedDBModel.js b/front_end/resources/IndexedDBModel.js index 9b49557884..4e75ac25c8 100644 --- a/front_end/resources/IndexedDBModel.js +++ b/front_end/resources/IndexedDBModel.js @@ -175,9 +175,10 @@ Resources.IndexedDBModel = class extends SDK.SDKModel { this._loadDatabaseNames(databaseId.securityOrigin); } - refreshDatabaseNames() { + async refreshDatabaseNames() { for (var securityOrigin in this._databaseNamesBySecurityOrigin) - this._loadDatabaseNames(securityOrigin); + await this._loadDatabaseNames(securityOrigin); + this.dispatchEventToListeners(Resources.IndexedDBModel.Events.DatabaseNamesRefreshed); } /** @@ -414,7 +415,8 @@ Resources.IndexedDBModel.KeyPathTypes = { Resources.IndexedDBModel.Events = { DatabaseAdded: Symbol('DatabaseAdded'), DatabaseRemoved: Symbol('DatabaseRemoved'), - DatabaseLoaded: Symbol('DatabaseLoaded') + DatabaseLoaded: Symbol('DatabaseLoaded'), + DatabaseNamesRefreshed: Symbol('DatabaseNamesRefreshed') }; /** diff --git a/front_end/resources/IndexedDBViews.js b/front_end/resources/IndexedDBViews.js index 7380efe52a..a782dbb2b9 100644 --- a/front_end/resources/IndexedDBViews.js +++ b/front_end/resources/IndexedDBViews.js @@ -34,14 +34,15 @@ Resources.IDBDatabaseView = class extends UI.VBox { /** * @param {!Resources.IndexedDBModel} model - * @param {!Resources.IndexedDBModel.Database} database + * @param {?Resources.IndexedDBModel.Database} database */ constructor(model, database) { super(); this._model = model; + var databaseName = database ? database.databaseId.name : Common.UIString('Loading\u2026'); - this._reportView = new UI.ReportView(database.databaseId.name); + this._reportView = new UI.ReportView(databaseName); this._reportView.show(this.contentElement); var bodySection = this._reportView.appendSection(''); @@ -58,7 +59,8 @@ Resources.IDBDatabaseView = class extends UI.VBox { Common.UIString('Refresh database')); footer.appendChild(this._refreshButton); - this.update(database); + if (database) + this.update(database); } _refreshDatabase() { @@ -75,6 +77,7 @@ Resources.IDBDatabaseView = class extends UI.VBox { */ update(database) { this._database = database; + this._reportView.setTitle(this._database.databaseId.name); this._refreshDatabase(); this._updatedForTests(); } diff --git a/front_end/resources/resourcesSidebar.css b/front_end/resources/resourcesSidebar.css index ccebe240bc..60783a01be 100644 --- a/front_end/resources/resourcesSidebar.css +++ b/front_end/resources/resourcesSidebar.css @@ -26,6 +26,21 @@ li.storage-group-list-item::before { display: none; } +li.storage-group-list-item +.trailing-icons { + width: 14px; + height: 14px; + margin-left: 6px; +} + +li.storage-group-list-item +.trailing-icons +.sidebar-section-button { + position: relative; + top: -1px; + left: -8px; +} + .navigator-tree-item { margin: -3px -7px -3px -7px; } diff --git a/front_end/sass/ASTSourceMap.js b/front_end/sass/ASTSourceMap.js index 5a81f6a909..5000d8a613 100644 --- a/front_end/sass/ASTSourceMap.js +++ b/front_end/sass/ASTSourceMap.js @@ -152,7 +152,7 @@ Sass.ASTSourceMap = class { */ removeMapping(compiled, source) { this._compiledToSource.delete(compiled); - this._sourceToCompiled.remove(source, compiled); + this._sourceToCompiled.delete(source, compiled); } /** diff --git a/front_end/sass/SASSSupport.js b/front_end/sass/SASSSupport.js index 4ca67a7c45..9be57c82f3 100644 --- a/front_end/sass/SASSSupport.js +++ b/front_end/sass/SASSSupport.js @@ -12,10 +12,10 @@ Sass.SASSSupport.parseSCSS = function(url, content) { var text = new TextUtils.Text(content); var document = new Sass.SASSSupport.ASTDocument(url, text); - return Common.formatterWorkerPool.parseSCSS(content).then(onParsed); + return Formatter.formatterWorkerPool().parseSCSS(content).then(onParsed); /** - * @param {!Array} rulePayloads + * @param {!Array} rulePayloads * @return {!Sass.SASSSupport.AST} */ function onParsed(rulePayloads) { diff --git a/front_end/sass/module.json b/front_end/sass/module.json index 6777bc4024..2fd1e16428 100644 --- a/front_end/sass/module.json +++ b/front_end/sass/module.json @@ -1,5 +1,11 @@ { - "dependencies": ["platform", "common", "diff", "sdk"], + "dependencies": [ + "platform", + "common", + "diff", + "sdk", + "formatter" + ], "scripts": [ "SASSSupport.js", "ASTService.js", diff --git a/front_end/sdk/CSSStyleSheetHeader.js b/front_end/sdk/CSSStyleSheetHeader.js index 326de94e97..fc2d4a4342 100644 --- a/front_end/sdk/CSSStyleSheetHeader.js +++ b/front_end/sdk/CSSStyleSheetHeader.js @@ -128,15 +128,11 @@ SDK.CSSStyleSheetHeader = class { * @param {string} query * @param {boolean} caseSensitive * @param {boolean} isRegex - * @param {function(!Array.)} callback + * @return {!Promise>} */ - searchInContent(query, caseSensitive, isRegex, callback) { - function performSearch(content) { - callback(Common.ContentProvider.performSearchInContent(content, query, caseSensitive, isRegex)); - } - - // searchInContent should call back later. - this.requestContent().then(performSearch); + async searchInContent(query, caseSensitive, isRegex) { + var content = await this.requestContent(); + return Common.ContentProvider.performSearchInContent(content, query, caseSensitive, isRegex); } /** diff --git a/front_end/sdk/ContentProviders.js b/front_end/sdk/ContentProviders.js index c6d0b0cd05..d18b0f9461 100644 --- a/front_end/sdk/ContentProviders.js +++ b/front_end/sdk/ContentProviders.js @@ -91,21 +91,12 @@ SDK.CompilerSourceMappingContentProvider = class { * @param {string} query * @param {boolean} caseSensitive * @param {boolean} isRegex - * @param {function(!Array.)} callback + * @return {!Promise>} */ - searchInContent(query, caseSensitive, isRegex, callback) { - this.requestContent().then(contentLoaded); - - /** - * @param {?string} content - */ - function contentLoaded(content) { - if (typeof content !== 'string') { - callback([]); - return; - } - - callback(Common.ContentProvider.performSearchInContent(content, query, caseSensitive, isRegex)); - } + async searchInContent(query, caseSensitive, isRegex) { + var content = await this.requestContent(); + if (typeof content !== 'string') + return []; + return Common.ContentProvider.performSearchInContent(content, query, caseSensitive, isRegex); } }; diff --git a/front_end/sdk/DOMModel.js b/front_end/sdk/DOMModel.js index d3a4668ffa..0563c63e5f 100644 --- a/front_end/sdk/DOMModel.js +++ b/front_end/sdk/DOMModel.js @@ -861,19 +861,11 @@ SDK.DOMNode = class { this._domModel.overlayModel().highlightDOMNodeForTwoSeconds(this.id); } - /** - * @param {string=} objectGroup - * @param {function(?SDK.RemoteObject)=} callback - */ - resolveToObject(objectGroup, callback) { - this.resolveToObjectPromise(objectGroup).then(object => callback && callback(object)); - } - /** * @param {string=} objectGroup * @return {!Promise} */ - async resolveToObjectPromise(objectGroup) { + async resolveToObject(objectGroup) { var object = await this._agent.resolveNode(this.id, objectGroup); return object && this._domModel._runtimeModel.createRemoteObject(object); } @@ -912,6 +904,23 @@ SDK.DOMNode = class { node = null; return node; } + + async scrollIntoView() { + var node = this.enclosingElementOrSelf(); + var object = await node.resolveToObject(''); + if (object) + object.callFunction(scrollIntoView); + object.release(); + node.highlightForTwoSeconds(); + + /** + * @suppressReceiverCheck + * @this {!Element} + */ + function scrollIntoView() { + this.scrollIntoViewIfNeeded(true); + } + } }; /** @@ -1426,22 +1435,12 @@ SDK.DOMModel = class extends SDK.SDKModel { this._unbind(node._templateContent); } - /** - * @param {string} query - * @param {boolean} includeUserAgentShadowDOM - * @param {function(number)} searchCallback - */ - performSearch(query, includeUserAgentShadowDOM, searchCallback) { - SDK.DOMModel.cancelSearch(); - this.performSearchPromise(query, includeUserAgentShadowDOM).then(searchCallback); - } - /** * @param {string} query * @param {boolean} includeUserAgentShadowDOM * @return {!Promise} */ - async performSearchPromise(query, includeUserAgentShadowDOM) { + async performSearch(query, includeUserAgentShadowDOM) { var response = await this._agent.invoke_performSearch({query, includeUserAgentShadowDOM}); if (!response[Protocol.Error]) this._searchId = response.searchId; diff --git a/front_end/sdk/LayerTreeBase.js b/front_end/sdk/LayerTreeBase.js index 39f09ea9e3..6cb2e99fcf 100644 --- a/front_end/sdk/LayerTreeBase.js +++ b/front_end/sdk/LayerTreeBase.js @@ -115,9 +115,9 @@ SDK.Layer.prototype = { gpuMemoryUsage() {}, /** - * @param {function(!Array.)} callback + * @return {!Promise>} */ - requestCompositingReasons(callback) {}, + requestCompositingReasons() {}, /** * @return {boolean} diff --git a/front_end/sdk/NetworkRequest.js b/front_end/sdk/NetworkRequest.js index 12c4ad844e..b6c8a3120b 100644 --- a/front_end/sdk/NetworkRequest.js +++ b/front_end/sdk/NetworkRequest.js @@ -927,10 +927,10 @@ SDK.NetworkRequest = class extends Common.Object { * @param {string} query * @param {boolean} caseSensitive * @param {boolean} isRegex - * @param {function(!Array.)} callback + * @return {!Promise>} */ - searchInContent(query, caseSensitive, isRegex, callback) { - callback([]); + searchInContent(query, caseSensitive, isRegex) { + return Promise.resolve([]); } /** diff --git a/front_end/sdk/Resource.js b/front_end/sdk/Resource.js index 626ae2e31b..e55402665f 100644 --- a/front_end/sdk/Resource.js +++ b/front_end/sdk/Resource.js @@ -212,17 +212,14 @@ SDK.Resource = class { * @param {string} query * @param {boolean} caseSensitive * @param {boolean} isRegex - * @param {function(!Array)} callback + * @return {!Promise>} */ - searchInContent(query, caseSensitive, isRegex, callback) { - if (!this.frameId) { - callback([]); - return; - } - this._resourceTreeModel.target() - .pageAgent() - .searchInResource(this.frameId, this.url, query, caseSensitive, isRegex) - .then(result => callback(result || [])); + async searchInContent(query, caseSensitive, isRegex) { + if (!this.frameId) + return []; + var result = await this._resourceTreeModel.target().pageAgent().searchInResource( + this.frameId, this.url, query, caseSensitive, isRegex); + return result || []; } /** diff --git a/front_end/sdk/Script.js b/front_end/sdk/Script.js index 310b982198..1077ccd1a9 100644 --- a/front_end/sdk/Script.js +++ b/front_end/sdk/Script.js @@ -156,23 +156,15 @@ SDK.Script = class { * @param {string} query * @param {boolean} caseSensitive * @param {boolean} isRegex - * @param {function(!Array.)} callback + * @return {!Promise>} */ - searchInContent(query, caseSensitive, isRegex, callback) { - if (!this.scriptId) { - callback([]); - return; - } + async searchInContent(query, caseSensitive, isRegex) { + if (!this.scriptId) + return []; - // Script failed to parse. - this.debuggerModel.target() - .debuggerAgent() - .searchInContent(this.scriptId, query, caseSensitive, isRegex) - .then(matches => { - var searchMatches = - (matches || []).map(match => new Common.ContentProvider.SearchMatch(match.lineNumber, match.lineContent)); - callback(searchMatches); - }); + var matches = + await this.debuggerModel.target().debuggerAgent().searchInContent(this.scriptId, query, caseSensitive, isRegex); + return (matches || []).map(match => new Common.ContentProvider.SearchMatch(match.lineNumber, match.lineContent)); } /** diff --git a/front_end/sdk/SourceMapManager.js b/front_end/sdk/SourceMapManager.js index c41b50d2ca..2c884e4611 100644 --- a/front_end/sdk/SourceMapManager.js +++ b/front_end/sdk/SourceMapManager.js @@ -171,7 +171,7 @@ SDK.SourceMapManager = class extends Common.Object { function onSourceMap(sourceMapURL, sourceMap) { this._sourceMapLoadedForTest(); var clients = this._sourceMapURLToLoadingClients.get(sourceMapURL); - this._sourceMapURLToLoadingClients.removeAll(sourceMapURL); + this._sourceMapURLToLoadingClients.deleteAll(sourceMapURL); if (!clients.size) return; if (!sourceMap) { @@ -225,11 +225,11 @@ SDK.SourceMapManager = class extends Common.Object { if (!sourceMapURL) return; if (!this._sourceMapURLToClients.hasValue(sourceMapURL, client)) { - if (this._sourceMapURLToLoadingClients.remove(sourceMapURL, client)) + if (this._sourceMapURLToLoadingClients.delete(sourceMapURL, client)) this.dispatchEventToListeners(SDK.SourceMapManager.Events.SourceMapFailedToAttach, client); return; } - this._sourceMapURLToClients.remove(sourceMapURL, client); + this._sourceMapURLToClients.delete(sourceMapURL, client); var sourceMap = this._sourceMapByURL.get(sourceMapURL); if (!this._sourceMapURLToClients.has(sourceMapURL)) this._sourceMapByURL.delete(sourceMapURL); diff --git a/front_end/sdk/TargetManager.js b/front_end/sdk/TargetManager.js index eeb0e03da4..f7105c3895 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.js'), SDK.Target.Capability.Target, this._createMainConnection.bind(this), + this, 'main', Common.UIString('Node'), SDK.Target.Capability.Target, this._createMainConnection.bind(this), null); - target.setInspectedURL('Node.js'); + target.setInspectedURL('Node'); this._childTargetManagers.set(target, new SDK.ChildTargetManager(this, target)); Host.userMetrics.actionTaken(Host.UserMetrics.Action.ConnectToNodeJSFromFrontend); return; @@ -410,15 +410,13 @@ 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')) { - InspectorFrontendHost.setDevicesUpdatesEnabled(true); - InspectorFrontendHost.events.addEventListener( - InspectorFrontendHostAPI.Events.DevicesDiscoveryConfigChanged, this._devicesDiscoveryConfigChanged, this); - } else { - this._targetAgent.setRemoteLocations([{host: 'localhost', port: 9229}]); - } + + if (Runtime.queryParam('nodeFrontend') && !this._parentTarget.parentTarget()) { + InspectorFrontendHost.setDevicesUpdatesEnabled(true); + InspectorFrontendHost.events.addEventListener( + InspectorFrontendHostAPI.Events.DevicesDiscoveryConfigChanged, this._devicesDiscoveryConfigChanged, this); } } @@ -431,8 +429,7 @@ SDK.ChildTargetManager = class { for (var address of config.networkDiscoveryConfig) { var parts = address.split(':'); var port = parseInt(parts[1], 10); - if (parts[0] && port) - locations.push({host: parts[0], port: port}); + locations.push({host: parts[0] || 'localhost', port: port || 9229}); } this._targetAgent.setRemoteLocations(locations); } @@ -516,7 +513,7 @@ SDK.ChildTargetManager = class { attachedToTarget(targetInfo, waitingForDebugger) { var targetName = ''; if (targetInfo.type === 'node') { - targetName = Common.UIString('Node.js: %s', targetInfo.url); + targetName = Common.UIString('Node: %s', targetInfo.url); } else if (targetInfo.type !== 'iframe') { var parsedURL = targetInfo.url.asParsedURL(); targetName = @@ -525,7 +522,6 @@ SDK.ChildTargetManager = class { var target = this._targetManager.createTarget( targetInfo.targetId, targetName, this._capabilitiesForType(targetInfo.type), this._createChildConnection.bind(this, this._targetAgent, targetInfo.targetId), this._parentTarget); - target[SDK.TargetManager._isWorkerSymbol] = targetInfo.type === 'worker'; // Only pause the new worker if debugging SW - we are going through the pause on start checkbox. if (!this._parentTarget.parentTarget() && Runtime.queryParam('isSharedWorker') && waitingForDebugger) { @@ -613,8 +609,6 @@ SDK.TargetManager.Events = { AvailableNodeTargetsChanged: Symbol('AvailableNodeTargetsChanged') }; -SDK.TargetManager._isWorkerSymbol = Symbol('SDK.TargetManager.IsWorker'); - /** * @interface */ diff --git a/front_end/sdk/TracingModel.js b/front_end/sdk/TracingModel.js index 996fc50311..19a4e30599 100644 --- a/front_end/sdk/TracingModel.js +++ b/front_end/sdk/TracingModel.js @@ -4,9 +4,6 @@ * found in the LICENSE file. */ -/** - * @unrestricted - */ SDK.TracingModel = class { /** * @param {!SDK.BackingStorage} backingStorage @@ -15,7 +12,22 @@ SDK.TracingModel = class { this._backingStorage = backingStorage; // Avoid extra reset of the storage as it's expensive. this._firstWritePending = true; - this.reset(); + /** @type {!Map<(number|string), !SDK.TracingModel.Process>} */ + this._processById = new Map(); + this._processByName = new Map(); + this._minimumRecordTime = 0; + this._maximumRecordTime = 0; + this._devToolsMetadataEvents = []; + /** @type {!Array} */ + this._asyncEvents = []; + /** @type {!Map} */ + this._openAsyncEvents = new Map(); + /** @type {!Map>} */ + this._openNestableAsyncEvents = new Map(); + /** @type {!Map} */ + this._profileGroups = new Map(); + /** @type {!Map>} */ + this._parsedCategories = new Map(); } /** @@ -117,15 +129,6 @@ SDK.TracingModel = class { return this._devToolsMetadataEvents; } - /** - * @param {!Array.} events - */ - setEventsForTest(events) { - this.reset(); - this.addEvents(events); - this.tracingComplete(); - } - /** * @param {!Array.} events */ @@ -145,27 +148,9 @@ SDK.TracingModel = class { } } - reset() { - /** @type {!Map<(number|string), !SDK.TracingModel.Process>} */ - this._processById = new Map(); - this._processByName = new Map(); - this._minimumRecordTime = 0; - this._maximumRecordTime = 0; - this._devToolsMetadataEvents = []; + dispose() { if (!this._firstWritePending) this._backingStorage.reset(); - - this._firstWritePending = true; - /** @type {!Array} */ - this._asyncEvents = []; - /** @type {!Map} */ - this._openAsyncEvents = new Map(); - /** @type {!Map>} */ - this._openNestableAsyncEvents = new Map(); - /** @type {!Map} */ - this._profileGroups = new Map(); - /** @type {!Map>} */ - this._parsedCategories = new Map(); } /** @@ -423,6 +408,13 @@ SDK.TracingModel = class { console.assert(false, 'Invalid async event phase'); } + /** + * @return {!SDK.BackingStorage} + */ + backingStorage() { + return this._backingStorage; + } + /** * @param {string} str * @return {!Set} diff --git a/front_end/services/ServiceManager.js b/front_end/services/ServiceManager.js index 786dac282b..ab70837581 100644 --- a/front_end/services/ServiceManager.js +++ b/front_end/services/ServiceManager.js @@ -244,7 +244,7 @@ Services.ServiceManager.RemoteServicePort = class { try { socket = new WebSocket(/** @type {string} */ (this._url)); socket.onmessage = onMessage.bind(this); - socket.onclose = this._closeHandler; + socket.onclose = onClose.bind(this); socket.onopen = onConnect.bind(this); } catch (e) { fulfill(false); @@ -265,6 +265,15 @@ Services.ServiceManager.RemoteServicePort = class { function onMessage(event) { this._messageHandler(event.data); } + + /** + * @this {Services.ServiceManager.RemoteServicePort} + */ + function onClose() { + if (!this._socket) + fulfill(false); + this._socketClosed(!!this._socket); + } } } @@ -291,12 +300,21 @@ Services.ServiceManager.RemoteServicePort = class { return this._open().then(() => { if (this._socket) { this._socket.close(); - this._socket = null; - delete this._connectionPromise; + this._socketClosed(true); } return true; }); } + + /** + * @param {boolean=} notifyClient + */ + _socketClosed(notifyClient) { + this._socket = null; + delete this._connectionPromise; + if (notifyClient) + this._closeHandler(); + } }; /** diff --git a/front_end/settings/SettingsScreen.js b/front_end/settings/SettingsScreen.js index 75c9e9a006..c4d166c392 100644 --- a/front_end/settings/SettingsScreen.js +++ b/front_end/settings/SettingsScreen.js @@ -143,7 +143,7 @@ Settings.GenericSettingsTab = class extends Settings.SettingsTab { /** @const */ var explicitSectionOrder = - ['', 'Appearance', 'Elements', 'Sources', 'Network', 'Profiler', 'Console', 'Extensions']; + ['', 'Appearance', 'Sources', 'Elements', 'Network', 'Performance', 'Console', 'Extensions']; /** @type {!Map} */ this._nameToSection = new Map(); for (var sectionName of explicitSectionOrder) diff --git a/front_end/snippets/ScriptSnippetModel.js b/front_end/snippets/ScriptSnippetModel.js index 585fb32650..a6ed70a0d7 100644 --- a/front_end/snippets/ScriptSnippetModel.js +++ b/front_end/snippets/ScriptSnippetModel.js @@ -30,6 +30,7 @@ /** * @unrestricted * @implements {SDK.SDKModelObserver} + * @implements {Bindings.DebuggerSourceMapping} */ Snippets.ScriptSnippetModel = class extends Common.Object { /** @@ -50,6 +51,7 @@ Snippets.ScriptSnippetModel = class extends Common.Object { this._project = new Snippets.SnippetsProject(workspace, this); this._loadSnippets(); SDK.targetManager.observeModels(SDK.DebuggerModel, this); + Bindings.debuggerWorkspaceBinding.addSourceMapping(this); } /** @@ -68,6 +70,34 @@ Snippets.ScriptSnippetModel = class extends Common.Object { this._mappingForDebuggerModel.remove(debuggerModel); } + /** + * @override + * @param {!SDK.DebuggerModel.Location} rawLocation + * @return {?Workspace.UILocation} + */ + rawLocationToUILocation(rawLocation) { + var mapping = this._mappingForDebuggerModel.get(rawLocation.debuggerModel); + if (!mapping) + return null; + return mapping.rawLocationToUILocation(rawLocation); + } + + /** + * @override + * @param {!Workspace.UISourceCode} uiSourceCode + * @param {number} lineNumber + * @param {number} columnNumber + * @return {?SDK.DebuggerModel.Location} + */ + uiLocationToRawLocation(uiSourceCode, lineNumber, columnNumber) { + for (var mapping of this._mappingForDebuggerModel.values()) { + var rawLocation = mapping.uiLocationToRawLocation(uiSourceCode, lineNumber, columnNumber); + if (rawLocation) + return rawLocation; + } + return null; + } + /** * @param {!SDK.DebuggerModel} debuggerModel * @return {!Snippets.SnippetScriptMapping|undefined} @@ -337,7 +367,6 @@ Snippets.ScriptSnippetModel = class extends Common.Object { Snippets.ScriptSnippetModel.snippetSourceURLPrefix = 'snippets:///'; /** - * @implements {Bindings.DebuggerSourceMapping} * @unrestricted */ Snippets.SnippetScriptMapping = class { @@ -403,7 +432,6 @@ Snippets.SnippetScriptMapping = class { } /** - * @override * @param {!SDK.DebuggerModel.Location} rawLocation * @return {?Workspace.UILocation} */ @@ -417,7 +445,6 @@ Snippets.SnippetScriptMapping = class { } /** - * @override * @param {!Workspace.UISourceCode} uiSourceCode * @param {number} lineNumber * @param {number} columnNumber @@ -437,10 +464,9 @@ Snippets.SnippetScriptMapping = class { */ _addScript(script, uiSourceCode) { console.assert(!this._scriptForUISourceCode.get(uiSourceCode)); - Bindings.debuggerWorkspaceBinding.setSourceMapping(this._debuggerModel, uiSourceCode, this); this._uiSourceCodeForScriptId[script.scriptId] = uiSourceCode; this._scriptForUISourceCode.set(uiSourceCode, script); - Bindings.debuggerWorkspaceBinding.pushSourceMapping(script, this); + Bindings.debuggerWorkspaceBinding.updateLocations(script); } /** @@ -457,24 +483,6 @@ Snippets.SnippetScriptMapping = class { if (scriptUISourceCode) this._scriptSnippetModel._restoreBreakpoints(scriptUISourceCode, breakpointLocations); } - - /** - * @override - * @return {boolean} - */ - isIdentity() { - return false; - } - - /** - * @override - * @param {!Workspace.UISourceCode} uiSourceCode - * @param {number} lineNumber - * @return {boolean} - */ - uiLineHasMapping(uiSourceCode, lineNumber) { - return true; - } }; /** @@ -518,18 +526,10 @@ Snippets.SnippetContentProvider = class { * @param {string} query * @param {boolean} caseSensitive * @param {boolean} isRegex - * @param {function(!Array.)} callback + * @return {!Promise>} */ - searchInContent(query, caseSensitive, isRegex, callback) { - /** - * @this {Snippets.SnippetContentProvider} - */ - function performSearch() { - callback(Common.ContentProvider.performSearchInContent(this._snippet.content, query, caseSensitive, isRegex)); - } - - // searchInContent should call back later. - window.setTimeout(performSearch.bind(this), 0); + async searchInContent(query, caseSensitive, isRegex) { + return Common.ContentProvider.performSearchInContent(this._snippet.content, query, caseSensitive, isRegex); } }; diff --git a/front_end/source_frame/ImageView.js b/front_end/source_frame/ImageView.js index 11e590927b..3ffbf9ee5e 100644 --- a/front_end/source_frame/ImageView.js +++ b/front_end/source_frame/ImageView.js @@ -108,13 +108,12 @@ SourceFrame.ImageView = class extends UI.SimpleView { _contextMenu(event) { var contextMenu = new UI.ContextMenu(event); if (!this._parsedURL.isDataURL()) - contextMenu.appendItem(Common.UIString.capitalize('Copy ^image URL'), this._copyImageURL.bind(this)); - if (this._imagePreviewElement.src) { - contextMenu.appendItem( - Common.UIString.capitalize('Copy ^image as Data URI'), this._copyImageAsDataURL.bind(this)); - } - contextMenu.appendItem(Common.UIString.capitalize('Open ^image in ^new ^tab'), this._openInNewTab.bind(this)); - contextMenu.appendItem(Common.UIString.capitalize('Save\u2026'), this._saveImage.bind(this)); + contextMenu.appendItem(Common.UIString('Copy image URL'), this._copyImageURL.bind(this)); + if (this._imagePreviewElement.src) + contextMenu.appendItem(Common.UIString('Copy image as data URI'), this._copyImageAsDataURL.bind(this)); + + contextMenu.appendItem(Common.UIString('Open image in new tab'), this._openInNewTab.bind(this)); + contextMenu.appendItem(Common.UIString('Save\u2026'), this._saveImage.bind(this)); contextMenu.show(); } diff --git a/front_end/sources/CallStackSidebarPane.js b/front_end/sources/CallStackSidebarPane.js index ef7578b740..504b8d3d0a 100644 --- a/front_end/sources/CallStackSidebarPane.js +++ b/front_end/sources/CallStackSidebarPane.js @@ -271,8 +271,8 @@ Sources.CallStackSidebarPane = class extends UI.SimpleView { return; var contextMenu = new UI.ContextMenu(event); if (item.debuggerCallFrame) - contextMenu.appendItem(Common.UIString.capitalize('Restart ^frame'), () => item.debuggerCallFrame.restart()); - contextMenu.appendItem(Common.UIString.capitalize('Copy ^stack ^trace'), this._copyStackTrace.bind(this)); + contextMenu.appendItem(Common.UIString('Restart frame'), () => item.debuggerCallFrame.restart()); + contextMenu.appendItem(Common.UIString('Copy stack trace'), this._copyStackTrace.bind(this)); var location = this._itemLocation(item); if (location) { var uiLocation = Bindings.debuggerWorkspaceBinding.rawLocationToUILocation(location); @@ -323,22 +323,19 @@ Sources.CallStackSidebarPane = class extends UI.SimpleView { if (canBlackbox) { if (isBlackboxed) { contextMenu.appendItem( - Common.UIString.capitalize('Stop ^blackboxing'), - manager.unblackboxUISourceCode.bind(manager, uiSourceCode)); + Common.UIString('Stop blackboxing'), manager.unblackboxUISourceCode.bind(manager, uiSourceCode)); } else { contextMenu.appendItem( - Common.UIString.capitalize('Blackbox ^script'), manager.blackboxUISourceCode.bind(manager, uiSourceCode)); + Common.UIString('Blackbox script'), manager.blackboxUISourceCode.bind(manager, uiSourceCode)); } } if (isContentScript) { if (isBlackboxed) { contextMenu.appendItem( - Common.UIString.capitalize('Stop blackboxing ^all ^content ^scripts'), - manager.blackboxContentScripts.bind(manager)); + Common.UIString('Stop blackboxing all content scripts'), manager.blackboxContentScripts.bind(manager)); } else { contextMenu.appendItem( - Common.UIString.capitalize('Blackbox ^all ^content ^scripts'), - manager.unblackboxContentScripts.bind(manager)); + Common.UIString('Blackbox all content scripts'), manager.unblackboxContentScripts.bind(manager)); } } } diff --git a/front_end/sources/InplaceFormatterEditorAction.js b/front_end/sources/InplaceFormatterEditorAction.js index d44213574a..03b450e161 100644 --- a/front_end/sources/InplaceFormatterEditorAction.js +++ b/front_end/sources/InplaceFormatterEditorAction.js @@ -83,13 +83,13 @@ Sources.InplaceFormatterEditorAction = class { */ function contentLoaded(content) { var highlighterType = uiSourceCode.mimeType(); - Sources.Formatter.format(uiSourceCode.contentType(), highlighterType, content || '', innerCallback.bind(this)); + Formatter.Formatter.format(uiSourceCode.contentType(), highlighterType, content || '', innerCallback.bind(this)); } /** * @this {Sources.InplaceFormatterEditorAction} * @param {string} formattedContent - * @param {!Sources.FormatterSourceMapping} formatterMapping + * @param {!Formatter.FormatterSourceMapping} formatterMapping */ function innerCallback(formattedContent, formatterMapping) { if (uiSourceCode.workingCopy() === formattedContent) diff --git a/front_end/sources/JavaScriptSourceFrame.js b/front_end/sources/JavaScriptSourceFrame.js index 05418f815f..051298d855 100644 --- a/front_end/sources/JavaScriptSourceFrame.js +++ b/front_end/sources/JavaScriptSourceFrame.js @@ -94,8 +94,6 @@ Sources.JavaScriptSourceFrame = class extends SourceFrame.UISourceCodeFrame { /** @type {!Map.} */ this._valueWidgets = new Map(); this.onBindingChanged(); - Bindings.debuggerWorkspaceBinding.addEventListener( - Bindings.DebuggerWorkspaceBinding.Events.SourceMappingChanged, this._onSourceMappingChanged, this); /** @type {?Map} */ this._continueToLocationDecorations = null; } @@ -293,7 +291,7 @@ Sources.JavaScriptSourceFrame = class extends SourceFrame.UISourceCodeFrame { !Bindings.blackboxManager.isBlackboxedUISourceCode(this._debuggerSourceCode)) { if (this._scriptFileForDebuggerModel.size) { var scriptFile = this._scriptFileForDebuggerModel.valuesArray()[0]; - var addSourceMapURLLabel = Common.UIString.capitalize('Add ^source ^map\u2026'); + var addSourceMapURLLabel = Common.UIString('Add source map\u2026'); contextMenu.appendItem(addSourceMapURLLabel, addSourceMapURL.bind(null, scriptFile)); contextMenu.appendSeparator(); } @@ -1351,21 +1349,13 @@ Sources.JavaScriptSourceFrame = class extends SourceFrame.UISourceCodeFrame { this._debuggerSourceCode = binding ? binding.network : this.uiSourceCode(); } - /** - * @param {!Common.Event} event - */ - _onSourceMappingChanged(event) { - var data = /** @type {{debuggerModel: !SDK.DebuggerModel, uiSourceCode: !Workspace.UISourceCode}} */ (event.data); - if (this._debuggerSourceCode !== data.uiSourceCode) - return; - this._updateScriptFile(data.debuggerModel); - this._updateLinesWithoutMappingHighlight(); - } - _updateLinesWithoutMappingHighlight() { + var isSourceMapSource = !!Bindings.CompilerScriptMapping.uiSourceCodeOrigin(this._debuggerSourceCode); + if (!isSourceMapSource) + return; var linesCount = this.textEditor.linesCount; for (var i = 0; i < linesCount; ++i) { - var lineHasMapping = Bindings.debuggerWorkspaceBinding.uiLineHasMapping(this._debuggerSourceCode, i); + var lineHasMapping = Bindings.CompilerScriptMapping.uiLineHasMapping(this._debuggerSourceCode, i); if (!lineHasMapping) this._hasLineWithoutMapping = true; if (this._hasLineWithoutMapping) @@ -1590,7 +1580,7 @@ Sources.JavaScriptSourceFrame = class extends SourceFrame.UISourceCodeFrame { * @param {boolean} enabled */ _setBreakpoint(lineNumber, columnNumber, condition, enabled) { - if (!Bindings.debuggerWorkspaceBinding.uiLineHasMapping(this._debuggerSourceCode, lineNumber)) + if (!Bindings.CompilerScriptMapping.uiLineHasMapping(this._debuggerSourceCode, lineNumber)) return; this._breakpointManager.setBreakpoint(this._debuggerSourceCode, lineNumber, columnNumber, condition, enabled); @@ -1610,8 +1600,6 @@ Sources.JavaScriptSourceFrame = class extends SourceFrame.UISourceCodeFrame { * @override */ dispose() { - Bindings.debuggerWorkspaceBinding.removeEventListener( - Bindings.DebuggerWorkspaceBinding.Events.SourceMappingChanged, this._onSourceMappingChanged, this); this._breakpointManager.removeEventListener( Bindings.BreakpointManager.Events.BreakpointAdded, this._breakpointAdded, this); this._breakpointManager.removeEventListener( diff --git a/front_end/sources/NavigatorView.js b/front_end/sources/NavigatorView.js index fc9d986752..3c5dd18f98 100644 --- a/front_end/sources/NavigatorView.js +++ b/front_end/sources/NavigatorView.js @@ -573,7 +573,7 @@ Sources.NavigatorView = class extends UI.VBox { */ _removeUISourceCodeNode(node) { var uiSourceCode = node.uiSourceCode(); - this._uiSourceCodeNodes.remove(uiSourceCode, node); + this._uiSourceCodeNodes.delete(uiSourceCode, node); var project = uiSourceCode.project(); var target = Bindings.NetworkProject.targetForUISourceCode(uiSourceCode); var frame = node.frame(); diff --git a/front_end/sources/ObjectEventListenersSidebarPane.js b/front_end/sources/ObjectEventListenersSidebarPane.js index 35440f1044..620e2528a3 100644 --- a/front_end/sources/ObjectEventListenersSidebarPane.js +++ b/front_end/sources/ObjectEventListenersSidebarPane.js @@ -8,13 +8,12 @@ Sources.ObjectEventListenersSidebarPane = class extends UI.VBox { constructor() { super(); - this.element.classList.add('event-listeners-sidebar-pane'); - this._refreshButton = new UI.ToolbarButton(Common.UIString('Refresh'), 'largeicon-refresh'); this._refreshButton.addEventListener(UI.ToolbarButton.Events.Click, this._refreshClick, this); this._refreshButton.setEnabled(false); - this._eventListenersView = new EventListeners.EventListenersView(this.element, this.update.bind(this)); + this._eventListenersView = new EventListeners.EventListenersView(this.update.bind(this)); + this._eventListenersView.show(this.element); } /** diff --git a/front_end/sources/OutlineQuickOpen.js b/front_end/sources/OutlineQuickOpen.js index 9068827179..07b4887681 100644 --- a/front_end/sources/OutlineQuickOpen.js +++ b/front_end/sources/OutlineQuickOpen.js @@ -21,7 +21,7 @@ Sources.OutlineQuickOpen = class extends QuickOpen.FilteredListWidget.Provider { var uiSourceCode = this._currentUISourceCode(); if (uiSourceCode) { - this._active = Common.formatterWorkerPool.outlineForMimetype( + this._active = Formatter.formatterWorkerPool().outlineForMimetype( uiSourceCode.workingCopy(), uiSourceCode.contentType().canonicalMimeType(), this._didBuildOutlineChunk.bind(this)); } @@ -29,7 +29,7 @@ Sources.OutlineQuickOpen = class extends QuickOpen.FilteredListWidget.Provider { /** * @param {boolean} isLastChunk - * @param {!Array} items + * @param {!Array} items */ _didBuildOutlineChunk(isLastChunk, items) { this._items.push(...items); diff --git a/front_end/sources/SourceFormatter.js b/front_end/sources/SourceFormatter.js index 1faab4b2d4..0e90ae7c73 100644 --- a/front_end/sources/SourceFormatter.js +++ b/front_end/sources/SourceFormatter.js @@ -6,7 +6,7 @@ Sources.SourceFormatData = class { /** * @param {!Workspace.UISourceCode} originalSourceCode * @param {!Workspace.UISourceCode} formattedSourceCode - * @param {!Sources.FormatterSourceMapping} mapping + * @param {!Formatter.FormatterSourceMapping} mapping */ constructor(originalSourceCode, formattedSourceCode, mapping) { this.originalSourceCode = originalSourceCode; @@ -102,13 +102,14 @@ Sources.SourceFormatter = class { this._formattedSourceCodes.set(uiSourceCode, {promise: resultPromise, formatData: null}); var content = await uiSourceCode.requestContent(); // ------------ ASYNC ------------ - Sources.Formatter.format(uiSourceCode.contentType(), uiSourceCode.mimeType(), content || '', formatDone.bind(this)); + Formatter.Formatter.format( + uiSourceCode.contentType(), uiSourceCode.mimeType(), content || '', formatDone.bind(this)); return resultPromise; /** * @this Sources.SourceFormatter * @param {string} formattedContent - * @param {!Sources.FormatterSourceMapping} formatterMapping + * @param {!Formatter.FormatterSourceMapping} formatterMapping */ function formatDone(formattedContent, formatterMapping) { var cacheEntry = this._formattedSourceCodes.get(uiSourceCode); @@ -150,6 +151,10 @@ Sources.SourceFormatter = class { * @implements {Bindings.DebuggerSourceMapping} */ Sources.SourceFormatter.ScriptMapping = class { + constructor() { + Bindings.debuggerWorkspaceBinding.addSourceMapping(this); + } + /** * @override * @param {!SDK.DebuggerModel.Location} rawLocation @@ -184,24 +189,6 @@ Sources.SourceFormatter.ScriptMapping = class { return scripts[0].debuggerModel.createRawLocation(scripts[0], originalLocation[0], originalLocation[1]); } - /** - * @override - * @return {boolean} - */ - isIdentity() { - return false; - } - - /** - * @override - * @param {!Workspace.UISourceCode} uiSourceCode - * @param {number} lineNumber - * @return {boolean} - */ - uiLineHasMapping(uiSourceCode, lineNumber) { - return true; - } - /** * @param {!Sources.SourceFormatData} formatData * @param {boolean} enabled @@ -211,19 +198,14 @@ Sources.SourceFormatter.ScriptMapping = class { if (!scripts.length) return; if (enabled) { - for (var script of scripts) { + for (var script of scripts) script[Sources.SourceFormatData._formatDataSymbol] = formatData; - Bindings.debuggerWorkspaceBinding.pushSourceMapping(script, this); - } } else { - for (var script of scripts) { + for (var script of scripts) delete script[Sources.SourceFormatData._formatDataSymbol]; - Bindings.debuggerWorkspaceBinding.popSourceMapping(script); - } } - - Bindings.debuggerWorkspaceBinding.setSourceMapping( - scripts[0].debuggerModel, formatData.formattedSourceCode, enabled ? this : null); + for (var script of scripts) + Bindings.debuggerWorkspaceBinding.updateLocations(script); } /** diff --git a/front_end/sources/SourceMapNamesResolver.js b/front_end/sources/SourceMapNamesResolver.js index 4c00b54c9e..de48d7d4ec 100644 --- a/front_end/sources/SourceMapNamesResolver.js +++ b/front_end/sources/SourceMapNamesResolver.js @@ -52,7 +52,8 @@ Sources.SourceMapNamesResolver._scopeIdentifiers = function(scope) { var scopeText = text.extract(scopeRange); var scopeStart = text.toSourceRange(scopeRange).offset; var prefix = 'function fui'; - return Common.formatterWorkerPool.javaScriptIdentifiers(prefix + scopeText) + return Formatter.formatterWorkerPool() + .javaScriptIdentifiers(prefix + scopeText) .then(onIdentifiers.bind(null, text, scopeStart, prefix)); } @@ -279,7 +280,7 @@ Sources.SourceMapNamesResolver._resolveExpression = function( var originalText = text.extract(textRange); if (!originalText) return Promise.resolve(''); - return Common.formatterWorkerPool.evaluatableJavaScriptSubstring(originalText); + return Formatter.formatterWorkerPool().evaluatableJavaScriptSubstring(originalText); } }; diff --git a/front_end/sources/SourcesPanel.js b/front_end/sources/SourcesPanel.js index 3861fa42b4..a7fc4e4212 100644 --- a/front_end/sources/SourcesPanel.js +++ b/front_end/sources/SourcesPanel.js @@ -779,12 +779,10 @@ Sources.SourcesPanel = class extends UI.Panel { var binding = Persistence.persistence.binding(uiSourceCode); if (!binding) { contextMenu.appendItem( - Common.UIString.capitalize('Map to ^network ^resource\u2026'), - this.mapFileSystemToNetwork.bind(this, uiSourceCode)); + Common.UIString('Map to network resource\u2026'), this.mapFileSystemToNetwork.bind(this, uiSourceCode)); } else { contextMenu.appendItem( - Common.UIString.capitalize('Remove ^network ^mapping'), - this._removeNetworkMapping.bind(this, binding.network)); + Common.UIString('Remove network mapping'), this._removeNetworkMapping.bind(this, binding.network)); } } @@ -801,8 +799,7 @@ Sources.SourcesPanel = class extends UI.Panel { return; if (this._workspace.uiSourceCodeForURL(uiSourceCode.url()) === uiSourceCode) { contextMenu.appendItem( - Common.UIString.capitalize('Map to ^file ^system ^resource\u2026'), - this.mapNetworkToFileSystem.bind(this, uiSourceCode)); + Common.UIString('Map to file system resource\u2026'), this.mapNetworkToFileSystem.bind(this, uiSourceCode)); } } } @@ -820,13 +817,13 @@ Sources.SourcesPanel = class extends UI.Panel { if (!uiSourceCode.project().isServiceProject() && !event.target.isSelfOrDescendant(this._navigatorTabbedLocation.widget().element)) { contextMenu.appendItem( - Common.UIString.capitalize('Reveal in ^navigator'), this._handleContextMenuReveal.bind(this, uiSourceCode)); + Common.UIString('Reveal in navigator'), this._handleContextMenuReveal.bind(this, uiSourceCode)); contextMenu.appendSeparator(); } this._appendUISourceCodeMappingItems(contextMenu, uiSourceCode); if (!uiSourceCode.project().canSetFileContent()) { contextMenu.appendItem( - Common.UIString.capitalize('Local ^modifications\u2026'), this._showLocalHistory.bind(this, uiSourceCode)); + Common.UIString('Local modifications\u2026'), this._showLocalHistory.bind(this, uiSourceCode)); } } @@ -855,10 +852,9 @@ Sources.SourcesPanel = class extends UI.Panel { if (contentType.hasScripts()) { var target = UI.context.flavor(SDK.Target); var debuggerModel = target ? target.model(SDK.DebuggerModel) : null; - if (debuggerModel && debuggerModel.isPaused()) { - contextMenu.appendItem( - Common.UIString.capitalize('Continue to ^here'), this._continueToLocation.bind(this, uiLocation)); - } + if (debuggerModel && debuggerModel.isPaused()) + contextMenu.appendItem(Common.UIString('Continue to here'), this._continueToLocation.bind(this, uiLocation)); + this._callstackPane.appendBlackboxURLContextMenuItems(contextMenu, uiSourceCode); } } @@ -880,11 +876,10 @@ Sources.SourcesPanel = class extends UI.Panel { return; var remoteObject = /** @type {!SDK.RemoteObject} */ (target); contextMenu.appendItem( - Common.UIString.capitalize('Store as ^global ^variable'), this._saveToTempVariable.bind(this, remoteObject)); + Common.UIString('Store as global variable'), this._saveToTempVariable.bind(this, remoteObject)); if (remoteObject.type === 'function') { contextMenu.appendItem( - Common.UIString.capitalize('Show ^function ^definition'), - this._showFunctionDefinition.bind(this, remoteObject)); + Common.UIString('Show function definition'), this._showFunctionDefinition.bind(this, remoteObject)); } } @@ -899,7 +894,7 @@ Sources.SourcesPanel = class extends UI.Panel { var uiSourceCode = this._workspace.uiSourceCodeForURL(request.url()); if (!uiSourceCode) return; - var openText = Common.UIString.capitalize('Open in Sources ^panel'); + var openText = Common.UIString('Open in Sources panel'); contextMenu.appendItem(openText, this.showUILocation.bind(this, uiSourceCode.uiLocation(0, 0))); } diff --git a/front_end/sources/SourcesSearchScope.js b/front_end/sources/SourcesSearchScope.js index 42ea08e389..3c2df6e739 100644 --- a/front_end/sources/SourcesSearchScope.js +++ b/front_end/sources/SourcesSearchScope.js @@ -101,23 +101,22 @@ Sources.SourcesSearchScope = class { this._searchFinishedCallback = searchFinishedCallback; this._searchConfig = searchConfig; - var projects = this._projects(); - var barrier = new CallbackBarrier(); + var promises = []; var compositeProgress = new Common.CompositeProgress(progress); var searchContentProgress = compositeProgress.createSubProgress(); var findMatchingFilesProgress = new Common.CompositeProgress(compositeProgress.createSubProgress()); - for (var i = 0; i < projects.length; ++i) { - var project = projects[i]; + for (var project of this._projects()) { var weight = project.uiSourceCodes().length; var findMatchingFilesInProjectProgress = findMatchingFilesProgress.createSubProgress(weight); - var barrierCallback = barrier.createCallback(); var filesMathingFileQuery = this._projectFilesMatchingFileQuery(project, searchConfig); - var callback = this._processMatchingFilesForProject.bind( - this, this._searchId, project, filesMathingFileQuery, barrierCallback); - project.findFilesMatchingSearchRequest( - searchConfig, filesMathingFileQuery, findMatchingFilesInProjectProgress, callback); + var promise = + project + .findFilesMatchingSearchRequest(searchConfig, filesMathingFileQuery, findMatchingFilesInProjectProgress) + .then(this._processMatchingFilesForProject.bind(this, this._searchId, project, filesMathingFileQuery)); + promises.push(promise); } - barrier.callWhenDone(this._processMatchingFiles.bind( + + Promise.all(promises).then(this._processMatchingFiles.bind( this, this._searchId, searchContentProgress, this._searchFinishedCallback.bind(this, true))); } @@ -149,11 +148,10 @@ Sources.SourcesSearchScope = class { /** * @param {number} searchId * @param {!Workspace.Project} project - * @param {!Array.} filesMathingFileQuery - * @param {function()} callback - * @param {!Array.} files + * @param {!Array} filesMathingFileQuery + * @param {!Array} files */ - _processMatchingFilesForProject(searchId, project, filesMathingFileQuery, callback, files) { + _processMatchingFilesForProject(searchId, project, filesMathingFileQuery, files) { if (searchId !== this._searchId) { this._searchFinishedCallback(false); return; @@ -165,19 +163,18 @@ Sources.SourcesSearchScope = class { files = files.mergeOrdered(dirtyFiles, String.naturalOrderComparator); var uiSourceCodes = []; - for (var i = 0; i < files.length; ++i) { - var uiSourceCode = project.uiSourceCodeForURL(files[i]); - if (uiSourceCode) { - var script = Bindings.DefaultScriptMapping.scriptForUISourceCode(uiSourceCode); - if (script && !script.isAnonymousScript()) - continue; - uiSourceCodes.push(uiSourceCode); - } + for (var file of files) { + var uiSourceCode = project.uiSourceCodeForURL(file); + if (!uiSourceCode) + continue; + var script = Bindings.DefaultScriptMapping.scriptForUISourceCode(uiSourceCode); + if (script && !script.isAnonymousScript()) + continue; + uiSourceCodes.push(uiSourceCode); } uiSourceCodes.sort(Sources.SourcesSearchScope._filesComparator); this._searchResultCandidates = this._searchResultCandidates.mergeOrdered(uiSourceCodes, Sources.SourcesSearchScope._filesComparator); - callback(); } /** diff --git a/front_end/sources/ThreadsSidebarPane.js b/front_end/sources/ThreadsSidebarPane.js index 0abf5a482d..7ce72ce12b 100644 --- a/front_end/sources/ThreadsSidebarPane.js +++ b/front_end/sources/ThreadsSidebarPane.js @@ -16,7 +16,14 @@ Sources.ThreadsSidebarPane = class extends UI.VBox { this._list = new UI.ListControl(this._items, 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); } @@ -25,7 +32,27 @@ Sources.ThreadsSidebarPane = class extends UI.VBox { */ static shouldBeShown() { var minJSTargets = Runtime.queryParam('nodeFrontend') ? 1 : 2; - return SDK.targetManager.models(SDK.DebuggerModel).length >= minJSTargets; + 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'); } /** diff --git a/front_end/sources/WatchExpressionsSidebarPane.js b/front_end/sources/WatchExpressionsSidebarPane.js index 2d2121b27f..bc98f100b7 100644 --- a/front_end/sources/WatchExpressionsSidebarPane.js +++ b/front_end/sources/WatchExpressionsSidebarPane.js @@ -156,12 +156,11 @@ Sources.WatchExpressionsSidebarPane = class extends UI.ThrottledWidget { isEditing |= watchExpression.isEditing(); if (!isEditing) - contextMenu.appendItem(Common.UIString.capitalize('Add ^watch ^expression'), this._addButtonClicked.bind(this)); + contextMenu.appendItem(Common.UIString('Add watch expression'), this._addButtonClicked.bind(this)); + + if (this._watchExpressions.length > 1) + contextMenu.appendItem(Common.UIString('Delete all watch expressions'), this._deleteAllButtonClicked.bind(this)); - if (this._watchExpressions.length > 1) { - contextMenu.appendItem( - Common.UIString.capitalize('Delete ^all ^watch ^expressions'), this._deleteAllButtonClicked.bind(this)); - } var target = event.deepElementFromPoint(); if (!target) @@ -405,13 +404,12 @@ Sources.WatchExpression = class extends Common.Object { * @param {!Event} event */ _populateContextMenu(contextMenu, event) { - if (!this.isEditing()) { - contextMenu.appendItem( - Common.UIString.capitalize('Delete ^watch ^expression'), this._updateExpression.bind(this, null)); - } + if (!this.isEditing()) + contextMenu.appendItem(Common.UIString('Delete watch expression'), this._updateExpression.bind(this, null)); + if (!this.isEditing() && this._result && (this._result.type === 'number' || this._result.type === 'string')) - contextMenu.appendItem(Common.UIString.capitalize('Copy ^value'), this._copyValueButtonClicked.bind(this)); + contextMenu.appendItem(Common.UIString('Copy value'), this._copyValueButtonClicked.bind(this)); var target = event.deepElementFromPoint(); if (target && this._valueElement.isSelfOrAncestor(target)) diff --git a/front_end/sources/XHRBreakpointsSidebarPane.js b/front_end/sources/XHRBreakpointsSidebarPane.js index c4bdfe8a3d..ba70f8089d 100644 --- a/front_end/sources/XHRBreakpointsSidebarPane.js +++ b/front_end/sources/XHRBreakpointsSidebarPane.js @@ -36,7 +36,7 @@ Sources.XHRBreakpointsSidebarPane = class extends UI.VBox { _emptyElementContextMenu(event) { var contextMenu = new UI.ContextMenu(event); - contextMenu.appendItem(Common.UIString.capitalize('Add ^breakpoint'), this._addButtonClicked.bind(this)); + contextMenu.appendItem(Common.UIString('Add breakpoint'), this._addButtonClicked.bind(this)); contextMenu.show(); } @@ -153,10 +153,10 @@ Sources.XHRBreakpointsSidebarPane = class extends UI.VBox { this._removeBreakpoint(url); } } - var removeAllTitle = Common.UIString.capitalize('Remove ^all ^breakpoints'); + var removeAllTitle = Common.UIString('Remove all breakpoints'); - contextMenu.appendItem(Common.UIString.capitalize('Add ^breakpoint'), this._addButtonClicked.bind(this)); - contextMenu.appendItem(Common.UIString.capitalize('Remove ^breakpoint'), removeBreakpoint.bind(this)); + contextMenu.appendItem(Common.UIString('Add breakpoint'), this._addButtonClicked.bind(this)); + contextMenu.appendItem(Common.UIString('Remove breakpoint'), removeBreakpoint.bind(this)); contextMenu.appendItem(removeAllTitle, removeAllBreakpoints.bind(this)); contextMenu.show(); } diff --git a/front_end/sources/module.json b/front_end/sources/module.json index e7abff67e4..03cee9f44c 100644 --- a/front_end/sources/module.json +++ b/front_end/sources/module.json @@ -617,7 +617,8 @@ "inline_editor", "color_picker", "event_listeners", - "object_ui" + "object_ui", + "formatter" ], "scripts": [ "AddSourceMapURLDialog.js", @@ -643,7 +644,6 @@ "ThreadsSidebarPane.js", "ScriptFormatterEditorAction.js", "InplaceFormatterEditorAction.js", - "ScriptFormatter.js", "SourceFormatter.js", "OpenFileQuickOpen.js", "SourcesView.js", diff --git a/front_end/sources/sourcesPanel.css b/front_end/sources/sourcesPanel.css index 7904566027..851ee525b9 100644 --- a/front_end/sources/sourcesPanel.css +++ b/front_end/sources/sourcesPanel.css @@ -67,7 +67,3 @@ .cursor-auto { cursor: auto; } - -.event-listeners-sidebar-pane .toolbar { - border-bottom: 1px solid #eee; -} diff --git a/front_end/sources/threadsSidebarPane.css b/front_end/sources/threadsSidebarPane.css index 6863de6d1e..f4a8d8fde5 100644 --- a/front_end/sources/threadsSidebarPane.css +++ b/front_end/sources/threadsSidebarPane.css @@ -4,6 +4,20 @@ * 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; diff --git a/front_end/terminal/TerminalWidget.js b/front_end/terminal/TerminalWidget.js index 1fb6fd113e..2ad3d436fd 100644 --- a/front_end/terminal/TerminalWidget.js +++ b/front_end/terminal/TerminalWidget.js @@ -6,18 +6,18 @@ */ Terminal.TerminalWidget = class extends UI.VBox { constructor() { - super(false); + super(true); this.registerRequiredCSS('terminal/xterm.js/build/xterm.css'); this.registerRequiredCSS('terminal/terminal.css'); this.element.classList.add('terminal-root'); - this.element.addEventListener('mousemove', this._mouseMove.bind(this), false); this._init(); this._linkifier = new Components.Linkifier(); - this._linkifyFunction = this._linkifyURL.bind(this); + this._config = {attributes: true, childList: true, characterData: true, subtree: true}; } - _init() { - Services.serviceManager.createRemoteService('Terminal').then(this._initialized.bind(this)); + async _init() { + var backend = await Services.serviceManager.createRemoteService('Terminal'); + this._initialized(backend); } /** @@ -26,11 +26,10 @@ Terminal.TerminalWidget = class extends UI.VBox { _initialized(backend) { if (!backend) { if (!this._unavailableLabel) { - this._unavailableLabel = this.element.createChild('div', 'terminal-error-message fill'); + this._unavailableLabel = this.contentElement.createChild('div', 'terminal-error-message fill'); this._unavailableLabel.createChild('div').textContent = Common.UIString('Terminal service is not available'); } - if (this.isShowing()) - setTimeout(this._init.bind(this), 2000); + setTimeout(this._init.bind(this), 2000); return; } @@ -44,6 +43,8 @@ Terminal.TerminalWidget = class extends UI.VBox { if (!this._term) { this._term = new Terminal({cursorBlink: true}); this._term.open(this.contentElement); + this._mutationObserver = new MutationObserver(this._linkify.bind(this)); + this._mutationObserver.observe(this.contentElement, this._config); this._term.on('data', data => { this._backend.send('write', {data: data}); }); @@ -56,19 +57,10 @@ Terminal.TerminalWidget = class extends UI.VBox { this._backend.send('init', {cols: this._term.cols, rows: this._term.rows}); this._backend.on('data', result => { this._term.write(result.data); - this._linkifyUpToDate = false; }); this._backend.on('disposed', this._disposed.bind(this)); } - _mouseMove() { - if (this._linkifyUpToDate) - return; - if (this._term) - this._linkify(); - this._linkifyUpToDate = true; - } - /** * @override */ @@ -84,18 +76,57 @@ Terminal.TerminalWidget = class extends UI.VBox { /** * @override */ - wasDetachedFromHierarchy() { + ownerViewDisposed() { if (this._backend) this._backend.dispose(); } _linkify() { - if (!this._term) - return; + this._mutationObserver.takeRecords(); + this._mutationObserver.disconnect(); this._linkifier.reset(); - var rows = this._term.rowContainer.children; + var rows = this._term['rowContainer'].children; for (var i = 0; i < rows.length; i++) this._linkifyTerminalLine(rows[i]); + this._mutationObserver.observe(this.contentElement, this._config); + } + + /** + * @param {string} string + */ + _linkifyText(string) { + var regex1 = /([/\w\.-]*)+\:([\d]+)(?:\:([\d]+))?/; + var regex2 = /([/\w\.-]*)+\(([\d]+),([\d]+)\)/; + var container = createDocumentFragment(); + + while (string) { + var linkString = regex1.exec(string) || regex2.exec(string); + if (!linkString) + break; + + var text = linkString[0]; + var path = linkString[1]; + var lineNumber = parseInt(linkString[2], 10) - 1 || 0; + var columnNumber = parseInt(linkString[3], 10) - 1 || 0; + + var uiSourceCode = Workspace.workspace.uiSourceCodes().find(uisc => uisc.url().endsWith(path)); + var linkIndex = string.indexOf(text); + var nonLink = string.substring(0, linkIndex); + container.appendChild(createTextNode(nonLink)); + + if (uiSourceCode) { + container.appendChild(Components.Linkifier.linkifyURL( + uiSourceCode.url(), + {text, lineNumber, columnNumber, maxLengh: Number.MAX_VALUE, className: 'terminal-link'})); + } else { + container.appendChild(createTextNode(text)); + } + string = string.substring(linkIndex + text.length); + } + + if (string) + container.appendChild(createTextNode(string)); + return container; } /** @@ -110,19 +141,9 @@ Terminal.TerminalWidget = class extends UI.VBox { } var nextNode = node.nextSibling; node.remove(); - var linkified = Components.linkifyStringAsFragmentWithCustomLinkifier(node.textContent, this._linkifyFunction); + var linkified = this._linkifyText(node.textContent); line.insertBefore(linkified, nextNode); node = nextNode; } } - - /** - * @param {string} title - * @param {string} url - * @param {number=} lineNumber - * @param {number=} columnNumber - */ - _linkifyURL(title, url, lineNumber, columnNumber) { - return this._linkifier.linkifyScriptLocation(null, null, url, lineNumber || 0, columnNumber || 0); - } }; diff --git a/front_end/terminal/terminal.css b/front_end/terminal/terminal.css index 502b2c3d26..17fa5a91ef 100644 --- a/front_end/terminal/terminal.css +++ b/front_end/terminal/terminal.css @@ -12,10 +12,6 @@ white-space: nowrap; } -.terminal:focus .terminal-cursor { - background-color: #fafafa; -} - .terminal-error-message { display: flex; align-items: center; @@ -30,11 +26,12 @@ padding-right: 10px; } -.devtools-link { +.terminal-link { color: inherit; text-decoration: inherit; } -.devtools-link:hover { +.terminal-link:hover { text-decoration: underline; + cursor: pointer; } diff --git a/front_end/text_editor/CodeMirrorTextEditor.js b/front_end/text_editor/CodeMirrorTextEditor.js index 2d04f0837f..eb243c3c70 100644 --- a/front_end/text_editor/CodeMirrorTextEditor.js +++ b/front_end/text_editor/CodeMirrorTextEditor.js @@ -904,7 +904,7 @@ TextEditor.CodeMirrorTextEditor = class extends UI.VBox { if (decoration.element !== element) return; this._codeMirror.removeLineWidget(decoration.widget); - this._decorations.remove(lineNumber, decoration); + this._decorations.delete(lineNumber, decoration); } } diff --git a/front_end/timeline/ExtensionTracingSession.js b/front_end/timeline/ExtensionTracingSession.js index 22aa0a8bff..fffe10f746 100644 --- a/front_end/timeline/ExtensionTracingSession.js +++ b/front_end/timeline/ExtensionTracingSession.js @@ -40,9 +40,8 @@ Timeline.ExtensionTracingSession = class { /** * @override * @param {?SDK.TracingModel} tracingModel - * @param {?Bindings.TempFileBackingStorage} storage */ - loadingComplete(tracingModel, storage) { + loadingComplete(tracingModel) { if (!tracingModel) return; this._performanceModel.addExtensionEvents(this._provider.longDisplayName(), tracingModel, this._timeOffset); diff --git a/front_end/timeline/PerformanceModel.js b/front_end/timeline/PerformanceModel.js index 90bffefd09..e9139e4d8c 100644 --- a/front_end/timeline/PerformanceModel.js +++ b/front_end/timeline/PerformanceModel.js @@ -136,9 +136,9 @@ Timeline.PerformanceModel = class extends Common.Object { dispose() { if (this._tracingModel) - this._tracingModel.reset(); + this._tracingModel.dispose(); for (var extensionEntry of this._extensionTracingModels) - extensionEntry.model.reset(); + extensionEntry.model.dispose(); } /** @@ -151,6 +151,15 @@ Timeline.PerformanceModel = class extends Common.Object { var filmStripFrame = this._filmStripModel.frameByTimestamp(screenshotTime); return filmStripFrame && filmStripFrame.timestamp - frame.endTime < 10 ? filmStripFrame : null; } + + /** + * @param {!Common.OutputStream} stream + * @param {!Bindings.OutputStreamDelegate} delegate + */ + save(stream, delegate) { + var backingStorage = /** @type {!Bindings.TempFileBackingStorage} */ (this._tracingModel.backingStorage()); + backingStorage.writeToStream(stream, delegate); + } }; /** diff --git a/front_end/timeline/TimelineController.js b/front_end/timeline/TimelineController.js index da89f8c29d..2984dcb3ce 100644 --- a/front_end/timeline/TimelineController.js +++ b/front_end/timeline/TimelineController.js @@ -18,8 +18,8 @@ Timeline.TimelineController = class { this._performanceModel = performanceModel; this._client = client; - this._tracingModelBackingStorage = new Bindings.TempFileBackingStorage('tracing'); - this._tracingModel = new SDK.TracingModel(this._tracingModelBackingStorage); + var backingStorage = new Bindings.TempFileBackingStorage('tracing'); + this._tracingModel = new SDK.TracingModel(backingStorage); this._performanceModel.setMainTarget(tracingManager.target()); @@ -200,7 +200,7 @@ Timeline.TimelineController = class { _finalizeTrace() { this._injectCpuProfileEvents(); this._tracingModel.tracingComplete(); - this._client.loadingComplete(this._tracingModel, this._tracingModelBackingStorage); + this._client.loadingComplete(this._tracingModel); } /** diff --git a/front_end/timeline/TimelineLoader.js b/front_end/timeline/TimelineLoader.js index 6b992bcdb0..515895465a 100644 --- a/front_end/timeline/TimelineLoader.js +++ b/front_end/timeline/TimelineLoader.js @@ -66,7 +66,7 @@ Timeline.TimelineLoader = class { cancel() { this._tracingModel = null; this._backingStorage.reset(); - this._client.loadingComplete(null, null); + this._client.loadingComplete(null); this._client = null; if (this._canceledCallback) this._canceledCallback(); @@ -195,7 +195,7 @@ Timeline.TimelineLoader = class { this._buffer = ''; } this._tracingModel.tracingComplete(); - this._client.loadingComplete(this._tracingModel, this._backingStorage); + this._client.loadingComplete(this._tracingModel); } /** @@ -274,9 +274,8 @@ Timeline.TimelineLoader.Client.prototype = { /** * @param {?SDK.TracingModel} tracingModel - * @param {?Bindings.TempFileBackingStorage} backingStorage */ - loadingComplete(tracingModel, backingStorage) {}, + loadingComplete(tracingModel) {}, }; /** diff --git a/front_end/timeline/TimelinePanel.js b/front_end/timeline/TimelinePanel.js index f13de1eb17..9649e8f5cf 100644 --- a/front_end/timeline/TimelinePanel.js +++ b/front_end/timeline/TimelinePanel.js @@ -348,31 +348,26 @@ Timeline.TimelinePanel = class extends UI.Panel { contextMenu.show(); } - /** - * @return {boolean} - */ _saveToFile() { if (this._state !== Timeline.TimelinePanel.State.Idle) - return true; - if (!this._performanceModel) - return true; + return; + var performanceModel = this._performanceModel; + if (!performanceModel) + return; var now = new Date(); var fileName = 'Profile-' + now.toISO8601Compact() + '.json'; var stream = new Bindings.FileOutputStream(); + stream.open(fileName, callback); /** * @param {boolean} accepted - * @this {Timeline.TimelinePanel} */ function callback(accepted) { if (!accepted) return; - var saver = new Timeline.TracingTimelineSaver(); - this._backingStorage.writeToStream(stream, saver); + performanceModel.save(stream, new Timeline.TracingTimelineSaver()); } - stream.open(fileName, callback.bind(this)); - return true; } async _showHistory() { @@ -792,14 +787,12 @@ Timeline.TimelinePanel = class extends UI.Panel { /** * @override * @param {?SDK.TracingModel} tracingModel - * @param {?Bindings.TempFileBackingStorage} backingStorage */ - loadingComplete(tracingModel, backingStorage) { + loadingComplete(tracingModel) { delete this._loader; this._setState(Timeline.TimelinePanel.State.Idle); var performanceModel = this._pendingPerformanceModel; this._pendingPerformanceModel = null; - this._backingStorage = backingStorage; if (this._statusPane) this._statusPane.hide(); @@ -812,7 +805,6 @@ Timeline.TimelinePanel = class extends UI.Panel { } performanceModel.setTracingModel(tracingModel); - this._backingStorage = backingStorage; this._setModel(performanceModel); if (this._historyManager) this._historyManager.addRecording(performanceModel); @@ -1261,7 +1253,7 @@ Timeline.TimelinePanel.StatusPane = class extends UI.VBox { this._progressLabel = progressLine.createChild('div', 'label'); this._progressBar = progressLine.createChild('div', 'indicator-container').createChild('div', 'indicator'); - this._stopButton = UI.createTextButton(Common.UIString('Stop'), stopCallback); + this._stopButton = UI.createTextButton(Common.UIString('Stop'), stopCallback, '', true); this.contentElement.createChild('div', 'stop-button').appendChild(this._stopButton); } diff --git a/front_end/timeline/module.json b/front_end/timeline/module.json index 854d48c4e6..70b66763e2 100644 --- a/front_end/timeline/module.json +++ b/front_end/timeline/module.json @@ -10,7 +10,7 @@ }, { "type": "setting", - "category": "Profiler", + "category": "Performance", "title": "Hide chrome frame in Layers view", "settingName": "frameViewerHideChromeWindow", "settingType": "boolean", diff --git a/front_end/timeline/timelineStatusDialog.css b/front_end/timeline/timelineStatusDialog.css index 846e7f4d6f..8411fc4f67 100644 --- a/front_end/timeline/timelineStatusDialog.css +++ b/front_end/timeline/timelineStatusDialog.css @@ -7,13 +7,12 @@ .timeline-status-dialog { display: flex; flex-direction: column; - padding: 12px 16px; + padding: 16px 16px 12px 16px; align-self: center; background-color: white; 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; } .status-dialog-line { @@ -52,3 +51,7 @@ height: 100%; align-self: center; } + +.timeline-status-dialog .stop-button button { + min-width: 80px; +} diff --git a/front_end/timeline_model/TracingLayerTree.js b/front_end/timeline_model/TracingLayerTree.js index 2dec8eda56..3d4d5ca4c8 100644 --- a/front_end/timeline_model/TracingLayerTree.js +++ b/front_end/timeline_model/TracingLayerTree.js @@ -457,10 +457,10 @@ TimelineModel.TracingLayer = class { /** * @override - * @param {function(!Array.)} callback + * @return {!Promise>} */ - requestCompositingReasons(callback) { - callback(this._compositingReasons); + requestCompositingReasons() { + return Promise.resolve(this._compositingReasons); } /** diff --git a/front_end/ui/ReportView.js b/front_end/ui/ReportView.js index bd0806484c..16b63468e1 100644 --- a/front_end/ui/ReportView.js +++ b/front_end/ui/ReportView.js @@ -14,11 +14,21 @@ UI.ReportView = class extends UI.VBox { var contentBox = this.contentElement.createChild('div', 'report-content-box'); this._headerElement = contentBox.createChild('div', 'report-header vbox'); - this._headerElement.createChild('div', 'report-title').textContent = title; + this._titleElement = this._headerElement.createChild('div', 'report-title'); + this._titleElement.textContent = title; this._sectionList = contentBox.createChild('div', 'vbox'); } + /** + * @param {string} title + */ + setTitle(title) { + if (this._titleElement && this._titleElement.textContent === title) + return; + this._titleElement.textContent = title; + } + /** * @param {string} subtitle */ diff --git a/front_end/ui/TabbedPane.js b/front_end/ui/TabbedPane.js index f2377680c3..db8eb31f0d 100644 --- a/front_end/ui/TabbedPane.js +++ b/front_end/ui/TabbedPane.js @@ -1185,10 +1185,10 @@ UI.TabbedPaneTab = class { var contextMenu = new UI.ContextMenu(event); if (this._closeable) { - contextMenu.appendItem(Common.UIString.capitalize('Close'), close.bind(this)); - contextMenu.appendItem(Common.UIString.capitalize('Close ^others'), closeOthers.bind(this)); - contextMenu.appendItem(Common.UIString.capitalize('Close ^tabs to the ^right'), closeToTheRight.bind(this)); - contextMenu.appendItem(Common.UIString.capitalize('Close ^all'), closeAll.bind(this)); + contextMenu.appendItem(Common.UIString('Close'), close.bind(this)); + contextMenu.appendItem(Common.UIString('Close others'), closeOthers.bind(this)); + contextMenu.appendItem(Common.UIString('Close tabs to the right'), closeToTheRight.bind(this)); + contextMenu.appendItem(Common.UIString('Close all'), closeAll.bind(this)); } if (this._delegate) this._delegate.onContextMenu(this.id, contextMenu); diff --git a/front_end/ui/TextPrompt.js b/front_end/ui/TextPrompt.js index fc8404cb0b..8de1500d86 100644 --- a/front_end/ui/TextPrompt.js +++ b/front_end/ui/TextPrompt.js @@ -583,6 +583,9 @@ UI.TextPrompt = class extends Common.Object { if (!node.isSelfOrDescendant(this._element)) return false; + if (this._ghostTextElement.isAncestor(node)) + return true; + if (node.nodeType === Node.TEXT_NODE && selectionRange.startOffset < node.nodeValue.length) return false; diff --git a/front_end/ui/UIUtils.js b/front_end/ui/UIUtils.js index f165b66f4e..6f458e91aa 100644 --- a/front_end/ui/UIUtils.js +++ b/front_end/ui/UIUtils.js @@ -630,14 +630,14 @@ UI.formatLocalized = function(format, substitutions) { * @return {string} */ UI.openLinkExternallyLabel = function() { - return Common.UIString.capitalize('Open in ^new ^tab'); + return Common.UIString('Open in new tab'); }; /** * @return {string} */ UI.copyLinkAddressLabel = function() { - return Common.UIString.capitalize('Copy ^link ^address'); + return Common.UIString('Copy link address'); }; /** diff --git a/front_end/ui/View.js b/front_end/ui/View.js index 3a7ce3ef9b..d09ea7ad78 100644 --- a/front_end/ui/View.js +++ b/front_end/ui/View.js @@ -35,7 +35,9 @@ UI.View.prototype = { /** * @return {!Promise} */ - widget() {} + widget() {}, + + disposeView() {} }; UI.View._symbol = Symbol('view'); @@ -126,6 +128,12 @@ UI.SimpleView = class extends UI.VBox { revealView() { return UI.viewManager.revealView(this); } + + /** + * @override + */ + disposeView() { + } }; /** @@ -192,13 +200,23 @@ UI.ProvidedView = class { * @override * @return {!Promise} */ - widget() { - return this._extension.instance().then(widget => { - if (!(widget instanceof UI.Widget)) - throw new Error('view className should point to a UI.Widget'); - widget[UI.View._symbol] = this; - return /** @type {!UI.Widget} */ (widget); - }); + async widget() { + this._widgetRequested = true; + var widget = await this._extension.instance(); + if (!(widget instanceof UI.Widget)) + throw new Error('view className should point to a UI.Widget'); + widget[UI.View._symbol] = this; + return /** @type {!UI.Widget} */ (widget); + } + + /** + * @override + */ + async disposeView() { + if (!this._widgetRequested) + return; + var widget = await this.widget(); + widget.ownerViewDisposed(); } }; @@ -772,6 +790,7 @@ UI.ViewManager._TabbedLocation = class extends UI.ViewManager._Location { delete tabs[id]; this._closeableTabSetting.set(tabs); } + this._views.get(id).disposeView(); } _persistTabOrder() { diff --git a/front_end/ui/Widget.js b/front_end/ui/Widget.js index 57fe8d8f0f..bebcb0ed5b 100644 --- a/front_end/ui/Widget.js +++ b/front_end/ui/Widget.js @@ -188,13 +188,6 @@ UI.Widget = class extends Common.Object { this._callOnVisibleChildren(this._processWasShown); } - _processWasDetachedFromHierarchy() { - this._notify(this.wasDetachedFromHierarchy); - var copy = this._children.slice(); - for (var widget of copy) - widget._processWasDetachedFromHierarchy(); - } - _processWillHide() { if (this._inNotification()) return; @@ -236,15 +229,15 @@ UI.Widget = class extends Common.Object { willHide() { } - wasDetachedFromHierarchy() { - } - onResize() { } onLayout() { } + ownerViewDisposed() { + } + /** * @param {!Element} parentElement * @param {?Node=} insertBefore @@ -379,7 +372,6 @@ UI.Widget = class extends Common.Object { this._parentWidget._defaultFocusedChild = null; this._parentWidget.childWasDetached(this); this._parentWidget = null; - this._processWasDetachedFromHierarchy(); } else { UI.Widget.__assert(this._isRoot, 'Removing non-root widget from DOM'); } diff --git a/front_end/ui/treeoutline.js b/front_end/ui/treeoutline.js index 4fafc448cb..43e5444f4b 100644 --- a/front_end/ui/treeoutline.js +++ b/front_end/ui/treeoutline.js @@ -1008,13 +1008,15 @@ UI.TreeElement = class { select(omitFocus, selectedByUser) { if (!this.treeOutline || !this.selectable || this.selected) return false; - - if (this.treeOutline.selectedTreeElement) - this.treeOutline.selectedTreeElement.deselect(); + // Wait to deselect this element so that focus only changes once + var lastSelected = this.treeOutline.selectedTreeElement; this.treeOutline.selectedTreeElement = null; - if (this.treeOutline._rootElement === this) + if (this.treeOutline._rootElement === this) { + if (lastSelected) + lastSelected.deselect(); return false; + } this.selected = true; @@ -1026,6 +1028,8 @@ UI.TreeElement = class { this._listItemNode.classList.add('selected'); this.treeOutline.dispatchEventToListeners(UI.TreeOutline.Events.ElementSelected, this); + if (lastSelected) + lastSelected.deselect(); return this.onselect(selectedByUser); } diff --git a/front_end/workspace/UISourceCode.js b/front_end/workspace/UISourceCode.js index 4d88c33162..3e59064f00 100644 --- a/front_end/workspace/UISourceCode.js +++ b/front_end/workspace/UISourceCode.js @@ -499,24 +499,13 @@ Workspace.UISourceCode = class extends Common.Object { * @param {string} query * @param {boolean} caseSensitive * @param {boolean} isRegex - * @param {function(!Array.)} callback + * @return {!Promise>} */ - searchInContent(query, caseSensitive, isRegex, callback) { + searchInContent(query, caseSensitive, isRegex) { var content = this.content(); - if (!content) { - this._project.searchInFileContent(this, query, caseSensitive, isRegex, callback); - return; - } - - // searchInContent should call back later. - setTimeout(doSearch.bind(null, content), 0); - - /** - * @param {string} content - */ - function doSearch(content) { - callback(Common.ContentProvider.performSearchInContent(content, query, caseSensitive, isRegex)); - } + if (!content) + return this._project.searchInFileContent(this, query, caseSensitive, isRegex); + return Promise.resolve(Common.ContentProvider.performSearchInContent(content, query, caseSensitive, isRegex)); } /** @@ -616,7 +605,7 @@ Workspace.UISourceCode = class extends Common.Object { if (!this._decorations) return; var markers = this._decorations.get(type); - this._decorations.removeAll(type); + this._decorations.deleteAll(type); markers.forEach(marker => { this.dispatchEventToListeners(Workspace.UISourceCode.Events.LineDecorationRemoved, marker); }); @@ -803,10 +792,10 @@ Workspace.Revision = class { * @param {string} query * @param {boolean} caseSensitive * @param {boolean} isRegex - * @param {function(!Array.)} callback + * @return {!Promise>} */ - searchInContent(query, caseSensitive, isRegex, callback) { - callback([]); + searchInContent(query, caseSensitive, isRegex) { + return Promise.resolve([]); } }; diff --git a/front_end/workspace/Workspace.js b/front_end/workspace/Workspace.js index 04d31ea387..85145c8f2b 100644 --- a/front_end/workspace/Workspace.js +++ b/front_end/workspace/Workspace.js @@ -164,17 +164,17 @@ Workspace.Project.prototype = { * @param {string} query * @param {boolean} caseSensitive * @param {boolean} isRegex - * @param {function(!Array.)} callback + * @return {!Promise>} */ - searchInFileContent(uiSourceCode, query, caseSensitive, isRegex, callback) {}, + searchInFileContent(uiSourceCode, query, caseSensitive, isRegex) {}, /** * @param {!Workspace.ProjectSearchConfig} searchConfig * @param {!Array.} filesMathingFileQuery * @param {!Common.Progress} progress - * @param {function(!Array.)} callback + * @return {!Promise>} */ - findFilesMatchingSearchRequest(searchConfig, filesMathingFileQuery, progress, callback) {}, + findFilesMatchingSearchRequest(searchConfig, filesMathingFileQuery, progress) {}, /** * @param {!Common.Progress} progress diff --git a/front_end/workspace_diff/WorkspaceDiff.js b/front_end/workspace_diff/WorkspaceDiff.js index dcda6053a0..3d40fd14e8 100644 --- a/front_end/workspace_diff/WorkspaceDiff.js +++ b/front_end/workspace_diff/WorkspaceDiff.js @@ -89,8 +89,7 @@ WorkspaceDiff.WorkspaceDiff = class extends Common.Object { */ _uiSourceCodeRemoved(event) { var uiSourceCode = /** @type {!Workspace.UISourceCode} */ (event.data); - this._loadingUISourceCodes.delete(uiSourceCode); - this._markAsUnmodified(uiSourceCode); + this._removeUISourceCode(uiSourceCode); } /** @@ -98,10 +97,19 @@ WorkspaceDiff.WorkspaceDiff = class extends Common.Object { */ _projectRemoved(event) { var project = /** @type {!Workspace.Project} */ (event.data); - for (var uiSourceCode of project.uiSourceCodes()) { - this._loadingUISourceCodes.delete(uiSourceCode); - this._markAsUnmodified(uiSourceCode); - } + for (var uiSourceCode of project.uiSourceCodes()) + this._removeUISourceCode(uiSourceCode); + } + + /** + * @param {!Workspace.UISourceCode} uiSourceCode + */ + _removeUISourceCode(uiSourceCode) { + this._loadingUISourceCodes.delete(uiSourceCode); + var uiSourceCodeDiff = this._uiSourceCodeDiffs.get(uiSourceCode); + if (uiSourceCodeDiff) + uiSourceCodeDiff._dispose = true; + this._markAsUnmodified(uiSourceCode); } /** @@ -171,6 +179,7 @@ WorkspaceDiff.WorkspaceDiff.UISourceCodeDiff = class extends Common.Object { uiSourceCode.addEventListener(Workspace.UISourceCode.Events.WorkingCopyCommitted, this._uiSourceCodeChanged, this); this._requestDiffPromise = null; this._pendingChanges = null; + this._dispose = false; } _uiSourceCodeChanged() { @@ -188,6 +197,8 @@ WorkspaceDiff.WorkspaceDiff.UISourceCodeDiff = class extends Common.Object { * @this {WorkspaceDiff.WorkspaceDiff.UISourceCodeDiff} */ function emitDiffChanged() { + if (this._dispose) + return; this.dispatchEventToListeners(WorkspaceDiff.Events.DiffChanged); this._pendingChanges = null; } @@ -206,10 +217,21 @@ WorkspaceDiff.WorkspaceDiff.UISourceCodeDiff = class extends Common.Object { * @return {!Promise} */ async _innerRequestDiff() { + if (this._dispose) + return null; + var current = this._uiSourceCode.workingCopy(); if (!current && !this._uiSourceCode.contentLoaded()) current = await this._uiSourceCode.requestContent(); + // ------------ ASYNC ------------ + if (this._dispose) + return null; + var baseline = await this._uiSourceCode.requestOriginalContent(); + // ------------ ASYNC ------------ + if (this._dispose) + return null; + if (current === null || baseline === null) return null; return Diff.Diff.lineDiff(baseline.split('\n'), current.split('\n')); diff --git a/package.json b/package.json index 39549c2631..af41be8094 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,8 @@ "closure": "python scripts/compile_frontend.py", "setup-dtrun": "cd scripts/devtools_run && npm link", "format-py": "yapf --exclude scripts/build/rjsmin.py -i --recursive scripts PRESUBMIT.py", - "extract": "node scripts/extract_module/extract_module.js" + "extract": "node scripts/extract_module/extract_module.js", + "check-gn": "node scripts/check_gn.js" }, "repository": { "type": "git", diff --git a/scripts/check_gn.js b/scripts/check_gn.js new file mode 100644 index 0000000000..e942126a82 --- /dev/null +++ b/scripts/check_gn.js @@ -0,0 +1,66 @@ +// 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. +'use strict'; + +const fs = require('fs'); +const path = require('path'); + +const inspectorManifest = require('../front_end/inspector.json'); +const utils = require('./utils'); + +const gnPath = path.resolve(__dirname, '..', 'BUILD.gn'); +const gnFile = fs.readFileSync(gnPath, 'utf-8'); +const gnLines = gnFile.split('\n'); + +function main() { + let errors = []; + errors = errors.concat(checkNonAutostartNonRemoteModules()); + if (errors.length) { + console.log('DevTools BUILD.gn checker detected errors!'); + console.log(`There's an issue with: ${gnPath}`); + console.log(errors.join('\n')); + process.exit(1); + } + console.log('DevTools BUILD.gn checker passed'); +} + +main(); + +function checkNonAutostartNonRemoteModules() { + const errors = []; + const gnVariable = 'generated_non_autostart_non_remote_modules'; + const lines = selectGNLines(`${gnVariable} = [`, ']'); + if (!lines.length) { + return [ + 'Could not identify non-autostart non-remote modules in gn file', + 'Please look at: ' + __filename, + ]; + } + const text = lines.join('\n'); + const modules = inspectorManifest.modules.filter(m => m.type !== 'autostart' && m.type !== 'remote').map(m => m.name); + + const missingModules = modules.filter(m => !utils.includes(text, `${m}/${m}_module.js`)); + if (missingModules.length) + errors.push(`Check that you've included [${missingModules.join(', ')}] modules in: ` + gnVariable); + + // e.g. "$resources_out_dir/audits/audits_module.js" => "audits" + const mapLineToModuleName = line => line.split('/')[2].split('_module')[0]; + + const extraneousModules = lines.map(mapLineToModuleName).filter(module => !utils.includes(modules, module)); + if (extraneousModules.length) + errors.push(`Found extraneous modules [${extraneousModules.join(', ')}] in: ` + gnVariable); + + return errors; +} + +function selectGNLines(startLine, endLine) { + let lines = gnLines.map(line => line.trim()); + let startIndex = lines.indexOf(startLine); + if (startIndex === -1) + return []; + let endIndex = lines.indexOf(endLine, startIndex); + if (endIndex === -1) + return []; + return lines.slice(startIndex + 1, endIndex); +} diff --git a/scripts/extract_module/extract_module.js b/scripts/extract_module/extract_module.js index f63f40f8c9..9cb78c379a 100644 --- a/scripts/extract_module/extract_module.js +++ b/scripts/extract_module/extract_module.js @@ -39,9 +39,8 @@ const MODULES_TO_REMOVE = []; * If moving to an existing module: * {file: 'ui/SomeFile.js', existing: 'common'} */ -const JS_FILES_MAPPING = [ - {file: 'mobile_throttling/NetworkPriorities.js', new: 'network_priorities'}, -]; +const JS_FILES_MAPPING = + [{file: 'common/FormatterWorkerPool.js', new: 'formatter'}, {file: 'sources/ScriptFormatter.js', new: 'formatter'}]; /** * List all new modules here: @@ -53,9 +52,9 @@ const JS_FILES_MAPPING = [ * } */ const MODULE_MAPPING = { - network_priorities: { - dependencies: ['protocol', 'common'], - dependents: ['network', 'timeline'], + formatter: { + dependencies: ['common'], + dependents: ['sources', 'audits', 'network', 'sass'], applications: ['inspector.json'], autostart: false, },