Major revision of page cycler UI.

chrome/common/extensions/docs/examples/apps/cycler/playback_tab.js

+// Copyright (c) 2012 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+var PlaybackTab = function (cyclerUI, cyclerData) {

[Jeffrey Yasskin, 2012/08/15 01:03:59]

Each class could use a comment saying what its purpose is.

[clintstaley, 2012/08/15 23:54:20]

Done.

+  /**
+   * Enum for different capture tab states, showing variously a page for

[Jeffrey Yasskin, 2012/08/15 01:03:59]

I think I'd move the descriptions of each state into comments before each enum
value.

[Jeffrey Yasskin, 2012/08/15 01:03:59]

s/capture/playback/?

[clintstaley, 2012/08/15 23:54:20]

Done.

[clintstaley, 2012/08/15 23:54:20]

Done.

+   * choosing a playback, one for showing an already-chosen playback, and
+   * one for indicating that no playback choices yet exist.
+   * @enum {number}
+   * @private
+   */
+  var EnableState_ = {
+      choosePlayback: 1, showPlayback: 2, showNoCaptures: 3};
+
+  this.cyclerUI_ = cyclerUI;
+  this.cyclerData_ = cyclerData;
+
+  /**
+   * Create members for all UI elements with which we'll interact.
+   */
+  this.playbackTab_ = $('#playback-tab');
+  this.noCaptures_ = $('#no-captures');
+  this.yesCaptures_ = $('#yes-captures');
+
+  this.playbackName_ = $('#playback-name');
+  this.playbackDetails_ = $('#playback-details');
+  this.playbackURLs_ = $('#playback-urls');
+  this.playbackRepeats_ = $('#playback-repeats');
+  this.playbackExtension_ = $('#playback-extension');
+  this.doPlaybackButton_ = $('#do-playback');
+  this.doDeleteButton_ = $('#do-delete');
+
+  /*
+   * Enable the playback tab, showing no current playback choice, by
+   * hiding the playbackDetails_ div.
+   * @private
+   */
+  this.enableChoosePlayback_ = function() {
+    this.playbackTab_.hidden = false;
+    if (this.enableState != EnableState_.choosePlayback) {
+      this.enableState = EnableState_.choosePlayback;
+      this.noCaptures_.hidden = true;
+      this.yesCaptures_.hidden = false;
+      this.playbackDetails_.hidden = true;
+    }
+  };
+
+  /*
+   * Enable the playback tab, showing a current playback choice by showing
+   * the playbackDetails_ div.
+   * @private
+   */
+  this.enableShowPlayback_ = function() {
+    this.playbackTab_.hidden = false;
+    if (this.enableState != EnableState_.showPlayback) {
+      this.enableState = EnableState_.showPlayback;
+      this.noCaptures_.hidden = true;
+      this.yesCaptures_.hidden = false;
+      this.playbackDetails_.hidden = false;
+    }
+  };
+
+  /*
+   * Enable the playback tab and adjust tab labels appropriately. Show
+   * no available captures by hiding the yesCaptures_ div and showing the
+   * noCaptures_ div instead.
+   * @private
+   */
+  this.enableShowNoCaptures_ = function() {
+    this.playbackTab_.hidden = false;
+    if (this.enableState != EnableState_.showNoCaptures) {
+      this.enableState = EnableState_.showNoCaptures;
+      this.noCaptures_.hidden = false;
+      this.yesCaptures_.hidden = true;

[Jeffrey Yasskin, 2012/08/15 01:03:59]

Did you forget to hide playbackDetails_ here?

You should probably move the "playbackTab_.hidden=false" and
"3_tabs.hidden=true" code into this.enable, so that you don't have to duplicate
it in each of the 3 enable functions.

It might be even better to write a little class to manage tabs with optional
labels, but this app may not get enough re-use out of it to justify it.

[clintstaley, 2012/08/15 23:54:20]

Sort of.  I forgot to nest playbackDetails under yesCaptures in the HTML, which
would make its setting moot when yesCaptures is hidden.  Fixed that.
These methods, at least some, are called from other methods than enable, and
thus need to stand alone wrt hiding/showing components.
I had this before, actually, in that enum :).  (I'm a Java programmer, so I
expect my enums to work for a living.)  But I had to agree with you guys that it
was too cute for its own good.

[Jeffrey Yasskin, 2012/08/16 20:19:31]

Ok.
Embedding the tab handling into each state enum wasn't what I was suggesting. It
would be possible to write a generic tab-handling class that's not tied to
anything concrete in the UI, and then instantiate it multiple times in your app.
But, like I said, with only 2 tabbed displays in this app, the abstraction is
probably not worth it.

+    }
+  };
+
+  /**
+   * Enable the playback tab, showing either its "no captures", "choose
+   * a capture" or "display chosen capture" form, depending on the state
+   * of existing captures and |currentCaptureName_|.
+   */
+  this.enable = function() {
+    if (this.cyclerData_.getCaptures().length == 0) {
+      this.enableShowNoCaptures_();
+    } else if (this.cyclerUI_.currentCaptureName == null) {
+      this.enableChoosePlayback_();
+    } else {
+      this.enableShowPlayback_();
+    }
+  }
+
+  /**
+   * Disable the playback tab altogether, presumably in favor of some
+   * other tab.
+   */
+  this.disable = function() {
+    this.playbackTab_.hidden = true;
+  }
+
+  /**
+   * Utility function to refresh the selection list of captures that may
+   * be chosen for playback. Show all current captures, and also a
+   * "Choose a capture" default text if no capture is currently selected.
+   * @private
+   */
+  this.updatePlaybackChoices_ = function() {
+    var captureNames = this.cyclerData_.getCaptures();
+    var options = this.playbackName_.options;
+    var nextIndex = 0;
+
+    options.length = 0;
+
+    if (this.cyclerUI_.currentCaptureName == null) {
+      options.add(new Option('Choose a capture', null));
+      options.selectedIndex = nextIndex++;
+    }
+    for (var i = 0; i < captureNames.length; i++) {
+      options.add(new Option(captureNames[i], captureNames[i]));
+      if (captureNames[i] == this.cyclerUI_.currentCaptureName) {
+        options.selectedIndex = nextIndex;
+      }
+      nextIndex++;
+    }
+  }
+
+  /**
+   * Event callback for selection of a capture to play back. Save the
+   * choice in |currentCaptureName_|. Update the selection list because the
+   * default reminder message is no longer needed when a capture is chosen.
+   * Change playback tab to show-chosen-capture mode.
+   */
+  this.selectPlaybackName = function() {
+    this.cyclerUI_.currentCaptureName = this.playbackName_.value;
+    this.updatePlaybackChoices_();
+    this.enableShowPlayback_();

[Jeffrey Yasskin, 2012/08/15 01:03:59]

What happens if they select the 'Choose a capture' option?

[clintstaley, 2012/08/15 23:54:20]

Nothing.  It's disabled in the HTML.

[Jeffrey Yasskin, 2012/08/16 20:19:31]

Hm ... In updatePlaybackChoices_(), I see you clearing out the HTML's disabled
option, and adding a 'Choose a capture' option that's _not_ disabled.

[clintstaley, 2012/08/17 04:12:25]

Hmm.  Right you are.  It wasn't making any choices when selected, but it was
selectable.  Fixed.

+  }
+
+  /**
+   * Event callback for pressing the playback button, which button is only
+   * enabled if a capture has been chosen for playback. Check for errors
+   * on playback page, and either display a message with such errors, or
+   * call the extenion api to initiate a playback.
+   * @private
+   */
+  this.doPlayback_ = function() {
+    var extensionPath = this.playbackExtension_.value;
+    var repeatCount = parseInt(this.playbackRepeats_.value);
+    var errors = [];
+
+    // Check local errors
+    if (isNaN(repeatCount)) {
+      errors.push('Enter a number for repeat count');
+    } else if (repeatCount < 1 || repeatCount > 100) {
+      errors.push('Repeat count must be between 1 and 100');
+    }
+
+    if (errors.length > 0) {
+      this.cyclerUI_.showMessage(errors.join('\n'), 'Ok');
+    } else {
+      this.doPlaybackButton_.disabled = true;
+      chrome.experimental.record.replayURLs(
+          this.cyclerUI_.currentCaptureName,
+          repeatCount,
+          {'extensionPath': extensionPath},
+          this.onPlaybackDone.bind(this));
+    }
+  }
+
+  /**
+   * Extension API calls this back when a playback is done.
+   * @param {!number} runtime Number of ms it took to run the playback.
+   * @param {!string} stats Statistics from the playback.
+   * @param {!Array.<!string>} errors List of error messages, if any,
+   *     resuting from the playback.
+   */
+  this.onPlaybackDone = function(runTime, stats, errors) {
+    this.doPlaybackButton_.disabled = false;
+
+    if (errors.length > 0) {
+      this.cyclerUI_.showMessage(errors.join('\n'), 'Ok');
+    } else {
+      this.cyclerUI_.showMessage('Test took ' + runTime + 'mS :\n' +
+          stats, 'Ok');
+    }
+  }
+
+  /**
+   * Delete the capture with name |currentCaptureName_|. For this method
+   * to be callable, there must be a selected currentCaptureName_. Change
+   * the displayed HTML to show no captures if none exist now, or to show
+   * none selected (since we just deleted the selected one).
+   * @private
+   */
+  this.doDelete_ = function() {
+    this.cyclerData_.deleteCapture(this.cyclerUI_.currentCaptureName);
+    this.cyclerUI_.currentCaptureName = null;
+    this.updatePlaybackChoices_();
+    if (this.cyclerData_.getCaptures().length == 0) {
+      this.enableShowNoCaptures_();
+    } else {
+      this.enableChoosePlayback_();
+    }
+  }
+
+  // Set up listeners on buttons.
+  this.doPlaybackButton_.addEventListener('click', this.doPlayback_.bind(this));
+  this.doDeleteButton_.addEventListener('click', this.doDelete_.bind(this));
+
+  // Set up initial selection list for existing captures, and selection
+  // event listener.
+  this.updatePlaybackChoices_();
+  this.playbackName_.addEventListener('change',
+      this.selectPlaybackName.bind(this));
+};