And there is no way to search in all style sources at once. Which makes tracking stuff harder if there are many sources provided.
I filed a bug for a more discoverable UI: https://bugzilla.mozilla.org/show_bug.cgi?id=934624
Here is this bug for searching across all sheets: https://bugzilla.mozilla.org/show_bug.cgi?id=932093
It looks like it slipped under the radar, but I just talked with Heather who has worked on the Style Editor the most, and so it should be back on the radar now :)
Anything else? :)
Inspector
1. Use F2 to edit selected DOM element. (currently I have to double click it)
2. When I add css rule I want to see list of available properties right away (and later I want to CRTL+Space to show the same list). For example for text-align: left, right, center, initial, inherit, etc.
3. Use orange/yellow/green to draw selected element regions form margin, border and padding
4. make the tooltip which appears above selected element with its class and id optional.
5. Autocomplete !important keyword in css rules.
Console:
1. Implement one global history for all pages. Use arrow case to browse console entries.
2. When I use this $('div') I want to be able to click on result and find that element in the Inspector tab
Debugger
1. I want to open some loaded JS file, change something, CTRL+S to save it and the code should be live. Scratchpad is confusing to me for this scenario.
2. Unminify/pretify javascript code.
Style Editor: 1. Prettier theme for css files.
Others: 1. Implement Continuous Painting Mode
2. Implement h shorcut to hide/show DOM elements in the Inspector
3. Create Super Lighter theme, which does not have big dark panels everywhere. I tried both themes, but these big dark panels are still there.I like white. I work well on white.
Thanks
> 1. Use F2 to edit selected DOM element. (currently I have to double click it)
Follow https://bugzilla.mozilla.org/show_bug.cgi?id=892275
Now that dom elements are editable, this should follow quickly. I'll ping bgrins, who implemented the edit-as-html stuff.
> 2. When I add css rule I want to see list of available properties right away (and later I want to CRTL+Space to show the same list). For example for text-align: left, right, center, initial, inherit, etc.
Not sure I follow exactly what you are getting at. Would you mind filing a bug with a little more detail? I don't want to describe the wrong thing and/or miss what is important to you.
https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&c...
> 3. Use orange/yellow/green to draw selected element regions form margin, border and padding
We are overhauling the highlighter here: https://bugzilla.mozilla.org/show_bug.cgi?id=663778
Here is a mock up that should be fairly close to how it will look: https://bugzilla.mozilla.org/attachment.cgi?id=807164
> 4. make the tooltip which appears above selected element with its class and id optional.
Filed https://bugzilla.mozilla.org/show_bug.cgi?id=934697
> 5. Autocomplete !important keyword in css rules.
Filed https://bugzilla.mozilla.org/show_bug.cgi?id=934695
> 1. Implement one global history for all pages. Use arrow case to browse console entries.
We do use arrows to browse console history, not sure what you mean there?
What makes you want to share console history between all tabs?
> 2. When I use this $('div') I want to be able to click on result and find that element in the Inspector tab
Agreed! I think there is a bug filed somewhere but, here is another that will probably just get duped over and then we will know the original bug: https://bugzilla.mozilla.org/show_bug.cgi?id=934700
> 1. I want to open some loaded JS file, change something, CTRL+S to save it and the code should be live. Scratchpad is confusing to me for this scenario.
Eventually we want to have completely live editing where you would only need to hit "save" when you wanted to commit your changes to the filesystem. You'll be able to register an event listener, trigger it, then decide it does the wrong thing, change the function body, and trigger it again and see your changes. Really excited for this.
Right now, the debugger is read only, and the scratchpad is where you can prototype really quickly. We are integrating the two together, so hopefully it will be less confusing soon. Eventually we will have live editing of JS and it will be incredi-awesome :)
> 2. Unminify/pretify javascript code.
Just shipped to Aurora, although at the moment it is very slow. I used escodegen as a backend for the pretty printing since it already accepts the ASTs SpiderMonkey creates, however I didn't expect it to be so slow for our use cases. I wrote a pretty printer[0] that doesn't rely on full parsing and with performance in mind, that should get uplifted in the next couple days and pretty printing won't be so slow anymore.
[0] https://github.com/mozilla/pretty-fast
> Style Editor: 1. Prettier theme for css files.
Perhaps this is alleviated now that we are using Code Mirror on Aurora?
> Others: 1. Implement Continuous Painting Mode
We are planning our performance tools right now, and among the problems we want to solve is identifying what elements and css rules are degrading performance in your page. We aren't sure that we want to mimic Chrome's solution, though.
> 2. Implement h shorcut to hide/show DOM elements in the Inspector
You can do this now, at least in Nightly. Not sure how long it has been there, but I am pretty sure it is in Aurora at least.
> 3. Create Super Lighter theme, which does not have big dark panels everywhere. I tried both themes, but these big dark panels are still there.I like white. I work well on white.
Agreed. We have mock ups, but AFAIK everyone is busting out features at the moment rather than working on the theming. I think Paul Rouget is going to revisit this pretty soon.
Here are the mock ups: https://people.mozilla.org/~shorlander/mockups/devTools/ux-r...
Thanks again for the feedback! We value it a ton :)
Regarding theming, here is a bug that can be followed for updates: https://bugzilla.mozilla.org/show_bug.cgi?id=916766.
1. Please either respect the font sizes I set in the Firefox Preferences, or add a setting to change the font size inside the devtools. Currently the inspector and style panel on the right, among others, seem to use a fixed size that is just tiny enough to be seriously annoying.
2. All URLs everywhere should be clickable, middle-clickable, and have a context menu for these actions as well as other common stuff like copying it to the clipboard. Last time I checked there was no way to get the full URL of a stylesheet, clicking on it would only open the Style Editor which doesn't seem to expose the URL anywhere either.
3. Sometimes the devtools get stuck somehow, i.e. I suddenly can't open the Inspector anymore, or the console wwill stop displaying messages. This happened at least up until FF25, at which point I gave up and installed Firebug again.
4. Please support all different color syntaxes (ideally as in Firebug where I can choose my preferred format and have everything converted to it)
Otherwise it seems you're doing a great job, I just wish you would get the basics right first before adding stuff like a 3D view ;-)
We have a bug open for respecting the system font size here: https://bugzilla.mozilla.org/show_bug.cgi?id=760825
In the meantime, you can change the devtools font sizes with Cmd+<+> and Cmd+<->
> 2. All URLs everywhere should be clickable, middle-clickable, and have a context menu for these actions as well as other common stuff like copying it to the clipboard. Last time I checked there was no way to get the full URL of a stylesheet, clicking on it would only open the Style Editor which doesn't seem to expose the URL anywhere either.
Agreed, we have various bugs open in different bugzilla components. Will ping people about it.
> 3. Sometimes the devtools get stuck somehow, i.e. I suddenly can't open the Inspector anymore, or the console wwill stop displaying messages. This happened at least up until FF25, at which point I gave up and installed Firebug again.
Do you want to try out Aurora again? I recall a couple issues like what you described that got fixed (one of which was my fault, woops!) and I'd love to know if you are still experiencing this or if it is groovy now.
If you are still experiencing it, please file a bug!
https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&c...
> 4. Please support all different color syntaxes (ideally as in Firebug where I can choose my preferred format and have everything converted to it)
You mean custom syntax highlighting? Would be nice to have, but honestly probably not a priority. Everyone is very busy trying to bang out features and bug fixes, and even just the two themes we support now feel like a burden (at least to me). Hopefully we can do this sometime in the future, though!
> Otherwise it seems you're doing a great job, I just wish you would get the basics right first before adding stuff like a 3D view ;-)
Thanks! :D
For the record, the 3d view was either a GSoC project or an intern project, and hasn't really had much (basically any) maintenance burden.
On top of that, I think it is cool because it might not teach people who know about the web much, but it has the possibility to excite people who know nothing and make them want to learn more. I first got involved in web dev when I was like 10 or 11 and being able to view source was magical. Hopefully the 3d view helps give people that same feeling now days of being able to see a little under the hood and get them excited and draw them in.
Cheers!
As for point 4, at the moment colors are always displayed with rgb() syntax, even if they were specified as a hex-string or with hsl() syntax in the stylesheet. In Firebug there's a dropdown menu on the style tab where you can choose between "Colors as Hex", "Colors as RGB" and "Colors as HSL".
Soon, we will show you the colors as they were authored by default. I can't seem to track down the bug, but I know the inspector folks have it on their radar.
A disable cache checkbox in the developer tools options.
I'll ping Mike and see what the status is.
We just don't want to disable the cache globally as this could cause issues in other windows.
Would definitely be cool to have this for non-numerical properties as well, filed https://bugzilla.mozilla.org/show_bug.cgi?id=934661
Thanks for filing the bug :)