DevTools Snippets - adobe-photoshop/spaces-design GitHub Wiki

The following DevTools snippets can make working with Spaces/Design Space easier.

Instructions for installing and using snippets are here.

all-events.js

Print out the command name and action descriptors of events being played in native Photoshop.

(This snippet is integrated into Design Spaces. Toggle this feature from menu Debug > Log Descriptor Events)

echo-play.js

Write out all get and play commands being sent to Photoshop, and their responses

(This snippet is integrated into Design Spaces. Toggle this feature from menu Debug > Log Descriptor Events)

ps-events.js

Yet another snippet to echo notifications in Design Space (from this page).

var psNotifierHandler = function(err, type, info) {console.log("ps-notification:'" + type + "'  info:" + JSON.stringify(info));};
_spaces.setNotifier(_spaces.notifierGroup.PHOTOSHOP, {}, psNotifierHandler);

classic-ui-and-menu.js

The following snippet will turn on classic Photoshop overlay, without switching to classic Photoshop (will break UI and certain functionality!)

window._spacesToggled = (window._spacesToggled === undefined) ? true : window._spacesToggled;

(function () {
    var ui = require("adapter").ps.ui;
    var flux = require("js/main").getController().flux;

    if (window._spacesToggled) {
        ui.setClassicChromeVisibility(true);    
        ui.installMenu({}, {});
    } else {
        ui.setClassicChromeVisibility(false);
        flux.actions.menu.beforeStartup();
    }

    window._spacesToggled = !window._spacesToggled;
}());

current-layer.js

Print out the currently selected layer's descriptor

(This snippet is integrated into Design Spaces. Load the helper from menu Debug > Load Debugging Helpers and run _getSelectedLayers())

load-flux.js

Load Flux to a variable for use in console

(This snippet is integrated into Design Spaces. Load the helper from menu Debug > Load Debugging Helpers and run _getFluxInstance())

echo-transform.js

This snippet will print out request/response of all transform commands

/**
 * This snippet will print any of the transform commands we're sending Photoshop
 * and their results
 **/
(function () {
    var Descriptor = require("adapter/ps/descriptor");
        log = require("js/util/log");

    log.enableAll();

    var originalBatchPlay = Descriptor.batchPlay;

    Descriptor.batchPlay = function (commands, options, batchOptions) {
        commands.forEach(function (command) {
           if (command.name === "transform") {
               log.debug("Transform command being sent:");
                log.debug(JSON.stringify(command, null, " "));
           }
        });
        return originalBatchPlay.call(Descriptor, commands, options, batchOptions).then(function (result) {
            result.forEach(function (res) {
                if (res.hasOwnProperty("freeTransformCenterState")) {
                    log.debug("Transform result from Photoshop:");
                    log.debug(JSON.stringify(res, null, " "));
                };
            });
            return result;
        }).catch(function (err) {
            log.debug(err);
            log.debug(JSON.stringify(commands, null, " "));
        });
    };

}());

Headlights Patch

This snippet is integrated into Design Spaces. Toggle this feature from menu Debug > Log Highlights Events