Changeset 121843 in webkit


Ignore:
Timestamp:
Jul 4, 2012 5:53:48 AM (12 years ago)
Author:
pfeldman@chromium.org
Message:

Web Inspector: "Dock to right" shouldn't be in the settings dialog
​https://bugs.webkit.org/show_bug.cgi?id=76917

Reviewed by Vsevolod Vlasov.

Introduced 'long click-enabled' options for status bar buttons. Made dock/undock one of them.

  • inspector/front-end/Images/statusbarButtonGlyphs.png:
  • inspector/front-end/StatusBarButton.js:

(WebInspector.StatusBarButton.prototype._clicked):
(WebInspector.StatusBarButton.prototype.set visible):
(WebInspector.StatusBarButton.prototype.makeLongClickEnabled.mouseDown):
(WebInspector.StatusBarButton.prototype.makeLongClickEnabled.mouseUp):
(WebInspector.StatusBarButton.prototype.makeLongClickEnabled):
(WebInspector.StatusBarButton.prototype._showOptions.mouseOver):
(WebInspector.StatusBarButton.prototype._showOptions.mouseOut):
(WebInspector.StatusBarButton.prototype._showOptions.mouseUp):
(WebInspector.StatusBarButton.prototype._showOptions):

  • inspector/front-end/UIUtils.js:

(WebInspector.elementDragStart):
(WebInspector.elementDragEnd):
(WebInspector.GlassPane):
(WebInspector.GlassPane.prototype.dispose):

  • inspector/front-end/inspector.css:

(.long-click-glyph):
(.long-click-glyph.shadow):
(button.status-bar-item:active:not(.emulate-inactive), button.status-bar-item.emulate-active):
(.alternate-status-bar-buttons-bar):
(.alternate-status-bar-buttons-bar .status-bar-item):

  • inspector/front-end/inspector.js:

(WebInspector._createGlobalStatusBarItems):
(WebInspector._createDockOptions.onClick.set else):
(WebInspector._createDockOptions.onClick):

Location:
trunk/Source/WebCore
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebCore/ChangeLog

    r121836 r121843  
     12012-07-04  Pavel Feldman  <pfeldman@chromium.org>
     2
     3        Web Inspector: "Dock to right" shouldn't be in the settings dialog
     4        https://bugs.webkit.org/show_bug.cgi?id=76917
     5
     6        Reviewed by Vsevolod Vlasov.
     7
     8        Introduced 'long click-enabled' options for status bar buttons. Made dock/undock one of them.
     9
     10        * inspector/front-end/Images/statusbarButtonGlyphs.png:
     11        * inspector/front-end/StatusBarButton.js:
     12        (WebInspector.StatusBarButton.prototype._clicked):
     13        (WebInspector.StatusBarButton.prototype.set visible):
     14        (WebInspector.StatusBarButton.prototype.makeLongClickEnabled.mouseDown):
     15        (WebInspector.StatusBarButton.prototype.makeLongClickEnabled.mouseUp):
     16        (WebInspector.StatusBarButton.prototype.makeLongClickEnabled):
     17        (WebInspector.StatusBarButton.prototype._showOptions.mouseOver):
     18        (WebInspector.StatusBarButton.prototype._showOptions.mouseOut):
     19        (WebInspector.StatusBarButton.prototype._showOptions.mouseUp):
     20        (WebInspector.StatusBarButton.prototype._showOptions):
     21        * inspector/front-end/UIUtils.js:
     22        (WebInspector.elementDragStart):
     23        (WebInspector.elementDragEnd):
     24        (WebInspector.GlassPane):
     25        (WebInspector.GlassPane.prototype.dispose):
     26        * inspector/front-end/inspector.css:
     27        (.long-click-glyph):
     28        (.long-click-glyph.shadow):
     29        (button.status-bar-item:active:not(.emulate-inactive), button.status-bar-item.emulate-active):
     30        (.alternate-status-bar-buttons-bar):
     31        (.alternate-status-bar-buttons-bar .status-bar-item):
     32        * inspector/front-end/inspector.js:
     33        (WebInspector._createGlobalStatusBarItems):
     34        (WebInspector._createDockOptions.onClick.set else):
     35        (WebInspector._createDockOptions.onClick):
     36
    1372012-07-04  Sheriff Bot  <webkit.review.bot@gmail.com>
    238

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

    r96932 r121843  
    6666    {
    6767        this.dispatchEventToListeners("click");
     68        if (this._showOptionsTimer)
     69            clearTimeout(this._showOptionsTimer);
    6870    },
    6971
    … …  
    148150            this.element.addStyleClass("hidden");
    149151        this._visible = x;
     152    },
     153
     154    /**
     155     * @param {function():Array.<WebInspector.StatusBarButton>} buttonsProvider
     156     */
     157    makeLongClickEnabled: function(buttonsProvider)
     158    {
     159        this.longClickGlyph = document.createElement("div");
     160        this.longClickGlyph.className = "fill long-click-glyph";
     161        this.element.appendChild(this.longClickGlyph);
     162 
     163        this.longClickGlyphShadow = document.createElement("div");
     164        this.longClickGlyphShadow.className = "fill long-click-glyph shadow";
     165        this.element.appendChild(this.longClickGlyphShadow);
     166
     167        this.element.addEventListener("mousedown", mouseDown.bind(this), false);
     168        this.element.addEventListener("mouseout", mouseUp.bind(this), false);
     169        this.element.addEventListener("mouseup", mouseUp.bind(this), false);
     170
     171        function mouseDown(e)
     172        {
     173            if (e.which !== 1)
     174                return;
     175            this._showOptionsTimer = setTimeout(this._showOptions.bind(this, buttonsProvider), 500);
     176        }
     177
     178        function mouseUp(e)
     179        {
     180            if (e.which !== 1)
     181                return;
     182            if (this._showOptionsTimer)
     183                clearTimeout(this._showOptionsTimer);
     184        }
     185    },
     186
     187    /**
     188     * @param {function():Array.<WebInspector.StatusBarButton>} buttonsProvider
     189     */
     190    _showOptions: function(buttonsProvider)
     191    {
     192        var buttons = buttonsProvider();
     193
     194        var mouseUpListener = mouseUp.bind(this);
     195        document.documentElement.addEventListener("mouseup", mouseUpListener, false);
     196
     197        var optionsGlassPane = new WebInspector.GlassPane();
     198        var optionsBarElement = optionsGlassPane.element.createChild("div", "alternate-status-bar-buttons-bar");
     199        const buttonHeight = 24;
     200        optionsBarElement.style.height = (buttonHeight * buttons.length) + "px";
     201        optionsBarElement.style.left = this.element.offsetLeft + "px";
     202
     203        var boundMouseOver = mouseOver.bind(this);
     204        var boundMouseOut = mouseOut.bind(this);
     205        for (var i = 0; i < buttons.length; ++i) {
     206            buttons[i].element.addEventListener("mousemove", boundMouseOver.bind(this), false);
     207            buttons[i].element.addEventListener("mouseout", boundMouseOut.bind(this), false);
     208            optionsBarElement.appendChild(buttons[i].element);
     209        }
     210        buttons[buttons.length - 1].element.addStyleClass("emulate-active");
     211
     212        function mouseOver(e)
     213        {
     214            if (e.which !== 1)
     215                return;
     216            var buttonElement = e.target.enclosingNodeOrSelfWithClass("status-bar-item");
     217            buttonElement.addStyleClass("emulate-active");
     218        }
     219
     220        function mouseOut(e)
     221        {
     222            if (e.which !== 1)
     223                return;
     224            var buttonElement = e.target.enclosingNodeOrSelfWithClass("status-bar-item");
     225            buttonElement.removeStyleClass("emulate-active");
     226        }
     227
     228        function mouseUp(e)
     229        {
     230            if (e.which !== 1)
     231                return;
     232            optionsGlassPane.dispose();
     233            document.documentElement.removeEventListener("mouseup", mouseUpListener, false);
     234
     235            for (var i = 0; i < buttons.length; ++i) {
     236                if (buttons[i].element.hasStyleClass("emulate-active"))
     237                    buttons[i]._clicked();
     238            }
     239        }
    150240    }
    151241}

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

    r118520 r121843  
    3838        // Install glass pane
    3939        if (WebInspector._elementDraggingGlassPane)
    40             WebInspector._elementDraggingGlassPane.parentElement.removeChild(WebInspector._elementDraggingGlassPane);
    41 
    42         var glassPane = document.createElement("div");
    43         glassPane.style.cssText = "position:absolute;top:0;bottom:0;left:0;right:0;opacity:0;z-index:1";
    44         glassPane.id = "glass-pane-for-drag";
    45         element.ownerDocument.body.appendChild(glassPane);
    46         WebInspector._elementDraggingGlassPane = glassPane;
     40            WebInspector._elementDraggingGlassPane.dispose();
     41
     42        WebInspector._elementDraggingGlassPane = new WebInspector.GlassPane();
    4743    }
    4844
    … …  
    6864
    6965    if (WebInspector._elementDraggingGlassPane)
    70         WebInspector._elementDraggingGlassPane.parentElement.removeChild(WebInspector._elementDraggingGlassPane);
     66        WebInspector._elementDraggingGlassPane.dispose();
    7167
    7268    delete WebInspector._elementDraggingGlassPane;
    … …  
    7571
    7672    event.preventDefault();
     73}
     74
     75/**
     76 * @constructor
     77 */
     78WebInspector.GlassPane = function()
     79{
     80    this.element = document.createElement("div");
     81    this.element.style.cssText = "position:absolute;top:0;bottom:0;left:0;right:0;background-color:transparent;z-index:1";
     82    this.element.id = "glass-pane-for-drag";
     83    document.body.appendChild(this.element);
     84}
     85
     86WebInspector.GlassPane.prototype = {
     87    dispose: function()
     88    {
     89        if (this.element.parentElement)
     90            this.element.parentElement.removeChild(this.element);
     91    }
    7792}
    7893

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

    r120468 r121843  
    519519}
    520520
     521.long-click-glyph {
     522    background-color: rgba(0, 0, 0, 0.75);
     523    -webkit-mask-image: url(Images/statusbarButtonGlyphs.png);
     524    -webkit-mask-position: -288px -48px;
     525    z-index: 1;
     526}
     527
     528.long-click-glyph.shadow {
     529    top: 1px;
     530    background-color: white !important;
     531    z-index: 0;
     532}
     533
    521534button.status-bar-item {
    522535    position: relative;
    … …  
    526539}
    527540
    528 button.status-bar-item:active {
     541button.status-bar-item:active:not(.emulate-inactive), button.status-bar-item.emulate-active {
    529542    background-position: 32px 0 !important;
    530543}
    … …  
    583596}
    584597
    585 button.settings-status-bar-item {
    586     position: absolute;
    587     right: 0;
     598.alternate-status-bar-buttons-bar {
     599    position: absolute;
     600    width: 32px;
     601    bottom: -3px;
     602    margin-left: 1px;
     603    background: white;
     604}
     605
     606.alternate-status-bar-buttons-bar .status-bar-item {
     607    margin-top: -1px;
    588608}
    589609

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

    r121778 r121843  
    7272    {
    7373        this._dockToggleButton = new WebInspector.StatusBarButton("", "dock-status-bar-item", 3);
     74        this._dockToggleButton.makeLongClickEnabled(this._createDockOptions.bind(this));
    7475        this._dockToggleButton.addEventListener("click", this._toggleAttach.bind(this), false);
    7576        this._updateDockButtonState();
    … …  
    8586            anchoredStatusBar.appendChild(this.panels.elements.nodeSearchButton.element);
    8687        anchoredStatusBar.appendChild(this.settingsController.statusBarItem);
     88    },
     89
     90    _createDockOptions: function()
     91    {
     92        var alternateDockToggleButton1 = new WebInspector.StatusBarButton("Dock to main window.", "dock-status-bar-item", 3);
     93        var alternateDockToggleButton2 = new WebInspector.StatusBarButton("Undock into separate window.", "dock-status-bar-item", 3);
     94
     95        if (this.attached) {
     96            alternateDockToggleButton1.state = WebInspector.settings.dockToRight.get() ? "bottom" : "right";
     97            alternateDockToggleButton2.state = "undock";
     98        } else {
     99            alternateDockToggleButton1.state = WebInspector.settings.dockToRight.get() ? "bottom" : "right";
     100            alternateDockToggleButton2.state = WebInspector.settings.dockToRight.get() ? "right" : "bottom";
     101        }
     102
     103        alternateDockToggleButton1.addEventListener("click", onClick.bind(this), false);
     104        alternateDockToggleButton2.addEventListener("click", onClick.bind(this), false);
     105
     106        function onClick(e)
     107        {
     108            var state = e.target.state;
     109            if (state === "undock")
     110                this._toggleAttach();
     111            else if (state === "right") {
     112                if (!this.attached)
     113                    this._toggleAttach();
     114                WebInspector.settings.dockToRight.set(true);
     115            } else if (state === "bottom") {
     116                if (!this.attached)
     117                    this._toggleAttach();
     118                WebInspector.settings.dockToRight.set(false);
     119            }
     120        }
     121
     122        return [alternateDockToggleButton1, alternateDockToggleButton2];
    87123    },
    88124
Note: See TracChangeset for help on using the changeset viewer.