I am pleased to announce that version 1.1 of the Web Developer extension has been released. The complete list of new features and bug fixes can be found in the history with the biggest change being the replacement of the sidebar with something I am calling the “dashboard”.
Dashboard
The dashboard provides similar functionality to the sidebar in that it allows content to be displayed without hiding the page for features like ‘Edit CSS’ and ‘Edit HTML’. However, because it is a custom component it can now be used in Mozilla and Seamonkey (as well as still supporting Firefox and Flock), docked to any side of the screen and supports using multiple sidebar features at the same time through the use of tabs. For example, you can now ‘Edit CSS’ and ‘Edit HTML’ on the same page at the same time.
Changes From The Beta Release
Changes from the beta release include the addition of search functionality to the ‘Edit CSS’ and ‘Edit HTML’ features and new icons by famfamfam, as well as a number of bug fixes.
Localization & Firefox Add-ons
The localized build is still version 1.0.2 as I do not have any updated translations yet, but once I receive a few I will update the localized build. If you would like to help localize the extension please read the localization documentation.
Let me know if you see any problems, but as long as there are no major issues I will be uploading this version to Firefox Add-ons in the next few days.
Finally
Not sure if this counts as a bug or not… it’s really not much, but thought i’d post it here anyway.
I use the Download Statusbar extension (https://addons.mozilla.org/firefox/26/) and the new dashboard seems to be conflicting with it… The DL statusbar normally rests at the bottom of the window when in full mode… if you turn on css editing (for instance) it also pops up on the bottom (for me) and pushes the statusbar up. Sounds ok… but, if you slide the css window upward (pushing the statusbar up) when you pull the css window down, the statusbar stays up… I couldn’t figure out a way to fix it other than to restart firefox…
Either way… *awesome* job on the web developer toolbar nonetheless.
Woot! Awesome work Chris!
Now when Firebug 1.0 comes out of beta…
Oh my goodness — DISABLE PROXY! My best surprise feature ever! My work makes all web traffic go through a proxy, so my laptop loves it!
New version for a GREAT tool. Thanks a lot!
Life is so much easier with Web Developer.
Almost a year since the last update.
Will try that later, thanks.
What about an option, to have the “Edit CSS” and so on in another Window?
Would be great on multimonitor-setups
Nice work, love the new icons.
As always, super great dandy work. I´m not sure how much I can thank you for your time and energy you devote to this. I did a small donation as a token of gratitude. Keep it up!
Love the new enhancements. Gears job on everything. One thing I’d really love to see is support for using the escape key to close various features (ruler, element information, sidebars, etc.) Keep up the great work.
Ron — I’ll look into this.
Nerd — This is definitely something I am looking into and should be made easier now that I am no longer using the sidebar.
Nick — The problem is that you can have multiple features active at once so I have no idea which feature to close when you press the escape key.
It could just be me, but it seems that “Display Id & Class Details” (under “Information”) doesn’t work on some pages. An example is here (it definitely used to work). Any ideas?
Hi!
First of all thank you very much for this extension!
But there are a few (sometimes tiny) facts I want to say about the new version:
1) http://tinyurl.com/y5n4mt
WD says me, there would be 16 html-errors but there are no! BUT there are a few CSS errors which it doesn’t recognize…
2) Don’t know how to reproduce but once I could not close the toolbars anymore. It disapered but then tehre was an unremoveable empty toolbar instead.
3) Would it be possible to show the Close X on the right side of the sidebar?
4)Many of the tooltips/hovereffects in the menus seem not to work or to be empty. But there is always an little “yellow window” even if there is no content.
So far from me. However all in all it seems to be a great update!
Best regards, Azrael
Hey Chris, great to see an update! I haven’t tried out everything new yet but I really like the new dashboard. I’ve always wanted to be able to make the sidebar features wider, so it’s wonderful I can finally do that. The color coding is a really sweet addition. The famfamfam icons look really good in the options menu, too.
Oh, I noticed you got the persist feature to stop inheriting to other tabs! Thank you! You wouldn’t believe how glad I am this bug is out.
Now, if you could still make the draggable area of the line guides a bit wider (as in Photoshop) I’ll have nothing left to complain about.
Excellent update, I love it.
Minor bugs:
- The tooltips seem to be broken. They’re only 3–4 pixels high here with no content.
– The red X on the top right (I don’t know what it does exactly because there is no working tooltip) appears when I open a new (empty) tab. Perhaps the icon could be deactivated for “system” pages.
Oh, two more things:
- The new web developer bar that shows things like the DOM path when using “view style information” seemed to pop out of nowhere when I used it the first time but it doesn’t disappear anymore when not needed, which now makes the web developer toolbar use up double the height than before.
- The DOM path in conjunction with “view style information”: nice that it can now be copy&pasted, I just don’t know how I can copy&paste the one I am currently hovering over, as the moment I move my mouse upwards to the field it will show me other paths, naturally. No idea how that could be fixed though, and nothing major because I doubt it will be copy&pasted often.
Hm, cross the third bug out. It seems to be working now, and I can’t reproduce it. The bar disappears properly now. I’ll file a bug in the forums if it pops up again.
Jerome — The tooltips are working okay for me, but somebody else mentioned them in the forums.
The red X is for quirks mode and is actually because about:blank turns the browser into quirks mode.
You are the first person to actually ask how to copy the path as I have never actually explained how! Basically just press ‘c’ and it will copy the path to the clipboard.
Janine — I’ll see if I can fix this.
Azrael:
1. That is a bug and I’m looking into it.
2. I’ve heard of a couple of toolbar issues, but I haven’t been able to reproduce. I’ll keep an eye on it.
3. I’m looking into this for a future release.
4. The tooltips are working okay for me, but somebody else mentioned them in the forums.
Unbelievable. This is by far the most useful extension (or, ‘add-on’ now) I’ve seen. It’s probably responsible for a 20% speedup in my dev work — at least.
Folks, if you haven’t donated yet — now’s a great time.
Absolutely amazing extension, I couldn’t work without it! Thanks you for all your hard work
Hi Chris,
it seems that WD does not recognize the DOM Inspector. When I try to use “View style information” it says the DI must be installed. But it is!
I’m using the German FF 2.0.0.1.
Best regards,
Blama
First of all: Great job!
I have a problem with ‘CSS > Disable Styles > All Styles’:
I can turn off all styles but after that i can’t turn them on!
Bug or feature?
I have the same problem with Nikolaus, I can disable all CSS with Ctrl-Shift-s, but I can’t enable them with the same key combination. I’m happier if you fix that, thank you!
I used to turn of CSS off and on again using ctrl+shift+S, but while this does turn it off now, it doesn’t turn it back on.
Is this a bug, a features, or just me doing something wrong?
Alright, delete my comment if you please. I was so stupig to not read the thread entirely, thinking it hadn’t been mentioned before. Sorry for that and keep up the fine work.
It’s me again.
I have the same problem as Darius-Nikolaus Krupinski. And to make sure, I tested it on different computers and restarted Firefox several times. I can’t reactivate stylesheets, neither via the keyboard shortcut nor via the menu.
Just noticed the same issue with Disable Styles->All Styles. I use this option to very frequently to toggle stylesheet display and it now requires a browser restart.
Re comment by Blama on DOM Inspector:
This seems to fail on FF2 for Windows, but works for Linux.
Also, when options are set to show the DOM inspector in the dashboard, it still come up in a separate window.
Blama — Please read the FAQ.
For all those commenting about disable styles — this is a known bug and is fixed for the next release.
Workaround for the disable all styles (Ctrl Shift S) seems to be to toggle one of the other media style: e.g. select CSS->Display CSS By Media Type->Print (twice). I’ve tried this with SeaMonkey 1.0.7, but can’t reproduce the original issue with FF2 anyway, so YMMV.
Hope that helps those waiting for the next version.
Otherwise, Chris, this extension is absolutely invaluable! Mucho Kudos to you.
Doh, just realised I haven’t upgraded my FF version of the extension, so that invalidates half of my previous comment. Sorry.
Chris: Thanks for the fast answer. I’ll reinstall FF and try again.
Chris, if there is a way, maybe you could somehow detect which feature is active so pressing escape closes the active one. I’m not sure how this would be done, but I thought I’d mention it. Also, I have a few other comments:
- The icon for the CSS tools is confusing. Is it meant to represent the box model or something else?
– The page properties icon is also confusing. When it’s a red “X,” It looks like a “close” button.
I do love most of the other icons though.
On a minor unrelated note, the comment form’s fields on this blog stretch super wide, creating a horizontal scroll bar.
Nick — But again you can have 30 different features active at once so there is no concept of an active *one*.
The CSS icon is a box that says CSS. I do not create the icons as I am not a designer, but if you don’t like the icons you are free to override them using userChrome.css.
It is not a page properties icon, but a quirks mode icon. It is an X when you are in quirks mode, but a check when in strict mode. It just links to the page properties as this is where the rendering mode is displayed. Again, if you don’t like them you are free to override them.
The form fields show up fine for me so I’m not sure why they are not working for you.
Thanks Chris! This extension has made web design fun. Seriously.
My favorite new feature is search within live css. I can’t tell you how many times I’ve pressed apple-F out of instinct in the past.
Keep up the good work!
The new WDBar is cool — but unfortunately it has an extremely ugly icon. The old Icon fit into the fox without attracting attention, the new one with its large black-and-white surface pees in my eyes =/
weed — As I said to Nick: “I am not a designer, but if you don’t like the icons you are free to override them using userChrome.css”
BRILLIANT update!! And well worth the wait! I did have a problem with DOM Inspector error (being declared as uninstalled when it actually was), but I followed others’ advice here to uninstall FF and delete remaining directory contents (in Program Files/Mozilla Firefox) before reinstalling. Reinstalling FF was successful and I am LOVING the new “CSS/View Style Information” and the VERY handy display bar which automagically appears beneath the WebDev toolbar where I can actually see the entire contents of the style (as opposed to when it was displayed in statusbar’s limited space). FWIW, I also discovered that you can use your “End” key to see the end of the style display (in case it’s too long to view it all). Sorry to be so wordy, hope this makes sense.
Thanks, Chris, for this wonderful update to an already AWESOME tool… if I could only have ONE extension for Firefox, Web Developer would be it!
Just picked up the new release, and the (tiny) issues I had with the beta seem to have been resolved. Nice one! I like the new icons. For those who don’t, you do know you can have just text in the toolbar? (Options>Options>General>Display Toolbar with: Text)
I have one suggestion/question: can I easily access what the DOM inspector calls the ‘Computed Style’ of an element (ie the result of all the CSS style rules on that element)? I am well aware that this is probably hidden in one of WDT’s many many features, but if not it would be a very useful addition, to save regularly opening the DOM inspector.
Chris — You can see all the styles applied to an element with the ‘View Style Information’ feature.
The ‘View Style Information’ seems to act as it always did — aggregating the DOM Inspector’s ‘CSS Style Rules’ — ie the lines of css which apply to that element.
I was referring to another feature in the DOM Inspector — ‘Object — Computed Style’, which lists every css property and its value on that element. Very handy when there is a mismatch between the value the style sheet seems to be telling it and the actual value used.
Chris — This is not currently possible, but I’ll look into it for a future release.