Bug 1431945 - Fix right-to-left icons, site-context-menu drags and bug fixes to Activity Stream. r=dmose
authorEd Lee <edilee@mozilla.com>
Sat, 20 Jan 2018 11:02:49 -0800
changeset 400268 549d783785870d9287be688601ca979744ffea2d
parent 400267 922a011fced2eddda073da953b0fde66a85a498e
child 400269 7d6828a38971e2c0925ce89e5f906a47db06bb2b
push id33300
push userdluca@mozilla.com
push dateTue, 23 Jan 2018 10:00:03 +0000
treeherdermozilla-central@11e1df0e0a18 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdmose
bugs1431945
milestone60.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 1431945 - Fix right-to-left icons, site-context-menu drags and bug fixes to Activity Stream. r=dmose MozReview-Commit-ID: KFgZvupU3ml
browser/extensions/activity-stream/css/activity-stream-linux.css
browser/extensions/activity-stream/css/activity-stream-mac.css
browser/extensions/activity-stream/css/activity-stream-windows.css
browser/extensions/activity-stream/data/content/activity-stream.bundle.js
browser/extensions/activity-stream/install.rdf.in
--- a/browser/extensions/activity-stream/css/activity-stream-linux.css
+++ b/browser/extensions/activity-stream/css/activity-stream-linux.css
@@ -50,24 +50,30 @@ input {
   .icon.icon-dismiss {
     background-image: url("../data/content/assets/glyph-dismiss-16.svg"); }
   .icon.icon-info {
     background-image: url("../data/content/assets/glyph-info-16.svg"); }
   .icon.icon-import {
     background-image: url("../data/content/assets/glyph-import-16.svg"); }
   .icon.icon-new-window {
     background-image: url("../data/content/assets/glyph-newWindow-16.svg"); }
+    .icon.icon-new-window:dir(rtl) {
+      transform: scaleX(-1); }
   .icon.icon-new-window-private {
     background-image: url("chrome://browser/skin/privateBrowsing.svg"); }
   .icon.icon-settings {
     background-image: url("chrome://browser/skin/settings.svg"); }
   .icon.icon-pin {
     background-image: url("../data/content/assets/glyph-pin-16.svg"); }
+    .icon.icon-pin:dir(rtl) {
+      transform: scaleX(-1); }
   .icon.icon-unpin {
     background-image: url("../data/content/assets/glyph-unpin-16.svg"); }
+    .icon.icon-unpin:dir(rtl) {
+      transform: scaleX(-1); }
   .icon.icon-edit {
     background-image: url("../data/content/assets/glyph-edit-16.svg"); }
   .icon.icon-pocket {
     background-image: url("../data/content/assets/glyph-pocket-16.svg"); }
   .icon.icon-historyItem {
     background-image: url("../data/content/assets/glyph-historyItem-16.svg"); }
   .icon.icon-trending {
     background-image: url("../data/content/assets/glyph-trending-16.svg");
@@ -76,16 +82,18 @@ input {
     background-image: url("chrome://browser/skin/history.svg"); }
   .icon.icon-topsites {
     background-image: url("../data/content/assets/glyph-topsites-16.svg"); }
   .icon.icon-pin-small {
     background-image: url("../data/content/assets/glyph-pin-12.svg");
     background-size: 12px;
     height: 12px;
     width: 12px; }
+    .icon.icon-pin-small:dir(rtl) {
+      transform: scaleX(-1); }
   .icon.icon-check {
     background-image: url("chrome://browser/skin/check.svg"); }
   .icon.icon-webextension {
     background-image: url("../data/content/assets/glyph-webextension-16.svg"); }
   .icon.icon-highlights {
     background-image: url("../data/content/assets/glyph-highlights-16.svg"); }
   .icon.icon-arrowhead-down {
     background-image: url("../data/content/assets/glyph-arrowhead-down-12.svg");
@@ -318,25 +326,16 @@ main {
       top: -13.5px;
       transform: scale(0.25);
       transition-duration: 200ms;
       transition-property: transform, opacity;
       width: 27px; }
       .top-sites-list .top-site-outer .context-menu-button:-moz-any(:active, :focus) {
         opacity: 1;
         transform: scale(1); }
-    .top-sites-list .top-site-outer:-moz-any(.active, :focus, :hover) .tile {
-      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 5px #D7D7DB;
-      transition: box-shadow 150ms; }
-    .top-sites-list .top-site-outer:-moz-any(.active, :focus, :hover) .edit-menu {
-      opacity: 1;
-      transform: scale(1); }
-    .top-sites-list .top-site-outer:-moz-any(.active, :focus, :hover) .context-menu-button {
-      opacity: 1;
-      transform: scale(1); }
     .top-sites-list .top-site-outer .tile {
       border-radius: 6px;
       box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 4px 0 rgba(12, 12, 13, 0.1);
       height: 96px;
       position: relative;
       width: 96px;
       align-items: center;
       color: #737373;
@@ -446,16 +445,25 @@ main {
           border-right: 0; }
     .top-sites-list .top-site-outer.placeholder .tile {
       box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
     .top-sites-list .top-site-outer.placeholder .screenshot {
       display: none; }
     .top-sites-list .top-site-outer.placeholder .edit-menu:last-child button {
       background-size: 13px;
       width: 23px; }
+  .top-sites-list:not(.dnd-active) .top-site-outer:-moz-any(.active, :focus, :hover) .tile {
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 5px #D7D7DB;
+    transition: box-shadow 150ms; }
+  .top-sites-list:not(.dnd-active) .top-site-outer:-moz-any(.active, :focus, :hover) .edit-menu {
+    opacity: 1;
+    transform: scale(1); }
+  .top-sites-list:not(.dnd-active) .top-site-outer:-moz-any(.active, :focus, :hover) .context-menu-button {
+    opacity: 1;
+    transform: scale(1); }
 
 .edit-topsites-wrapper .edit-topsites-button {
   border-right: 1px solid #D7D7DB;
   line-height: 13px;
   offset-inline-end: 24px;
   opacity: 0;
   padding: 0 10px;
   pointer-events: none;
--- a/browser/extensions/activity-stream/css/activity-stream-mac.css
+++ b/browser/extensions/activity-stream/css/activity-stream-mac.css
@@ -50,24 +50,30 @@ input {
   .icon.icon-dismiss {
     background-image: url("../data/content/assets/glyph-dismiss-16.svg"); }
   .icon.icon-info {
     background-image: url("../data/content/assets/glyph-info-16.svg"); }
   .icon.icon-import {
     background-image: url("../data/content/assets/glyph-import-16.svg"); }
   .icon.icon-new-window {
     background-image: url("../data/content/assets/glyph-newWindow-16.svg"); }
+    .icon.icon-new-window:dir(rtl) {
+      transform: scaleX(-1); }
   .icon.icon-new-window-private {
     background-image: url("chrome://browser/skin/privateBrowsing.svg"); }
   .icon.icon-settings {
     background-image: url("chrome://browser/skin/settings.svg"); }
   .icon.icon-pin {
     background-image: url("../data/content/assets/glyph-pin-16.svg"); }
+    .icon.icon-pin:dir(rtl) {
+      transform: scaleX(-1); }
   .icon.icon-unpin {
     background-image: url("../data/content/assets/glyph-unpin-16.svg"); }
+    .icon.icon-unpin:dir(rtl) {
+      transform: scaleX(-1); }
   .icon.icon-edit {
     background-image: url("../data/content/assets/glyph-edit-16.svg"); }
   .icon.icon-pocket {
     background-image: url("../data/content/assets/glyph-pocket-16.svg"); }
   .icon.icon-historyItem {
     background-image: url("../data/content/assets/glyph-historyItem-16.svg"); }
   .icon.icon-trending {
     background-image: url("../data/content/assets/glyph-trending-16.svg");
@@ -76,16 +82,18 @@ input {
     background-image: url("chrome://browser/skin/history.svg"); }
   .icon.icon-topsites {
     background-image: url("../data/content/assets/glyph-topsites-16.svg"); }
   .icon.icon-pin-small {
     background-image: url("../data/content/assets/glyph-pin-12.svg");
     background-size: 12px;
     height: 12px;
     width: 12px; }
+    .icon.icon-pin-small:dir(rtl) {
+      transform: scaleX(-1); }
   .icon.icon-check {
     background-image: url("chrome://browser/skin/check.svg"); }
   .icon.icon-webextension {
     background-image: url("../data/content/assets/glyph-webextension-16.svg"); }
   .icon.icon-highlights {
     background-image: url("../data/content/assets/glyph-highlights-16.svg"); }
   .icon.icon-arrowhead-down {
     background-image: url("../data/content/assets/glyph-arrowhead-down-12.svg");
@@ -318,25 +326,16 @@ main {
       top: -13.5px;
       transform: scale(0.25);
       transition-duration: 200ms;
       transition-property: transform, opacity;
       width: 27px; }
       .top-sites-list .top-site-outer .context-menu-button:-moz-any(:active, :focus) {
         opacity: 1;
         transform: scale(1); }
-    .top-sites-list .top-site-outer:-moz-any(.active, :focus, :hover) .tile {
-      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 5px #D7D7DB;
-      transition: box-shadow 150ms; }
-    .top-sites-list .top-site-outer:-moz-any(.active, :focus, :hover) .edit-menu {
-      opacity: 1;
-      transform: scale(1); }
-    .top-sites-list .top-site-outer:-moz-any(.active, :focus, :hover) .context-menu-button {
-      opacity: 1;
-      transform: scale(1); }
     .top-sites-list .top-site-outer .tile {
       border-radius: 6px;
       box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 4px 0 rgba(12, 12, 13, 0.1);
       height: 96px;
       position: relative;
       width: 96px;
       align-items: center;
       color: #737373;
@@ -446,16 +445,25 @@ main {
           border-right: 0; }
     .top-sites-list .top-site-outer.placeholder .tile {
       box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
     .top-sites-list .top-site-outer.placeholder .screenshot {
       display: none; }
     .top-sites-list .top-site-outer.placeholder .edit-menu:last-child button {
       background-size: 13px;
       width: 23px; }
+  .top-sites-list:not(.dnd-active) .top-site-outer:-moz-any(.active, :focus, :hover) .tile {
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 5px #D7D7DB;
+    transition: box-shadow 150ms; }
+  .top-sites-list:not(.dnd-active) .top-site-outer:-moz-any(.active, :focus, :hover) .edit-menu {
+    opacity: 1;
+    transform: scale(1); }
+  .top-sites-list:not(.dnd-active) .top-site-outer:-moz-any(.active, :focus, :hover) .context-menu-button {
+    opacity: 1;
+    transform: scale(1); }
 
 .edit-topsites-wrapper .edit-topsites-button {
   border-right: 1px solid #D7D7DB;
   line-height: 13px;
   offset-inline-end: 24px;
   opacity: 0;
   padding: 0 10px;
   pointer-events: none;
--- a/browser/extensions/activity-stream/css/activity-stream-windows.css
+++ b/browser/extensions/activity-stream/css/activity-stream-windows.css
@@ -50,24 +50,30 @@ input {
   .icon.icon-dismiss {
     background-image: url("../data/content/assets/glyph-dismiss-16.svg"); }
   .icon.icon-info {
     background-image: url("../data/content/assets/glyph-info-16.svg"); }
   .icon.icon-import {
     background-image: url("../data/content/assets/glyph-import-16.svg"); }
   .icon.icon-new-window {
     background-image: url("../data/content/assets/glyph-newWindow-16.svg"); }
+    .icon.icon-new-window:dir(rtl) {
+      transform: scaleX(-1); }
   .icon.icon-new-window-private {
     background-image: url("chrome://browser/skin/privateBrowsing.svg"); }
   .icon.icon-settings {
     background-image: url("chrome://browser/skin/settings.svg"); }
   .icon.icon-pin {
     background-image: url("../data/content/assets/glyph-pin-16.svg"); }
+    .icon.icon-pin:dir(rtl) {
+      transform: scaleX(-1); }
   .icon.icon-unpin {
     background-image: url("../data/content/assets/glyph-unpin-16.svg"); }
+    .icon.icon-unpin:dir(rtl) {
+      transform: scaleX(-1); }
   .icon.icon-edit {
     background-image: url("../data/content/assets/glyph-edit-16.svg"); }
   .icon.icon-pocket {
     background-image: url("../data/content/assets/glyph-pocket-16.svg"); }
   .icon.icon-historyItem {
     background-image: url("../data/content/assets/glyph-historyItem-16.svg"); }
   .icon.icon-trending {
     background-image: url("../data/content/assets/glyph-trending-16.svg");
@@ -76,16 +82,18 @@ input {
     background-image: url("chrome://browser/skin/history.svg"); }
   .icon.icon-topsites {
     background-image: url("../data/content/assets/glyph-topsites-16.svg"); }
   .icon.icon-pin-small {
     background-image: url("../data/content/assets/glyph-pin-12.svg");
     background-size: 12px;
     height: 12px;
     width: 12px; }
+    .icon.icon-pin-small:dir(rtl) {
+      transform: scaleX(-1); }
   .icon.icon-check {
     background-image: url("chrome://browser/skin/check.svg"); }
   .icon.icon-webextension {
     background-image: url("../data/content/assets/glyph-webextension-16.svg"); }
   .icon.icon-highlights {
     background-image: url("../data/content/assets/glyph-highlights-16.svg"); }
   .icon.icon-arrowhead-down {
     background-image: url("../data/content/assets/glyph-arrowhead-down-12.svg");
@@ -318,25 +326,16 @@ main {
       top: -13.5px;
       transform: scale(0.25);
       transition-duration: 200ms;
       transition-property: transform, opacity;
       width: 27px; }
       .top-sites-list .top-site-outer .context-menu-button:-moz-any(:active, :focus) {
         opacity: 1;
         transform: scale(1); }
-    .top-sites-list .top-site-outer:-moz-any(.active, :focus, :hover) .tile {
-      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 5px #D7D7DB;
-      transition: box-shadow 150ms; }
-    .top-sites-list .top-site-outer:-moz-any(.active, :focus, :hover) .edit-menu {
-      opacity: 1;
-      transform: scale(1); }
-    .top-sites-list .top-site-outer:-moz-any(.active, :focus, :hover) .context-menu-button {
-      opacity: 1;
-      transform: scale(1); }
     .top-sites-list .top-site-outer .tile {
       border-radius: 6px;
       box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 4px 0 rgba(12, 12, 13, 0.1);
       height: 96px;
       position: relative;
       width: 96px;
       align-items: center;
       color: #737373;
@@ -446,16 +445,25 @@ main {
           border-right: 0; }
     .top-sites-list .top-site-outer.placeholder .tile {
       box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
     .top-sites-list .top-site-outer.placeholder .screenshot {
       display: none; }
     .top-sites-list .top-site-outer.placeholder .edit-menu:last-child button {
       background-size: 13px;
       width: 23px; }
+  .top-sites-list:not(.dnd-active) .top-site-outer:-moz-any(.active, :focus, :hover) .tile {
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 5px #D7D7DB;
+    transition: box-shadow 150ms; }
+  .top-sites-list:not(.dnd-active) .top-site-outer:-moz-any(.active, :focus, :hover) .edit-menu {
+    opacity: 1;
+    transform: scale(1); }
+  .top-sites-list:not(.dnd-active) .top-site-outer:-moz-any(.active, :focus, :hover) .context-menu-button {
+    opacity: 1;
+    transform: scale(1); }
 
 .edit-topsites-wrapper .edit-topsites-button {
   border-right: 1px solid #D7D7DB;
   line-height: 13px;
   offset-inline-end: 24px;
   opacity: 0;
   padding: 0 10px;
   pointer-events: none;
--- a/browser/extensions/activity-stream/data/content/activity-stream.bundle.js
+++ b/browser/extensions/activity-stream/data/content/activity-stream.bundle.js
@@ -3048,17 +3048,17 @@ class TopSite__TopSiteList extends exter
         link: link,
         onEdit: props.onEdit,
         activeIndex: this.state.activeIndex,
         onActivate: this.onActivate
       }, slotProps, commonProps)));
     }
     return external__React__default.a.createElement(
       "ul",
-      { className: "top-sites-list" },
+      { className: `top-sites-list${this.state.draggedSite ? " dnd-active" : ""}` },
       topSitesUI
     );
   }
 }
 
 const TopSiteList = Object(external__ReactIntl_["injectIntl"])(TopSite__TopSiteList);
 // CONCATENATED MODULE: ./system-addon/content-src/components/TopSites/TopSiteForm.jsx
 
@@ -3252,25 +3252,31 @@ class TopSitesEdit__TopSitesEdit extends
       editIndex: -1 // Index of top site being edited
     };
     this.onEditButtonClick = this.onEditButtonClick.bind(this);
     this.onShowMoreLessClick = this.onShowMoreLessClick.bind(this);
     this.onModalOverlayClick = this.onModalOverlayClick.bind(this);
     this.onAddButtonClick = this.onAddButtonClick.bind(this);
     this.onFormClose = this.onFormClose.bind(this);
     this.onEdit = this.onEdit.bind(this);
+    this.dispatchEditModalUserEvent = this.dispatchEditModalUserEvent.bind(this);
   }
-  onEditButtonClick() {
-    this.setState({ showEditModal: !this.state.showEditModal });
+  dispatchEditModalUserEvent() {
     const event = this.state.showEditModal ? "TOP_SITES_EDIT_OPEN" : "TOP_SITES_EDIT_CLOSE";
     this.props.dispatch(Actions["a" /* actionCreators */].UserEvent({
       source: TOP_SITES_SOURCE,
       event
     }));
   }
+  onEditButtonClick() {
+    function toggleEditModal(prevState) {
+      return { showEditModal: !prevState.showEditModal };
+    }
+    this.setState(toggleEditModal, this.dispatchEditModalUserEvent);
+  }
   onModalOverlayClick() {
     this.setState({ showEditModal: false, showAddForm: false, showEditForm: false });
     this.props.dispatch(Actions["a" /* actionCreators */].UserEvent({
       source: TOP_SITES_SOURCE,
       event: "TOP_SITES_EDIT_CLOSE"
     }));
     this.props.dispatch({ type: Actions["b" /* actionTypes */].TOP_SITES_CANCEL_EDIT });
   }
--- a/browser/extensions/activity-stream/install.rdf.in
+++ b/browser/extensions/activity-stream/install.rdf.in
@@ -3,17 +3,17 @@
 #filter substitution
 
 <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#">
   <Description about="urn:mozilla:install-manifest">
     <em:id>activity-stream@mozilla.org</em:id>
     <em:type>2</em:type>
     <em:bootstrap>true</em:bootstrap>
     <em:unpack>false</em:unpack>
-    <em:version>2018.01.18.1095-7f6ab9f3</em:version>
+    <em:version>2018.01.20.1140-7b6573a1</em:version>
     <em:name>Activity Stream</em:name>
     <em:description>A rich visual history feed and a reimagined home page make it easier than ever to find exactly what you're looking for in Firefox.</em:description>
     <em:multiprocessCompatible>true</em:multiprocessCompatible>
 
     <em:targetApplication>
       <Description>
         <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
         <em:minVersion>@MOZ_APP_VERSION@</em:minVersion>