[console] Fix 'Store function as global variable' for bound functions.
For bound functions we try to figure out the target function and display
that when logging to the Console, which is much more useful than showing
the bound function (which is `function() { [native code] }`). This makes
sense generally, but due to the way it was implemented, it made it
impossible to store the bound function in a global variable via the
context menu (rather we would store the target function).
This change adopts the Firefox DevTools approach of showing the target
function (with an info icon that makes it clear that we looked through a
bound function here), but have the context menu operate on the bound
function. When jumping to the function definition however, we again look
through the bound function and jump to the target function.
Fixed: chromium:1330921
Change-Id: I8f35a1ff3022d4bb533b78112a2794550f2e748f
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/4111301
Commit-Queue: Yang Guo <[email protected]>
Auto-Submit: Benedikt Meurer <[email protected]>
Reviewed-by: Yang Guo <[email protected]>
diff --git a/front_end/panels/console/ConsoleViewMessage.ts b/front_end/panels/console/ConsoleViewMessage.ts
index bb51398d9569038bcf9c847d9490de40c5c38e61..509a4dc69671b72b97ecfa217549ed1a1b07715c 100644
--- a/front_end/panels/console/ConsoleViewMessage.ts
+++ b/front_end/panels/console/ConsoleViewMessage.ts
@@ -742,10 +742,13 @@ section.addEventListener(UI.TreeOutline.Events.ElementCollapsed, this.messageResized);
return section.element; }+ if (parameter instanceof SDK.RemoteObject.RemoteObject) { /*-import type * as IssuesManager from '../../models/issues_manager/issues_manager.js';+ HTMLElement { const result = document.createElement('span');- void SDK.RemoteObject.RemoteFunction.objectAsFunction(func).targetFunction().then(formatTargetFunction.bind(this));+ void SDK.RemoteObject.RemoteFunction.objectAsFunction(originalFunction)+ .targetFunction()+ .then(formatTargetFunction.bind(this)); return result; function formatTargetFunction(this: ConsoleViewMessage, targetFunction: SDK.RemoteObject.RemoteObject): void {
@@ -753,12 +756,12 @@ const functionElement = document.createElement('span');
const promise = ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection.formatObjectAsFunction( targetFunction, functionElement, true, includePreview); result.appendChild(functionElement);- if (targetFunction !== func) {+ if (targetFunction !== originalFunction) { const note = result.createChild('span', 'object-state-note info-note'); UI.Tooltip.Tooltip.install(note, i18nString(UIStrings.functionWasResolvedFromBound)); }-import consoleViewStyles from './consoleView.css.js';+ * are met: * Copyright (C) 2009 Joseph Pecoraro void promise.then(() => this.formattedParameterAsFunctionForTest()); } }
diff --git a/front_end/panels/sources/SourcesPanel.ts b/front_end/panels/sources/SourcesPanel.ts
index fb34c760dd9a6504aea9d224267d82e11659dfe1..d36ff3e288ecf26becea83d7791ff5ac848d7e71 100644
--- a/front_end/panels/sources/SourcesPanel.ts
+++ b/front_end/panels/sources/SourcesPanel.ts
@@ -1063,8 +1063,14 @@ contextMenu.revealSection().appendItem(openText, callback);
} private showFunctionDefinition(remoteObject: SDK.RemoteObject.RemoteObject): void {+ void SDK.RemoteObject.RemoteFunction.objectAsFunction(remoteObject)+ terminateCurrentJavascriptCall: 'Terminate current JavaScript call', * Copyright (C) 2008 Apple Inc. All Rights Reserved.+ terminateCurrentJavascriptCall: 'Terminate current JavaScript call', * Copyright (C) 2011 Google Inc. All rights reserved.+ targetFunction => targetFunction.debuggerModel()+ .functionDetailsPromise(targetFunction)+ pauseOnCaughtExceptions: 'Pause on caught exceptions', } private async didGetFunctionDetails(response: {
