Changeset 90014 in webkit


Ignore:
Timestamp:
Jun 29, 2011 6:58:09 AM (13 years ago)
Author:
pfeldman@chromium.org
Message:

2011-06-29 Pavel Feldman <​pfeldman@google.com>

Reviewed by Yury Semikhatsky.

Web Inspector: create status bar buttons programmatically. Add "Inspect" button to all panels.
​https://bugs.webkit.org/show_bug.cgi?id=63450

Buttons should be created in code, not in HTML. Also making Inspect Element
action available on all panels (as an experiment).

  • inspector/front-end/ConsoleView.js: (WebInspector.ConsoleView.prototype.show): (WebInspector.ConsoleView.prototype.hide):
  • inspector/front-end/ElementsPanel.js: (WebInspector.ElementsPanel): (WebInspector.ElementsPanel.prototype.get statusBarItems): (WebInspector.ElementsPanel.prototype.updateFocusedNode): (WebInspector.ElementsPanel.prototype._setSearchingForNode): (WebInspector.ElementsPanel.prototype.toggleSearchingForNode):
  • inspector/front-end/inspector.css: (button.dock-status-bar-item.status-bar-item .glyph): (button.dock-status-bar-item.status-bar-item.toggled-on .glyph): (.console-status-bar-item .glyph):
  • inspector/front-end/inspector.html:
  • inspector/front-end/inspector.js: (WebInspector._createGlobalStatusBarItems): (WebInspector.set attached):
Location:
trunk/Source/WebCore
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebCore/ChangeLog

    r90013 r90014  
     12011-06-29  Pavel Feldman  <pfeldman@google.com>
     2
     3        Reviewed by Yury Semikhatsky.
     4
     5        Web Inspector: create status bar buttons programmatically. Add "Inspect" button to all panels.
     6        https://bugs.webkit.org/show_bug.cgi?id=63450
     7
     8        Buttons should be created in code, not in HTML. Also making Inspect Element
     9        action available on all panels (as an experiment).
     10
     11        * inspector/front-end/ConsoleView.js:
     12        (WebInspector.ConsoleView.prototype.show):
     13        (WebInspector.ConsoleView.prototype.hide):
     14        * inspector/front-end/ElementsPanel.js:
     15        (WebInspector.ElementsPanel):
     16        (WebInspector.ElementsPanel.prototype.get statusBarItems):
     17        (WebInspector.ElementsPanel.prototype.updateFocusedNode):
     18        (WebInspector.ElementsPanel.prototype._setSearchingForNode):
     19        (WebInspector.ElementsPanel.prototype.toggleSearchingForNode):
     20        * inspector/front-end/inspector.css:
     21        (button.dock-status-bar-item.status-bar-item .glyph):
     22        (button.dock-status-bar-item.status-bar-item.toggled-on .glyph):
     23        (.console-status-bar-item .glyph):
     24        * inspector/front-end/inspector.html:
     25        * inspector/front-end/inspector.js:
     26        (WebInspector._createGlobalStatusBarItems):
     27        (WebInspector.set attached):
     28
    1292011-06-29  Pavel Feldman  <pfeldman@google.com>
    230

  • trunk/Source/WebCore/inspector/front-end/ConsoleView.js

    r89938 r90014  
    5555    this.currentGroup = this.topGroup;
    5656
    57     this.toggleConsoleButton = document.getElementById("console-status-bar-item");
    58     this.toggleConsoleButton.title = WebInspector.UIString("Show console.");
     57    this.toggleConsoleButton = new WebInspector.StatusBarButton(WebInspector.UIString("Show console."), "console-status-bar-item");
    5958    this.toggleConsoleButton.addEventListener("click", this._toggleConsoleButtonClicked.bind(this), false);
    6059
    … …  
    246245    show: function()
    247246    {
    248         this.toggleConsoleButton.addStyleClass("toggled-on");
     247        this.toggleConsoleButton.toggled = true;
    249248        this.toggleConsoleButton.title = WebInspector.UIString("Hide console.");
    250249        if (!this.prompt.isCaretInsidePrompt())
    … …  
    259258    hide: function()
    260259    {
    261         this.toggleConsoleButton.removeStyleClass("toggled-on");
     260        this.toggleConsoleButton.toggled = false;
    262261        this.toggleConsoleButton.title = WebInspector.UIString("Show console.");
    263262    },

  • trunk/Source/WebCore/inspector/front-end/ElementsPanel.js

    r89804 r90014  
    108108    this.sidebarResizeElement.addEventListener("mousedown", this.rightSidebarResizerDragStart.bind(this), false);
    109109
    110     this._nodeSearchButton = new WebInspector.StatusBarButton(WebInspector.UIString("Select an element in the page to inspect it."), "node-search-status-bar-item");
    111     this._nodeSearchButton.addEventListener("click", this.toggleSearchingForNode.bind(this), false);
     110    this.nodeSearchButton = new WebInspector.StatusBarButton(WebInspector.UIString("Select an element in the page to inspect it."), "node-search-status-bar-item");
     111    this.nodeSearchButton.addEventListener("click", this.toggleSearchingForNode.bind(this), false);
    112112
    113113    this.element.appendChild(this.contentElement);
    … …  
    135135    get statusBarItems()
    136136    {
    137         return [this._nodeSearchButton.element, this.crumbsElement];
     137        return [this.crumbsElement];
    138138    },
    139139
    … …  
    11391139
    11401140        this.focusedDOMNode = node;
    1141         if (this._nodeSearchButton.toggled) {
     1141        if (this.nodeSearchButton.toggled) {
    11421142            InspectorFrontendHost.bringToFront();
    1143             this._nodeSearchButton.toggled = false;
     1143            this.nodeSearchButton.toggled = false;
    11441144        }
    11451145    },
    … …  
    11471147    _setSearchingForNode: function(enabled)
    11481148    {
    1149         this._nodeSearchButton.toggled = enabled;
     1149        this.nodeSearchButton.toggled = enabled;
    11501150    },
    11511151
    … …  
    11571157    toggleSearchingForNode: function()
    11581158    {
    1159         this.setSearchingForNode(!this._nodeSearchButton.toggled);
     1159        this.setSearchingForNode(!this.nodeSearchButton.toggled);
    11601160    },
    11611161

  • trunk/Source/WebCore/inspector/front-end/inspector.css

    r89911 r90014  
    549549}
    550550
    551 #dock-status-bar-item .glyph {
     551
     552button.dock-status-bar-item.status-bar-item .glyph {
    552553    -webkit-mask-position: 0 -48px;
    553554}
    554555
    555 body.detached #dock-status-bar-item .glyph {
     556button.dock-status-bar-item.status-bar-item.toggled-on .glyph {
    556557    -webkit-mask-position: -32px -24px;
     558    background-color: rgba(0, 0, 0, 0.75);
    557559}
    558560
    … …  
    561563}
    562564
    563 #console-status-bar-item .glyph {
     565.console-status-bar-item .glyph {
    564566    -webkit-mask-position: -64px -24px;
    565567}

  • trunk/Source/WebCore/inspector/front-end/inspector.html

    r89577 r90014  
    181181    <div id="main">
    182182        <div id="main-panels" spellcheck="false"></div>
    183         <div id="main-status-bar" class="status-bar"><div id="anchored-status-bar-items"><button id="dock-status-bar-item" class="status-bar-item"><div class="glyph"></div><div class="glyph shadow"></div></button><button id="console-status-bar-item" class="status-bar-item"><div class="glyph"></div><div class="glyph shadow"></div></button><div id="counters"><div id="error-warning-count" class="hidden"></div></div></div></div>
     183        <div id="main-status-bar" class="status-bar"><div id="anchored-status-bar-items"><div id="counters"><div id="error-warning-count" class="hidden"></div></div></div></div>
    184184    </div>
    185185    <div id="drawer">

  • trunk/Source/WebCore/inspector/front-end/inspector.js

    r89938 r90014  
    178178    },
    179179
     180    _createGlobalStatusBarItems: function()
     181    {
     182        this._dockToggleButton = new WebInspector.StatusBarButton(this._dockButtonTitle(), "dock-status-bar-item");
     183        this._dockToggleButton.addEventListener("click", this.toggleAttach.bind(this), false);
     184        this._dockToggleButton.toggled = !this.attached;
     185
     186        var anchoredStatusBar = document.getElementById("anchored-status-bar-items");
     187        anchoredStatusBar.appendChild(this._dockToggleButton.element);
     188        anchoredStatusBar.appendChild(this.console.toggleConsoleButton.element);
     189        if (this.panels.elements)
     190            anchoredStatusBar.appendChild(this.panels.elements.nodeSearchButton.element);
     191    },
     192
     193    _dockButtonTitle: function()
     194    {
     195        return this.attached ? WebInspector.UIString("Undock into separate window.") : WebInspector.UIString("Dock to main window.");
     196    },
     197
    180198    get attached()
    181199    {
    … …  
    190208        this._attached = x;
    191209
    192         var dockToggleButton = document.getElementById("dock-status-bar-item");
    193210        var body = document.body;
    194211
    … …  
    196213            body.removeStyleClass("detached");
    197214            body.addStyleClass("attached");
    198             dockToggleButton.title = WebInspector.UIString("Undock into separate window.");
    199215        } else {
    200216            body.removeStyleClass("attached");
    201217            body.addStyleClass("detached");
    202             dockToggleButton.title = WebInspector.UIString("Dock to main window.");
     218        }
     219
     220        if (this._dockToggleButton) {
     221            this._dockToggleButton.title = this._dockButtonTitle();
     222            this._dockToggleButton.toggled = !x;
    203223        }
    204224
    … …  
    448468    this.panels = {};
    449469    this._createPanels();
     470    this._createGlobalStatusBarItems();
     471
    450472    this._panelHistory = new WebInspector.PanelHistory();
    451473    this.toolbar = new WebInspector.Toolbar();
    … …  
    473495    document.addEventListener("copy", this.documentCopy.bind(this), true);
    474496    document.addEventListener("contextmenu", this.contextMenuEventFired.bind(this), true);
    475 
    476     var dockToggleButton = document.getElementById("dock-status-bar-item");
    477     dockToggleButton.addEventListener("click", this.toggleAttach.bind(this), false);
    478 
    479     if (this.attached)
    480         dockToggleButton.title = WebInspector.UIString("Undock into separate window.");
    481     else
    482         dockToggleButton.title = WebInspector.UIString("Dock to main window.");
    483497
    484498    var errorWarningCount = document.getElementById("error-warning-count");
Note: See TracChangeset for help on using the changeset viewer.