Bug 1144377 - hover state on reading list sidebar items remains after the mouse leaves the list, r=jaws. a=readinglist
authorFlorian Quèze <florian@queze.net>
Thu, 19 Mar 2015 15:50:23 -0700
changeset 248438 4510e7024404394e75fcbe4074245bca73dc859e
parent 248437 e967dc8f6f3e96f27e38d5e7980783ac92d36dcf
child 248439 69c5f5536e10e7119f277e93e27695eba3107ed0
push id7837
push userjwein@mozilla.com
push dateFri, 27 Mar 2015 00:27:16 +0000
treeherdermozilla-aurora@cb0db44ce60e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws, readinglist
bugs1144377
milestone38.0a2
Bug 1144377 - hover state on reading list sidebar items remains after the mouse leaves the list, r=jaws. a=readinglist
browser/components/readinglist/sidebar.js
browser/themes/shared/readinglist/sidebar.inc.css
--- a/browser/components/readinglist/sidebar.js
+++ b/browser/components/readinglist/sidebar.js
@@ -160,17 +160,17 @@ let RLSidebar = {
    * Get the number of items currently displayed in the list.
    * @type {number}
    */
   get numItems() {
     return this.list.childElementCount;
   },
 
   /**
-   * The currently active element in the list.
+   * The list item displayed in the current tab.
    * @type {Element}
    */
   get activeItem() {
     return document.querySelector("#list > .item.active");
   },
 
   set activeItem(node) {
     if (node && node.parentNode != this.list) {
@@ -199,17 +199,17 @@ let RLSidebar = {
       node.classList.add("active");
     }
 
     let event = new CustomEvent("ActiveItemChanged", {bubbles: true});
     this.list.dispatchEvent(event);
   },
 
   /**
-   * The currently selected item in the list.
+   * The list item selected with the keyboard.
    * @type {Element}
    */
   get selectedItem() {
     return document.querySelector("#list > .item.selected");
   },
 
   set selectedItem(node) {
     if (node && node.parentNode != this.list) {
@@ -361,25 +361,24 @@ let RLSidebar = {
       return;
     }
 
     this.activeItem = itemNode;
     this.openActiveItem(event);
   },
 
   /**
-   * Handle a mousemove event over the list box.
+   * Handle a mousemove event over the list box:
+   * If the hovered item isn't the selected one, clear the selection.
    * @param {Event} event - Triggering event.
    */
   onListMouseMove(event) {
     let itemNode = this.findParentItemNode(event.target);
-    if (!itemNode)
-      return;
-
-    this.selectedItem = itemNode;
+    if (itemNode != this.selectedItem)
+      this.selectedItem = null;
   },
 
   /**
    * Handle a keydown event on the list box.
    * @param {Event} event - Triggering event.
    */
   onListKeyDown(event) {
     if (event.keyCode == KeyEvent.DOM_VK_DOWN) {
--- a/browser/themes/shared/readinglist/sidebar.inc.css
+++ b/browser/themes/shared/readinglist/sidebar.inc.css
@@ -79,20 +79,21 @@ body {
   max-height: 1.4em;
   color: #0095DD;
 }
 
 .item:hover .item-domain {
   color: #008ACB;
 }
 
-.item:not(:hover) .remove-button {
+.item:not(:hover):not(.selected) .remove-button {
   display: none;
 }
 
 .remove-button {
+  padding: 0;
   width: 16px;
   height: 16px;
   background-size: contain;
   background-color: transparent;
   border-width: 0;
 }