Major revision of page cycler UI.

chrome/common/extensions/docs/examples/apps/cycler/capture_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 CaptureTab = function (cyclerUI, cyclerData, playbackTab) {
+  // Members for all UI elements subject to programmatic adjustment.
+  this.captureTab_ = $('#capture-tab');
+  this.captureName_ = $('#capture-name');
+  this.captureURLs_ = $('#capture-urls');
+  this.doCaptureButton_ = $('#do-capture');
+
+  // References to other major components of the extension.
+  this.cyclerUI_ = cyclerUI;
+  this.cyclerData_ = cyclerData;
+  this.playbackTab_ = playbackTab;
+
+  /*
+   * Enable the capture tab.
+   */
+  this.enable = function() {
+    this.captureTab_.hidden = false;
+  };
+
+  /*
+   * Disable the capture tab.
+   */
+  this.disable = function() {
+    this.captureTab_.hidden = true;
+  };
+
+  /**
+   * Do a capture using current data from the capture tab. Post an error
+   * dialog if said data is incorrect or incomplete. Otherwise pass
+   * control to the browser side.
+   * @private
+   */
+  this.doCapture_ = function() {
+    var errors = [];
+    var captureName = this.captureName_.value.trim();
+    var urlList;
+
+    urlList = this.captureURLs_.value.split('\n');
+    if (captureName.length == 0)
+      errors.push('Must give a capture name');
+    if (urlList.length == 0)
+      errors.push('Must give at least one URL');
+
+    if (errors.length > 0) {
+      this.cyclerUI_.showMessage(errors.join('\n'), 'Ok');
+    } else {
+      this.doCaptureButton_.disabled = true;
+      chrome.experimental.record.captureURLs(captureName, urlList,
+          this.onCaptureDone.bind(this));
+    }
+  }
+
+  /**
+   * Callback for completed (or possibly failed) capture. Post a message
+   * box, either with errors or "Success!" message.
+   * @param {!Array.<string>} errors List of errors that occured
+   *     during capture, if any.
+   */
+  this.onCaptureDone = function(errors) {
+    this.doCaptureButton_.disabled = false;
+
+    if (errors.length > 0) {
+      this.cyclerUI_.showMessage(errors.join('\n'), 'Ok');
+    } else {
+      this.cyclerUI_.showMessage('Success!', 'Ok');
+      this.cyclerUI_.currentCaptureName = this.captureName_.value.trim();
+      this.cyclerData_.saveCapture(this.cyclerUI_.currentCaptureName);
+      this.playbackTab_.updatePlaybackChoices_();

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

It seems odd to update this here without showing the tab. Should capture
completion automatically show the playback tab? Should PlaybackTab.enable()
automatically update the choices?

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

This is an asynchronous return, and it may be somewhat delayed since it requires
a full subbrowser execution.  It's possible the user will shift to the playback
tab while waiting the return.  Safest bet is to do it this way, I think, but if
you want me to change it anyway, lemme know.

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

Ah, yes. I hadn't thought of the user switching tabs during the run. What
happens if they do that and start clicking around, say, starting other
playbacks, while the current capture is running? Maybe it'd make sense to
disable the playback tab label while the capture is running? Or overlay that tab
with a "Capture is running" spinner?

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

A later CL will include the ability to cancel an ongoing capture, with a modal
dialog the user.  Don't want to add it just yet, until supporting logic on the
C++ end is done.  

But, thinking about that, it does mean I can move that update choices to the
playback tab enable, which is more conventional design.

Going straight to playback isn't in the current spec, and might be irritating to
a user trying to create several captures in sequence.

[Jeffrey Yasskin, 2012/08/17 19:32:14]

You may want to make the cyclerData observable (yay Model pattern), and have the
playback tab observe it, so it can do something appropriate when the data
changes asynchronously. Not in this CL though.

+    }
+  }
+
+  // Set up listener for capture button.
+  this.doCaptureButton_.addEventListener('click', this.doCapture_.bind(this));
+};