Add full screen mode to the customizer's additional css control

[hayatbiralem]

Hello,

Sometimes our CSS rules and its contents could be long than the width of the customizer sidebar. Sometimes when doing some search and refactoring we need to toggle full screen. I think it could be very useful.

And it could be implemented easily by adding following settings to the related code mirror creation:

Javascript

CodeMirror.fromTextArea(element, {
    // ...
    extraKeys: {
        "F11": function(cm) {
            cm.setOption("fullScreen", !cm.getOption("fullScreen"));
        },
        "Esc": function(cm) {
            if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
        }
    }
});

CSS

html body .CodeMirror-fullscreen {
    z-index: 1000;
}

I tried it on a custom textarea control and it worked without any other addition and that would be great if the default additional css control has that functionality.

Thanks in advance.

[hayatbiralem]

Official example is in here ​https://codemirror.net/demo/fullscreen.html

[hayatbiralem]

You can see it in action at here: ​https://github.com/hayatbiralem/wp-customizer-tracking-codes

This plugin's code panels supports F11 to toggle full screen.

[dlh]

Hi @hayatbiralem, and welcome to WordPress Trac!

Resizable controls have been discussed previously in #32296. The consensus was to avoid introducing them into core without a wide range of theme- and plugin-specific testing (see ticket:32296#comment:39), and I don't anticipate there being resources available to do that anytime soon. Additionally, new keyboard shortcuts in core might be best implemented with core's own ​shortcuts library. In the meantime, this sounds like it would make a great plugin for users who are using the Additional CSS control extensively.

[celloexpressions]

A full screen (or pop-out) feature specifically for additional CSS is part of the design concepts in #38707. Let's continue this discussion on that ticket.

In the meantime, it would be great to see a plugin experiment with implementing this idea.