9 ms·

In Aurora, the tools now use Code Mirror as the editor. Along with that change, we now use Code Mirror's searching, so Cmd+G and Cmd+Shift+G will cycle through

In Aurora, the tools now use Code Mirror as the editor. Along with that change, we now use Code Mirror's searching, so Cmd+G and Cmd+Shift+G will cycle through next/previous search results. I filed a bug for a more discoverable UI: https://bugzilla.mozilla.org/show_bug.cgi?id=934624 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 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? :)

fletchowns 13y ago
I like in Firebug how you can select the value of a property and then up/down arrow key through all the valid values. Any chance that is coming to the built in tools?
- mnemonik 13y ago
  You can do that with numeric values in the inspector right now, and also combine with Alt and Shift to increment/decrement by tenths or tens respectively. Would definitely be cool to have this for non-numerical properties as well, filed https://bugzilla.mozilla.org/show_bug.cgi?id=934661 https://bugzilla.mozilla.org/show_bug.cgi?id=934661
  - fletchowns 13y ago
    Didn't know you could alt and shift for higher precision on the numeric values, love it! Thanks for filing the bug :)
EastSmith 13y ago
Since you asked, here is a list of little things I miss from Chrome Dev Tools (I usually spend 2 to 6 hours a day in chrome dev tools) in random order: 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
- mnemonik 13y ago
  Thanks for the detailed feedback/requests! > 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 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&component=Developer%20Tools%3A%20Inspector 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 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 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 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 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 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 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-refresh-2013/ https://people.mozilla.org/~shorlander/mockups/devTools/ux-r... Thanks again for the feedback! We value it a ton :)
y0ghur7_xxx 13y ago
> Anything else? :) A disable cache checkbox in the developer tools options. https://bugzilla.mozilla.org/show_bug.cgi?id=651888 https://bugzilla.mozilla.org/show_bug.cgi?id=651888
- mnemonik 13y ago
  It looks like the main work is happening in https://bugzilla.mozilla.org/show_bug.cgi?id=864098 https://bugzilla.mozilla.org/show_bug.cgi?id=864098 which is marked as blocking that bug. I'll ping Mike and see what the status is.
  - mikeratcliffe 13y ago
    Disabling the cache for a single tab still does not work. Maybe somebody could find a way to workaround this though. We just don't want to disable the cache globally as this could cause issues in other windows.
toupeira 13y ago
Here are a few random things that are still bugging me (using Linux): 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 ;-)
- mnemonik 13y ago
  > 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. We have a bug open for respecting the system font size here: https://bugzilla.mozilla.org/show_bug.cgi?id=760825 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&component=Developer%20Tools 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!

fletchowns 13y ago

I like in Firebug how you can select the value of a property and then up/down arrow key through all the valid values. Any chance that is coming to the built in tools?

mnemonik 13y ago
You can do that with numeric values in the inspector right now, and also combine with Alt and Shift to increment/decrement by tenths or tens respectively. Would definitely be cool to have this for non-numerical properties as well, filed https://bugzilla.mozilla.org/show_bug.cgi?id=934661 https://bugzilla.mozilla.org/show_bug.cgi?id=934661
- fletchowns 13y ago
  Didn't know you could alt and shift for higher precision on the numeric values, love it! Thanks for filing the bug :)

EastSmith 13y ago

Since you asked, here is a list of little things I miss from Chrome Dev Tools (I usually spend 2 to 6 hours a day in chrome dev tools) in random order: 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

mnemonik 13y ago
Thanks for the detailed feedback/requests! > 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 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&component=Developer%20Tools%3A%20Inspector 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 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 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 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 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 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 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-refresh-2013/ https://people.mozilla.org/~shorlander/mockups/devTools/ux-r... Thanks again for the feedback! We value it a ton :)

y0ghur7_xxx 13y ago

> Anything else? :) A disable cache checkbox in the developer tools options. https://bugzilla.mozilla.org/show_bug.cgi?id=651888 https://bugzilla.mozilla.org/show_bug.cgi?id=651888

mnemonik 13y ago
It looks like the main work is happening in https://bugzilla.mozilla.org/show_bug.cgi?id=864098 https://bugzilla.mozilla.org/show_bug.cgi?id=864098 which is marked as blocking that bug. I'll ping Mike and see what the status is.
- mikeratcliffe 13y ago
  Disabling the cache for a single tab still does not work. Maybe somebody could find a way to workaround this though. We just don't want to disable the cache globally as this could cause issues in other windows.

toupeira 13y ago

Here are a few random things that are still bugging me (using Linux): 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 ;-)

mnemonik 13y ago
> 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. We have a bug open for respecting the system font size here: https://bugzilla.mozilla.org/show_bug.cgi?id=760825 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&component=Developer%20Tools 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!