Closed Bug 1027817 Opened 7 years ago Closed 7 years ago

Font-resizing in WebIDE

Categories

(DevTools Graveyard :: WebIDE, defect)

defect
Not set
major

Tracking

(Not tracked)

RESOLVED FIXED
Firefox 36

People

(Reporter: cheilmann, Assigned: paul)

References

Details

(Whiteboard: [devrel])

Attachments

(2 files, 4 obsolete files)

Seems right now the font-size is fixed. Is there a chance to enable font-resizing? I am thinking of displaying this at conferences and old users like me :)
Yes, font resizing should apply to the projecteditor tree and text editors in addition to the project overview frame.
Do we want to zoom the whole UI (the toolbar as well)?
Paul: in terms of accessibility that would only make sense.
(In reply to Christian Heilmann from comment #3)
> Paul: in terms of accessibility that would only make sense.

I'm not sure about this - this wouldn't be consistent with the zooming in the rest of the browser UI.  For example, when I zoom in on Firefox the browser chrome doesn't zoom (just the page content).  For me, I like to zoom my font way in for the editor and if the toolbar zoomed in to the same level it would remove workable space.
I might have misunderstood there: All fonts should get bigger and smaller, the size of the toolbar should stay. As in, file names and labels on the toolbar should also resize.
Attached patch webide-zoom-WIP.patch (obsolete) — Splinter Review
I think we still need to decide exactly how we want zooming behavior to work, but this adds the same shortcuts that we have in the toolbox.  If this is close to what we want then I can wrap up the patch.
Assignee: nobody → bgrinstead
Status: NEW → ASSIGNED
Attached image zooming.gif (obsolete) —
here's what it looks like pressing cmd + / cmd - / cmd 0. I guess the options are:

1) Zoom like this (entire Project Editor including file tree and text editor)
2) Zoom only the text editor area and not the file tree (kind of like sublime text does)
3) Zoom the *entire* webide (including the area with play/stop/debug buttons, select runtime, etc).
4) Do (1) or (2) plus also zoom the other frames in web ide (like simulator manager)

My take is that (2) is most consistent with what other editors do and would be the most useful for me
(In reply to Brian Grinstead [:bgrins] from comment #7)
> Created attachment 8445590 [details]
> zooming.gif
> 
> here's what it looks like pressing cmd + / cmd - / cmd 0. I guess the
> options are:
> 
> 1) Zoom like this (entire Project Editor including file tree and text editor)
> 2) Zoom only the text editor area and not the file tree (kind of like
> sublime text does)
> 3) Zoom the *entire* webide (including the area with play/stop/debug
> buttons, select runtime, etc).
> 4) Do (1) or (2) plus also zoom the other frames in web ide (like simulator
> manager)
> 
> My take is that (2) is most consistent with what other editors do and would
> be the most useful for me

Why do people zoom?
> Why do people zoom?

Unless if you mean that in some philosophical way, I'd say to make the font bigger and smaller in the text editor.  I tried to do cmd + instinctively after opening up the Web IDE the first time to make the text bigger.
What about people who want to zoom to show the WebIDE during a talk? I think it's what Chris wants.
I don't think this should be blocking bug 1011026.
No longer blocks: enable-projecteditor
Just joining this discussion. 

For me, choosing a font size would be important to support my less than stellar eyesight. So it would help both in the file tree and the editor window. The toolbar would be of less importance. 

But in order to project the webIDE window on a screen to demonstrate its usage to an audience, I can see why the entire window would need to be zoomed.
Zooming should change the size of the editor and of the toolbox. Not sure about zooming the chrome. I'll let Jen decide.
Flags: needinfo?(jfong)
In the web console, zooming affects both the chrome and the console. It would seem strange to have it lack that behavior in webIDE being that they are part of Developer Tools. So I would say it makes sense that ctrl++, ctrl-- zooms everything.
Flags: needinfo?(jfong)
Duplicate of this bug: 1089153
I won't have time to implement that, but here is how to do it:

In webide.xul, add 3 commands in webideCommands.

<command id="cmd_zoom" oncommand="Cmds.zoom()"/>
<command id="cmd_unzoom" oncommand="Cmds.unzoom()"/>
<command id="cmd_resetzoom" oncommand="Cmds.resetZoom()"/>

Add 3 <key> in mainKeyset and 3 <menuitem> in menu-ViewPopup to bind these commands.

In webide.js, implement Cmds.zoom/unzoom/resetZoom.

This is how to change the zoom:

let viewer = webideWindow.QueryInterface(Ci.nsIInterfaceRequestor)
.getInterface(Ci.nsIWebNavigation)
.QueryInterface(Ci.nsIDocShell)
.contentViewer;

viewer.fullZoom = 1.3;
Assignee: bgrinstead → jfong
That might be actually trickier… zoom keys might conflict with the toolbox' keys. I might look at that.
Attached patch v1 (obsolete) — Splinter Review
Assignee: jfong → paul
Attachment #8445579 - Attachment is obsolete: true
Attachment #8445590 - Attachment is obsolete: true
Attached patch v1.1 (obsolete) — Splinter Review
Attachment #8516744 - Attachment is obsolete: true
Attachment #8516768 - Flags: review?(jryans)
Comment on attachment 8516768 [details] [diff] [review]
v1.1

Review of attachment 8516768 [details] [diff] [review]:
-----------------------------------------------------------------

This may be some strange XUL bug...  But zoom seems to break saving the window size.  For example:

1. Open WebIDE
2. Zoom in
3. Close & reopen WebIDE
4. Window is smaller than it was
5. Reset zoom
6. Close & reopen WebIDE
7. Window remains the right size

f+ for now, as I would like to see if we can resolve this.

Patch seems to depend on bug 1091036.

::: browser/devtools/framework/toolbox.js
@@ +285,5 @@
>          this._applyCacheSettings();
>          this._addKeysToWindow();
>          this._addReloadKeys();
>          this._addHostListeners();
> +        if (!this._hostOptions || !this._hostOptions.dontHandleZoom) {

Negated options read strangely.

How about disabling zoom is:

{ zoom: false }

and then here use:

if (!this._hostOptions || this._hostOptions.zoom !== false) {

::: browser/devtools/webide/content/webide.js
@@ +897,5 @@
>      iframe.id = "toolbox";
>  
>      document.querySelector("notificationbox").insertBefore(iframe, splitter.nextSibling);
>      let host = devtools.Toolbox.HostType.CUSTOM;
> +    let options = { customIframe: iframe, dontHandleZoom: true};

Use zoom: false as mentioned elsewhere.

::: browser/devtools/webide/content/webide.xul
@@ +89,5 @@
>      <menu id="menu-view" label="&viewMenu_label;" accesskey="&viewMenu_accesskey;">
>        <menupopup id="menu-ViewPopup">
>          <menuitem command="cmd_toggleEditor" key="key_toggleEditor" accesskey="&viewMenu_toggleEditor_accesskey;"/>
> +        <menuseparator/>
> +        <menuitem command="cmd_zoomin" key="key_zoomin" accesskey="&viewMenu_zoomin_accesskey;"/>

Wow, the View menu has a purpose!
Attachment #8516768 - Flags: review?(jryans) → feedback+
Summary: Font-resizing in WebIDE? → Font-resizing in WebIDE
Depends on: 1091036
Attached patch interdiff.diffSplinter Review
Attachment #8516768 - Attachment is obsolete: true
Attached patch v1.2Splinter Review
Attachment #8517352 - Flags: review?(jryans)
(In reply to J. Ryan Stinnett [:jryans] from comment #20)
> Comment on attachment 8516768 [details] [diff] [review]
> v1.1
> 
> Review of attachment 8516768 [details] [diff] [review]:
> -----------------------------------------------------------------
> 
> This may be some strange XUL bug...  But zoom seems to break saving the
> window size.  For example:
> 
> 1. Open WebIDE
> 2. Zoom in
> 3. Close & reopen WebIDE
> 4. Window is smaller than it was
> 5. Reset zoom
> 6. Close & reopen WebIDE
> 7. Window remains the right size


> 4. Window is smaller than it was

How smaller? On osx?
(In reply to Paul Rouget [:paul] (slow to respond. Ping me on IRC) from comment #23)
> (In reply to J. Ryan Stinnett [:jryans] from comment #20)
> > Comment on attachment 8516768 [details] [diff] [review]
> > v1.1
> > 
> > Review of attachment 8516768 [details] [diff] [review]:
> > -----------------------------------------------------------------
> > 
> > This may be some strange XUL bug...  But zoom seems to break saving the
> > window size.  For example:
> > 
> > 1. Open WebIDE
> > 2. Zoom in
> > 3. Close & reopen WebIDE
> > 4. Window is smaller than it was
> > 5. Reset zoom
> > 6. Close & reopen WebIDE
> > 7. Window remains the right size
> 
> 
> > 4. Window is smaller than it was
> 
> How smaller? On osx?

Yes, on OS X.  The size change depends on how far you zoom in.  The more you zoom in, the smaller the window is on next open.  By the time you hit max zoom, it's at least hundreds of pixels smaller than it was before.
Comment on attachment 8517352 [details] [diff] [review]
v1.2

Review of attachment 8517352 [details] [diff] [review]:
-----------------------------------------------------------------

r+, code looks good, but would be good to investigate the window shrinking (on OS X at least) before landing.

::: browser/devtools/webide/content/webide.js
@@ +897,5 @@
>      iframe.id = "toolbox";
>  
>      document.querySelector("notificationbox").insertBefore(iframe, splitter.nextSibling);
>      let host = devtools.Toolbox.HostType.CUSTOM;
> +    let options = { customIframe: iframe, zoom: false};

Nit: add space before "}"
Attachment #8517352 - Flags: review?(jryans) → review+
https://tbpl.mozilla.org/?tree=Try&rev=3e9982504566

Green.

Ryan, restoring the size after onload fixes the resize problem (at least here on Linux).
Keywords: checkin-needed
Hi Paul,

patched failed to apply:

patching file browser/devtools/webide/content/webide.js
Hunk #1 succeeded at 27 with fuzz 2 (offset 1 lines).
patching file browser/devtools/webide/test/chrome.ini
Hunk #1 FAILED at 33
1 out of 1 hunks FAILED -- saving rejects to file browser/devtools/webide/test/chrome.ini.rej
patching file browser/locales/en-US/chrome/browser/devtools/webide.dtd
Hunk #1 FAILED at 38
1 out of 1 hunks FAILED -- saving rejects to file browser/locales/en-US/chrome/browser/devtools/webide.dtd.rej
patch failed, unable to continue (try -v)


could you take a look, thanks!
Flags: needinfo?(paul)
Keywords: checkin-needed
Rebased and pushed.
Flags: needinfo?(paul)
https://hg.mozilla.org/mozilla-central/rev/055ea2642aba
Status: ASSIGNED → RESOLVED
Closed: 7 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 36
Product: Firefox → DevTools
Product: DevTools → DevTools Graveyard
You need to log in before you can comment on or make changes to this bug.