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?
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: 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)
{
this.showPanel(browser, panel);
},
show: function(state)
{
// nothing pops up in console :(
Firebug.Console.log('show');
},
getElementXPath: function(element)
{
if (element && element.id)
return '//*...@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.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);
}});
Le 17 mars 2010 à 18:15, John J Barton a écrit :
>
>
> On Mar 17, 10:00 am, Duchesnes Grégory - Ilomedia
> <[email protected]> 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
>
>
>> 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
>>
>> Le 17 mars 2010 à 15:44, John J Barton a écrit :
>>
>>
>>
>>> On Mar 17, 1:58 am, ilomedia <[email protected]> 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
>>
>>> --
>>> You received this message because you are subscribed to the Google Groups
>>> "Firebug" group.
>>> To post to this group, send email to [email protected].
>>> To unsubscribe from this group, send email to
>>> [email protected].
>>> For more options, visit this group
>>> athttp://groups.google.com/group/firebug?hl=en.
>
> --
> You received this message because you are subscribed to the Google Groups
> "Firebug" group.
> To post to this group, send email to [email protected].
> To unsubscribe from this group, send email to
> [email protected].
> For more options, visit this group at
> http://groups.google.com/group/firebug?hl=en.
--
You received this message because you are subscribed to the Google Groups
"Firebug" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/firebug?hl=en.
