1037386 - New API: Tooltip customization

Status: NEW

(DevTools :: Framework, enhancement, P3)

Description

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Cloned from:
https://bugzilla.mozilla.org/show_bug.cgi?id=1036949#c2

DevTools extensions should be able to add/modify tooltips in any panel within the developer toolbox.

There should be a simple hook that extensions can install and get events when a tooltip might be displayed. Arguments passed into the hook should allow:

1) decide whether to display a tooltip or not
2) access related context data in order to generate (HTML) content and set it into the tooltip.


The hook could be a simple callback registered in the toolbox or a method that can be overridden when implementing a new toolbox panel (side or main) or both.
A global (toolbox) hook would simply allow to even modify/replace existing tooltips in existing panels while hook for specific panel can use more specific logic (and expected arguments passed in).

Example:

/**
 * This callback is executed by the framework when a tooltip
 * might be displayed.
 * 
 * @param {Element} target The current DOM element under the mouse
 * @param {Tooltip} instance of a {@Tooltip} object
 * @param {Object} options any additional data passed in by the current panel.
 *   This object might contain reference to the current scope (e.g. a panel)
 * @returns {Boolean} Returns true if the tooltip should be displayed. The
 *   tooltip is displayed for the first callback returning true.
 */
function onShowTooltip(target, tooltip, options) {
  if (options.panel.id == "webconsole" && target.tagName === "a") {
    tooltip.setTextContent(target.href);
    return true;
  }
  return false;
}

There are already some related objects:

* TooltipsOverlay
* Tooltip

Honza

Comment 1

[Joe Walker [:jwalker]]

Do you have any examples of Firebug extensions that do this already?

Comment 2

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Arboreal (there is no version for recent Firefox releases though):
https://addons.mozilla.org/en-US/firefox/addon/arboreal/
(see the last screenshot an AMO)

I think that extensions should be able to:

1) Use the API for their own new panels (like Arboreal)
2) Append new tooltips into existing panels
(e.g. an extension for jQuery could visualize jQuery.data [1] associated with elements displayed in the Console or Inspector panel)

Honza

[1] http://api.jquery.com/jquery.data/

Comment 3

[Joe Walker [:jwalker]]

If you're a new panel, then you have an easy way to add tooltips without a specific API because you can specify the exact HTML/XUL that you want, so this wouldn't be needed there would it?

I wonder if FireQuery or similar could get what it wants done by using other extension APIs for the console/inspector?

Comment 4

[Jeff Griffiths (:canuckistani) (:⚡︎)]

(In reply to Joe Walker [:jwalker] from comment #3)
> If you're a new panel, then you have an easy way to add tooltips without a
> specific API because you can specify the exact HTML/XUL that you want, so
> this wouldn't be needed there would it?

It would be a lot more beneficial to provide an api than to expecting people to specify UI. An additional benefit would be that UI we provide via an API would feel 'native' and consistent with the rest of the tools. I think the need for really custom tooltips might be relatively.

> I wonder if FireQuery or similar could get what it wants done by using other
> extension APIs for the console/inspector?

That's a fantastic question - no idea.

Comment 5

[Jan Honza Odvarko [:Honza] (always need-info? me)]

(In reply to Jeff Griffiths (:canuckistani) from comment #4)
> (In reply to Joe Walker [:jwalker] from comment #3)
> It would be a lot more beneficial to provide an api than to expecting people
> to specify UI. An additional benefit would be that UI we provide via an API
> would feel 'native' and consistent with the rest of the tools. I think the
> need for really custom tooltips might be relatively.
Precisely

> > I wonder if FireQuery or similar could get what it wants done by using other
> > extension APIs for the console/inspector?
I am note sure what you mean by: "using other extension APIs for the console/inspector?"

Just to note Patrick's comment (that initiated this bug report):
"On the specific subject of tooltips, know that there is a whole API related to tooltips in place already. It hasn't been made with extensions in mind for now, and it's not easily possible to add new types of tooltips to the markup-view yet, but that's all fixable with minimal changes."

So, there is API for tooltips, we just need to make sure it's nicely exposed to extensions.

Honza