[cros] Layout for OOBE WebUI.

chrome/browser/resources/chromeos/oobe.js

+// Copyright (c) 2011 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.
+
+/**
+ * @fileoverview Out of box experience flow (OOBE).
+ * This is the main code for the OOBE WebUI implementation.
+ */
+
+var steps = ["Connect", "Eula", "Update"];

[James Hawkins, 2011/06/07 17:17:54]

const?

[Nikita (slow), 2011/06/07 18:02:04]

Done.

+
+cr.define('cr.ui', function() {
+
+  function Oobe() {
+  }
+
+  cr.addSingletonGetter(Oobe);
+
+  Oobe.localStrings_ = new LocalStrings();
+
+  Oobe.prototype = {
+    /**
+     * Whether or not |initialize| has been called.
+     */
+    initialized_: false,

[James Hawkins, 2011/06/07 17:17:54]

You (seemingly) don't ever use this variable except to set it to true; remove
it.

[Nikita (slow), 2011/06/07 18:02:04]

Done.

+
+    /**
+     * Current OOBE step, index in the steps array.
+     */
+    currentStep_: 0,
+
+    /**
+     * Switches to the next OOBE step.
+     * @param {number} nextStep Index of the next step.
+     */
+    toggleStep_: function(nextStep) {
+      if (nextStep >= 0 && nextStep < steps.length) {

[James Hawkins, 2011/06/07 17:17:54]

In what situations would |nextStep| be < 0 or >= steps.length?

[Nikita (slow), 2011/06/07 18:02:04]

It shouldn't be, just a sanity check.

[James Hawkins, 2011/06/07 18:13:06]

If the backend ever gets into a buggy state where it's sending invalid steps,
you won't know about it.  I'd remove this check and let the JS 'crash' so you
have data for that case.

[Nikita (slow), 2011/06/08 14:30:54]

Done.

+        var offset = nextStep - this.currentStep_;
+        var oldstep = $(steps[this.currentStep_]);
+        var oldheader = $("h" + steps[this.currentStep_]);
+        var newstep = $(steps[this.currentStep_ + offset]);
+        var newheader = $("h" + steps[this.currentStep_ + offset]);
+
+        newstep.classList.remove("hidden");
+
+        if (offset == 1) {
+          oldheader.classList.add("left");
+          oldstep.classList.add("left");
+          newheader.classList.remove("right");
+          newstep.classList.remove("right");
+        } else if (offset == -1) {
+          oldheader.classList.add("right");
+          oldstep.classList.add("right");
+          newheader.classList.remove("left");
+          newstep.classList.remove("left");
+        }
+
+        // Adjust inner container height based on new step's height.
+        $("inner-container").style.height =
+            $(steps[this.currentStep_ + offset]).offsetHeight;
+
+        setTimeout(function(){oldstep.classList.add('hidden');}, 500);

[James Hawkins, 2011/06/07 17:17:54]

Is this animated via CSS?

[Nikita (slow), 2011/06/07 18:02:04]

Yes:
.header-section {
  -webkit-transition: all .2s ease-in-out;
}
etc.

+        this.currentStep_ += offset;
+        $("oobe").className = steps[this.currentStep_];
+      }
+    },
+  };
+
+  /**
+   * Initializes the OOBE flow.  This will cause all C++ handlers to
+   * be invoked to do final setup.
+   */
+  Oobe.initialize = function() {
+    this.initialized_ = true;
+
+    // Adjust inner container height based on first step's height
+    $("inner-container").style.height = $(steps[0]).offsetHeight;
+
+    $('continue-button').addEventListener('click', function(event) {
+      // TODO(nkostylev): Callback screen handler.
+      Oobe.toggleStep(1);
+    });
+    $('back-button').addEventListener('click', function(event) {
+      // TODO(nkostylev): Callback screen handler.
+      Oobe.toggleStep(0);
+    });
+    $('accept-button').addEventListener('click', function(event) {
+      // TODO(nkostylev): Callback screen handler.
+      Oobe.toggleStep(2);
+    });
+
+    chrome.send('screenStateInitialize');
+  };
+
+  /**
+   * Switches to the next OOBE step.
+   * @param {number} nextStep Index of the next step.
+   */
+  Oobe.toggleStep = function(nextStep) {
+    Oobe.getInstance().toggleStep_(nextStep);
+  };
+
+  // Export
+  return {
+    Oobe: Oobe
+  };
+});
+
+var Oobe = cr.ui.Oobe;
+
+document.addEventListener('DOMContentLoaded', cr.ui.Oobe.initialize);