Bug 1144377 - hover state on reading list sidebar items remains after the mouse leaves the list, r=jaws.
authorFlorian Quèze <florian@queze.net>
Thu, 19 Mar 2015 15:50:23 -0700
changeset 263427 966e0994b0482f4fc7a2fb144911cc63c73209d7
parent 263266 988afda9eac4989e7a3aa5192c678a8f41ba69e8
child 263428 89cb4fd9ee1db6ac37d81adf8394a042c34d7a61
push id4718
push userraliiev@mozilla.com
push dateMon, 11 May 2015 18:39:53 +0000
treeherdermozilla-beta@c20c4ef55f08 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1144377
milestone39.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1144377 - hover state on reading list sidebar items remains after the mouse leaves the list, r=jaws.
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;
 }