Modernize layout of Fonts & Colors preference page for better alignment and usability

[deepika-u]

Refactored the layout of the Fonts & Colors preference page to improve alignment and usability.

• Aligned filter text field with tree viewer width
• Moved expand actions to a toolbar in the right control column next to filter text in the form of an icon.
• Added way to collapse actions similar to expand to the toolbar itself in the form of an icon.
• Ensured icons are right aligned.
• Improved overall spacing and visual structure to match Eclipse UI conventions similar to Preferences -> Java -> Compiler -> Errors/Warnings page.

Before this pr ->

Now with the pr ->

on clicking the collapse all icon, all the sections which are shown expanded gets collapsed.

To maintain consistency across other preference pages like ->

[github-actions]

Test Results

   852 files  ±0     852 suites  ±0   50m 59s ⏱️ -52s
 7 940 tests ±0   7 697 ✅ ±0  243 💤 ±0  0 ❌ ±0 
20 322 runs  ±0  19 667 ✅ ±0  655 💤 ±0  0 ❌ ±0 

Results for commit 781c9f7. ± Comparison against base commit 7f682c2.

[deepika-u]

@vogella - Can you take a look at this when you get some time please?

[vogella]

@deepika-u I have the problem that the expand buttons are IMHO the ugliest buttons we have in Eclipse. Everytime I see these ugly button gradients I feel the desire to remove them.

So I think I 'm not the right person to review this