4 ms·

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: Inspect

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 :)
- bgrins 13y ago
  > Here are the mock ups: https://people.mozilla.org/~shorlander/mockups/devTools/ux-refresh-2013/ https://people.mozilla.org/~shorlander/mockups/devTools/ux-r... Regarding theming, here is a bug that can be followed for updates: https://bugzilla.mozilla.org/show_bug.cgi?id=916766 https://bugzilla.mozilla.org/show_bug.cgi?id=916766.

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 :)

bgrins 13y ago
> Here are the mock ups: https://people.mozilla.org/~shorlander/mockups/devTools/ux-refresh-2013/ https://people.mozilla.org/~shorlander/mockups/devTools/ux-r... Regarding theming, here is a bug that can be followed for updates: https://bugzilla.mozilla.org/show_bug.cgi?id=916766 https://bugzilla.mozilla.org/show_bug.cgi?id=916766.