Bug 149590 – Web Inspector: Adjust font size of Developer Tools using Command,+ or Command,-

• Component: Web Inspector
• Status: RESOLVED FIXED

A user should be able to increase or decrease the font size of the Developer Tools sections just by clicking inside the Developer Tools and then pressing Command,+ or Command,- respectively on their Keyboard.

Users are currently unable to increase or decrease the font size of Developer Tools using a keyboard shortcut and instead have to dig into system files and tweak existing files to be able to do so - which is an issue since these resources that need to be modified are likely to be relocated into different folders with every new release of Webkit/Safari.

This is not currently an issue with Chrome or Firefox using with both of those browsers, users are able to increase/decrease font-sizes using these Command,+ or Command,-.

This feature would be most helpful to users of Macbooks with Retina Displays where the resolution of the screen has been increased by the user and text in the Developer Tools section becomes very hard to read.

[Radar WebKit Bug Importer]

<rdar://problem/22874879>

Created attachment 262005 [details]
Safari Dev Tools on 15inch Macbook Pro running @ resolution of 1920 x 1200

A screenshot of Safari Developer Tools in a recent version of Webkit. This was taken on a 15 inch Macbook Pro with Retina Display that was running at a resolution of 1920 x 1200. Reading the text inside the Developer Tools is almost impossible.

A developer might want to increase the resolution on their MacBooks to this resolution to get a better understanding of how the changes they are making are changing a website.

[Blaze Burg]

Thanks for your bug report.

This could be fixed, and would be worth doing for general accessibility reasons.

The main reason we can't just enable CMD+/- for font-size scaling is that many of the sizes in the inspector are hardcoded in pixels to the default font size, rather than using font-based metrics like em's. Perhaps changing the inspector document's device scale factor might compensate in the case of retina, but that's a rather coarse-grained solution that won't work well for everyone.

[Blaze Burg]

(In reply to comment #3)
> Thanks for your bug report.
> 
> This could be fixed, and would be worth doing for general accessibility
> reasons.
> 
> The main reason we can't just enable CMD+/- for font-size scaling is that
> many of the sizes in the inspector are hardcoded in pixels to the default
> font size, rather than using font-based metrics like em's. Perhaps changing
> the inspector document's device scale factor might compensate in the case of
> retina, but that's a rather coarse-grained solution that won't work well for
> everyone.

After some more experimentation, adjusting the text zoom works pretty well, we just need to fix the shortcut to work with inspector (docked and undocked).

[João Oliveira]

Created attachment 262072 [details]
patch

[Blaze Burg]

Created attachment 262122 [details]
WIP - known issues

I have to go, but I started to diagnose what's wrong. I cleaned up the patch a little bit to match our style. It seems that the inspector webview never sees the shortcut presses, because it bonks. I'll look at what's happening in the ObjC/UIProcess side next.

[Blaze Burg]

Created attachment 262183 [details]
Proposed Fix

[Joseph Pecoraro]

Comment on attachment 262183 [details]
Proposed Fix

Looks fine to me. Ensure Remote Web Inspector works / doesn't thrown an error for the new InspectorFrontendHost method.

[Timothy Hatcher]

Comment on attachment 262183 [details]
Proposed Fix

The other solution would be to implement the selectors Safari uses for these shortcuts on our window controller. That is why the system beeps. However, that would not work in third party apps.

[Blaze Burg]

Committed r190416: <http://trac.webkit.org/changeset/190416>

Thanks All,

Just tried using CMD+/- on Dev Tools in Webkit r190530 on OSX El Capitan and it doesn't seem to work - unless I'm doing something wrong.

Thanks,
Sam

[Blaze Burg]

(In reply to comment #11)
> Thanks All,
> 
> Just tried using CMD+/- on Dev Tools in Webkit r190530 on OSX El Capitan and
> it doesn't seem to work - unless I'm doing something wrong.
> 
> Thanks,
> Sam

Docked or undocked? Nightly or built from source?

(In reply to comment #12)
> (In reply to comment #11)
> > Thanks All,
> > 
> > Just tried using CMD+/- on Dev Tools in Webkit r190530 on OSX El Capitan and
> > it doesn't seem to work - unless I'm doing something wrong.
> > 
> > Thanks,
> > Sam
> 
> Docked or undocked? Nightly or built from source?

Nightly and in both docked and undocked.

[Timothy Hatcher]

There is a known issue where the nightly build is not fully working on El Cap. Stay tuned. We are working on it.

I've upgraded El Capitan to 10.11.2 which has resolved all Webkit issues on El Capitan.

But I think I've found a problem with the fix. I can now zoom-in and zoom-out. But if the Developer tools are docked at the bottom of my browser and I'm either zoomed-in or out and then I try to resize the Dev Tools vertically by pulling it up or down, it doesn't work at all. If I restore Dev Tools to their original resolution by typing Command-0, then yes I can resize the tools vertically without any issues.

I've included a brief "steps to reproduce" list below:

1. Bring up the Developer Tools in Webkit.
2. Make sure that they are docked at the bottom of the browser window.
3. Either zoom in or out of the Developer tools.
4. Attempt to resize Developer Tools by dragging its top menu bar either upwards or downwards.

Expected Results:
The Developer Tools would resize vertically.

Actual Result:
Developer Tools do not resize, in fact opposite behaviour was observed whereby they shrinked vertically when the user attempted to lengthen them vertically.

[Nikita Vasilyev]

(In reply to comment #15)
> I've upgraded El Capitan to 10.11.2 which has resolved all Webkit issues on
> El Capitan.
> 
> But I think I've found a problem with the fix. I can now zoom-in and
> zoom-out. But if the Developer tools are docked at the bottom of my browser
> and I'm either zoomed-in or out and then I try to resize the Dev Tools
> vertically by pulling it up or down, it doesn't work at all. If I restore
> Dev Tools to their original resolution by typing Command-0, then yes I can
> resize the tools vertically without any issues.
> 
> I've included a brief "steps to reproduce" list below:
> 
> 1. Bring up the Developer Tools in Webkit.
> 2. Make sure that they are docked at the bottom of the browser window.
> 3. Either zoom in or out of the Developer tools.
> 4. Attempt to resize Developer Tools by dragging its top menu bar either
> upwards or downwards.
> 
> Expected Results:
> The Developer Tools would resize vertically.
> 
> Actual Result:
> Developer Tools do not resize, in fact opposite behaviour was observed
> whereby they shrinked vertically when the user attempted to lengthen them
> vertically.

It was fixed today (Bug 152076). It should make it to WebKit Nightly (http://nightly.webkit.org) in less than 24 hours.