unable to use Clay in emulator

clach04 commented 5 years ago

This is due initially to the code being hard coded to to open http://clay.pebble.com.s3-website-us-west-2.amazonaws.com/ which has been offline for a while.

However I'm not clear the technique being used is possible since late 2017 with a change to Mozilla Firefox, https://blog.mozilla.org/security/2017/11/27/blocking-top-level-navigations-data-urls-firefox-59/ (also see bug https://bugzilla.mozilla.org/show_bug.cgi?id=1331351).

Hacking in a new URL (into https://github.com/pebble/clay/blob/master/dev/emulator.html ) results in an error in the debugger console in Mozilla Firefox:

Navigation to toplevel data: URI not allowed (Blocked loading of: “data:text/html;charset=utf-8,<!DOCTYPE html>...”)

I'm not yet clear why the emulator uses a web page and doesn't use a data URI like it does on the phone.

In the mean time for emulator debugging/testing I'm using a regular web page.

clach04 commented 5 years ago

https://github.com/clach04/clay/tree/%23162/new_emulator_url has a demo that appears to not work for modern browsers.

Its possible pushing data into an iframe may be a viable workaround.

clach04 commented 5 years ago

As I'm using a VM I tried Firefox version 55 and whilst it does not error and does update the URL to a data URI the windows content is blank (dark, so the CSS is loading) :(

clach04 commented 5 years ago

Same for 49.0.1

clach04 commented 5 years ago

I'm trying to recall when/if Firefox worked with Clay as I know initially it targeted Chrome (I do recall issues with Firefox)

clach04 commented 5 years ago

Firefox 35.0.1 does not work with clay 1.0.4, errors on decodeURIComponent(location.hash.substring(1));.

Version 54 does not work with dark screen as per above.

clach04 commented 5 years ago

So I ended up needing to use custom handlers with Clay and I was going to add some emulator detector code in place so that I could spawn a regular website URL rather than Clay. Using the custom actions made Clay work in the emulator (using Chromium as browser, I've not tried anything else).

I.e. the following worked for Phone and Emulator on desktop:

var Clay = require('./clay.js');
var clayConfig = require('./config');
var clay = new Clay(clayConfig, null, { autoHandleEvents: false });

// as autoHandleEvents set to false need a basic showConfiguration action
Pebble.addEventListener('showConfiguration', function(e) {
    // for what ever reason this then causes Clay display to work in emulatpr
    // // NOTE save works with web app, but then get error and pebble never receives data/config with my quick test
    var emulator = !Pebble || Pebble.platform === 'pypkjs';
    console.log('showConfiguration');
    console.log('emulator  =' + JSON.stringify(emulator));

    Pebble.openURL(clay.generateUrl());
});

Pebble.addEventListener('webviewclosed', function(e) {
    if (e && !e.response) {
    return;
    }

    // Get the keys and values from each config item
    var dict = clay.getSettings(e.response);

    console.log('string config data =' + JSON.stringify(dict));
    console.log('string config data length=' + JSON.stringify(dict).length);
    // Send settings values to watch side
    Pebble.sendAppMessage(dict, function(e) {
    console.log('Sent config data to Pebble');
    }, function(e) {
    console.log('Failed to send config data!');
    //console.log(JSON.stringify(e));
    });
});

NOTE clay modified to point to a server that is up

mattrossman commented 5 years ago

@clach04 It looks like it took many twists and turns for you to get to a working state, can you summarize the proper way to get this all working these days? I have copied the code from your latest comment into my index.js and gone into node_modules/pebble-clay/src/js/index.js (as created by pebble package install pebble-clay) and replaced the old Amazon S3 URL with your copy at http://clach04.github.io/pebble/clay/emulator.html#. When I do a clean, build, and install of my app on the emulator and run

pebble emu-app-config

I still get directed to the old broken S3 address in my default web browser. I imagine this is some simple Node issue that I'm not familiar with. Is there a straightforward series of steps you can provide for people to get Clay emulation working with minimal hacks?

clach04 commented 5 years ago

@mattrossman my Pebble sdk machine is kaput so best I can do is point you at what my notes indicate is a working branch with code that uses the above.

https://github.com/clach04/pebble-rest-timer/commits/emu_clay

I still use this app on my Pebble, I just can't debug it

I saw some one had a docker image of the sdk/emulator but I'm not sure when I will get chance to play with it any time soon :-(

clach04 commented 5 years ago

@matthewtole if you are still getting the AWS url, then the pebble clay package you have is not hacked (correctly). I dug out my old vm and spent the last few hours remembering how pebble node packages work. I'm not convinced I have this all figured out in my head but I do have it working.

I'm using my github hosted clay emulator, its at http://clach04.github.io/pebble/clay/emulator.html# - note the #, my hacked pebble-clay source is in https://github.com/clach04/clay/commits/%23162/new_emulator_url (I did experiment with http://clach04.github.io/pebble/clay/# but not had any success, even though index.html is the same as emulator.html, redirect to data page fails)
You do need the hacked pebble clay installed, I do not have a great mechanism for this but I build it (gulp, npm run build (for good measure, may not be needed), pebble build) and then on the same machine where I have the project I want it issue pebble package install /path/to/build/dir - I've not found a better way yet.
application js needs to handle showConfiguration
I'm using Lubuntu 18.05 LTS and Chrome 48.0.2564.109. If I use Chromium 69 then the redirect is denied - in theory you could copy/paste/edit the redirect URL

Let me know how you get on. I've not figured out how to make deliverable pebble-clay packages otherwise I'd attach to github for you to pull down.

mattrossman commented 5 years ago

@clach04 I ended up finding a better solution I think. I ran into some hiccups with the instructions, but I eventually reached the point where Chrome was denying the redirect. I realized that I had already been able to reach this point simply by cloning that rest timer app you linked earlier. I noticed that you included a (modified) copy of the clay.js source in your repo, so there was no need to use any pebble package commands to get up and running. I removed all the pebble-clay stuff from my project that was being managed by node and just copied that clay.js source file into my project, changing the require statment in my index.js accordingly. That left me with the remaining "Navigation to toplevel data: URI not allowed" issue.

This was resolved by adding in this function to replace the HTML content of the current page from within the Githubissues.

Githubissues is a development platform for aggregating issues.

pebble / clay

unable to use Clay in emulator #162