Add magnifying ability, perceptual diff and improve layout of Skia Tryserver HTML output

Add magnifying ability, perceptual diff and improve layout of Skia Tryserver HTML output in Cluster Telemetry.

Unfortunately I do not have a publicly accessible HTML to show the output of this, I will once it is submitted and I kick off a test run.

BUG=skia:2096
Committed: https://skia.googlesource.com/buildbot/+/2f7e100

[rmistry, 2014-01-28 21:45:02]

Committed patchset #3 manually as r2f7e100 (presubmit successful).

[epoger, 2014-02-03 21:17:13]

Seems pretty reasonable at a high level.  Some comments/questions...

https://codereview.chromium.org/148093012/diff/40001/compute_engine_scripts/t...
File compute_engine_scripts/telemetry/json_summary_constants.py (right):

https://codereview.chromium.org/148093012/diff/40001/compute_engine_scripts/t...
compute_engine_scripts/telemetry/json_summary_constants.py:1: #!/usr/bin/env
python
Where can I go to see this in action?

I tried to view the most recent Chromium Try and Skia Try tasks at
https://skia-tree-status.appspot.com/skia-telemetry/all_tasks#telemetry :

https://storage.cloud.google.com/chromium-skia-gm/telemetry/tryserver-outputs...

https://storage.cloud.google.com/chromium-skia-gm/telemetry/skia-tryserver/ht...


But in both cases, the page failed to load with "This webpage has a redirect
loop"

(They both redirected me to URLs starting with
https://www.google.com/accounts/ServiceLogin?service=cds&passive=1209600&cont...
, even though I already authenticated myself)

https://codereview.chromium.org/148093012/diff/40001/compute_engine_scripts/t...
compute_engine_scripts/telemetry/json_summary_constants.py:22:
JSONKEY_PERCEPTUAL_SIMILARITY = 'perceptualSimilarity'
I think it may confuse users for some of these metrics to measure similarity,
and others to measure difference.  We'll see.

https://codereview.chromium.org/148093012/diff/40001/compute_engine_scripts/t...
File compute_engine_scripts/telemetry/static-files/angular.min.js (right):

https://codereview.chromium.org/148093012/diff/40001/compute_engine_scripts/t...
compute_engine_scripts/telemetry/static-files/angular.min.js:1: /*
Do we need to host this ourselves, or can we just use one of the revisions
Google already hosts under https://ajax.googleapis.com/ajax/libs/angularjs/ ?

See https://developers.google.com/speed/libraries/devguide#angularjs

(Maybe we need this particular version, which may not be available there???)

https://codereview.chromium.org/148093012/diff/40001/compute_engine_scripts/t...
compute_engine_scripts/telemetry/static-files/angular.min.js:2: AngularJS v1.0.7
and if we ARE going to host this file ourselves, perhaps we should include the
version number within the filename

https://codereview.chromium.org/148093012/diff/40001/compute_engine_scripts/t...
File compute_engine_scripts/telemetry/static-files/diff_viewer.js (right):

https://codereview.chromium.org/148093012/diff/40001/compute_engine_scripts/t...
compute_engine_scripts/telemetry/static-files/diff_viewer.js:1: var
MAX_SWAP_IMG_SIZE = 400;
Do we need copyright notice up here?

https://codereview.chromium.org/148093012/diff/40001/compute_engine_scripts/t...
compute_engine_scripts/telemetry/static-files/diff_viewer.js:3: var
MAGNIFIER_HEIGHT = 200;
So, if we are hosting this file within Google Storage, what is the HTTP-cacheing
update policy?  (In other words, is there some lag between when we update the
file and when that update will become available to clients?)

If there is non-negligible delay, and we envision ever making changes to this
file, we may need to store it using a version number to prevent code version
mismatches.

https://codereview.chromium.org/148093012/diff/40001/compute_engine_scripts/t...
compute_engine_scripts/telemetry/static-files/diff_viewer.js:9: // Custom
directive for comparing (3-way) images
Maybe it's just me, but this all seems like magic and I don't know how it gets
"plugged into" the rest of the UI.  Perhaps more documentation would be useful.

https://codereview.chromium.org/148093012/diff/40001/compute_engine_scripts/t...
compute_engine_scripts/telemetry/static-files/diff_viewer.js:28: // maskCanvas =
true;
why is this commented out?

https://codereview.chromium.org/148093012/diff/40001/compute_engine_scripts/t...
compute_engine_scripts/telemetry/static-files/diff_viewer.js:57:
scope.setImgScaleFactor(1 / divisor);
I don't know how JavaScript handles floating point math... might there be a
compelling reason to store the scale factor as its (integer) divisor component,
rather than as 1/divisor?

This might affect the results of multiplying by imgScaleFactor below...

https://codereview.chromium.org/148093012/diff/40001/compute_engine_scripts/t...
compute_engine_scripts/telemetry/static-files/diff_viewer.js:76: // when
updatedMaskSize changes, update mask canvas size.
Somewhere there needs to be an explanation of what the different mask sizes mean
in here.  (See also my comments at the bottom of this file.)

https://codereview.chromium.org/148093012/diff/40001/compute_engine_scripts/t...
compute_engine_scripts/telemetry/static-files/diff_viewer.js:82: // rmistry:
Commented out because was throwing js errors.
So, does this function do anything now?

https://codereview.chromium.org/148093012/diff/40001/compute_engine_scripts/t...
compute_engine_scripts/telemetry/static-files/diff_viewer.js:155: if
(startMagnify) {
seems like indent levels shift freely between 2 and 4 within this file...

https://codereview.chromium.org/148093012/diff/40001/compute_engine_scripts/t...
compute_engine_scripts/telemetry/static-files/diff_viewer.js:208:
$scope.updateMaskCanvasSize = function(updatedSize) {
Is there some reason we don't use consistent naming for this one, like so?

$scope.setMaskCanvasSize = function(maskCanvasSize) {
    $scope.maskCanvasSize = maskCanvasSize;
}

https://codereview.chromium.org/148093012/diff/40001/compute_engine_scripts/t...
compute_engine_scripts/telemetry/static-files/diff_viewer.js:212:
$scope.maskCanvasSizeUpdated = function(flag) {
What is this function for?  How does it relate to the function above it?

https://codereview.chromium.org/148093012/diff/40001/compute_engine_scripts/t...
File
compute_engine_scripts/telemetry/telemetry_master_scripts/json_summary_combiner.py
(right):

https://codereview.chromium.org/148093012/diff/40001/compute_engine_scripts/t...
compute_engine_scripts/telemetry/telemetry_master_scripts/json_summary_combiner.py:44:
def __init__(self, file_name, skp_location, num_pixels_differing,
Please document parameters (throughout this file)

https://codereview.chromium.org/148093012/diff/40001/compute_engine_scripts/t...
File
compute_engine_scripts/telemetry/telemetry_slave_scripts/write_json_summary.py
(right):

https://codereview.chromium.org/148093012/diff/40001/compute_engine_scripts/t...
compute_engine_scripts/telemetry/telemetry_slave_scripts/write_json_summary.py:190:
or not options.gm_json_path or not options.img_root
I think an automated check of all required_params in a list is cleaner, as in
https://code.google.com/p/skia/source/browse/trunk/gm/rebaseline_server/downl...