⚠ Archived content — this site is no longer maintained.   Current WebKit documentation is at docs.webkit.org.

Changeset 243214 in webkit


Ignore:
Timestamp:
Mar 20, 2019, 10:45:02 AM (7 years ago)
Author:
Devin Rousso
Message:

Web Inspector: DOM: selecting a node in a different frame should automatically switch the console prompt's execution context
​https://bugs.webkit.org/show_bug.cgi?id=195805
<rdar://problem/48930866>

Reviewed by Timothy Hatcher.

Add an "Auto" execution context item that is selected by default and will update the
selected execution context whenever the inspected node changes. It will also display the
preferred name for whatever execution context is currently active.

  • UserInterface/Views/QuickConsole.js:

(WI.QuickConsole):
(WI.QuickConsole.prototype.initializeMainExecutionContextPathComponent):
(WI.QuickConsole.prototype._preferredNameForFrame): Added.
(WI.QuickConsole.prototype._selectExecutionContext): Added.
(WI.QuickConsole.prototype._executionContextPathComponentsToDisplay):
(WI.QuickConsole.prototype._rebuildExecutionContextPathComponents):
(WI.QuickConsole.prototype._framePageExecutionContextsChanged):
(WI.QuickConsole.prototype._frameExecutionContextsCleared):
(WI.QuickConsole.prototype._activeExecutionContextChanged):
(WI.QuickConsole.prototype._createExecutionContextPathComponent):
(WI.QuickConsole.prototype._insertOtherExecutionContextPathComponent):
(WI.QuickConsole.prototype._removeOtherExecutionContextPathComponent):
(WI.QuickConsole.prototype._insertExecutionContextPathComponentForFrame):
(WI.QuickConsole.prototype._removeExecutionContextPathComponentForFrame):
(WI.QuickConsole.prototype._targetRemoved):
(WI.QuickConsole.prototype._pathComponentSelected):
(WI.QuickConsole.prototype._handleInspectedNodeChanged): Added.
(WI.QuickConsole.prototype.get selectedExecutionContext): Deleted.
(WI.QuickConsole.prototype.set selectedExecutionContext): Deleted.
(WI.QuickConsole.prototype._createExecutionContextPathComponentFromFrame): Deleted.

  • UserInterface/Views/QuickConsole.css:

(.quick-console > .navigation-bar > .hierarchical-path:not(.automatic-execution-context)): Added.
(.quick-console > .navigation-bar > .hierarchical-path:not(.automatic-execution-context) .execution-context): Added.
(.quick-console > .navigation-bar > .hierarchical-path:not(.automatic-execution-context) .execution-context .selector-arrows): Added.
(.quick-console > .navigation-bar > .hierarchical-path.non-default-execution-context .execution-context): Deleted.
(.quick-console > .navigation-bar > .hierarchical-path.non-default-execution-context .execution-context .selector-arrows): Deleted.

  • UserInterface/Controllers/DOMManager.js:

(WI.DOMManager.prototype.get inspectedNode): Added.
(WI.DOMManager.prototype.setInspectedNode):
Broadcast when the inspected node changes.

  • UserInterface/Views/NavigationBar.js:

(WI.NavigationBar.prototype.layout):
When sizesToFit is enabled, don't force any items to be hidden.

  • Localizations/en.lproj/localizedStrings.js:
Location:
trunk/Source/WebInspectorUI
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r243213 r243214  
     12019-03-20  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: DOM: selecting a node in a different frame should automatically switch the console prompt's execution context
     4        https://bugs.webkit.org/show_bug.cgi?id=195805
     5        <rdar://problem/48930866>
     6
     7        Reviewed by Timothy Hatcher.
     8
     9        Add an "Auto" execution context item that is selected by default and will update the
     10        selected execution context whenever the inspected node changes. It will also display the
     11        preferred name for whatever execution context is currently active.
     12
     13        * UserInterface/Views/QuickConsole.js:
     14        (WI.QuickConsole):
     15        (WI.QuickConsole.prototype.initializeMainExecutionContextPathComponent):
     16        (WI.QuickConsole.prototype._preferredNameForFrame): Added.
     17        (WI.QuickConsole.prototype._selectExecutionContext): Added.
     18        (WI.QuickConsole.prototype._executionContextPathComponentsToDisplay):
     19        (WI.QuickConsole.prototype._rebuildExecutionContextPathComponents):
     20        (WI.QuickConsole.prototype._framePageExecutionContextsChanged):
     21        (WI.QuickConsole.prototype._frameExecutionContextsCleared):
     22        (WI.QuickConsole.prototype._activeExecutionContextChanged):
     23        (WI.QuickConsole.prototype._createExecutionContextPathComponent):
     24        (WI.QuickConsole.prototype._insertOtherExecutionContextPathComponent):
     25        (WI.QuickConsole.prototype._removeOtherExecutionContextPathComponent):
     26        (WI.QuickConsole.prototype._insertExecutionContextPathComponentForFrame):
     27        (WI.QuickConsole.prototype._removeExecutionContextPathComponentForFrame):
     28        (WI.QuickConsole.prototype._targetRemoved):
     29        (WI.QuickConsole.prototype._pathComponentSelected):
     30        (WI.QuickConsole.prototype._handleInspectedNodeChanged): Added.
     31        (WI.QuickConsole.prototype.get selectedExecutionContext): Deleted.
     32        (WI.QuickConsole.prototype.set selectedExecutionContext): Deleted.
     33        (WI.QuickConsole.prototype._createExecutionContextPathComponentFromFrame): Deleted.
     34        * UserInterface/Views/QuickConsole.css:
     35        (.quick-console > .navigation-bar > .hierarchical-path:not(.automatic-execution-context)): Added.
     36        (.quick-console > .navigation-bar > .hierarchical-path:not(.automatic-execution-context) .execution-context): Added.
     37        (.quick-console > .navigation-bar > .hierarchical-path:not(.automatic-execution-context) .execution-context .selector-arrows): Added.
     38        (.quick-console > .navigation-bar > .hierarchical-path.non-default-execution-context .execution-context): Deleted.
     39        (.quick-console > .navigation-bar > .hierarchical-path.non-default-execution-context .execution-context .selector-arrows): Deleted.
     40
     41        * UserInterface/Controllers/DOMManager.js:
     42        (WI.DOMManager.prototype.get inspectedNode): Added.
     43        (WI.DOMManager.prototype.setInspectedNode):
     44        Broadcast when the inspected node changes.
     45
     46        * UserInterface/Views/NavigationBar.js:
     47        (WI.NavigationBar.prototype.layout):
     48        When `sizesToFit` is enabled, don't force any items to be hidden.
     49
     50        * Localizations/en.lproj/localizedStrings.js:
     51
    1522019-03-20  Devin Rousso  <drousso@apple.com>
    253

  • trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

    r243180 r243214  
    143143localizedStrings["Audits"] = "Audits";
    144144localizedStrings["Author Stylesheet"] = "Author Stylesheet";
     145localizedStrings["Auto"] = "Auto";
     146localizedStrings["Auto - %s"] = "Auto - %s";
    145147localizedStrings["Auto Increment"] = "Auto Increment";
    146148localizedStrings["Automatically continue after evaluating"] = "Automatically continue after evaluating";
    … …  
    438440localizedStrings["Example: \u201C%s\u201D"] = "Example: \u201C%s\u201D";
    439441localizedStrings["Exception with thrown value: %s"] = "Exception with thrown value: %s";
     442localizedStrings["Execution context for $0"] = "Execution context for $0";
    440443localizedStrings["Exited Full-Screen Mode"] = "Exited Full-Screen Mode";
    441444localizedStrings["Exited Low-Power Mode"] = "Exited Low-Power Mode";

  • trunk/Source/WebInspectorUI/UserInterface/Controllers/DOMManager.js

    r243207 r243214  
    7676    // Public
    7777
     78    get inspectedNode() { return this._inspectedNode; }
     79
    7880    get eventListenerBreakpoints()
    7981    {
    … …  
    555557
    556558            this._inspectedNode = node;
     559
     560            this.dispatchEventToListeners(WI.DOMManager.Event.InspectedNodeChanged);
    557561        };
    558562
    … …  
    667671    DOMNodeWasInspected: "dom-manager-dom-node-was-inspected",
    668672    InspectModeStateChanged: "dom-manager-inspect-mode-state-changed",
     673    InspectedNodeChanged: "dom-manager-inspected-node-changed",
    669674};

  • trunk/Source/WebInspectorUI/UserInterface/Views/NavigationBar.js

    r242174 r243214  
    234234        }
    235235
     236        if (this.sizesToFit)
     237            return;
     238
    236239        let visibleNavigationItems = this._visibleNavigationItems;
    237240

  • trunk/Source/WebInspectorUI/UserInterface/Views/QuickConsole.css

    r242118 r243214  
    9898}
    9999
    100 .quick-console > .navigation-bar > .hierarchical-path.non-default-execution-context .execution-context {
     100.quick-console > .navigation-bar > .hierarchical-path:not(.automatic-execution-context) {
     101    -webkit-padding-start: 5px;
     102}
     103
     104.quick-console > .navigation-bar > .hierarchical-path:not(.automatic-execution-context) .execution-context {
    101105    background: var(--selected-background-color);
    102106    border-radius: 3px;
    … …  
    104108}
    105109
    106 .quick-console > .navigation-bar > .hierarchical-path.non-default-execution-context .execution-context .selector-arrows {
     110.quick-console > .navigation-bar > .hierarchical-path:not(.automatic-execution-context) .execution-context .selector-arrows {
    107111    color: var(--selected-foreground-color);
    108112    opacity: 1;

  • trunk/Source/WebInspectorUI/UserInterface/Views/QuickConsole.js

    r238192 r243214  
    3333        this._toggleOrFocusKeyboardShortcut.implicitlyPreventsDefault = false;
    3434
     35        this._automaticExecutionContextPathComponent = this._createExecutionContextPathComponent(null, WI.UIString("Auto"));
     36        this._automaticExecutionContextPathComponent.tooltip = WI.UIString("Execution context for $0");
     37
    3538        this._mainExecutionContextPathComponent = null;
    36         this.initializeMainExecutionContextPathComponent();
    37 
    3839        this._otherExecutionContextPathComponents = [];
     40
    3941        this._frameToPathComponent = new Map;
    4042        this._targetToPathComponent = new Map;
    4143
     44        this._shouldAutomaticallySelectExecutionContext = true;
    4245        this._restoreSelectedExecutionContextForFrame = false;
    4346
    … …  
    6568        this._navigationBar.addNavigationItem(this._executionContextSelectorDivider);
    6669
    67         this._rebuildExecutionContextPathComponents();
     70        this.initializeMainExecutionContextPathComponent();
    6871
    6972        WI.consoleDrawer.toggleButtonShortcutTooltip(this._toggleOrFocusKeyboardShortcut);
    … …  
    8083        WI.targetManager.addEventListener(WI.TargetManager.Event.TargetRemoved, this._targetRemoved, this);
    8184
     85        WI.domManager.addEventListener(WI.DOMManager.Event.InspectedNodeChanged, this._handleInspectedNodeChanged, this);
     86
    8287        WI.TabBrowser.addEventListener(WI.TabBrowser.Event.SelectedTabContentViewDidChange, this._updateStyles, this);
    8388    }
    … …  
    8893    {
    8994        return this._navigationBar;
    90     }
    91 
    92     get selectedExecutionContext()
    93     {
    94         return WI.runtimeManager.activeExecutionContext;
    95     }
    96 
    97     set selectedExecutionContext(executionContext)
    98     {
    99         WI.runtimeManager.activeExecutionContext = executionContext;
    10095    }
    10196
    … …  
    118113
    119114        this._mainExecutionContextPathComponent = this._createExecutionContextPathComponent(WI.mainTarget.executionContext);
     115        this._mainExecutionContextPathComponent.previousSibling = this._automaticExecutionContextPathComponent;
     116
     117        this._automaticExecutionContextPathComponent.nextSibling = this._mainExecutionContextPathComponent;
     118
     119        this._shouldAutomaticallySelectExecutionContext = true;
     120        this._selectExecutionContext(WI.mainTarget.executionContext);
     121        this._rebuildExecutionContextPathComponents();
    120122    }
    121123
    … …  
    131133    // Private
    132134
     135    _preferredNameForFrame(frame)
     136    {
     137        if (frame.name)
     138            return WI.UIString("%s (%s)").format(frame.name, frame.mainResource.displayName);
     139        return frame.mainResource.displayName;
     140    }
     141
     142    _selectExecutionContext(executionContext)
     143    {
     144        let preferredName = null;
     145
     146        let inspectedNode = WI.domManager.inspectedNode;
     147        if (inspectedNode) {
     148            let frame = inspectedNode.ownerDocument.frame;
     149            if (frame) {
     150                if (this._shouldAutomaticallySelectExecutionContext)
     151                    executionContext = frame.pageExecutionContext;
     152
     153                preferredName = this._preferredNameForFrame(frame);
     154            }
     155        }
     156
     157        console.assert(executionContext);
     158        if (!executionContext)
     159            executionContext = WI.mainTarget.executionContext;
     160
     161        WI.runtimeManager.activeExecutionContext = executionContext;
     162
     163        this._automaticExecutionContextPathComponent.displayName = WI.UIString("Auto - %s").format(preferredName || executionContext.name);
     164    }
     165
    133166    _handleMouseDown(event)
    134167    {
    … …  
    150183            return [];
    151184
    152         if (this.selectedExecutionContext === WI.mainTarget.executionContext)
     185        if (this._shouldAutomaticallySelectExecutionContext)
     186            return [this._automaticExecutionContextPathComponent];
     187
     188        if (WI.runtimeManager.activeExecutionContext === WI.mainTarget.executionContext)
    153189            return [this._mainExecutionContextPathComponent];
    154190
    155         return this._otherExecutionContextPathComponents.filter((component) => component.representedObject === this.selectedExecutionContext);
     191        return this._otherExecutionContextPathComponents.filter((component) => component.representedObject === WI.runtimeManager.activeExecutionContext);
    156192    }
    157193
    … …  
    161197        let isEmpty = !components.length;
    162198
     199        this._executionContextSelectorItem.element.classList.toggle("automatic-execution-context", this._shouldAutomaticallySelectExecutionContext);
    163200        this._executionContextSelectorItem.components = components;
    164201
    165202        this._executionContextSelectorItem.hidden = isEmpty;
    166203        this._executionContextSelectorDivider.hidden = isEmpty;
     204
    167205    }
    168206
    … …  
    171209        let frame = event.target;
    172210
    173         let shouldAutomaticallySelect = this._restoreSelectedExecutionContextForFrame === frame;
    174 
    175         let newExecutionContextPathComponent = this._insertExecutionContextPathComponentForFrame(frame, shouldAutomaticallySelect);
    176 
    177         if (shouldAutomaticallySelect) {
     211        let newExecutionContextPathComponent = this._insertExecutionContextPathComponentForFrame(frame);
     212
     213        if (this._restoreSelectedExecutionContextForFrame === frame) {
    178214            this._restoreSelectedExecutionContextForFrame = null;
    179             this.selectedExecutionContext = newExecutionContextPathComponent.representedObject;
     215
     216            this._selectExecutionContext(newExecutionContextPathComponent.representedObject);
    180217        }
    181218    }
    … …  
    188225        if (event.data.committingProvisionalLoad && !this._restoreSelectedExecutionContextForFrame) {
    189226            let executionContextPathComponent = this._frameToPathComponent.get(frame);
    190             if (executionContextPathComponent && executionContextPathComponent.representedObject === this.selectedExecutionContext) {
     227            if (executionContextPathComponent && executionContextPathComponent.representedObject === WI.runtimeManager.activeExecutionContext) {
    191228                this._restoreSelectedExecutionContextForFrame = frame;
    192229                // As a fail safe, if the frame never gets an execution context, clear the restore value.
    193                 setTimeout(() => { this._restoreSelectedExecutionContextForFrame = false; }, 10);
     230                setTimeout(() => {
     231                    this._restoreSelectedExecutionContextForFrame = false;
     232                }, 10);
    194233            }
    195234        }
    … …  
    201240    {
    202241        this._rebuildExecutionContextPathComponents();
    203 
    204         this._executionContextSelectorItem.element.classList.toggle("non-default-execution-context", this.selectedExecutionContext !== WI.mainTarget.executionContext);
    205242    }
    206243
    207244    _createExecutionContextPathComponent(executionContext, preferredName)
    208245    {
    209         console.assert(executionContext instanceof WI.ExecutionContext);
     246        console.assert(!executionContext || executionContext instanceof WI.ExecutionContext);
    210247
    211248        let pathComponent = new WI.HierarchicalPathComponent(preferredName || executionContext.name, "execution-context", executionContext, true, true);
    … …  
    214251        pathComponent.truncatedDisplayNameLength = 50;
    215252        return pathComponent;
    216     }
    217 
    218     _createExecutionContextPathComponentFromFrame(frame)
    219     {
    220         let preferredName = frame.name ? WI.UIString("%s (%s)").format(frame.name, frame.mainResource.displayName) : frame.mainResource.displayName;
    221         return this._createExecutionContextPathComponent(frame.pageExecutionContext, preferredName);
    222253    }
    223254
    … …  
    256287    }
    257288
    258     _insertOtherExecutionContextPathComponent(executionContextPathComponent, skipRebuild)
     289    _insertOtherExecutionContextPathComponent(executionContextPathComponent)
    259290    {
    260291        let index = insertionIndexForObjectInListSortedByFunction(executionContextPathComponent, this._otherExecutionContextPathComponents, this._compareExecutionContextPathComponents);
    … …  
    273304        this._otherExecutionContextPathComponents.splice(index, 0, executionContextPathComponent);
    274305
    275         if (!skipRebuild)
    276             this._rebuildExecutionContextPathComponents();
    277     }
    278 
    279     _removeOtherExecutionContextPathComponent(executionContextPathComponent, skipRebuild)
     306        this._rebuildExecutionContextPathComponents();
     307    }
     308
     309    _removeOtherExecutionContextPathComponent(executionContextPathComponent)
    280310    {
    281311        executionContextPathComponent.removeEventListener(WI.HierarchicalPathComponent.Event.SiblingWasSelected, this._pathComponentSelected, this);
    … …  
    291321        this._otherExecutionContextPathComponents.remove(executionContextPathComponent, true);
    292322
    293         if (!skipRebuild)
    294             this._rebuildExecutionContextPathComponents();
    295     }
    296 
    297     _insertExecutionContextPathComponentForFrame(frame, skipRebuild)
     323        this._rebuildExecutionContextPathComponents();
     324    }
     325
     326    _insertExecutionContextPathComponentForFrame(frame)
    298327    {
    299328        if (frame.isMainFrame())
    300329            return this._mainExecutionContextPathComponent;
    301330
    302         let executionContextPathComponent = this._createExecutionContextPathComponentFromFrame(frame);
    303         this._insertOtherExecutionContextPathComponent(executionContextPathComponent, skipRebuild);
     331        let executionContextPathComponent = this._createExecutionContextPathComponent(frame.pageExecutionContext, this._preferredNameForFrame(frame));
     332        this._insertOtherExecutionContextPathComponent(executionContextPathComponent);
    304333        this._frameToPathComponent.set(frame, executionContextPathComponent);
    305 
    306334        return executionContextPathComponent;
    307335    }
    308336
    309     _removeExecutionContextPathComponentForFrame(frame, skipRebuild)
    310     {
    311         if (frame.isMainFrame())
     337    _removeExecutionContextPathComponentForFrame(frame)
     338    {
     339        if (frame.isMainFrame()) {
     340            this._shouldAutomaticallySelectExecutionContext = true;
    312341            return;
     342        }
    313343
    314344        let executionContextPathComponent = this._frameToPathComponent.take(frame);
    315         this._removeOtherExecutionContextPathComponent(executionContextPathComponent, skipRebuild);
     345        this._removeOtherExecutionContextPathComponent(executionContextPathComponent);
    316346    }
    317347
    … …  
    337367
    338368        let executionContextPathComponent = this._targetToPathComponent.take(target);
     369
     370        if (WI.runtimeManager.activeExecutionContext === executionContextPathComponent.representedObject) {
     371            this._shouldAutomaticallySelectExecutionContext = true;
     372            this._selectExecutionContext();
     373        }
     374
    339375        this._removeOtherExecutionContextPathComponent(executionContextPathComponent);
    340 
    341         if (this.selectedExecutionContext === executionContextPathComponent.representedObject)
    342             this.selectedExecutionContext = WI.mainTarget.executionContext;
    343376    }
    344377
    345378    _pathComponentSelected(event)
    346379    {
    347         let executionContext = event.data.pathComponent.representedObject;
    348         this.selectedExecutionContext = executionContext;
     380        this._shouldAutomaticallySelectExecutionContext = event.data.pathComponent === this._automaticExecutionContextPathComponent;
     381        this._selectExecutionContext(event.data.pathComponent.representedObject);
    349382    }
    350383
    … …  
    374407        this.element.classList.toggle("showing-log", WI.isShowingConsoleTab() || WI.isShowingSplitConsole());
    375408    }
     409
     410    _handleInspectedNodeChanged(event)
     411    {
     412        this._selectExecutionContext(WI.runtimeManager.activeExecutionContext);
     413    }
    376414};
Note: See TracChangeset for help on using the changeset viewer.