Help with building an extension (new panel)
ilomedia
I'm trying to build a simple extension and i must admit that i'm kind
of lost.
The purpose of my extension is to provide a new panel in which a list
of the xpath adresses selected in the HTML panel will be kept.
To make it clearer, i need a new right-click item on an node in the
HTML panel that would add the xpath adress to an array and when i go
my new panel i can see the list of copied addresses.
I already built a basic extension that adds my new panel. I also
managed to add a new right-click item on a node thanks to the
supportsObject method (though i'm not very pleased with the label
"inspect in ...").
When i click on my new inspect item, my panel is displayed but i
couldn't find the way to get the DOM element selected in the HTML
panel (and believe me i tried hard).
Here are my questions :
- Which method should i use to retrive this element? I tried to access
Firebug.HTMLPanel.inspectorHistory, panel.selection, panel.context
(and other properties) without any success.
- Is using a new panel the right option? Or should i use a sub-panel
of the HTML panel? I don't think this can be done though since those
sub-panels seemed to be cleared at each selection.
- Finally, is there another way to add a right-click item in the HTML
panel (without any hack)
John J Barton
On Mar 17, 1:58 am, ilomedia <cont...@ilomedia.net> wrote:
> Hi all,
>
> I'm trying to build a simple extension and i must admit that i'm kind
> of lost.
>
> The purpose of my extension is to provide a new panel in which a list
> of the xpath adresses selected in the HTML panel will be kept.
> To make it clearer, i need a new right-click item on an node in the
> HTML panel that would add the xpath adress to an array and when i go
> my new panel i can see the list of copied addresses.
>
> I already built a basic extension that adds my new panel. I also
> managed to add a new right-click item on a node thanks to the
> supportsObject method (though i'm not very pleased with the label
> "inspect in ...").
> When i click on my new inspect item, my panel is displayed but i
> couldn't find the way to get the DOM element selected in the HTML
> panel (and believe me i tried hard).
>
> Here are my questions :
>
> - Which method should i use to retrive this element? I tried to access
> Firebug.HTMLPanel.inspectorHistory, panel.selection, panel.context
> (and other properties) without any success.
Here is some code from bindings.xml mouseOver, with my
interpretations:
Get the meta-object for the graphical rendering object under the
event:
var object = Firebug.getRepObject(event.target);
if (object)
{
Get the type of the meta-object
var rep = Firebug.getRep(object);
Get the Firefox object that the meta-object represents from the type
object:
object = rep.getRealObject(object, FirebugContext);
if (object)
Firebug.Inspector.highlightObject(object,
FirebugContext);
}
>
> - Is using a new panel the right option? Or should i use a sub-panel
> of the HTML panel? I don't think this can be done though since those
> sub-panels seemed to be cleared at each selection.
Some side panels, like Style, synchronize to the main panel selection.
Others, like the Breakpoints side panel, act like alternative indexes
into the main panel. It sounds like that would be a good model for
you.
>
> - Finally, is there another way to add a right-click item in the HTML
> panel (without any hack)
I don't know your eventual goal, but another suggestion: the XPath
side panel could be an "editable history". So the side panel would add
one XPath for every selection in the HTML panel. The user creates the
list by selecting HTML elements rather than right click > add; Each
XPath would have a (x) button on the left to remove the XPath. Mouse
over on the XPath item would highlight the corresponding HTML
object.
Novice users will be able to use the XPath side panel immediately
because it will always have content. Expert users will know to clear
the XPath side panel and then select the HTML nodes they want,
deleting any they add by mistake.
jjb
Duchesnes Grégory - Ilomedia
Thanks for the quick answer.
for the moment, i managed to do this :
- create a totally new panel
- when something is selected in the html panel and i switch to my panel, the xpath is displayed thanks to a domplate called in showPanel (the selected element is found thanks to FirebugContext.getPanel('html').selection)
- add a little delete icon on the left of the xpath address to delete it (thanks for the idea)
i'm trying now to move this to a side panel of the html panel as you suggested.
Everything works fine but i need to switch between my panel and another one everytime for the selection to be taken into account (since i use showSidePanel method).
I've had a look a codeburner extension but couldn't figure out which method is called when selection is changed. I've also looked at bindings, but this is a complete mistery to me (i don't even understand what's it is used for, but i'm a complete newbie in XUL)
Is there a method that would be called magically in my side panel when the selection changes in the html panel? I thought updateSelection (which i found in css.js) would be a good candidate but it does not seemed to be called.
I've seen some code bindings in a11y.js such as bind(this.onHTMLFocus, this); but i didn't have more luck.
Thanks for your help
Greg
> --
> You received this message because you are subscribed to the Google Groups "Firebug" group.
> To post to this group, send email to fir...@googlegroups.com.
> To unsubscribe from this group, send email to firebug+u...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/firebug?hl=en.
John J Barton
On Mar 17, 10:00 am, Duchesnes Grégory - Ilomedia
<cont...@ilomedia.net> wrote:
> jjb,
>
> Thanks for the quick answer.
>
> for the moment, i managed to do this :
>
> - create a totally new panel
> - when something is selected in the html panel and i switch to my panel, the xpath is displayed thanks to a domplate called in showPanel (the selected element is found thanks to FirebugContext.getPanel('html').selection)
> - add a little delete icon on the left of the xpath address to delete it (thanks for the idea)
>
> i'm trying now to move this to a side panel of the html panel as you suggested.
> Everything works fine but i need to switch between my panel and another one everytime for the selection to be taken into account (since i use showSidePanel method).
Take a look a breakpoint.js in Firebug. I think you want to implement
"show(state)" .
jjb
Duchesnes Grégory - Ilomedia
John J Barton
On Mar 17, 10:24 am, Duchesnes Grégory - Ilomedia
<cont...@ilomedia.net> wrote:
> tried the show method as well but it didn't work.
>
> I think i'm missing something obvious but i don't see what.
> My code is below, am i stupid?
Firebug is complex, sophisticated, and not well documented.
>
> FBL.ns(function() { with (FBL) {
>
> function firejettsPanel() {}
>
> firejettsPanel.prototype = extend(Firebug.Panel,
> {
> name: "firejetts",
> title: "FireJetts",
> parentPanel: 'html',
>
> });
>
> Firebug.firejettsModel = extend(Firebug.Module,
> {
>
> initialize: function() {
> Firebug.Panel.initialize.apply(this, arguments);
> },
>
showPanel means "Hey model, we are about to show panel". It should be
reserved for model updates base on panel selection, that that should
be very rare. We are often using in it incorrectly now in firebug
now. We should not be using it to set up the panel UI. You should
move most of this code to panel.show() I think.
> showPanel: function(browser, panel) {
> var isfirejettsPanel = panel && panel.name == "firejetts";
> var firejettsButtons = browser.chrome.$("fbfirejettsButtons");
> collapse(firejettsButtons, !isfirejettsPanel);
>
> if (!isfirejettsPanel) return;
>
> var doc = panel.document;
> var div = panel.panelNode;
>
> if (!this.initialized) {
> this.initialized = true;
> }
>
> var htmlpanel = FirebugContext.getPanel('html');
> if(typeof htmlpanel.selection != 'undefined' && htmlpanel.selection != null)
> {
> xpath = this.getElementXPath(htmlpanel.selection);
> this.xpathRep.myTag.append({xpath:xpath}, div, this.xpathRep);
> }
> },
>
> showSidePanel: function(browser, panel)
> {
Generally you should call showPanel, its a framework method.
> this.showPanel(browser, panel);
> },
>
> show: function(state)
> {
> // nothing pops up in console :(
Nothing comes out because this is a panel method, not a module method.
> Firebug.Console.log('show');
I suggest using
if (FBTrace.DBG_JETT) and learning about FBTrace or learning
chromebug our debugger.
Looks like you are close...
jjb
Duchesnes Grégory - Ilomedia
My last step is to detect when someone clicks on an attribute (i need to build xpath for this too), i suppose there is something similar to udpateSelection around...
Here is my final code for the records :
FBL.ns(function() { with (FBL) {
function firejettsPanel() {}
firejettsPanel.prototype = extend(Firebug.Panel,
{
name: "firejetts",
title: "jetts mapping",
parentPanel: 'html',
updateSelection: function(element)
{
xpath = this.getElementXPath(element);
var domplate = Firebug.firejettsModel.xpathRep;
domplate.myTag.append({xpath:xpath}, this.panelNode, domplate);
},
getElementXPath: function(element)
{
if (element && element.id)
return '//'+element.localName+'[@id="' + element.id + '"]';
else
return this.getElementTreeXPath(element);
},
getElementTreeXPath: function(element)
{
var isRelative = false;
var paths = [];
for (; element && element.nodeType == 1; element = element.parentNode)
{
if(element.id) {
paths.splice(0, 0, this.getElementXPath(element));
isRelative = true;
break;
}else{
var index = 0;
for (var sibling = element.previousSibling; sibling; sibling = sibling.previousSibling)
{
if (sibling.localName == element.localName)
++index;
}
var tagName = element.localName.toLowerCase();
var pathIndex = (index ? "[" + (index+1) + "]" : "");
paths.splice(0, 0, tagName + pathIndex);
}
}
return paths.length ? ((isRelative) ? "" : "/") + paths.join("/") : null;
},
});
Firebug.firejettsModel = extend(Firebug.Module,
{
initialize: function() {
Firebug.Panel.initialize.apply(this, arguments);
var htmlpanel = FirebugContext.getPanel('html');
htmlpanel.addEventListener("click", function (){Firebug.Console.log('event')}, false);
},
});
Firebug.firejettsModel.xpathRep = domplate(
{
myTag:
DIV({onclick: "$onClick"},
SPAN({class: "cssProp editGroup"},"$xpath")
),
onClick: function(event)
{
event.target.parentNode.removeChild(event.target)
}
});
Firebug.registerPanel(firejettsPanel);
Firebug.registerModule(Firebug.firejettsModel);
}});