search

cloudflare / mitm.watch

MIT License
14 stars 4 forks source link

Dec visual update #2

Closed eetom closed 6 years ago

eetom commented 6 years ago

Updates for front end styles.

image image image

@Lekensteyn please connect all the functions! Thanks!

Lekensteyn commented 6 years ago

Looks great, thanks @eetom. I have updated the text, does that look good to you? If so, I plan to merge it (have some work on a different branch that need to be connected with this PR).

eetom commented 6 years ago

Sure, im ok with any text updates. :) Yes please! Im ok to continue to work on this to give it some more polish. (i think i forgot to add the link to this repo in the footer)

Lekensteyn commented 6 years ago

Cool :) I have merged this branch into the reporter-wip branch and done some changes on top of it. Do you plan to make more changes? For testing the current application (without building the server component), see below.

The application has a few states which can be controlled through classes on the body element. For convenience, below is some code that can be executed from Developer Tools in Firefox or Chrome:

  1. Initial state - visible when loading the index.html page

  2. Start The Tests activated (but the Go library has not finished loading yet):

    $("body").className = "test-active"

  3. Finished loading the Go library, application is patiently waiting for Flash:

    $("body").className = "test-active booting"

  4. Application requests user to activate Flash after a timeout:

    $("body").className = "test-active booting flash-please"

    Note: when Flash is not installed or disabled (in Firefox: Plugins -> Flash -> Never activate), a different message is shown.

  5. Flash is activated by the user, application is ready to start tests:

    $("body").className = "test-active booted"

  6. Display test cases after the server sends them to the client (you can also add the rows manually like you did so far, it has the same effect):

    addExperiment({Version:0x303,IPv6:false});
addExperiment({Version:0x303,IPv6:true});
addExperiment({Version:0x304,IPv6:false});
addExperiment({Version:0x304,IPv6:true});

  7. Test cases are finished asynchronously, example to mark the second test (index 1) as failure and mark the third test (index 2) as successful (likewise, you could edit the rows manually and add the status-ok, status-fail and status-na classes):

    updateExperiment(1, {Version:0x303,IPv6:true,Failed:true,Result:"remark here"});
updateExperiment(2, {Version:0x304,IPv6:false,Failed:false});
Lekensteyn commented 6 years ago

The changes are now live at https://tls13.mitm.watch

I hastly added a restart button at the end which is not styled (not sure whether to keep it or remove it).