Bug 1123525 - [ReadingList] Allow deleting items via the Reading List sidebar, r=jaws.
authorFlorian Quèze <florian@queze.net>
Wed, 18 Mar 2015 17:25:18 -0700
changeset 263234 6a2887f3dbcdc6212c682eb8fd72a417087a0fdf
parent 263233 c103cfed74e6a139d6e183fba9487e776534d54e
child 263235 d3923b8fe2fa43c4b8dc1e96d4142d4fa0aff11d
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
bugs1123525
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 1123525 - [ReadingList] Allow deleting items via the Reading List sidebar, r=jaws.
browser/components/readinglist/sidebar.js
browser/components/readinglist/sidebar.xhtml
browser/locales/en-US/chrome/browser/browser.dtd
browser/themes/linux/jar.mn
browser/themes/linux/readinglist/sidebar.css
browser/themes/osx/jar.mn
browser/themes/osx/readinglist/sidebar.css
browser/themes/shared/readinglist/sidebar.css
browser/themes/shared/readinglist/sidebar.inc.css
browser/themes/windows/jar.mn
browser/themes/windows/readinglist/sidebar.css
--- a/browser/components/readinglist/sidebar.js
+++ b/browser/components/readinglist/sidebar.js
@@ -345,16 +345,21 @@ let RLSidebar = {
    * Handle a click event on the list box.
    * @param {Event} event - Triggering event.
    */
   onListClick(event) {
     let itemNode = this.findParentItemNode(event.target);
     if (!itemNode)
       return;
 
+    if (event.target.classList.contains("remove-button")) {
+      ReadingList.deleteItem(this.getItemFromNode(itemNode));
+      return;
+    }
+
     this.activeItem = itemNode;
     this.openActiveItem(event);
   },
 
   /**
    * Handle a mousemove event over the list box.
    * @param {Event} event - Triggering event.
    */
--- a/browser/components/readinglist/sidebar.xhtml
+++ b/browser/components/readinglist/sidebar.xhtml
@@ -6,25 +6,28 @@
 <!DOCTYPE html [
   <!ENTITY % browserDTD SYSTEM "chrome://browser/locale/browser.dtd">
   %browserDTD;
 ]>
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <script src="chrome://browser/content/readinglist/sidebar.js" type="application/javascript;version=1.8"></script>
     <link rel="stylesheet" type="text/css" media="all" href="chrome://browser/skin/readinglist/sidebar.css"/>
-    <!-- <title>&readingList.label;</title> -->
+    <title>&readingList.label;</title>
   </head>
 
   <body role="application">
     <template id="item-template">
       <div class="item" role="option" tabindex="-1">
         <div class="item-thumb-container"></div>
         <div class="item-summary-container">
-          <div class="item-title"></div>
+          <div class="item-title-lines">
+            <p class="item-title"/>
+            <button class="remove-button" title="&readingList.sidebar.delete.tooltip;"/>
+          </div>
           <div class="item-domain"></div>
         </div>
       </div>
     </template>
 
     <div id="list" role="listbox" tabindex="1"></div>
   </body>
 </html>
--- a/browser/locales/en-US/chrome/browser/browser.dtd
+++ b/browser/locales/en-US/chrome/browser/browser.dtd
@@ -848,13 +848,12 @@ just addresses the organization to follo
 
 <!ENTITY readingList.label                        "Reading List">
 <!ENTITY readingList.sidebar.commandKey           "R">
 <!ENTITY readingList.showSidebar.label            "Show Reading List Sidebar">
 <!-- Pre-landed string for bug 1124153 -->
 <!ENTITY readingList.sidebar.showMore.label       "Show moreā€¦">
 <!-- Pre-landed string for bug 1133662 -->
 <!ENTITY readingList.sidebar.emptyText            "Add articles to your Reading List to save them for later and find them easily when you need them.">
-<!-- Pre-landed string for bug 1123525 -->
 <!ENTITY readingList.sidebar.delete.tooltip       "Remove this from your Reading List">
 <!-- Pre-landed strings for bug 1123519 -->
 <!ENTITY readingList.sidebar.add.label            "Add to Reading List">
 <!ENTITY readingList.sidebar.add.tooltip          "Add this page to your Reading List">
--- a/browser/themes/linux/jar.mn
+++ b/browser/themes/linux/jar.mn
@@ -88,17 +88,17 @@ browser.jar:
   skin/classic/browser/undoCloseTab.png                        (../shared/undoCloseTab.png)
   skin/classic/browser/urlbar-arrow.png
   skin/classic/browser/session-restore.svg                  (../shared/incontent-icons/session-restore.svg)
   skin/classic/browser/tab-crashed.svg                      (../shared/incontent-icons/tab-crashed.svg)
   skin/classic/browser/welcome-back.svg                     (../shared/incontent-icons/welcome-back.svg)
   skin/classic/browser/reader-mode-16.png             (../shared/reader/reader-mode-16.png)
   skin/classic/browser/readinglist/icons.svg          (../shared/readinglist/icons.svg)
   skin/classic/browser/readinglist/readinglist-icon.svg (../shared/readinglist/readinglist-icon.svg)
-  skin/classic/browser/readinglist/sidebar.css        (../shared/readinglist/sidebar.css)
+* skin/classic/browser/readinglist/sidebar.css        (readinglist/sidebar.css)
   skin/classic/browser/webRTC-shareDevice-16.png
   skin/classic/browser/webRTC-shareDevice-64.png
   skin/classic/browser/webRTC-sharingDevice-16.png    (../shared/webrtc/webRTC-sharingDevice-16.png)
   skin/classic/browser/webRTC-shareMicrophone-16.png
   skin/classic/browser/webRTC-shareMicrophone-64.png
   skin/classic/browser/webRTC-sharingMicrophone-16.png (../shared/webrtc/webRTC-sharingMicrophone-16.png)
   skin/classic/browser/webRTC-shareScreen-16.png      (../shared/webrtc/webRTC-shareScreen-16.png)
   skin/classic/browser/webRTC-shareScreen-64.png      (../shared/webrtc/webRTC-shareScreen-64.png)
new file mode 100644
--- /dev/null
+++ b/browser/themes/linux/readinglist/sidebar.css
@@ -0,0 +1,29 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+%include ../../shared/readinglist/sidebar.inc.css
+
+.item {
+  -moz-padding-end: 0;
+}
+
+.item-title {
+  margin: 1px 0 0;
+}
+
+.item-title, .item-domain {
+  -moz-margin-end: 6px;
+}
+
+.remove-button {
+  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 16, 16, 0);
+}
+
+.remove-button:hover {
+  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 32, 16, 16);
+}
+
+.remove-button:hover:active {
+  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 48, 16, 32);
+}
--- a/browser/themes/osx/jar.mn
+++ b/browser/themes/osx/jar.mn
@@ -139,17 +139,17 @@ browser.jar:
   skin/classic/browser/urlbar-popup-blocked@2x.png
   skin/classic/browser/session-restore.svg            (../shared/incontent-icons/session-restore.svg)
   skin/classic/browser/tab-crashed.svg                (../shared/incontent-icons/tab-crashed.svg)
   skin/classic/browser/welcome-back.svg               (../shared/incontent-icons/welcome-back.svg)
   skin/classic/browser/reader-mode-16.png             (../shared/reader/reader-mode-16.png)
   skin/classic/browser/reader-mode-16@2x.png          (../shared/reader/reader-mode-16@2x.png)
   skin/classic/browser/readinglist/icons.svg          (../shared/readinglist/icons.svg)
   skin/classic/browser/readinglist/readinglist-icon.svg (../shared/readinglist/readinglist-icon.svg)
-  skin/classic/browser/readinglist/sidebar.css        (../shared/readinglist/sidebar.css)
+* skin/classic/browser/readinglist/sidebar.css        (readinglist/sidebar.css)
   skin/classic/browser/webRTC-shareDevice-16.png
   skin/classic/browser/webRTC-shareDevice-16@2x.png
   skin/classic/browser/webRTC-shareDevice-64.png
   skin/classic/browser/webRTC-shareDevice-64@2x.png
   skin/classic/browser/webRTC-sharingDevice-16.png    (../shared/webrtc/webRTC-sharingDevice-16.png)
   skin/classic/browser/webRTC-sharingDevice-16@2x.png (../shared/webrtc/webRTC-sharingDevice-16@2x.png)
   skin/classic/browser/webRTC-shareMicrophone-16.png
   skin/classic/browser/webRTC-shareMicrophone-16@2x.png
new file mode 100644
--- /dev/null
+++ b/browser/themes/osx/readinglist/sidebar.css
@@ -0,0 +1,35 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+%include ../../shared/readinglist/sidebar.inc.css
+
+.item-title {
+  margin: 4px 0 0;
+}
+
+.remove-button {
+  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.png"), 0, 16, 16, 0);
+}
+
+.remove-button:hover {
+  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.png"), 0, 32, 16, 16);
+}
+
+.remove-button:hover:active {
+  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.png"), 0, 48, 16, 32);
+}
+
+@media (min-resolution: 2dppx) {
+  .remove-button {
+    background-image: -moz-image-rect(url("chrome://global/skin/icons/close@2x.png"), 0, 32, 32, 0);
+  }
+
+  .remove-button:hover {
+    background-image: -moz-image-rect(url("chrome://global/skin/icons/close@2x.png"), 0, 64, 32, 32);
+  }
+
+  .remove-button:hover:active {
+    background-image: -moz-image-rect(url("chrome://global/skin/icons/close@2x.png"), 0, 96, 32, 64);
+  }
+}
rename from browser/themes/shared/readinglist/sidebar.css
rename to browser/themes/shared/readinglist/sidebar.inc.css
--- a/browser/themes/shared/readinglist/sidebar.css
+++ b/browser/themes/shared/readinglist/sidebar.inc.css
@@ -1,11 +1,11 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+% This Source Code Form is subject to the terms of the Mozilla Public
+% License, v. 2.0. If a copy of the MPL was not distributed with this
+% file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 :root, body {
   height: 100%;
   overflow-x: hidden;
 }
 
 body {
   margin: 0;
@@ -47,26 +47,45 @@ body {
   margin: 5px;
 }
 
 .item-summary-container {
   display: flex;
   flex-flow: column;
   -moz-padding-start: 4px;
   overflow: hidden;
+  flex-grow: 1;
+}
+
+.item-title-lines {
+  display: flex;
 }
 
 .item-title {
   overflow: hidden;
-  height: 2.8em;
+  max-height: 2.8em;
+  flex-grow: 1;
 }
 
 .item-domain {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   max-height: 1.4em;
   color: #0095DD;
 }
 
 .item:hover .item-domain {
   color: #008ACB;
 }
+
+.item:not(:hover) .remove-button {
+  display: none;
+}
+
+.remove-button {
+  width: 16px;
+  height: 16px;
+  background-size: contain;
+  background-color: transparent;
+  border-width: 0;
+}
+
--- a/browser/themes/windows/jar.mn
+++ b/browser/themes/windows/jar.mn
@@ -107,17 +107,17 @@ browser.jar:
         skin/classic/browser/urlbar-popup-blocked.png
         skin/classic/browser/urlbar-history-dropmarker.png
         skin/classic/browser/session-restore.svg                     (../shared/incontent-icons/session-restore.svg)
         skin/classic/browser/tab-crashed.svg                         (../shared/incontent-icons/tab-crashed.svg)
         skin/classic/browser/welcome-back.svg                        (../shared/incontent-icons/welcome-back.svg)
         skin/classic/browser/reader-mode-16.png                      (../shared/reader/reader-mode-16.png)
         skin/classic/browser/readinglist/icons.svg                   (../shared/readinglist/icons.svg)
         skin/classic/browser/readinglist/readinglist-icon.svg        (../shared/readinglist/readinglist-icon.svg)
-        skin/classic/browser/readinglist/sidebar.css                 (../shared/readinglist/sidebar.css)
+*       skin/classic/browser/readinglist/sidebar.css                 (readinglist/sidebar.css)
         skin/classic/browser/notification-pluginNormal.png           (../shared/plugins/notification-pluginNormal.png)
         skin/classic/browser/notification-pluginAlert.png            (../shared/plugins/notification-pluginAlert.png)
         skin/classic/browser/notification-pluginBlocked.png          (../shared/plugins/notification-pluginBlocked.png)
         skin/classic/browser/webRTC-shareDevice-16.png
         skin/classic/browser/webRTC-shareDevice-64.png
         skin/classic/browser/webRTC-sharingDevice-16.png             (../shared/webrtc/webRTC-sharingDevice-16.png)
         skin/classic/browser/webRTC-shareMicrophone-16.png
         skin/classic/browser/webRTC-shareMicrophone-64.png
@@ -579,17 +579,17 @@ browser.jar:
         skin/classic/aero/browser/urlbar-popup-blocked.png
         skin/classic/aero/browser/urlbar-history-dropmarker.png
         skin/classic/aero/browser/session-restore.svg               (../shared/incontent-icons/session-restore.svg)
         skin/classic/aero/browser/tab-crashed.svg                   (../shared/incontent-icons/tab-crashed.svg)
         skin/classic/aero/browser/welcome-back.svg                  (../shared/incontent-icons/welcome-back.svg)
         skin/classic/aero/browser/reader-mode-16.png                (../shared/reader/reader-mode-16.png)
         skin/classic/aero/browser/readinglist/icons.svg             (../shared/readinglist/icons.svg)
         skin/classic/aero/browser/readinglist/readinglist-icon.svg  (../shared/readinglist/readinglist-icon.svg)
-        skin/classic/aero/browser/readinglist/sidebar.css           (../shared/readinglist/sidebar.css)
+*       skin/classic/aero/browser/readinglist/sidebar.css           (readinglist/sidebar.css)
         skin/classic/aero/browser/notification-pluginNormal.png     (../shared/plugins/notification-pluginNormal.png)
         skin/classic/aero/browser/notification-pluginAlert.png      (../shared/plugins/notification-pluginAlert.png)
         skin/classic/aero/browser/notification-pluginBlocked.png    (../shared/plugins/notification-pluginBlocked.png)
         skin/classic/aero/browser/webRTC-shareDevice-16.png
         skin/classic/aero/browser/webRTC-shareDevice-64.png
         skin/classic/aero/browser/webRTC-sharingDevice-16.png             (../shared/webrtc/webRTC-sharingDevice-16.png)
         skin/classic/aero/browser/webRTC-shareMicrophone-16.png
         skin/classic/aero/browser/webRTC-shareMicrophone-64.png
new file mode 100644
--- /dev/null
+++ b/browser/themes/windows/readinglist/sidebar.css
@@ -0,0 +1,30 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+%include ../../shared/readinglist/sidebar.inc.css
+
+.item {
+  -moz-padding-end: 0;
+}
+
+.item-title {
+  margin: 1px 0 0;
+}
+
+.item-title, .item-domain {
+  -moz-margin-end: 6px;
+}
+
+.remove-button {
+  -moz-margin-end: 2px;
+  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.png"), 0, 16, 16, 0);
+}
+
+.remove-button:hover {
+  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.png"), 0, 32, 16, 16);
+}
+
+.remove-button:hover:active {
+  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.png"), 0, 48, 16, 32);
+}