HTML Panel Tips #25: CC 2018 Survival Guide

Davide Barranca —  — 7 Comments

That time of the year has come, and Photoshop CC 2018 is here. Read along to find out Everything You Always Wanted to Know About CEP 8* (*But Were Afraid to Ask).

A brief history of Photoshop’s HTML Panels support for your pleasure:

Creative Cloud version PS Internal version CEP version
Photoshop CC 14.x 4.0
Photoshop CC 2014 15.x 5.0
Photoshop CC 2015 16.x 6.0
Photoshop CC 2015.5 17.x 7.0
Photoshop CC 2017 18.x 7.0
Photoshop CC 2018 19.x 8.0

Set aside the weird correspondence in the above version numbers, you see that we’ve jumped to CEP 8, and Photoshop internal version is now 19.0.0.

Versions

CEF has been bumped to 3.2987, Chromium is 57.0.2987.74 (leap of faith because for some mysterious reason window.location = "chrome://version" doesn’t work anymore) and Node.js is 7.7.4, whereas Generator’s Node.js is 4.8.4. Enough with digits, let’s dig into actual stuff.

You’d be tempted to use Version="8.0" in manifest.xml, like:

Tempting, but don’t do it. Version in <ExtensionManifest> and <RequiredRuntime> has always matched CEP version, but in this case setting the two to "8.0" will make your panel disappear from the Window > Extensions menu. Why? We’re in the same boat, I’ve asked around but got no plausible answer yet. Stick to "7.0".

CSInterface

I’ve inspected the diffs between CSInterface.js (CEP 7 vs. CEP 8) and it’s just punctuation in comments. LOL.

Debugging

Debugging tips: Google Chrome 62.0.3202.62 (Official Build) (64-bit) at least on macOS Sierra 10.12.6 can’t connect anymore a debug session. It seems it can: you successfully load localhost:8088 (or whatever port you’re using) and the usual textual link appears. Click it, and you’re staring at a blank Chrome Developer Tools page. Out of curiosity I opened the Console and got a “Uncaught Error: No setting registered: showAdvancedHeapSnapshotProperties” referring to inspector.js.

Workaround: download Google Chromium. The theory is that you should test your panel with the exact Chromium version implemented in the host application: yet, finding it is a majestic pain in the butt if you try to follow the official instruction for old builds. The closest one I’ve been able to get is 57.0.2987.0 and you can get it too here. For debugging in a working DevTool, Chromium-latest should work too.

Node.js

There must be some kind of bloody war going on at the Adobe headquarters around Node.js. Only between CC 2015.0 and CC 2015.1.2 its implementation changed thrice, and of course there’s something new and backward not compatible in CEP 8 as well. Anyway, the State of the Art is as follows.

Node is still disabled by default. Very like with CEP 7, if you want to enable it, add these in the manifest.xml:

Mind you, --mixed-context is optional. So you basically have three possible scenarios:

  1. Forget about Node entirely (no --enable-nodejs flag): it’s disabled.
  2. Enable Node in a Separate Context (--enable-nodejs but no --mixed-context).
  3. Enable Node in a Mixed Context (--enable-nodejs and --mixed-context).

As a quick reminder on Contexts, due to the io.js switch back in an earlier version, I’ve been told, Node.js and the Browser/Panel contexts don’t talk to each other anymore. What does this mean? If you have a Node.js module and try to access the jQuery $ object, or csInterface, or anything else defined in the Browser context (e.g. your main.js file), it won’t work. Workaround: use the global window object as a bridge. Or enable Mixed Context.

This hasn’t change from CEP7, so I’ll skip to the new stuff.

Besides injecting in the global space Buffer, global, process, require and module, CEP 8 adds a new cep_node global, which has its own Buffer, global, process and require properties.

These new props props are useful because now an <iframe> (which still needs to have its own enable-nodejs specified), is going access cep_node, that you can use as a bridge object between <iframe> elements when the Context is Separate. This marks a difference with CEP7, where Node globals were always available. Also, order of appearance is important to access data, see below:

As opposed to the previous case and still specific to CEP8, with Mixed Context the Node globals are always available, everywhere (<iframe> elements included), but this time cep_node is rebuilt from scratch in each <iframe>.

What else: module and exports globals may conflict with some JS libraries, e.g. jQuery, resulting in the library being loaded in the Node context rather than in the Browser’s. As a fix, try:

Oh, now in CEP 8 require() paths need to be absolute and not relative, like:

And I’d say this sums up things for Node.js

Bugs

I’m listing here the known CEP 8 bugs, even the one already mentioned in the post.

  • Version="8.0" in the <ExtensionManifest> and <RequiredRuntime> tags in manifest.xml (to match CEP version) makes the Panel disappear from the Extensions list.
  • Panel Geometry bug: setting <Size>, <MinSize> and <MaxSize> with equal values doesn’t produce a fixed size (unresizable) panel anymore, as it used to do with any other pre-2018 version. In order to make a fixed sized panel in 2018, set only the <Size> tag. That is to say: panel is fixed size in 2018 but not in CC, 2014, 2015, 2015.5, 2017 or the other way around. Very funny. Moreover, the very fist time a panel is collapsed/reopened, it assumes forever some completely wrong width/height, and may hide relevant content.
  • Bug with Panel Refresh: (either via ⌘+R on Chromium Dev Tools, or window.location.reload(true) in the panel). You may run into problems with Node after the first refresh unless you have both --enable-nodejs and --mixed-context flags set.
  • As I mentioned before, setting the panel’s window.location = "chrome://version" doesn’t load the Chrome Version page in the Panel anymore – it used to work fine with CC 2017.
  • Not really a bug, but be aware that some videos that used to play well (e.g. from YouTube) in CEP 7, won’t play at all in CEP 8. This is due to a WebM VP9 codec that Chromium doesn’t support anymore (the codec License doesn’t get along well with the Chromium Open Source License, so they dropped the support).

Documentation

You can have a look at the official CEP 8 Cookbook here. While writing this post, the CEP Github repository still has no CEF Client (CEF Client has been added and is found here), no updated ZXPSignCmd.

Admins of the Adobe-CEP GitHub repository accepts push requests for the Cookbook, so users are allowed / encouraged to make the documentation better!


The Photoshop HTML Panels Development Course – CC 2018 Edition

Photoshop HTML Panels Development course
If you’re reading here, you might be interested in my Photoshop Panels development – so let me inform you that I’ve authored a full course:

  • 303 pages PDF
  • 3 hours of HD screencasts
  • 28 custom Panels with commented code

Check it out!
Please help me spread the news – I’ll be able to keep producing more exclusive content on this blog. Thank you!

Print Friendly, PDF & Email
Share

7 responses to HTML Panel Tips #25: CC 2018 Survival Guide

  1. Davide,
    Whats your suggestion about the Panel Geometry bug, Just leave the panels as they used to be and wait for a fix or is the likelihood of a fix a long way down the road

  2. Does your extension reboots itself when you try to debug it?
    I’ve put several breakpoints in my code, when trying to debug, the first breakpoint hit and then when I click “play” the extension reboots instead of stopping in the next breakpoint…
    Any idea how to solve this?

  3. Hi Davide,
    all of a sudden the background color of my panel is white? Any idea?

    Thanks
    Reiner

  4. Sorry if this is too off topic. But how do you get a more specific error than “evalscript error” from scripts running in the extendscript engine?

    Something has changed from CC2017 to CC2018 making app.open( new File( assetPath ) ); fail in photoshop 2018 for me and without a proper error it’s so time consuming trying to fix it.

    Thanks a lot for your blog Davide, it’s a breath of fresh air in the bag of hurt that is developing extensions for adobe.

  5. Hi Davide,
    I love the option of creating HTML Panels for Photoshop. It is so much individual and powerfull tool.
    But my biggest Problem is making the Panel installable.
    I tried to use your installer script, but also your example file failed:

    Installation failed: Message: undefined ist kein Objekt
    File: ~/Downloads/PS-Installer-master/Example/installer.jsx
    Line: 237
    Error Name: TypeError
    Error Number: 21 [installer.jsx]
    anonymous([Error:Typfehler: undefined ist kein Objekt])

    I tried to use some third-party extension manager like “Anastasiy Extension Manager” and “PVIIexman” but therefore I need a .zxp file and I will not find a usefull option to simply create a ZXP file with all stuff included which is needed for installation. I just get Fail information about the crashed ZXP file or the ZXP file is not generated correctly.

    Do you have some usefull tips for me?

    • Hi Timm,
      I’ve stopped using scripted installers myself (too many user permission issues) and switched entirely to native installers – exe files on Windows, pkg wrapped with dmg on Mac. My building system is now entirely automated, meaning that I’ve a Gulp task that takes the plain code extensions, minifies/obfuscates it, signs and timestamps it building the inevitable ZXP, unzip it for (optional) manual installation, runs the “Packages” app via commandline to build the pkg, runs the “DMG Canvas” app via commandline to build the dmg, runs InnoSetup to build the exe, signs both of them with either a Mac Developer Certificate and a Comodo software certificate, spits out everything in a matter of 20 seconds. I haven’t had the chance to blog on it, but I’ve updated my HTML Panels Development course with proper information about native installers.

      • Hi Davide,
        thank you very much vor quick response. Your solution sounds very smart for userside! I started developing with ExtendScript und HTML-Panels last year, so my know how is still growing up. Your solution sounds a bit to complicated for my work at the moment, but I had solved my scripted installer problem yesterday evening. For the moment it works and in near future I would like to buy your book and course for better performances. I think developing in scripted Photoshop-Solution and panel based user interfaces is the future and can save so much time! I am very sad about the rare information on web.
        Thank you 🙂

Leave a Reply

Text formatting is available via select .

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url=""> 

*
*