Fix a variety of panel issues

chrome/browser/resources/chromeos/chromevox/cvox2/background/tutorial.js

Index: chrome/browser/resources/chromeos/chromevox/cvox2/background/tutorial.js
diff --git a/chrome/browser/resources/chromeos/chromevox/cvox2/background/tutorial.js b/chrome/browser/resources/chromeos/chromevox/cvox2/background/tutorial.js
index 38127b92f78b104734b4c163cc230e3c1be7a359..582574b19831a2cbdb37aeed62cf9d45b2d88c40 100644
--- a/chrome/browser/resources/chromeos/chromevox/cvox2/background/tutorial.js
+++ b/chrome/browser/resources/chromeos/chromevox/cvox2/background/tutorial.js
@@ -19,7 +19,10 @@ Tutorial = function() {
    * @type {number}
    * @private
    */
-  this.page_ = 0;
+  this.page_;
+
+  this.page = sessionStorage['tutorial_page_pos'] !== undefined ?
+      sessionStorage['tutorial_page_pos'] : 0;
 };
 
 /**
@@ -28,7 +31,7 @@ Tutorial = function() {
  * a message ID for some text, and optional attributes indicating if it's
  * a heading, link, text for only one platform, etc.
  *
- * @type Array<Object>
+ * @type Array<Array<Object>>
  */
 Tutorial.PAGES = [
   [
@@ -57,6 +60,8 @@ Tutorial.PAGES = [
   [
     { msgid: 'tutorial_jump_heading', heading: true },
     { msgid: 'tutorial_jump' },
+    { msgid: 'tutorial_jump_second_heading', heading: true },
+    { msgid: 'tutorial_jump_wrap_heading', heading: true },
     { msgid: 'tutorial_click_next' },
   ],
   [
@@ -67,8 +72,7 @@ Tutorial.PAGES = [
   [
     { msgid: 'tutorial_chrome_shortcuts_heading', heading: true },
     { msgid: 'tutorial_chrome_shortcuts' },
-    { msgid: 'tutorial_chromebook_ctrl_forward', chromebookOnly: true },
-    { msgid: 'tutorial_chromeos_ctrl_f2', chromebookOnly: false },
+    { msgid: 'tutorial_chromebook_ctrl_forward', chromebookOnly: true }
   ],
   [
     { msgid: 'tutorial_learn_more_heading', heading: true },
@@ -83,44 +87,95 @@ Tutorial.PAGES = [
 ];
 
 Tutorial.prototype = {
-  /** Open the first page in the tutorial. */
-  firstPage: function() {
-    this.page_ = 0;
-    this.showPage_();
+  /** Open the last viewed page in the tutorial. */
+  lastViewedPage: function() {
+    this.page = sessionStorage['tutorial_page_pos'] !== undefined ?
+        sessionStorage['tutorial_page_pos'] : 0;
+    if (this.page == -1)
+      this.page = 0;
+    this.showCurrentPage_();
+  },
+
+  /** Open the update notes page. */
+  updateNotes: function() {
+    delete sessionStorage['tutorial_page_pos'];
+    this.page = -1;
+    this.showPage_([

[dmazzoni, 2016/11/08 00:55:15]

Maybe make this a constant at the top like Tutorial.PAGES - call it
Tutorial.UPDATE_NOTES_PAGE

+      { msgid: 'update_56_title', heading: true },
+      { msgid: 'update_56_intro' },
+      {
+        list: true,
+        items: [
+          {msgid: 'update_56_item_1', listItem: true},
+          {msgid: 'update_56_item_2', listItem: true},
+          {msgid: 'update_56_item_3', listItem: true},
+        ],
+      },
+      { msgid: 'update_56_OUTTRO' },
+    ]);
   },
 
   /** Move to the next page in the tutorial. */
   nextPage: function() {
-    if (this.page_ < Tutorial.PAGES.length - 1) {
-      this.page_++;
-      this.showPage_();
+    if (this.page < Tutorial.PAGES.length - 1) {
+      this.page++;
+      this.showCurrentPage_();
     }
   },
 
   /** Move to the previous page in the tutorial. */
   previousPage: function() {
-    if (this.page_ > 0) {
-      this.page_--;
-      this.showPage_();
+    if (this.page > 0) {
+      this.page--;
+      this.showCurrentPage_();
     }
   },
 
   /**
-   * Recreate the tutorial DOM for page |this.page_|.
+   * Shows the page for page |this.page_|.
+   */
+  showCurrentPage_: function() {
+    var pageElements = Tutorial.PAGES[this.page] || [];
+    this.showPage_(pageElements);
+  },
+
+  /**
+   * Recreate the tutorial DOM using |pageElements|.
+   * @param {!Array<Object>} pageElements
    * @private
    */
-  showPage_: function() {
+  showPage_: function(pageElements) {
     var tutorialContainer = $('tutorial_main');
     tutorialContainer.innerHTML = '';
+    this.buildDom_(pageElements, tutorialContainer);
+    this.finalizeDom_();
+  },
 
-    var pageElements = Tutorial.PAGES[this.page_];
+  /**
+   * Builds a dom under the container
+   * @param {!Array<Object>} pageElements
+   * @param {!Node} container
+   * @private
+   */
+  buildDom_: function(pageElements, container) {
+    var focus;
     for (var i = 0; i < pageElements.length; ++i) {
       var pageElement = pageElements[i];
       var msgid = pageElement.msgid;
-      var text = Msgs.getMsg(msgid);
+      var text = '';
+      if (msgid)
+        text = Msgs.getMsg(msgid);
       var element;
       if (pageElement.heading) {
         element = document.createElement('h2');
+        element.setAttribute('tabindex', -1);
+        if (!focus)
+          focus = element;
+      } else if (pageElement.list) {
+        element = document.createElement('ul');
+        this.buildDom_(pageElement.items, element);
+      } else if (pageElement.listItem) {
+        element = document.createElement('li');
       } else if (pageElement.link) {
         element = document.createElement('a');
         element.href = pageElement.link;
@@ -128,8 +183,28 @@ Tutorial.prototype = {
       } else {
         element = document.createElement('p');
       }
-      element.innerText = text;
-      tutorialContainer.appendChild(element);
+      if (text)
+        element.innerText = text;
+      container.appendChild(element);
     }
+    if (focus)
+      focus.focus();
+  },
+
+  /** @private */
+  finalizeDom_: function() {
+    var disableNext = this.page == (Tutorial.PAGES.length - 1);
+    var disablePrevious = this.page == 0;
+    $('tutorial_next').setAttribute('aria-disabled', disableNext);

[dmazzoni, 2016/11/08 00:55:15]

Can you do both disabled and aria-disabled? Disabled will do the right thing in
terms of focusability and the visual styling, and aria-disabled is just a
temporary hack until we fix the underlying bug

[David Tseng, 2016/11/08 01:20:27]

Yeah I tried that too.

No unfortunately that actually appears to undo the aria disabled. In other
words,  setting both to true actually results in axobj disabled being undefined.
Blink issues all around. 

+    $('tutorial_previous').setAttribute('aria-disabled', disablePrevious);
+  },
+
+  get page() {
+    return this.page_;
+  },
+
+  set page(val) {
+    this.page_ = val;
+    sessionStorage['tutorial_page_pos'] = this.page_;
   }
 };