Is there an easy way to use the built-in icons of the Firefox browser, such as the add, remove, or refresh icon, in a XUL firefox extension? I would like to use the icons in a toolbar to be consistent with the browser design.
I have been looking high and low for an answer, but the web is strangely devoid of this little piece of information. Therefore it must either be dead simple or not possible. I hope the former...
Thanks already for all your help :)
The resources, such as icons, are accessible from add-ons.
E.g. the browser reload icon is at chrome://browser/skin/reload-stop-go.png (you can open this in your Firefox). This particular icon would be used in conjunction with -moz-image-rect bases sprite-ing.
Icons are usually specified in the CSS rules for the browser (Firefox) or the global package (aka. toolkit). To find out where something is, I'd recommend the DOM Inspector add-on, inspecting the Chrome window itself and looking in particular at the CSS and/or computed styles view. Also, you may look directly in the source, e.g. on MXR.
Word of advice: Should you always double-check that browser/toolkit resources are actually available on all platforms and are accessed the same way, have the same URI, dimensions in case of icons, and so on. In particular with add-ons, quite often the platform themes will use platform icons (e.g. GTK stock icons on linux) or provide multiple alternatives (Win aero and regular icons, or regular and #2x hidpi ones).
Related
I have worked on a chrome plugin for one of the cloud based product. For The Chrome we have used third partly JS libraries like BackboneJS etc. Now I have to design a Firefox Extension, I am trying to figure out how much code we can reuse. Apparently spending few hours with Mozilla Developer site it seems like for Firefox Extension we have to use XUL for the UI. Not sure if we can use the html and javascript functions from Chrome App for the Firefox Extension, or what would be the approach to estimate the effort. My Understanding is that we have to do it from the scratch since like Chrome in FF we dont have concepts like background page etc.
There is nothing inherent that prevents you from implementing a UI in HTML/JS. You might have to wrap it in an XUL <iframe>, or <browser> (potentially other elements) within a <window> (Firefox will open pure HTML).
The key issue regarding extensions is that they execute in an elevated security context vs. webpages. As such, they have the ability to affect a much larger range of things in the browser and on the users system. When <iframe>, or <browser> elements are used, they have a property type which defaults to having the contents operating in the elevated security context. The default value is type="chrome" which makes the content opened be in the extension's higher security context.
Additional docs from MDN regarding security concerns with opening content in <iframe>, or <browser> elements which is not sourced from your extension distribution: Security best practices in extensions and Displaying web content in an extension without security issues
As to your JavaScript: You should be able to re-use a significant amount of it. At a minimum, the logic. Obviously, there will be more significant differences in how you accomplish interfacing to the aspects of the browsers which are not covered under standards documents (e.g. DOM manipulation should be very close, just as it is for webpage JS).
In some WMs it is possible to choose theme which affects how windows are displayed, e.g. how a background of a button is coloured.
If I draw a window using bare Xlib calls, what should I do to conform to these theme-affected settings? I.e. am I supposed to write specific code for every possible WM? How is it resolved in general?
There are several theme types and they sometimes play together, but they should not be confused.
Window manager/border themes describe the decorations of each window, not the content
UI toolkit themes/widget themes describe how buttons, text fields etc. are drawn within a window
Icon themes describe which icons are used, covering application icons as well as file icons, action icons, toolbar icons etc.
Color themes define a palette of colors to be used within the framework of the other themes
Pointer themes define a set of mouse pointer icons
Some desktop environments bundle all these themes in "desktop" themes, or at least provide a frontend to choose all of them. Yet, these themes are independent from the desktop environment and also from each other. It is possible to set them using configuration files.
If you want your application to fit with the user's preferences, first of all you should adhere to the Icon theme. The Pointer theme is taken care of by the X server, as long as you only use stock mouse icons and don't upload your own to the X server.
The second obvious thing would be the Color theme, but unfortunately there is no standard for color themes, both Gtk+ and Qt frameworks provide this functionality in an independent fashion (and desktop theme configurators understand and manipulate both to provide consistency). You could do some magic to find out whether the user prefers Gtk+ colors or Qt colors (e.g., is running Gnome or KDE) and then extract the colors somewhat from there.
The hardest thing however is to provide a look and feel of your UI elements that is true to the UI toolkit theme(s) the user has chosen. First you would again have to decide between Gtk+ and Qt (other toolkits that are themeable exist as well, but are typically not themed by the user, or niche players like Enlightenment). Then you would have to re-implement the same functionality. Interestingly, many themes come with their own theme engine in Gtk+, and it is possible to let the theme engine do the work for you. An approach that was picked-up by several parties already. Examples:
Java Swing supports mimicing Gtk+ applications by implementing the Gtk+ themeing API and letting the Gtk+ theme engines do the work, works with some inconsistencies.
Firefox and other Mozilla Apps using XUL also do this, but there are always annoying differences, starting with the default font size.
Qt itself has a compatibility Gtk+ theme, that basically does the same; this one works pretty well.
My suggestion is to not reinvent the wheel, instead use Qt (or Gtk+ if you prefer) for GUI elements that go beyond basic drawing operations. Note that from my experience, even primitive drawing is typically better done with Qt than with Xlib.
The user gets the look&feel she expects (not only the look), the interface is rich and stable, and you save considerable time writing all this stuff.
Think of a dictionary application that grabs words upon user's click from any other application (including browsers) and pops up it's meaning. Is it possible to twist this behavior based on the word's HTML attributes?
Edit: I noticed something cool. OSX's built-in dictionary app has a shortcut (cmd+control+d) that actually pops up a word's meaning (the word you're hovering your mouse above). It also highlights the word. The highlight area grows as you increase the font size. check out this fiddle and try various font sizes.
Yes/no
If your dictionary application embeds a browser instance (like a webkit browser) then it should be possible to access the DOM.
If you want your application to manipulate an already running browser instance it has no control over then it could probably done if
that browser has a browser plugin that interacts with your application
you intercept low level commands to mess directly with the kernel or the memory of the browser.
Neither of those are easy to do for all browsers.
how to edit Firefox 'basic page style'
for all sites
with a Stylish script
to set scrollbar to a higher contrast color.
I can't see the thing its terrible.
is there any other way to do this?
The scrollbar is an operating system feature, not a feature of your website. Its look-and-feel are controlled by the user, not the webpage. IE provides a way to change scrollbar colors but it was heavily abused in the early days and is now considered a generally bad idea. In short, if you are trying to manipulate scrollbars from a webpage you're going to have to code a 'fake' scrollbar in Javascript or forget about it.
If you are trying to change only your own system then you may find some possibilities in creating user chrome, greasemonkey script or persona. I'm not sure what is possible there.
Is it possible to create a native GtkMenu (I mean not XUL, but a real GtkMenu) from a Firefox extension? (and add to the firefox window). I would like to make GlobalMenu work with Firefox, which currently doesn't work due to the lack of native GUI.
If you want to have your menu inside firefox window, then... I don't know the details, but the usual way in X is to make a X window (for example GtkWindow) with your GtkMenu. Then you should make firefox "swallow" that window, something like all the systray utilities do that (keywords:reparenting X window--should be enough). I guess there should be special XUL element for than, but I don't see any.
If you dont want to, you can simply make your own GtkWindow with GtkMenu and show it. I guess you should probably do this from another thread. Regarding your other question here -- it is fully possible to write an extension in C++, as long as you use Gecko SDK and Gecko API. You can then link with whatever library you want, including GTK.
I think you should ask this question on one of Mozilla's mailing lists, for example mozilla.dev.extensions (they are listed on http://www.mozilla.org/community/developer-forums.html).