3 ms·

Hi Mozilla, this is great, very impressive. Quick question: how do I search through all CSS styles loaded on a page using Developer Tools? For example, if I

Hi Mozilla, this is great, very impressive. Quick question: how do I search through all CSS styles loaded on a page using Developer Tools? For example, if I wanted to search for all the instances of "float: right" in all stylesheets, how would I do it? Not that I don't love all the new tech, but I really wanted to search for all instances of "float: right" today, and I couldn't figure out how to do it. I recall I could do this global search through the Styles panel with Firebug in the good old days. I consider the weak global search in the various Developer Tools panels to be a painful regression. While I'm on my global search grumbles soapbox, the search results popunder that appears below the search bar in the Developer Tools|Debugger tab is very annoying. When I did similar searches in Firebug, as I cycled through matches to my search, it just switched from file to file and then scrolled to each matching row. Why can't you do it like that? You don't get enough screen real estate when Developer Tools is docked for a pop-under to work UX-wise. If I wanted an "IDE experience", I'd run your WebIDE. It also occurs to me that the popunder search results preview encourages haphazard mouse interaction with the search results rather than keyboard interaction. Please load a pre-e10s version of Firefox with Firebug and do a global search (look mom, no bang prefixes required!) on a page to see how nice and natural search in your browser can be.

potch 9y ago
You can search using the Style Editor: https://developer.mozilla.org/en-US/docs/Tools/Style_Editor https://developer.mozilla.org/en-US/docs/Tools/Style_Editor Press Ctrl/Cmd+F to search. It's not presently possible to search across all files at once, but the Style Editor is one of the tools is due for an update to match the current Debugger tool which has a better interface!
- EdSharkey 9y ago
  > .. the current Debugger tool which has a better interface Respectfully, I disagree. The debugger tool's search in files is klunky with the bang prefix required to search all files and the search results shown in a scrollable popunder panel. Search should operate over all files/nodes in the current tab's category by default. And, it is bad UX for a tool that itself is (usually) a docked panel in the main browser window to have temporary panes appear that crowd out or obscure their neighbors. You've already got a file tree on the left, why not make that a twisty tree and categorize the search results under their parent files there - that is, if you feel your developers must have fancy clicky bits. For those interested, here's some related bugs to look at: Can't search in multiple sources in the Style Editor https://bugzilla.mozilla.org/show_bug.cgi?id=889571 https://bugzilla.mozilla.org/show_bug.cgi?id=889571 (4 years old) Firebug gaps https://bugzilla.mozilla.org/show_bug.cgi?id=991806 https://bugzilla.mozilla.org/show_bug.cgi?id=991806 (3 years old) The comments in that Firebug gaps ticket hurt me to read. Firebug got shanked by you guys like over a year ago and Developer Tools aren't close to feature parity. Dear Firefox product owners: developer tools have to be great for the boring use cases -AND- the sexy HTML5 debugging use cases. Please put more resources into the Firebug gaps ticket and knock that one out.
  - wldcordeiro 9y ago
    When they said "current debugger tool" they were referring to this Debugger[0]. [0] https://github.com/devtools-html/debugger.html https://github.com/devtools-html/debugger.html
    - EdSharkey 9y ago
      There's lots of great UX enhancements there! I'm so looking forward to this! Is this really the "current debugger tool" though? It doesn't ship with Firefox yet, does it? It's vaporware to users until it's displayed in developer tools and WebIDE. I really wish this new Debugger would not show search results as a popunder/panel replacement the way that devtools does though! You have a massive amount of precious screen real estate in the debugger already devoted to the script sources panel. Why wouldn't you just cycle through matches in the actual script sources where the most characters surrounding each search result can be viewed by the user? Not only is using the script sources as the viewer for search results simpler to code, but the user is not taken out of the flow of their script editor/viewer in order to cycle through the results they've requested. What's the usecase that is being satisfied by breaking the user out of the script editor here?

potch 9y ago

You can search using the Style Editor: https://developer.mozilla.org/en-US/docs/Tools/Style_Editor https://developer.mozilla.org/en-US/docs/Tools/Style_Editor Press Ctrl/Cmd+F to search. It's not presently possible to search across all files at once, but the Style Editor is one of the tools is due for an update to match the current Debugger tool which has a better interface!

EdSharkey 9y ago
> .. the current Debugger tool which has a better interface Respectfully, I disagree. The debugger tool's search in files is klunky with the bang prefix required to search all files and the search results shown in a scrollable popunder panel. Search should operate over all files/nodes in the current tab's category by default. And, it is bad UX for a tool that itself is (usually) a docked panel in the main browser window to have temporary panes appear that crowd out or obscure their neighbors. You've already got a file tree on the left, why not make that a twisty tree and categorize the search results under their parent files there - that is, if you feel your developers must have fancy clicky bits. For those interested, here's some related bugs to look at: Can't search in multiple sources in the Style Editor https://bugzilla.mozilla.org/show_bug.cgi?id=889571 https://bugzilla.mozilla.org/show_bug.cgi?id=889571 (4 years old) Firebug gaps https://bugzilla.mozilla.org/show_bug.cgi?id=991806 https://bugzilla.mozilla.org/show_bug.cgi?id=991806 (3 years old) The comments in that Firebug gaps ticket hurt me to read. Firebug got shanked by you guys like over a year ago and Developer Tools aren't close to feature parity. Dear Firefox product owners: developer tools have to be great for the boring use cases -AND- the sexy HTML5 debugging use cases. Please put more resources into the Firebug gaps ticket and knock that one out.
- wldcordeiro 9y ago
  When they said "current debugger tool" they were referring to this Debugger[0]. [0] https://github.com/devtools-html/debugger.html https://github.com/devtools-html/debugger.html
  - EdSharkey 9y ago
    There's lots of great UX enhancements there! I'm so looking forward to this! Is this really the "current debugger tool" though? It doesn't ship with Firefox yet, does it? It's vaporware to users until it's displayed in developer tools and WebIDE. I really wish this new Debugger would not show search results as a popunder/panel replacement the way that devtools does though! You have a massive amount of precious screen real estate in the debugger already devoted to the script sources panel. Why wouldn't you just cycle through matches in the actual script sources where the most characters surrounding each search result can be viewed by the user? Not only is using the script sources as the viewer for search results simpler to code, but the user is not taken out of the flow of their script editor/viewer in order to cycle through the results they've requested. What's the usecase that is being satisfied by breaking the user out of the script editor here?