7 ms·
Designing Tools
- yeukhon 13y agoTwo questions: To those who are color blind, how do you overcome color blind in software? Do you guys have software to help changing color on your computer? Should and will Firefox address that kind of problem? Nightly defaults to the dark theme. I like old white theme. https://bugzilla.mozilla.org/show_bug.cgi?id=947242 https://bugzilla.mozilla.org/show_bug.cgi?id=947242 why do we choose the dark theme over the white theme? I am not color blind but I use computer typically between 12-18 hours. Who made that decision? Can we make the white theme default again? I honestly don't think the dark theme helps reading. If anything, the dark theme hurts me viewing.
- bgrins 13y agoYes, the current dark theme does not have high enough contrast. There is a bug opened to switch to higher contrast colors in the dark theme here: https://bugzilla.mozilla.org/show_bug.cgi?id=971418 https://bugzilla.mozilla.org/show_bug.cgi?id=971418 (and this will likely be uplifted to Aurora after landing).
- jasonlotito 13y agoThere is a light theme in Aurora right now.
- mnemonik 13y agoFWIW, I'm colorblind and I use and prefer the dark theme. Also, (warning this gets a little hand wavy) most pages on the web are light, so the light theme blends in. It is useful to have that contrast by default. Easier to make a distinction visually, and also "self xss" is deterred a little because the devtools are more obviously not part of facebook or whatever.
- dhenein 13y agoWe (I am the author of that post) definitely care about color blind users and want to make our tools as usable for as many people as possible! Photoshop allows you to simulate varieties of color blindness and we keep that in mind. We are also trying to provide better visual cues, like shapes/textures rather than relying solely on colors. The network panel in nightly for example has shapes to indicate HTTP response codes. Secondly, once you switch to the light theme (available in the options pane of nightly) it should persist for you, so it will become your "default".
- endersshadow 13y agoI'm not severely colorblind, but I'm red/green colorblind, and I hope I can help you out. I don't use software to change color on my computer--there's nothing that I can change it to that will look more like whatever y'all see it as--I just simply can't see that color. I've lived with my colorblindness for three decades, so it's not like I'm trying to get used to it still. Sometimes the contrast is off on things, and I'll try to correct it manually, but there's nothing that I can do to make me see a color that's physically impossible for me to discern. I rely on hex codes a lot, and I do my best to develop UIs that I can navigate with ease, and won't hurt others that are colorblind. For example, whenever I see red (255,0,0) text on blue (0,0,255), or vice versa, it physically hurts my eyes. Really the only thing that reminds me I'm colorblindness day-to-day is folding laundry. My wife color-coordinates her clothes in her closet, so when I hang them up, it's a crap shoot. She often comes to me with a new article of clothing and says, "So I can find this later, what color do you think this is?" I'm usually wrong. C'est la vie.
- dhenein 13y agoThanks for the comment, we always try and cater to as many of our users as possible. If you've used our tools, are there particular areas that cause more trouble than others? Do you find the dark or light theme easier to navigate (available in Nightly builds right now)? Would love to hear how our tools can be improved in this regard! Feel free to email me at darrin[at]mozilla.com if you'd rather not post on HN.
- mcot2 13y agoMozilla keeps changing the dev tools while the WebKit inspector remains fairly consistent. I no idea how to quantify it, but I just prefer the inspector, by a long shot. The networking tab and DOM inspector are brilliant.
- jasonlotito 13y agoIf by WebKit, you mean Chrome, sure. Safari's inspector is a mess.
- talmand 13y agoChanging or improving?
- slowmotiony 13y agoThe main reason I don't switch to Firefox's dev tools is whenever i write a css attribute in the inspector, Chrome will present me a nice list of possible values I can choose, while Firefox just sits there patiently until I start writing. I don't always remember all the values and this really breaks my workflow.
- Optimizer 13y agoFirefox also provides a suggestions list for CSS properties and values in the rule view and the markup view of Inspector since Firefox 25.
- Ygg2 13y agoActually I don't think it does for values. I just tried to 'change' the value of a font CSS property on Hacker News from Vedrana to something else and it didn't offer any font names.
- evilpie 13y agoWell I guess that was kind of unlucky. clear, color etc. all work, it just can't do font suggestions.
- talmand 13y agoWhat do you expect? Should it show every possible font you can type into the property? Just the fonts installed on your machine that other people may not have? Just any property that has a preset number of values show up as options as you type. The difference is that Chrome shows a dropdown list while with Firefox you have to sort of remember the values as it does an autocomplete. I see no reason Firefox couldn't offer the dropdown since it clearly knows the possible values. By the way, I tried the same font thing in Chrome and it responded the same way, no font list. You can see a similar behavior with color, for the value it shows possible colors by name. Start your color with # and suddenly there's no options. If there are too many possibilities to list it doesn't list anything.
- higherpurpose 13y agoA little off-topic, but I was just reading this: > In response to this, Mozilla has designed a way to lock the device and offer guest access to apps predefined by the user with a green light to allow anyone to use them. All other apps will remain behind a password protected wall until the primary user changes the settings. http://www.computerweekly.com/news/2240215078/Mozilla-launches-Future-of-Mobile-Privacy-project-for-Firefox-OS http://www.computerweekly.com/news/2240215078/Mozilla-launch... This is actually an idea I also came up with after the whole Miranda thing at the UK airport and finding out that the UK authorities can arrest you just for not revealing your devices' passwords, which I think is just insane, especially if you're just passing through UK. I don't know what the UK people are thinking, but they can't let anymore days pass by without repealing this awful law. But I think I had a slightly better idea for this. Don't just make it obvious that there is another account on the phone. That doesn't improve things too much. Completely hide the accounts, and when you're asked for a password, it should open up the account according to the password you're using. So if you pass through the UK airport, and they get your phone, and they get prompted for a password, you can just tell them the password to your "safe" account, and they would be none the wiser. That's what I've been hoping Google will implement for Android, but it would be nice if Mozilla did it to push this idea out there. The second thing I wanted to say here, and also something I've been thinking about for even longer, but perhaps now is the perfect time to do it - Mozilla should create a Firefox to Firefox (or to Chrome extension) end-to-end encrypted chat app. This could all of the sudden bring true communications privacy to over 300 million people at once. It would be amazing! The reason I say it's the perfect time to do it now, is because Open WhisperSystems has already done most of the work on creating a very secure asynchronous protocol that even works with groups, and they've said they're already working on a browser solution, anyway. I'm sure they'll create a Firefox extension either way, but if you could work with them on this, help them out with the funds they dearly need, and then put the app front of center on Firefox as an integrated part of Firefox (you could even promote it as a secure communication solution to enterprise users), that would be fantastic. The problem with end-to-end encryption right now is that it's barely seeing any support from small fundless groups, and none of the large platform owners seem to have any interest in deploying it. Mozilla is one such large platform owner, it's also an open source organization, and they seem to be working on improving their users' privacy. So I couldn't think of a better large platform to do this first.
- polskibus 13y agoHow do you turn on the memory tab in FF (like the one shown in the article) ? I have Aurora and I can't find an option to do that.
- dhenein 13y agoSorry, that is just a prototype for now! We are in the process of designing and planning the memory (and performance) tools, which should hopefully be available sometime this year.
- Siecje 13y agoWhen viewing a local .html file on your computer you should be able to edit the entire page as html and have the browser automatically update and you should be able to save to the file you opened.
- CookWithMe 13y agoI recently tried switching to Firefox at the place I'm currently freelancing at. Not too much front-end stuff going on, just a bit of CSS here and a bit of JS there. The two little things that annoyed me most: When inspecting an element, the element is per default collapsed (i.e. it's children are not shown). Often, I want to see the children as well - one more unnecessary click. This may be a good design decision if the tools are running on a laptop screen inside the main browser window, but I'm using two monitors and the tools take a whole screen. Related, my main monitor has a terrible (=no) contrast between white and light gray if viewed from some angles. Often, if I inspect an element, I'm missing the highlight (light gray on white)... Yep, I should probably play with the monitor settings, although FF seems to be the only tool I have this problem with. These are obviously not big issues and I don't miss the Chrome tools too much, so I'm sticking with FF. Keep up the good work!
- talmand 13y agoI just tried inspecting an element in Chrome and it didn't automatically expand to show the children. That's the behavior I would have expected. Interesting that it behaves differently for you. Are you sure you're not inspecting the child, thinking you are inspecting the parent, which would appear to be expanded in that case? Firefox offers a dark theme in the inspector's settings, maybe try that. I personally don't like it though.
- CookWithMe 13y agoHrm. Maybe the difference I'm noticing is that if I click on text, Chrome will expand the surrounding tag (e.g. <p> or <a>) while FF will keep it closed. I haven't done any side-by-side testing of Chrome and FF (and am currently not working), so I can't reproduce the issue now.
- bgrins 13y agoThe contrast for the selected node in the markup tree is being updated here: https://bugzilla.mozilla.org/show_bug.cgi?id=968315 https://bugzilla.mozilla.org/show_bug.cgi?id=968315.
- pjmlp 13y agoWhat I miss in FF developer tools and makes me use Chrome Dev Tools instead: - Working on the console is a nice REPL experience with code completion and data structure navigation, almost similar to a Smalltalk/Lisp workspace - I can work on the console whenever I feel like it and do not have to pause the debugger - More freedom to place breakpoints in the whole browser stack (events, html changes, ajax calls, ...) - Code and event profiling - Reformatting minified JavaScript - Tooling for navigation the whole set of resources and local databases being used by the browser
- jasonlotito 13y agoThey've added a number of those things, they just are just coming down the pipeline. Check out Aurora for some of these things, such as more breakpoint options and reformatting JS.
- acomjean 13y agoI'm trying to move from firebug to the native firefox development tools. The one thing I miss is the network tab doesn't render formatted html or datastuctures, it just text dumps (firebug give you the option and shows json, html, formatted). That and it seems the network tool turns on when you click the tab, but no way to turn off. Other than that I really like the tools.
- dhenein 13y agoYou should grab our Nightly build then :) We have parsed responses in the Network tab, I just tried HTML and JSON for you and both show as expected. See http://imgur.com/OHO4lFH http://imgur.com/OHO4lFH and get Nightly at http://nightly.mozilla.org/ http://nightly.mozilla.org/.
- yoran 13y agoI second that. Also, in Firebug, you can see the padding clearly (it's in a different color) when you hover over an element with the inspector. This is not the case in the Firefox Development Tools. It's still possible to get the same information from the Box Model view but it's just nice to be able to see it visually on the page.
- frik 13y agoPlease add "formatted JSON" that start with "for(;;)" or "while(1)" ...a common technique. Chrome DevTools supports this, and both Facebook and Google use it in their XHR/AJAX responses (so do I).
- kackontent 13y agoI like FF dev tools a lot, yet there is some stuff there that could be better: - no call stack(?) - breakpoints are a bit of a hit or miss, especially when callbacks are involved. - http request monitoring is a bit messy - you see the request in the console, you can click on them, but the resulting dialog box only offers basic info, without even an option to go to the clicked url directly. In network panel the functionality is completely different for some reason. Fortunately mostly fine, but one irritating thing is that response view is so little and you cannot make it much wider. But anyway, they're improving greatly, only a couple of months back you couldn't even think about not using Firebug in FF. So kudos to them for all the hard work.
- Optimizer 13y agoResponse tab can now have any amount of width in Nightlies. https://bugzilla.mozilla.org/show_bug.cgi?id=956357 https://bugzilla.mozilla.org/show_bug.cgi?id=956357
- mnemonik 13y agono call stack(?) There are breadcrumbs across the debugger's toolbar for quick always available access, or there is a tab to display the whole stack at once next to the sources tab on the left sidebar. breakpoints are a bit of a hit or miss, especially when callbacks are involved. If you have a test case / url / steps to reproduce, please file a bug: https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools%3A%20Debugger https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&c... We can't fix what we can't detect. So kudos to them for all the hard work. Thanks :)
- Haywain 13y agoDoes anyone know if I can add custom classes to the insector in FF? I currently use the Aurora build and can't seem to find a better way to do it. Chrome DevTools have a handy little '+' that lets me add any class I want to the stylesheet... but in Firefox I am limited to only editing existing classes. This is a minor annoyance but it's enough to keep me from being fully ready to switch to FF.
- heydenberk 13y agoLast time I used the Firefox Developer Tools (on 27.0.1), it was unusably slow, caused the browser to crash several times, and very unintuitive even when it was working as (I assume) it was intended to. Are there improvements since v27?
- weavie 13y agoThe two reasons I have to stick with Chrome are Batarang for AngularJs debugging and chrome dev tools for NodeJs debugging with node-inspector. I haven't found any alternatives to these in Firefox, but would switch in a flash if there was.
- general_failure 13y agoAre you using some fork of batarang? https://github.com/angular/angularjs-batarang https://github.com/angular/angularjs-batarang ? It seems to be not developed anymore.
- weavie 13y agoReally? it still works for me.