[zjays]

Hi everyone,

Currently, the look of the Gridview Add-on only matches the default bluemonday feather, and doesn't fit in at all with the other bundled feathers in Nightingale. Rather than update each of the feathers to skin over the Gridview media page, I figured an easier way might be to follow a similar method to that used by the MLyrics add-on (source here):

- For each feather, a relatively short CSS file containing the appropriate colours is put in the chrome/content/style folder
- Within chrome/content/jscripts/paneWindow.js, a function is used to determine the current feather employed by the user, and from this a new variable is created: currentStyleFile = currentSkin + ".css"; which allows the "graphics drawing" portion of the code to reference the appropriate CSS file from what I can tell.

In Gridview (source here), the colours are currently defined in chrome/skin/view.css, and this CSS file is referenced in chrome/content/view.xml. So I thought it might be possible to use the same function that MLyrics uses to determine the current employed feather and then make the same currentStyleFile variable that would replace the view.css reference. Here are my problems:

1) How can I implement a javascript function within XML code? I looked up that it might be possible to put the function within a <![CDATA[ ]]> block...
2) How would I get this function to pass on the variable determined from the javascript function to something readable by the XML code so that it can reference the appropriate CSS file?

Hopefully my explanation was clear enough - if not I'll pastebin the relevant code from the add-ons. This seems like a fairly simple problem, but I'm having trouble Googling for answers...maybe because I am going about this all wrong? Any advice is appreciated!

[freaktechnik]

(05-15-2015, 09:03 PM)zjays Wrote: 1) How can I implement a javascript function within XML code? I looked up that it might be possible to put the function within a <![CDATA[ ]]> block...

The XML file in question is an XBL binding. See https://developer.mozilla.org/en-US/docs/XBL. It's a pretty interesting, but simultaneously annoying concept. What you need is a the <method> tag, see https://developer.mozilla.org/en-US/docs...d_Elements

(05-15-2015, 09:03 PM)zjays Wrote: 2) How would I get this function to pass on the variable determined from the javascript function to something readable by the XML code so that it can reference the appropriate CSS file?

Via a property on the Node that is defined by the binding and then reading that property from within the binding (this.propertyName, it should also be defined as <property> within the binding). But I'd suggest to call a method on the node or do it in the binding directly, without any external interaction (which would be the correcter way to do it, since XBL JS has access to Components et al too).

[zjays]

Thanks for helping me to get on the right track. I'm still having trouble with the second part of my question.

(05-16-2015, 06:36 PM)freaktechnik Wrote: Via a property on the Node that is defined by the binding and then reading that property from within the binding (this.propertyName, it should also be defined as <property> within the binding). But I'd suggest to call a method on the node or do it in the binding directly, without any external interaction (which would be the correcter way to do it, since XBL JS has access to Components et al too).

Based on what I understood from the above, here's how I tried to modify the view.xml code to reference the appropriate CSS file.

Original code snippet:

Code:

<binding id="gridviewbody">
   <resources>
     <stylesheet src="chrome://gridview/skin/view.css"/>
   </resources>

Modified code snippet:

Code:

<binding id="gridviewbody">
   <implementation>
      <property name="styleSheetName">
       <getter>
         return this.getAttribute('styleSheetName');
       </getter>
       <setter>
         <![CDATA[
          var feathersMgr = Components.classes['@songbirdnest.com/songbird/feathersmanager;1'].getService(Ci.sbIFeathersManager);
          var currentSkin = feathersMgr.currentSkinName;
          var currentStyleFilePath = "chrome://gridview/skin/" + currentSkin + ".css";
          this.setAttribute(currentStyleFilePath)
          ]]>
       </setter>
     </property>
   </implementation>
   <resources>
     <stylesheet src=styleSheetName.propertyName/>
   </resources>

Of course, this doesn't work. Is it possible for the src attribute of the resources element to be set "dynamically" like this, or does it have to point to a static CSS reference? I haven't been able to find any way of implementing javascript inside the <resources> tag, which I assume is necessary for this to work.

[freaktechnik]

The problem here, is that within an XBL binding you only have access to an "anonymous" abstraction of the DOM, since this is like a pattern for an actual element. As a result the attribute getter is called "getAnonymousElementByAttribute", for example. (wait a sec, no.)

I think in your case it'd be easier to forward the src attribute to the style element.

For more info on how and what anonymous content is, I'd again recommend an MDN article:

See https://developer.mozilla.org/en-US/docs...Forwarding

Edit: oh, and that's not how setter work. The setting the default stylesheet thing is something you'd want to do in the contsructor, setters for a property are called, when you set its value with

Code:

this.propertyName = "asdf"

[zjays]

(For the record, additional dialogue on this topic is here: http://irclogs.jackgrigg.com/irc.mozilla...2015-05-19)

Well, I decided to give up - I tried getting a HTML or XHTML styling element with the external CSS file reference into the <content> section so it could be dynamically changed, but it didn't seem to work. I wonder if setting the style of a binding within <content> rather than <resources> just doesn't work with XBL? I figured it will be easier to just modify the individual feathers to skin over the Gridview addon after all.