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):
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@121843
268f45cc-cd09-0410-ab3c-
d52691b4dbfc
+2012-07-04 Pavel Feldman <pfeldman@chromium.org>
+
+ 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):
+
2012-07-04 Sheriff Bot <webkit.review.bot@gmail.com>
Unreviewed, rolling out r121813.
_clicked: function()
{
this.dispatchEventToListeners("click");
+ if (this._showOptionsTimer)
+ clearTimeout(this._showOptionsTimer);
},
get disabled()
else
this.element.addStyleClass("hidden");
this._visible = x;
+ },
+
+ /**
+ * @param {function():Array.<WebInspector.StatusBarButton>} buttonsProvider
+ */
+ makeLongClickEnabled: function(buttonsProvider)
+ {
+ this.longClickGlyph = document.createElement("div");
+ this.longClickGlyph.className = "fill long-click-glyph";
+ this.element.appendChild(this.longClickGlyph);
+
+ this.longClickGlyphShadow = document.createElement("div");
+ this.longClickGlyphShadow.className = "fill long-click-glyph shadow";
+ this.element.appendChild(this.longClickGlyphShadow);
+
+ this.element.addEventListener("mousedown", mouseDown.bind(this), false);
+ this.element.addEventListener("mouseout", mouseUp.bind(this), false);
+ this.element.addEventListener("mouseup", mouseUp.bind(this), false);
+
+ function mouseDown(e)
+ {
+ if (e.which !== 1)
+ return;
+ this._showOptionsTimer = setTimeout(this._showOptions.bind(this, buttonsProvider), 500);
+ }
+
+ function mouseUp(e)
+ {
+ if (e.which !== 1)
+ return;
+ if (this._showOptionsTimer)
+ clearTimeout(this._showOptionsTimer);
+ }
+ },
+
+ /**
+ * @param {function():Array.<WebInspector.StatusBarButton>} buttonsProvider
+ */
+ _showOptions: function(buttonsProvider)
+ {
+ var buttons = buttonsProvider();
+
+ var mouseUpListener = mouseUp.bind(this);
+ document.documentElement.addEventListener("mouseup", mouseUpListener, false);
+
+ var optionsGlassPane = new WebInspector.GlassPane();
+ var optionsBarElement = optionsGlassPane.element.createChild("div", "alternate-status-bar-buttons-bar");
+ const buttonHeight = 24;
+ optionsBarElement.style.height = (buttonHeight * buttons.length) + "px";
+ optionsBarElement.style.left = this.element.offsetLeft + "px";
+
+ var boundMouseOver = mouseOver.bind(this);
+ var boundMouseOut = mouseOut.bind(this);
+ for (var i = 0; i < buttons.length; ++i) {
+ buttons[i].element.addEventListener("mousemove", boundMouseOver.bind(this), false);
+ buttons[i].element.addEventListener("mouseout", boundMouseOut.bind(this), false);
+ optionsBarElement.appendChild(buttons[i].element);
+ }
+ buttons[buttons.length - 1].element.addStyleClass("emulate-active");
+
+ function mouseOver(e)
+ {
+ if (e.which !== 1)
+ return;
+ var buttonElement = e.target.enclosingNodeOrSelfWithClass("status-bar-item");
+ buttonElement.addStyleClass("emulate-active");
+ }
+
+ function mouseOut(e)
+ {
+ if (e.which !== 1)
+ return;
+ var buttonElement = e.target.enclosingNodeOrSelfWithClass("status-bar-item");
+ buttonElement.removeStyleClass("emulate-active");
+ }
+
+ function mouseUp(e)
+ {
+ if (e.which !== 1)
+ return;
+ optionsGlassPane.dispose();
+ document.documentElement.removeEventListener("mouseup", mouseUpListener, false);
+
+ for (var i = 0; i < buttons.length; ++i) {
+ if (buttons[i].element.hasStyleClass("emulate-active"))
+ buttons[i]._clicked();
+ }
+ }
}
}
if (element) {
// Install glass pane
if (WebInspector._elementDraggingGlassPane)
- WebInspector._elementDraggingGlassPane.parentElement.removeChild(WebInspector._elementDraggingGlassPane);
+ WebInspector._elementDraggingGlassPane.dispose();
- var glassPane = document.createElement("div");
- glassPane.style.cssText = "position:absolute;top:0;bottom:0;left:0;right:0;opacity:0;z-index:1";
- glassPane.id = "glass-pane-for-drag";
- element.ownerDocument.body.appendChild(glassPane);
- WebInspector._elementDraggingGlassPane = glassPane;
+ WebInspector._elementDraggingGlassPane = new WebInspector.GlassPane();
}
WebInspector._elementDraggingEventListener = dividerDrag;
targetDocument.body.style.removeProperty("cursor");
if (WebInspector._elementDraggingGlassPane)
- WebInspector._elementDraggingGlassPane.parentElement.removeChild(WebInspector._elementDraggingGlassPane);
+ WebInspector._elementDraggingGlassPane.dispose();
delete WebInspector._elementDraggingGlassPane;
delete WebInspector._elementDraggingEventListener;
event.preventDefault();
}
+/**
+ * @constructor
+ */
+WebInspector.GlassPane = function()
+{
+ this.element = document.createElement("div");
+ this.element.style.cssText = "position:absolute;top:0;bottom:0;left:0;right:0;background-color:transparent;z-index:1";
+ this.element.id = "glass-pane-for-drag";
+ document.body.appendChild(this.element);
+}
+
+WebInspector.GlassPane.prototype = {
+ dispose: function()
+ {
+ if (this.element.parentElement)
+ this.element.parentElement.removeChild(this.element);
+ }
+}
+
WebInspector.animateStyle = function(animations, duration, callback)
{
var interval;
z-index: 0;
}
+.long-click-glyph {
+ background-color: rgba(0, 0, 0, 0.75);
+ -webkit-mask-image: url(Images/statusbarButtonGlyphs.png);
+ -webkit-mask-position: -288px -48px;
+ z-index: 1;
+}
+
+.long-click-glyph.shadow {
+ top: 1px;
+ background-color: white !important;
+ z-index: 0;
+}
+
button.status-bar-item {
position: relative;
width: 32px;
background-position: 0 0;
}
-button.status-bar-item:active {
+button.status-bar-item:active:not(.emulate-inactive), button.status-bar-item.emulate-active {
background-position: 32px 0 !important;
}
background-color: rgba(0, 0, 0, 0.75);
}
-button.settings-status-bar-item {
+.alternate-status-bar-buttons-bar {
position: absolute;
- right: 0;
+ width: 32px;
+ bottom: -3px;
+ margin-left: 1px;
+ background: white;
+}
+
+.alternate-status-bar-buttons-bar .status-bar-item {
+ margin-top: -1px;
}
.settings-status-bar-item .glyph {
_createGlobalStatusBarItems: function()
{
this._dockToggleButton = new WebInspector.StatusBarButton("", "dock-status-bar-item", 3);
+ this._dockToggleButton.makeLongClickEnabled(this._createDockOptions.bind(this));
this._dockToggleButton.addEventListener("click", this._toggleAttach.bind(this), false);
this._updateDockButtonState();
anchoredStatusBar.appendChild(this.settingsController.statusBarItem);
},
+ _createDockOptions: function()
+ {
+ var alternateDockToggleButton1 = new WebInspector.StatusBarButton("Dock to main window.", "dock-status-bar-item", 3);
+ var alternateDockToggleButton2 = new WebInspector.StatusBarButton("Undock into separate window.", "dock-status-bar-item", 3);
+
+ if (this.attached) {
+ alternateDockToggleButton1.state = WebInspector.settings.dockToRight.get() ? "bottom" : "right";
+ alternateDockToggleButton2.state = "undock";
+ } else {
+ alternateDockToggleButton1.state = WebInspector.settings.dockToRight.get() ? "bottom" : "right";
+ alternateDockToggleButton2.state = WebInspector.settings.dockToRight.get() ? "right" : "bottom";
+ }
+
+ alternateDockToggleButton1.addEventListener("click", onClick.bind(this), false);
+ alternateDockToggleButton2.addEventListener("click", onClick.bind(this), false);
+
+ function onClick(e)
+ {
+ var state = e.target.state;
+ if (state === "undock")
+ this._toggleAttach();
+ else if (state === "right") {
+ if (!this.attached)
+ this._toggleAttach();
+ WebInspector.settings.dockToRight.set(true);
+ } else if (state === "bottom") {
+ if (!this.attached)
+ this._toggleAttach();
+ WebInspector.settings.dockToRight.set(false);
+ }
+ }
+
+ return [alternateDockToggleButton1, alternateDockToggleButton2];
+ },
+
_updateDockButtonState: function()
{
if (!this._dockToggleButton)
projects / profile / ivi / webkit-efl.git / commitdiff
