Change history2 to allow multi-deletion without entering a separate mode.

chrome/browser/resources/history2.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.
 
 ///////////////////////////////////////////////////////////////////////////////
 // Globals:
 var RESULTS_PER_PAGE = 150;
 var MAX_SEARCH_DEPTH_MONTHS = 18;
 
 // Amount of time between pageviews that we consider a 'break' in browsing,
@@ skipping 16 matching lines @@
 
 // TODO(glen): Get rid of these global references, replace with a controller
 //     or just make the classes own more of the page.
 var historyModel;
 var historyView;
 var localStrings;
 var pageState;
 var deleteQueue = [];
 var selectionAnchor = -1;
 var activePage = null;
-var idToCheckbox = [];
 
 const MenuButton = cr.ui.MenuButton;
 const Command = cr.ui.Command;
 const Menu = cr.ui.Menu;
 
 function createDropDownBgImage(canvasName, colorSpec) {
   var ctx = document.getCSSCanvasContext('2d', canvasName, 6, 4);
   ctx.fillStyle = ctx.strokeStyle = colorSpec;
   ctx.beginPath();
   ctx.moveTo(0, 0);
@@ skipping 49 matching lines @@
 
 // Page, Public: --------------------------------------------------------------
 /**
  * Returns a dom structure for a browse page result or a search page result.
  * @param {boolean} Flag to indicate if result is a search result.
  * @return {Element} The dom structure.
  */
 Page.prototype.getResultDOM = function(searchResultFlag) {
   var node = createElementWithClassName('li', 'entry');
   var time = createElementWithClassName('div', 'time');
-  var entryBox = createElementWithClassName('div', 'entry-box');
+  var entryBox = createElementWithClassName('label', 'entry-box');
   var domain = createElementWithClassName('div', 'domain');
+
   var dropDown = createElementWithClassName('button', 'drop-down');
   dropDown.value = 'Open action menu';
   dropDown.title = localStrings.getString('actionMenuDescription');
   dropDown.setAttribute('menu', '#action-menu');
   cr.ui.decorate(dropDown, MenuButton);
 
+  // Checkbox is always created, but only visible on hover & when checked.
+  var checkbox = document.createElement('input');
+  checkbox.type = 'checkbox';
+  checkbox.id = 'checkbox-' + this.id_;
+  checkbox.time = this.time.getTime();
+  checkbox.addEventListener('click', checkboxClicked);
+  time.appendChild(checkbox);
+
   // Keep track of the drop down that triggered the menu, so we know
   // which element to apply the command to.
   // TODO(dubroy): Ideally we'd use 'activate', but MenuButton swallows it.
   var self = this;
   var setActivePage = function(e) {
     activePage = self;
   };
   dropDown.addEventListener('mousedown', setActivePage);
   dropDown.addEventListener('focus', setActivePage);
 
   domain.style.backgroundImage =
     'url(chrome://favicon/' + encodeURIForCSS(this.url_) + ')';
   domain.textContent = this.domain_;
-  // Use a wrapper div so that the entry contents will be shinkwrapped.
+
+  // Clicking anywhere in the entryBox will check/uncheck the checkbox.
+  entryBox.setAttribute('for', checkbox.id);
+  entryBox.addEventListener('mousedown', entryBoxMousedown, false);
+
+  // Prevent clicks on the drop down from affecting the checkbox.
+  dropDown.addEventListener('click', function(e) { e.preventDefault(); });
+
+  // We use a wrapper div so that the entry contents will be shinkwrapped.
   entryBox.appendChild(time);
   entryBox.appendChild(domain);
   entryBox.appendChild(this.getTitleDOM_());
   entryBox.appendChild(dropDown);
+
+  // Let the entryBox be styled appropriately when it contains keyboard focus.
+  entryBox.addEventListener('focus', function() {
+    this.classList.add('contains-focus');
+  }, true);
+  entryBox.addEventListener('blur', function() {
+    this.classList.remove('contains-focus');
+  }, true);
+
   node.appendChild(entryBox);
 
   if (searchResultFlag) {
     time.textContent = this.dateShort;
     var snippet = createElementWithClassName('div', 'snippet');
     this.addHighlightedText_(snippet,
                              this.snippet_,
                              this.model_.getSearchText());
     node.appendChild(snippet);
   } else {
-    if (this.model_.getEditMode()) {
-      var checkbox = document.createElement('input');
-      checkbox.type = 'checkbox';
-      checkbox.name = this.id_;
-      checkbox.time = this.time.toString();
-      checkbox.addEventListener("click", checkboxClicked);
-      idToCheckbox[this.id_] = checkbox;
-      time.appendChild(checkbox);
-    }
     time.appendChild(document.createTextNode(this.dateTimeOfDay));
   }
 
   if (typeof this.domNode_ != 'undefined') {
       console.error('Already generated node for page.');
   }
   this.domNode_ = node;
 
   return node;
 };
@@ skipping 65 matching lines @@
 };
 
 /**
  * Launch a search for more history entries from the same domain.
  */
 Page.prototype.showMoreFromSite_ = function() {
   setSearch(this.domain_);
 };
 
 /**
- * Remove the page from the history.
+ * Remove a single entry from the history.
  */
 Page.prototype.removeFromHistory_ = function() {
   var self = this;
   var onSuccessCallback = function() {
     removeEntryFromView(self.domNode_);
   };
   queueURLsForDeletion(this.time, [this.url_], onSuccessCallback);
   deleteNextInQueue();
 };
 
@@ skipping 16 matching lines @@
  * allowing the creation of a HistoryModel for each search string, allowing
  * quick flips back and forth between results.
  *
  * The history model is based around pages, and only fetching the data to
  * fill the currently requested page. This is somewhat dependent on the view,
  * and so future work may wish to change history model to operate on
  * timeframe (day or week) based containers.
  */
 function HistoryModel() {
   this.clearModel_();
-  this.setEditMode(false);
-  this.view_;
 }
 
 // HistoryModel, Public: ------------------------------------------------------
 /**
  * Sets our current view that is called when the history model changes.
  * @param {HistoryView} view The view to set our current view to.
  */
 HistoryModel.prototype.setView = function(view) {
   this.view_ = view;
 };
@@ skipping 107 matching lines @@
  * @return {Array} A list of pages
  */
 HistoryModel.prototype.getNumberedRange = function(start, end) {
   if (start >= this.getSize())
     return [];
 
   var end = end > this.getSize() ? this.getSize() : end;
   return this.pages_.slice(start, end);
 };
 
-/**
- * @return {boolean} Whether we are in edit mode where history items can be
- *    deleted
- */
-HistoryModel.prototype.getEditMode = function() {
-  return this.editMode_;
-};
-
-/**
- * @param {boolean} edit_mode Control whether we are in edit mode.
- */
-HistoryModel.prototype.setEditMode = function(edit_mode) {
-  this.editMode_ = edit_mode;
-};
-
 // HistoryModel, Private: -----------------------------------------------------
 HistoryModel.prototype.clearModel_ = function() {
   this.inFlight_ = false; // Whether a query is inflight.
   this.searchText_ = '';
   this.searchDepth_ = 0;
   this.pages_ = []; // Date-sorted list of pages.
   this.last_id_ = 0;
   selectionAnchor = -1;
-  idToCheckbox = [];
 
   // The page that the view wants to see - we only fetch slightly past this
   // point. If the view requests a page that we don't have data for, we try
   // to fetch it and call back when we're done.
   this.requestedPage_ = 0;
 
   this.complete_ = false;
 
   if (this.view_) {
     this.view_.clear_();
@@ skipping 89 matching lines @@
   this.lastDisplayed_ = [];
 
   this.model_.setView(this);
 
   this.currentPages_ = [];
 
   var self = this;
   window.onresize = function() {
     self.updateEntryAnchorWidth_();
   };
-  self.updateEditControls_();
 
-  this.boundUpdateRemoveButton_ = function(e) {
-    return self.updateRemoveButton_(e);
-  };
+  $('clear-browsing-data').addEventListener('click', openClearBrowsingData);
+  $('remove-selected').addEventListener('click', removeItems);
 }
 
 // HistoryView, public: -------------------------------------------------------
 /**
  * Do a search and optionally view a certain page.
  * @param {string} term The string to search for.
  * @param {number} opt_page The page we wish to view, only use this for
  *     setting up initial views, as this triggers a search.
  */
 HistoryView.prototype.setSearch = function(term, opt_page) {
   this.pageIndex_ = parseInt(opt_page || 0, 10);
   window.scrollTo(0, 0);
   this.model_.setSearchText(term, this.pageIndex_);
-  if (term) {
-    this.setEditMode(false);
-  }
-  this.updateEditControls_();
-  pageState.setUIState(this.model_.getEditMode(), term, this.pageIndex_);
+  pageState.setUIState(term, this.pageIndex_);
 };
 
 /**
- * Controls edit mode where history can be deleted.
- * @param {boolean} edit_mode Whether to enable edit mode.
- */
-HistoryView.prototype.setEditMode = function(edit_mode) {
-  this.model_.setEditMode(edit_mode);
-  pageState.setUIState(this.model_.getEditMode(), this.model_.getSearchText(),
-                       this.pageIndex_);
-};
-
-/**
- * Toggles the edit mode and triggers UI update.
- */
-HistoryView.prototype.toggleEditMode = function() {
-  var editMode = !this.model_.getEditMode();
-  this.setEditMode(editMode);
-  this.updateEditControls_();
-};
-
-/**
- * @return {boolean} Whether we are in edit mode where history items can be
- *    deleted
- */
-HistoryView.prototype.getEditMode = function() {
-  return this.model_.getEditMode();
-};
-
-/**
  * Reload the current view.
  */
 HistoryView.prototype.reload = function() {
   this.model_.reload();
+  this.updateRemoveButton();
 };
 
 /**
  * Switch to a specified page.
  * @param {number} page The page we wish to view.
  */
 HistoryView.prototype.setPage = function(page) {
   this.clear_();
   this.pageIndex_ = parseInt(page, 10);
   window.scrollTo(0, 0);
   this.model_.requestPage(page);
-  pageState.setUIState(this.model_.getEditMode(), this.model_.getSearchText(),
-      this.pageIndex_);
+  pageState.setUIState(this.model_.getSearchText(), this.pageIndex_);
 };
 
 /**
  * @return {number} The page number being viewed.
  */
 HistoryView.prototype.getPage = function() {
   return this.pageIndex_;
 };
 
 /**
  * Callback for the history model to let it know that it has data ready for us
  * to view.
  */
 HistoryView.prototype.onModelReady = function() {
   this.displayResults_();
 };
 
+/**
+ * Enables or disables the 'Remove selected items' button as appropriate.
+ */
+HistoryView.prototype.updateRemoveButton = function() {
+  var anyChecked = document.querySelector('.entry input:checked') != null;
+  $('remove-selected').disabled = !anyChecked;
+}
+
 // HistoryView, private: ------------------------------------------------------
 /**
  * Clear the results in the view.  Since we add results piecemeal, we need
  * to clear them out when we switch to a new page or reload.
  */
 HistoryView.prototype.clear_ = function() {
   this.resultDiv_.textContent = '';
 
   var pages = this.currentPages_;
   for (var i = 0; i < pages.length; i++) {
@@ skipping 81 matching lines @@
   var searchText = this.model_.getSearchText();
   if (searchText != '') {
     this.summaryTd_.textContent = localStrings.getStringF('searchresultsfor',
         searchText);
   } else {
     this.summaryTd_.textContent = localStrings.getString('history');
   }
 };
 
 /**
- * Update the widgets related to edit mode.
- */
-HistoryView.prototype.updateEditControls_ = function() {
-  // Display a button (looking like a link) to enable/disable edit mode.
-  var oldButton = this.editButtonTd_.firstChild;
-  if (this.model_.getSearchText()) {
-    this.editButtonTd_.replaceChild(document.createElement('p'), oldButton);
-    this.editingControlsDiv_.textContent = '';
-    return;
-  }
-
-  var editMode = this.model_.getEditMode();
-  var button = createElementWithClassName('button', 'edit-button');
-  button.onclick = toggleEditMode;
-  button.textContent = localStrings.getString(editMode ?
-                                              'doneediting' : 'edithistory');
-  this.editButtonTd_.replaceChild(button, oldButton);
-
-  this.editingControlsDiv_.textContent = '';
-
-  if (editMode) {
-    // Button to delete the selected items.
-    button = document.createElement('button');
-    button.onclick = removeItems;
-    button.textContent = localStrings.getString('removeselected');
-    button.disabled = true;
-    this.editingControlsDiv_.appendChild(button);
-    this.removeButton_ = button;
-
-    // Button that opens up the clear browsing data dialog.
-    button = document.createElement('button');
-    button.onclick = openClearBrowsingData;
-    button.textContent = localStrings.getString('clearallhistory');
-    this.editingControlsDiv_.appendChild(button);
-
-    // Listen for clicks in the page to sync the disabled state.
-    document.addEventListener('click', this.boundUpdateRemoveButton_);
-  } else {
-    this.removeButton_ = null;
-    document.removeEventListener('click', this.boundUpdateRemoveButton_);
-  }
-};
-
-/**
- * Updates the disabled state of the remove button when in editing mode.
- * @param {!Event} e The click event object.
- * @private
- */
-HistoryView.prototype.updateRemoveButton_ = function(e) {
-  if (e.target.tagName != 'INPUT')
-    return;
-
-  var anyChecked = document.querySelector('.entry input:checked') != null;
-  if (this.removeButton_)
-    this.removeButton_.disabled = !anyChecked;
-};
-
-/**
  * Update the pagination tools.
  */
 HistoryView.prototype.displayNavBar_ = function() {
   this.pageDiv_.textContent = '';
 
   if (this.pageIndex_ > 0) {
     this.pageDiv_.appendChild(
         this.createPageNav_(0, localStrings.getString('newest')));
     this.pageDiv_.appendChild(
         this.createPageNav_(this.pageIndex_ - 1,
@@ skipping 12 matching lines @@
 /**
  * Make a DOM object representation of a page navigation link.
  * @param {number} page The page index the navigation element should link to
  * @param {string} name The text content of the link
  * @return {HTMLAnchorElement} the pagination link
  */
 HistoryView.prototype.createPageNav_ = function(page, name) {
   anchor = document.createElement('a');
   anchor.className = 'page-navigation';
   anchor.textContent = name;
-  var hashString = PageState.getHashString(this.model_.getEditMode(),
-                                           this.model_.getSearchText(), page);
+  var hashString = PageState.getHashString(this.model_.getSearchText(), page);
   var link = 'chrome://history2/' + (hashString ? '#' + hashString : '');
   anchor.href = link;
   anchor.onclick = function() {
     setPage(page);
     return false;
   };
   return anchor;
 };
 
 /**
@@ skipping 88 matching lines @@
   return result;
 };
 
 /**
  * Set the hash to a specified state, this will create an entry in the
  * session history so the back button cycles through hash states, which
  * are then picked up by our listener.
  * @param {string} term The current search string.
  * @param {string} page The page currently being viewed.
  */
-PageState.prototype.setUIState = function(editMode, term, page) {
+PageState.prototype.setUIState = function(term, page) {
   // Make sure the form looks pretty.
   document.forms[0].term.value = term;
   var currentHash = this.getHashData();
-  if (Boolean(currentHash.e) != editMode || currentHash.q != term ||
-      currentHash.p != page) {
-    window.location.hash = PageState.getHashString(editMode, term, page);
+  if (currentHash.q != term || currentHash.p != page) {
+    window.location.hash = PageState.getHashString(term, page);
   }
 };
 
 /**
  * Static method to get the hash string for a specified state
  * @param {string} term The current search string.
  * @param {string} page The page currently being viewed.
  * @return {string} The string to be used in a hash.
  */
-PageState.getHashString = function(editMode, term, page) {
+PageState.getHashString = function(term, page) {
   var newHash = [];
-  if (editMode) {
-    newHash.push('e=1');
-  }
   if (term) {
     newHash.push('q=' + encodeURIComponent(term));
   }
   if (page != undefined) {
     newHash.push('p=' + page);
   }
 
   return newHash.join('&');
 };
 
 ///////////////////////////////////////////////////////////////////////////////
 // Document Functions:
 /**
  * Window onload handler, sets up the page.
  */
 function load() {
   $('term').focus();
 
   localStrings = new LocalStrings();
   historyModel = new HistoryModel();
   historyView = new HistoryView(historyModel);
   pageState = new PageState(historyModel, historyView);
 
   // Create default view.
   var hashData = pageState.getHashData();
-  if (Boolean(hashData.e)) {
-    historyView.toggleEditMode();
-  }
   historyView.setSearch(hashData.q, hashData.p);
 
   // Setup click handlers.
   $('history-section').onclick = function () {
     setSearch('');
     return false;
   };
   $('search-form').onsubmit = function () {
     setSearch(this.term.value);
     return false;
@@ skipping 25 matching lines @@
  * Set the history view to a specified page.
  * @param {number} page The page to set the view to.
  */
 function setPage(page) {
   if (historyView) {
     historyView.setPage(page);
   }
 }
 
 /**
- * TODO(glen): Get rid of this function.
- * Toggles edit mode.
- */
-function toggleEditMode() {
-  if (historyView) {
-    historyView.toggleEditMode();
-    historyView.reload();
-  }
-}
-
-/**
  * Delete the next item in our deletion queue.
  */
 function deleteNextInQueue() {
   if (deleteQueue.length > 0) {
     // Call the native function to remove history entries.
     // First arg is a time in seconds (passed as String) identifying the day.
     // Remaining args are URLs of history entries from that day to delete.
     var timeInSeconds = Math.floor(deleteQueue[0].date.getTime() / 1000);
     chrome.send('removeURLsOnOneDay',
                 [String(timeInSeconds)].concat(deleteQueue[0].urls));
@@ skipping 12 matching lines @@
  * Queue a set of URLs from the same day for deletion.
  * @param {Date} date A date indicating the day the URLs were visited.
  * @param {Array} urls Array of URLs from the same day to be deleted.
  * @param {Function} opt_callback An optional callback to be executed when
  *        the deletion is complete.
  */
 function queueURLsForDeletion(date, urls, opt_callback) {
   deleteQueue.push({ 'date': date, 'urls': urls, 'callback': opt_callback });
 }
 
+function reloadHistory() {
+  historyView.reload();
+}
+
 /**
  * Collect IDs from checked checkboxes and send to Chrome for deletion.
  */
 function removeItems() {
   var checked = document.querySelectorAll(
       'input[type=checkbox]:checked:not([disabled])');
   var urls = [];
   var disabledItems = [];
   var queue = [];
   var date = new Date();
 
   for (var i = 0; i < checked.length; i++) {
     var checkbox = checked[i];
     var cbDate = new Date(checkbox.time);
     if (date.getFullYear() != cbDate.getFullYear() ||
         date.getMonth() != cbDate.getMonth() ||
         date.getDate() != cbDate.getDate()) {
       if (urls.length > 0) {
         queue.push([date, urls]);
       }
       urls = [];
       date = cbDate;
     }
-    var link = $('id-' + checkbox.name);
+    var link = checkbox.parentNode.parentNode.querySelector('a');
     checkbox.disabled = true;
     link.classList.add('to-be-removed');
     disabledItems.push(checkbox);
     urls.push(link.href);
   }
   if (urls.length > 0) {
     queue.push([date, urls]);
   }
   if (checked.length > 0 && confirm(localStrings.getString('deletewarning'))) {
     for (var i = 0; i < queue.length; i++) {
-      queueURLsForDeletion(queue[i][0], queue[i][1]);
+      // Reload the page when the final entry has been deleted.
+      var callback = i == 0 ? reloadHistory : null;
+
+      queueURLsForDeletion(queue[i][0], queue[i][1], callback);
     }
     deleteNextInQueue();
   } else {
     // If the remove is cancelled, return the checkboxes to their
     // enabled, non-line-through state.
     for (var i = 0; i < disabledItems.length; i++) {
-      var link = $('id-' + disabledItems[i].name);
-      disabledItems[i].disabled = false;
+      var checkbox = disabledItems[i];
+      var link = checkbox.parentNode.parentNode.querySelector('a');
+      checkbox.disabled = false;
       link.classList.remove('to-be-removed');
     }
   }
   return false;
 }
 
 /**
  * Toggle state of checkbox and handle Shift modifier.
  */
 function checkboxClicked(event) {
+  var id = Number(this.id.slice("checkbox-".length));
   if (event.shiftKey && (selectionAnchor != -1)) {
     var checked = this.checked;
     // Set all checkboxes from the anchor up to the clicked checkbox to the
     // state of the clicked one.
-    var begin = Math.min(this.name, selectionAnchor);
-    var end = Math.max(this.name, selectionAnchor);
+    var begin = Math.min(id, selectionAnchor);
+    var end = Math.max(id, selectionAnchor);
     for (var i = begin; i <= end; i++) {
-      idToCheckbox[i].checked = checked;
+      var checkbox = document.querySelector('#checkbox-' + i);
+      if (checkbox)
+        checkbox.checked = checked;
     }
   }
-  selectionAnchor = this.name;
-  this.focus();
+  selectionAnchor = id;
+
+  historyView.updateRemoveButton();
+}
+
+function entryBoxMousedown(event) {
+  // Prevent text selection when shift-clicking to select multiple entries.
+  if (event.shiftKey) {
+    event.preventDefault();
+  }
+}
+
+function removeNode(node) {
+  node.classList.add('fade-out'); // Trigger CSS fade out animation.
+
+  // Delete the node when the animation is complete.
+  setTimeout(function() {

[arv (Not doing code reviews), 2011/10/05 21:30:08]

This can be done using the webkitTransitionEnd event so that the time does not
need to be hard coded.

[Patrick Dubroy, 2011/10/06 09:38:45]

Excellent! Didn't know about that.

+    node.parentNode.removeChild(node);
+  }, 200);
 }
 
 /**
  * Removes a single entry from the view. Also removes gaps before and after
  * entry if necessary.
  */
 function removeEntryFromView(entry) {
   var nextEntry = entry.nextSibling;
   var previousEntry = entry.previousSibling;
-  entry.parentNode.removeChild(entry);
+
+  removeNode(entry);
 
   // if there is no previous entry, and the next entry is a gap, remove it
   if (!previousEntry && nextEntry && nextEntry.className == 'gap') {
-    nextEntry.parentNode.removeChild(nextEntry);
+    removeNode(nextEntry);
   }
 
   // if there is no next entry, and the previous entry is a gap, remove it
   if (!nextEntry && previousEntry && previousEntry.className == 'gap') {
-    previousEntry.parentNode.removeChild(previousEntry);
+    removeNode(previousEntry);
   }
 
   // if both the next and previous entries are gaps, remove one
   if (nextEntry && nextEntry.className == 'gap' &&
       previousEntry && previousEntry.className == 'gap') {
-    nextEntry.parentNode.removeChild(nextEntry);
+    removeNode(nextEntry);
   }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 // Chrome callbacks:
 /**
  * Our history system calls this function with results from searches.
  */
 function historyResult(info, results) {
   historyModel.addResults(info, results);
 }
 
 /**
  * Our history system calls this function when a deletion has finished.
  */
 function deleteComplete() {
   if (deleteQueue.length > 0) {
     // Remove the successfully deleted entry from the queue.
     if (deleteQueue[0].callback)
-      deleteQueue[0].callback();
+      deleteQueue[0].callback.apply();
     deleteQueue.splice(0, 1);
     deleteNextInQueue();
   } else {
     console.error('Received deleteComplete but queue is empty.');
   }
 }
 
 /**
  * Our history system calls this function if a delete is not ready (e.g.
  * another delete is in-progress).
  */
 function deleteFailed() {
   window.console.log('Delete failed');
 
   // The deletion failed - try again later.
   // TODO(dubroy): We should probably give up at some point.
   setTimeout(deleteNextInQueue, 500);
 }
 
 /**
  * Called when the history is deleted by someone else.
  */
 function historyDeleted() {
   window.console.log('History deleted');
   var anyChecked = document.querySelector('.entry input:checked') != null;
-  // Reload the page, unless the user is actively editing.
+  // Reload the page, unless the user has any items checked.
   // TODO(dubroy): We should just reload the page & restore the checked items.
-  if (!(historyView.getEditMode() && anyChecked))
+  if (!anyChecked)
     historyView.reload();
 }
 
 // Add handlers to HTML elements.
 document.addEventListener('DOMContentLoaded', load);
 
 // This event lets us enable and disable menu items before the menu is shown.
 document.addEventListener('canExecute', function(e) {
   e.canExecute = true;
 });