Bug 1431945 - Fix right-to-left icons, site-context-menu drags and bug fixes to Activity Stream. r?dmose
MozReview-Commit-ID: KFgZvupU3ml
--- 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>