Use URL parameters for storing filter types"

Each types of log (speech, event ...) can be filtered from URL params.
To enable users to change URL easily, LogPage is now on tab, not panel.

Bug: 879042
Test: None
Change-Id: I64b80f828707f60df23afab6f57c68135199c57c
Reviewed-on: https://chromium-review.googlesource.com/1195407
Commit-Queue: Eriko Kurimoto <elkurin@google.com>
Reviewed-by: David Tseng <dtseng@chromium.org>
Reviewed-by: Yuki Awano <yawano@chromium.org>
Cr-Commit-Position: refs/heads/master@{#589831}

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

@@ -112,8 +112,8 @@ CommandHandler.onCommand = function(command) {
       chrome.commandLinePrivate.hasSwitch(
           'enable-chromevox-developer-option', function(enable) {
             if (enable) {
-              var logPage = {url: 'cvox2/background/log.html', type: 'panel'};
-              chrome.windows.create(logPage);
+              var logPage = {url: 'cvox2/background/log.html'};
+              chrome.tabs.create(logPage);
             }
           });
       break;

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

@@ -31,6 +31,13 @@ LogPage.backgroundWindow;
  */
 LogPage.LogStore;
 
+/**
+ * Store the preferences of filters.
+ * @type {Object<string, boolean>}
+ * @private
+ */
+LogPage.urlPrefs_ = {};
+
 LogPage.init = function() {
   LogPage.backgroundWindow = chrome.extension.getBackgroundPage();
   LogPage.LogStore = LogPage.backgroundWindow.LogStore.getInstance();
@@ -41,14 +48,19 @@ LogPage.init = function() {
     location.reload();
   };
 
+  var params = new URLSearchParams(location.search);
+  for (var type in LogStore.LogType) {
+    var typeFilter = LogStore.LogType[type] + 'Filter';
+    LogPage.setFilterTypeEnabled(typeFilter, params.get(typeFilter));
+  }
   var saveLogButton = document.getElementById('saveLog');
   saveLogButton.onclick = LogPage.saveLogEvent;
 
   var checkboxes = document.getElementsByClassName('log-filter');
   var filterEventListener = function(event) {
     var target = event.target;
-    sessionStorage.setItem(target.name, target.checked);
-    location.reload();
+    LogPage.setFilterTypeEnabled(target.name, String(target.checked));
+    location.search = LogPage.createUrlParams();
   };
   for (var i = 0; i < checkboxes.length; i++)
     checkboxes[i].onclick = filterEventListener;
@@ -93,10 +105,7 @@ LogPage.update = function() {
   for (var i = 0; i < logTypes.length; i++) {
     var typeFilter = logTypes[i] + 'Filter';
     var element = document.getElementById(typeFilter);
-    /** If sessionStorage is null, set true. */
-    if (!sessionStorage.getItem(typeFilter))
-      sessionStorage.setItem(typeFilter, true);
-    element.checked = (sessionStorage.getItem(typeFilter) == 'true');
+    element.checked = LogPage.urlPrefs_[typeFilter];
   }
 
   var log = LogPage.LogStore.getLogs();
@@ -110,7 +119,7 @@ LogPage.update = function() {
  */
 LogPage.updateLog = function(log, div) {
   for (var i = 0; i < log.length; i++) {
-    if (sessionStorage.getItem(log[i].logType + 'Filter') != 'true')
+    if (!LogPage.urlPrefs_[log[i].logType + 'Filter'])
       continue;
 
     var p = document.createElement('p');
@@ -149,6 +158,31 @@ LogPage.updateLog = function(log, div) {
   }
 };
 
+/**
+ * Update urlPrefs_. Set true if checked is null.
+ * @param {string} typeFilter
+ * @param {?string} checked
+ */
+LogPage.setFilterTypeEnabled = function(typeFilter, checked) {
+  if (checked == null || checked == 'true')
+    LogPage.urlPrefs_[typeFilter] = true;
+  else
+    LogPage.urlPrefs_[typeFilter] = false;
+};
+
+/**
+ * Create URL parameter based on LogPage.urlPrefs_.
+ * @return {string}
+ */
+LogPage.createUrlParams = function() {
+  var urlParams = [];
+  for (var type in LogStore.LogType) {
+    var typeFilter = LogStore.LogType[type] + 'Filter';
+    urlParams.push(typeFilter + '=' + LogPage.urlPrefs_[typeFilter]);
+  }
+  return '?' + urlParams.join('&');
+};
+
 /**
  * Format time stamp.
  * In this log, events are dispatched many times in a short time, so