Add UI zoom functionality (and fix ace-editor's poor handling of CSS zoom)

[mat888]

It would be nice to be able to make the UI larger or smaller. By opening element inspector and adding

html {
   zoom: 75%;
}

to any css file, the desired result appears to work across the user interface. The one problem is with the ace-text editor which is used for the Pact Editor. Ace-text resizes perfectly in appearance, but the mouse cursor will fail to track properly with any zoom value other than 100%. This is a known issue, and it appears there is a JavaScript hack to fix it.

https://github.com/ajaxorg/ace/issues/2475#issuecomment-364266978

[mat888]

Figured out if you zoom in the .ace_container div the inverse proportion you zoom out the rest of the html that the editor will keep its proper mouse tracking. Finally you can scale the font size down in the editor by the same factor you zoomed out you can shrink that to the appropriate size as well. Here is a hack you can put into the CSS right now via element inspect to achieve this.

html {
    zoom: 80%;
    / 100% * (4/5)
}

 .ace_editor {
     font-size: 12px!important;
     / 15px * (4/5)
}

.ace_container {
    zoom: 125%;
    / 100% * (5/4)
}

[mightybyte]

Thanks! We've got a few other things that are higher priority right now, but this looks like it will be helpful once we figure out a good UI for it.

[radiantone]

Hi, Is this slated to be fixed or implemented soon? I think to help make ace more device and form-factor friendly it needs this feature.