I have a very limited knowledge on the manipulation of overlays and XUL elements in Firefox extensions but I am interested to know if it's possible to do something like this "Simple Notes" Opera add-on in Firefox browser interface.
Yes, it can be, and probably has been, done, or at least something close.
You can search AMO for Notes or Note and look through the results for an extension that does what you want.
Related
I am quite sure that with the good old Firebug, it was shown in the Layout tab, together with the box-sizing property.
Is it possible to tell in the Web Developer too? There is a Box Model tab which is quite similar to the Layout tab of Firebug, but it does not show this information.
Btw: I thought the built-in Web Developer was built on Firebug, but when reading about it it actually seems that they are two quite separate things.
That feature is currently only available in Firefox Nightly.
I've been dealing with taking screenshots for Firefox and Safari browsers but I can't figure out how to do it! With Google Chrome API I can do it this way (it's pretty simple):
chrome.tabs.captureVisibleTab(null, null, function (image)).....etc
BUT I can't find a SIMPLE way to do it on Firefox and Safari!! The only answer I got here was using the 'html2canvas' (http://html2canvas.hertzen.com/examples.html) BUT IT IS NOT a 100% solution in order to take EXACT screenshots of a specific webpage!! It doesn't work for me in this case!!!
Can someone help me with this issue in order to find a simple solution for Firefox and Safari?
I have personally used html2canvas and I found it quite efficient for taking partial or full page screenshots. But it does require you some knowledge of JavaScript and client side scripting.
If you are looking for a more easier approach , there are numerous extensions on Google Chrome webstore.
A popular one is Awesome Screenshot which even allows you to take screenshot of entire webpage (till the scroll bar ends).
You can use Mozilla's chrome tools to draw some or all of the window to an image canvas:
var c2d = myCanvas.getContext('2d');
c2d.drawWindow(window, x, y, w, h, 'rgb(255,255,255)');
See drawWindow(), XUL.
I don't remember exactly, but that's the gist. The magic is the .drawWindow() method, which cannot be executed on the content side, it must be in an area with chrome privileges (like an add-on/extension).
Edit: Here's a good example.
First of all, I need to say that my English is not good. So I sorry for errors in this post.
Second, I'm a professional programmer for 2 years. Main programming language is VB.net (that I find somewhat limited when speaking about User Interfaces).
I love user interfaces, and I really want to be able to create software in Windows environment that has great User interface. After a long time searching for such a thing I discovered a Thunderbird theme that makes exactly what I want! This theme is called "Leopard Mail-Default-Aqua". This is really beautiful.
After some research I discovered that the Thunderbird UI is created using something called XUL, and that XUL is a descriptive language for user interfaces. Now I'm very interested in creating applications using this platform, but have no idea where to start.
After some research I also discovered that Microsoft created WPF to separate GUI from logic, and WPF support themes, but to me it's much more lucrative to learn XUL that is multiplatform, than WPF.
I need some directions on how to start development in XUL, and also very important, how can I use existing themes for Thunderbird in my XUL applications, so them look really great?
From what I've seen, applications developed in XUL uses javascript or C++ to program logic. Is this correct?
Also, as I came from .net programming that is event driven, I'd like to know if XUL development is also event driven, so if I want to respond to a button click for exemple, I can connect a event to a code/function.
Thanks a lot for your help.
The best place to find XUL documentation is at the Mozilla Developer Network Here are some specific suggestion from MDN and other places:
Introduction to XUL
XUL tutorial on the Mozilla Developer Center
XUL Periodic Chart (Open in firefox, provides a demo of various XUL widgets)
XUL Explorer (Provides a simple interface for learning XUL/building a XUL window)
xul #xulrunner on Mozilla's IRC channels (Low traffic but if you have a specific question you may be able to get a response here)
XUL mailing list
And yes, XUL is event-driven, you attach events to buttons and other widgets and Javascript functions respond to the events.
There is XUL documentation at
https://developer.mozilla.org/en/XUL
I think it's Qt you've been looking for, not XUL. There's plenty of tutorials to get you started.
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).
I am having my first foray into website design and I am learning a lot. I am also now seeing why web developers are not a huge fan of developing for Internet Explorer. Nothing seems to work how I expect. However, since the website has to work cross-browser, I am spending time looking at it in Firefox, Chrome, and IE. Something that is very non-obvious to me, however, is how to tell where problems lie in the website.
For example, the layout of one of my pages forces a footer to the bottom of the page. It looks great in Chrome and Firefox, but there's something broken in IE that make the footer align to the right (and cause a horizontal scroll to appear). I have played around with the code, but nothing really is responding to how I want in IE (even though it does in other browsers).
Are there any tools that can help "debug" the problems on a web site so fixing it is more than just a trial-and-error approach? Thanks.
One of my favorites that works in all browsers is X-Ray. You simply stick the link on that page into a bookmark and it loads some external JavaScript on top of the page you're testing. It reveals a bunch of parameters about the DOM object you click on, as well as its hierarchy in the model.
As for your specific footer problem, I would look to a potential lack of clearing of floats and divs that are wider than their parent containers somewhere up the line.
There are frameworks like GWT, ext-js, YUI which hide a lot of the browser bugs from you. But today (near the end of 2009), there still isn't a good, realiable way to narrow down browser issues and to fix them.
PS: I'm collecting tools that help during debugging here: Which tools do you use to debug HTML/JS in your browser?
I assume you have checked that your code is valid, with
HTML validator, for example: W3C Markup Validation Service
CSS checker, for example: W3C CSS Validation Service
And, of course, you should have correct doctype in your html file. Without doctype, some browsers go to quirks mode to emulate bugs in old browsers.
A cross-browser JavaScript library, like jQuery and its UI components, can be very helpful in avoiding idiosyncrasies between browsers. Microsoft provides the IE Developer Toolbar, it's not quite as easy to use as Firebug, but can still be very helpful. A Just-In-Time debugger like MS Script Debugger or Visual Studio are also a time saver.
I like Firebug for Firefox
and IE8 has Developer Tools from the tools menu and IE Developer Toolbar for older versions.
Chrome has similar tools from the page menu.
All of which allow you to see elements on the page as they are rendered in their specific browsers, which I usually find very helpful in debugging browser specific problems.