Firebug CSS handling Usability Issues

 By Ahmed M.Orabi

Using Firebug for web development provides a lot of handy and usable solutions, as it provides very efficient debugging tools, and real HTML and CSS editing. It saves the development time and also helps web developers to validate CSS contents directly. However, there are some enhancements still to be applied in order to make the CSS handling much better, faster and easier in firebug, such as filter-based search support, content assist menu, multiple editing solution, etc.  

1. Requirement:

I was using Firebug 1.7.3 and Firefox 3.6 during my tests. And it was applied on MSN website.

2. Support CSS Filter Search

The way we search for CSS contents in firebug is by just using the quick search box control:

This way will only help us to locate search criteria entries as an entry per time. This means that you will get the first entry appearance and then you will need to search again to get the next entry and so on.

This becomes very difficult in case you are looking for the CSS uses for a given HTML element (such as DIV), as you will find yourself having to locate each DIV occurrence in the selected file. And then, you will select another CSS file to continue searching which will consume a lot of time. In addition, if you are looking for specific CSS attribute occurrences (such as padding) this becomes even more difficult as it occurrences number is more.

2.1 Suggestions

We should have a filter-based search with advanced search options. This search filter will filter the CSS contents based on the set filter search criteria. For instance, it can have some boxes such as:

-          List Box to specify HTML element types. It allows us to select one or more of the HTML elements to be listed. It should have check/deselect all options.

-          List Box to specify the CSS attributes to filter. For example, we can have padding, margin, etc

-          Input control to specify the CSS root values.

-          List Box to specify what CSS files to filter on. And it has options such as check/deselect all files.

Thus, a user becomes able to locate all CSS for specific HTML elements, and under given filter criteria, and this will reduce the time to investigate CSS issues. In addition, it will help us to work on the globally set CSS for certain elements. This will help us to quickly investigate what can cause the whole page to have suspicious behavior.

3. Must be able to select/deselect multiple CSS attributes

When working on CSS issues, one of the ways to determine id to use the narrow-down approach by disabling certain sets of CSSs till you locate the problematic ones. With such way you are going to need to disable a list of CSS attributes to do that. For instance, when you go to MSN website, you can get a list like that:

The list is too long which means that if you are going to disable all attributes you are going to spend too much time to do that, and eventually you will decide to avoid following that approach with a smarter way. The workaround to do that by using the css edit editor directly and just cut the CSS that you do not want

This will help you to edit/add/remove bulk of CSS changes at once. However, you are going to lose the nice representation way for your CSSs. In addition, you are not actually disabling the CSSs, you are just removing them, which means that you will need at some point to refresh the page to make sure that you returned back all CSS attributes the way they were.

3.1 Suggestions

We must have a column checkbox to enable us to select/deselect all CSS attributes in the opened CSS file. In addition, we must have keyboard accessibility features such as using Control+ A to select all attributes, and then using “Delete” button (or any other combination) to disable all attributes together. Or alternatively, we can have an option like disable all or enable all CSS attributes. That way will help the developer to iterate the CSS in an easy way.

4. No Options to get a list of the disabled CSS attributes

 Firebug provides a neat feature to disable (but not delete) certain CSS attributes which is good since you are experimenting to see the effect of having that CSS removed, and then you can re-enable it. However, by the time while you are disabling a large set of CSS attributes, you become unaware of what you already did disable. And eventually, if you did not manage to remember what you did change, you will be forced to refresh the web page and start all from the beginning. This will make you too cautious when disabling CSS attributes in order to make sure that you will be able to remember your changes, and it becomes even more complicated when you are going to work on different CSS files.

4.1 Suggestions

We must have a tab (let’s call it “Disabled” CSSs). This tab will contain a list of the CSSs that we disabled. The way it works will be similar to the script/breakpoint tab that shows the list of breakpoints in the code, but instead, it will be something similar to the CSS changed attributes.

This can also be more enhanced by providing a way to track the changes that we did on specific attributes, so while doing some manual changes on some CSS files, and we did reach a good shape, we will just become able to go to that tab and know what CSS attributes we changed, and this will be a very valuable CSS user experience in term of just being able to change, and then get a summary of what we did.

In addition, we can have an option like “Revert all CSS changes” in order to revert all CSS changes that we made.

Also, we can have an option to export the list of changed CSS attributes, so we can use it as a patch to fix the CSS issues in the development environment.

5. Conclusion

Firebug is a very reliable tool for web development and makes the development time less with its usable components. There are still some improvements that we can apply on its CSS handling in order to make it more usable in term of editing the CSS styles, and the way we can investigate CSS issues.