Commit e3186aeb authored by graouts@apple.com's avatar graouts@apple.com

Web Inspector: "data detectors" menu on hover for actionable tokens

https://bugs.webkit.org/show_bug.cgi?id=124363

Reviewed by Timothy Hatcher.

Add a new WebInspector.HoverMenu class to display an overlay menu that is presented
with respect to a target frame that it draws itself around adding a customizable
action button to its right. The menu uses fade animations as it's presented and
dismissed and a single delegation method is fired when the button is pressed. Finally,
just like a popover, it automatically dismisses itself upon scrolling anywhere
outside of its bounds.

* UserInterface/HoverMenu.css: Added.
* UserInterface/HoverMenu.js: Added.
(WebInspector.HoverMenu):
(WebInspector.HoverMenu.prototype.get element):
(WebInspector.HoverMenu.prototype.dismiss):
(WebInspector.HoverMenu.prototype.handleEvent):
(WebInspector.HoverMenu.prototype._handleClickEvent):
* UserInterface/Images/HoverMenuButton.png: Added.
* UserInterface/Images/HoverMenuButton@2x.png: Added.
* UserInterface/Main.html:

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@160134 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 965cdde6
2013-12-04 Antoine Quint <graouts@apple.com>
Web Inspector: "data detectors" menu on hover for actionable tokens
https://bugs.webkit.org/show_bug.cgi?id=124363
Reviewed by Timothy Hatcher.
Add a new WebInspector.HoverMenu class to display an overlay menu that is presented
with respect to a target frame that it draws itself around adding a customizable
action button to its right. The menu uses fade animations as it's presented and
dismissed and a single delegation method is fired when the button is pressed. Finally,
just like a popover, it automatically dismisses itself upon scrolling anywhere
outside of its bounds.
* UserInterface/HoverMenu.css: Added.
* UserInterface/HoverMenu.js: Added.
(WebInspector.HoverMenu):
(WebInspector.HoverMenu.prototype.get element):
(WebInspector.HoverMenu.prototype.dismiss):
(WebInspector.HoverMenu.prototype.handleEvent):
(WebInspector.HoverMenu.prototype._handleClickEvent):
* UserInterface/Images/HoverMenuButton.png: Added.
* UserInterface/Images/HoverMenuButton@2x.png: Added.
* UserInterface/Main.html:
2013-12-04 Antoine Quint <graouts@apple.com>
Web Inspector: edited color should serialize back to original format when possible
......
/*
* Copyright (C) 2013 Apple Inc. All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions
* are met:
* 1. Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* 2. Redistributions in binary form must reproduce the above copyright
* notice, this list of conditions and the following disclaimer in the
* documentation and/or other materials provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
* THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
* PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
* BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
* CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
* SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
* CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
* THE POSSIBILITY OF SUCH DAMAGE.
*/
.hover-menu {
position: absolute;
display: -webkit-flex;
/* Exceptionally use content-box such that the frame set is that of the highlighted string
and styling adds the required padding around it */
box-sizing: content-box;
/* Position the icon to the right of the menu and centered vertically */
-webkit-justify-content: flex-end;
-webkit-align-items: center;
/* Provide extra room for the icon */
padding-left: 2px;
padding-right: 16px;
min-height: 17px;
border-radius: 4px;
border: 2px solid rgba(0, 0, 0, 0.22);
-webkit-transform: translate3d(-3px, -5px, 0);
pointer-events: none;
opacity: 0;
transition: opacity 350ms;
}
.hover-menu.visible {
opacity: 1;
}
.hover-menu > img {
width: 15px;
height: 13px;
-webkit-transform: translateX(14px);
content: -webkit-image-set(url(Images/HoverMenuButton.png) 1x, url(Images/HoverMenuButton@2x.png) 2x);
}
.hover-menu.visible > img {
pointer-events: all;
}
/*
* Copyright (C) 2013 Apple Inc. All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions
* are met:
* 1. Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* 2. Redistributions in binary form must reproduce the above copyright
* notice, this list of conditions and the following disclaimer in the
* documentation and/or other materials provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
* THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
* PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
* BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
* CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
* SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
* CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
* THE POSSIBILITY OF SUCH DAMAGE.
*/
WebInspector.HoverMenu = function(delegate)
{
WebInspector.Object.call(this);
this.delegate = delegate;
this._element = document.createElement("div");
this._element.className = WebInspector.HoverMenu.StyleClassName;
this._element.addEventListener("transitionend", this, true);
this._button = this._element.appendChild(document.createElement("img"));
this._button.addEventListener("click", this);
}
WebInspector.HoverMenu.StyleClassName = "hover-menu";
WebInspector.HoverMenu.VisibleClassName = "visible";
WebInspector.HoverMenu.prototype = {
constructor: WebInspector.HoverMenu,
__proto__: WebInspector.Object.prototype,
// Public
get element()
{
return this._element;
},
present: function(targetFrame)
{
var style = this._element.style;
style.left = Math.ceil(targetFrame.origin.x) + "px";
style.top = Math.ceil(targetFrame.origin.y) + "px";
style.width = Math.ceil(targetFrame.size.width) + "px";
style.height = Math.ceil(targetFrame.size.height) + "px";
var element = this._element;
document.body.appendChild(element);
setTimeout(function() {
element.classList.add(WebInspector.HoverMenu.VisibleClassName);
});
window.addEventListener("scroll", this, true);
},
dismiss: function()
{
if (this._element.parentNode !== document.body)
return;
this._element.classList.remove(WebInspector.HoverMenu.VisibleClassName);
window.removeEventListener("scroll", this, true);
},
// Protected
handleEvent: function(event)
{
switch (event.type) {
case "scroll":
if (!this._element.contains(event.target))
this.dismiss();
break;
case "click":
this._handleClickEvent(event);
break;
case "transitionend":
if (!this._element.classList.contains(WebInspector.HoverMenu.VisibleClassName))
this._element.remove();
break;
}
},
// Private
_handleClickEvent: function(event)
{
if (this.delegate && typeof this.delegate.hoverMenuWasActivated === "function")
this.delegate.hoverMenuWasActivated(this);
}
}
......@@ -123,6 +123,7 @@
<link rel="stylesheet" href="ColorPicker.css">
<link rel="stylesheet" href="CodeMirrorDragToAlterNumberController.css">
<link rel="stylesheet" href="GoToLineDialog.css">
<link rel="stylesheet" href="HoverMenu.css">
<script src="External/CodeMirror/codemirror.js"></script>
<script src="External/CodeMirror/comment.js"></script>
......@@ -406,6 +407,7 @@
<script src="LoadLocalizedStrings.js"></script>
<script src="GoToLineDialog.js"></script>
<script src="ContentFlowDOMTreeContentView.js"></script>
<script src="HoverMenu.js"></script>
<script src="Main.js"></script>
<script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment