Bug 1593965 - Use new drag & drop indicators for tabs and the bookmarks toolbar. r=mak,dao
☠☠ backed out by 27a1fb60c286 ☠ ☠
authorHarry Twyford <htwyford@mozilla.com>
Fri, 15 Nov 2019 10:27:50 +0000
changeset 502136 81b1c17310c2e3060f5a6e92f0a5221514c5fa72
parent 502135 51dc2e048fa0512dccc5495bb86b43452dddc63d
child 502137 58c002a9cb78fa913cbd3b8dce38d1f0032b6bda
push id114172
push userdluca@mozilla.com
push dateTue, 19 Nov 2019 11:31:10 +0000
treeherdermozilla-inbound@b5c5ba07d3db [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmak, dao
bugs1593965
milestone72.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 1593965 - Use new drag & drop indicators for tabs and the bookmarks toolbar. r=mak,dao Differential Revision: https://phabricator.services.mozilla.com/D52822
browser/themes/linux/browser.css
browser/themes/linux/jar.mn
browser/themes/linux/places/toolbarDropMarker.png
browser/themes/linux/tabbrowser/tabDragIndicator.png
browser/themes/osx/browser.css
browser/themes/osx/jar.mn
browser/themes/osx/places/toolbarDropMarker.png
browser/themes/osx/tabbrowser/tabDragIndicator.png
browser/themes/osx/tabbrowser/tabDragIndicator@2x.png
browser/themes/shared/browser.inc.css
browser/themes/shared/jar.inc.mn
browser/themes/shared/tabbrowser/tab-drag-indicator.svg
browser/themes/shared/tabs.inc.css
browser/themes/shared/toolbar-drag-indicator.svg
browser/themes/windows/browser.css
browser/themes/windows/jar.mn
browser/themes/windows/places/toolbarDropMarker.png
browser/themes/windows/tabbrowser/tabDragIndicator.png
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -99,21 +99,16 @@ menuitem.bookmark-item {
 }
 
 /* Bookmark drag and drop styles */
 .bookmark-item[dragover-into="true"] {
   background: Highlight !important;
   color: HighlightText !important;
 }
 
-/* Bookmarks toolbar */
-#PlacesToolbarDropIndicator {
-  list-style-image: url(chrome://browser/skin/places/toolbarDropMarker.png);
-}
-
 .bookmark-item[cutting] > .toolbarbutton-icon,
 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
   opacity: 0.5;
 }
 
 .bookmark-item[cutting] > .toolbarbutton-text,
 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
   opacity: 0.7;
@@ -368,25 +363,16 @@ notification[value="translation"] menuli
 #context_undoCloseTab {
   list-style-image: url("moz-icon://stock/gtk-undelete?size=menu");
 }
 
 #context_closeTab {
   list-style-image: url("moz-icon://stock/gtk-close?size=menu");
 }
 
-/* Tab drag and drop */
-.tab-drop-indicator {
-  list-style-image: url(chrome://browser/skin/tabbrowser/tabDragIndicator.png);
-  margin-bottom: -9px;
-  /* The z-index needs to be big enough to trump other positioned UI pieces
-     that we want to overlay. The expanded urlbar uses 3. */
-  z-index: 4;
-}
-
 /* All tabs menupopup */
 
 .alltabs-item[selected="true"] {
   font-weight: bold;
 }
 
 /* Status panel */
 
--- a/browser/themes/linux/jar.mn
+++ b/browser/themes/linux/jar.mn
@@ -21,20 +21,18 @@ browser.jar:
 * skin/classic/browser/downloads/allDownloadsView.css   (downloads/allDownloadsView.css)
 * skin/classic/browser/downloads/downloads.css        (downloads/downloads.css)
   skin/classic/browser/notification-icons/geo-blocked.svg  (notification-icons/geo-blocked.svg)
   skin/classic/browser/notification-icons/geo-detailed.svg (notification-icons/geo-detailed.svg)
   skin/classic/browser/notification-icons/geo.svg          (notification-icons/geo.svg)
   skin/classic/browser/places/editBookmark.css        (places/editBookmark.css)
 * skin/classic/browser/places/sidebar.css             (places/sidebar.css)
   skin/classic/browser/places/organizer.css           (places/organizer.css)
-  skin/classic/browser/places/toolbarDropMarker.png   (places/toolbarDropMarker.png)
   skin/classic/browser/preferences/alwaysAsk.png      (preferences/alwaysAsk.png)
   skin/classic/browser/preferences/preferences.css    (preferences/preferences.css)
 * skin/classic/browser/preferences/in-content/preferences.css (preferences/in-content/preferences.css)
 * skin/classic/browser/preferences/in-content/dialog.css      (preferences/in-content/dialog.css)
   skin/classic/browser/preferences/applications.css   (preferences/applications.css)
-  skin/classic/browser/tabbrowser/tabDragIndicator.png      (tabbrowser/tabDragIndicator.png)
   skin/classic/browser/window-controls/close.svg                 (window-controls/close.svg)
   skin/classic/browser/window-controls/minimize.svg              (window-controls/minimize.svg)
   skin/classic/browser/window-controls/restore.svg               (window-controls/restore.svg)
 
   skin/classic/browser/e10s-64@2x.png (../shared/e10s-64@2x.png)
deleted file mode 100644
index 5df052bc4d55e19b0eb87c7c712169b692257dfd..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index a52a857d138c452062e3d019500731d197de5d7f..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -597,44 +597,16 @@
 #tabbrowser-tabs {
   -moz-box-align: stretch;
   padding-left: 0;
   padding-right: 0;
   margin-bottom: 0;
   position: static;
 }
 
-/**
- * Tab Drag and Drop
- */
-
-.tab-drop-indicator-box {
-  -moz-box-align: center;
-}
-
-.tab-drop-indicator {
-  list-style-image: url(chrome://browser/skin/tabbrowser/tabDragIndicator.png);
-  margin-top: -2px;
-  /* The z-index needs to be big enough to trump other positioned UI pieces
-     that we want to overlay. The expanded urlbar uses 3. */
-  z-index: 4;
-}
-
-@media (min-resolution: 2dppx) {
-  .tab-drop-indicator {
-    list-style-image: url(chrome://browser/skin/tabbrowser/tabDragIndicator@2x.png);
-    width: 12px;
-  }
-}
-
-/* Bookmarks toolbar */
-#PlacesToolbarDropIndicator {
-  list-style-image: url(chrome://browser/skin/places/toolbarDropMarker.png);
-}
-
 /* Bookmark drag and drop styles */
 
 .bookmark-item[dragover-into="true"] {
   background: Highlight !important;
   color: HighlightText !important;
 }
 
 %include ../shared/notification-icons.inc.css
--- a/browser/themes/osx/jar.mn
+++ b/browser/themes/osx/jar.mn
@@ -18,23 +18,20 @@ browser.jar:
 * skin/classic/browser/downloads/allDownloadsView.css (downloads/allDownloadsView.css)
 * skin/classic/browser/downloads/downloads.css              (downloads/downloads.css)
   skin/classic/browser/monitor-base.png
   skin/classic/browser/monitor-border.png
   skin/classic/browser/notification-icons/geo-blocked.svg  (notification-icons/geo-blocked.svg)
   skin/classic/browser/notification-icons/geo.svg          (notification-icons/geo.svg)
 * skin/classic/browser/places/sidebar.css                   (places/sidebar.css)
   skin/classic/browser/places/organizer.css                 (places/organizer.css)
-  skin/classic/browser/places/toolbarDropMarker.png         (places/toolbarDropMarker.png)
   skin/classic/browser/places/editBookmark.css              (places/editBookmark.css)
   skin/classic/browser/preferences/alwaysAsk.png            (preferences/alwaysAsk.png)
   skin/classic/browser/preferences/application.png          (preferences/application.png)
   skin/classic/browser/preferences/saveFile.png             (preferences/saveFile.png)
 * skin/classic/browser/preferences/preferences.css          (preferences/preferences.css)
 * skin/classic/browser/preferences/in-content/preferences.css (preferences/in-content/preferences.css)
 * skin/classic/browser/preferences/in-content/dialog.css      (preferences/in-content/dialog.css)
   skin/classic/browser/preferences/applications.css         (preferences/applications.css)
   skin/classic/browser/share.svg                            (share.svg)
-  skin/classic/browser/tabbrowser/tabDragIndicator.png                   (tabbrowser/tabDragIndicator.png)
-  skin/classic/browser/tabbrowser/tabDragIndicator@2x.png                (tabbrowser/tabDragIndicator@2x.png)
   skin/classic/browser/e10s-64@2x.png                                  (../shared/e10s-64@2x.png)
 
 % override chrome://browser/skin/notification-icons/geo-detailed.svg       chrome://browser/skin/notification-icons/geo.svg
deleted file mode 100644
index 985122ef7ac4325c4427cd96a5f2c7ef8e1bef1f..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index a25fd093c303864a13c84e40474a33659dd939d3..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index fc9b9479920d89845a8a2645b5a31815261e7322..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
--- a/browser/themes/shared/browser.inc.css
+++ b/browser/themes/shared/browser.inc.css
@@ -86,16 +86,20 @@
   -moz-outline-radius: 2px;
 }
 
 #PersonalToolbar[customizing]:empty {
   /* Avoid the toolbar having no height when there's no items in it */
   min-height: 22px;
 }
 
+#PlacesToolbarDropIndicator {
+  list-style-image: url(chrome://browser/skin/toolbar-drag-indicator.svg);
+}
+
 /* rules for menupopup drop indicators */
 menupopup::part(drop-indicator-bar) {
   position: relative;
   /* these two margins must together compensate the indicator's height */
   margin-top: -1px;
   margin-bottom: -1px;
 }
 
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -107,16 +107,18 @@
   skin/classic/browser/tracking-protection-animation-brighttext.svg (../shared/identity-block/tracking-protection-animation-brighttext.svg)
   skin/classic/browser/panel-icon-cancel.svg                   (../shared/panel-icon-cancel.svg)
 #ifndef XP_MACOSX
   skin/classic/browser/panel-icon-folder.svg                   (../shared/panel-icon-folder.svg)
 #else
   skin/classic/browser/panel-icon-magnifier.svg                (../shared/panel-icon-magnifier.svg)
 #endif
   skin/classic/browser/panel-icon-retry.svg                    (../shared/panel-icon-retry.svg)
+  skin/classic/browser/toolbar-drag-indicator.svg              (../shared/toolbar-drag-indicator.svg)
+
   skin/classic/browser/preferences/in-content/bookmark.svg     (../shared/incontentprefs/bookmark.svg)
   skin/classic/browser/preferences/in-content/critters-postcard.jpg       (../shared/incontentprefs/critters-postcard.jpg)
   skin/classic/browser/preferences/in-content/extensions.svg   (../shared/incontentprefs/extensions.svg)
   skin/classic/browser/preferences/in-content/face-sad.svg      (../shared/incontentprefs/face-sad.svg)
   skin/classic/browser/preferences/in-content/face-smile.svg    (../shared/incontentprefs/face-smile.svg)
   skin/classic/browser/preferences/in-content/formfill.svg      (../shared/incontentprefs/formfill.svg)
   skin/classic/browser/preferences/in-content/fxaPairDevice.css (../shared/incontentprefs/fxaPairDevice.css)
   skin/classic/browser/preferences/in-content/general.svg       (../shared/incontentprefs/general.svg)
@@ -236,16 +238,17 @@
 
 
   skin/classic/browser/search-engine-placeholder.png           (../shared/search/search-engine-placeholder.png)
   skin/classic/browser/search-engine-placeholder@2x.png        (../shared/search/search-engine-placeholder@2x.png)
   skin/classic/browser/search-indicator-badge-add.svg          (../shared/search/search-indicator-badge-add.svg)
 
   skin/classic/browser/tabbrowser/tab-connecting.png           (../shared/tabbrowser/tab-connecting.png)
   skin/classic/browser/tabbrowser/tab-connecting@2x.png        (../shared/tabbrowser/tab-connecting@2x.png)
+  skin/classic/browser/tabbrowser/tab-drag-indicator.svg       (../shared/tabbrowser/tab-drag-indicator.svg)
   skin/classic/browser/tabbrowser/tab-loading.png              (../shared/tabbrowser/tab-loading.png)
   skin/classic/browser/tabbrowser/tab-loading@2x.png           (../shared/tabbrowser/tab-loading@2x.png)
   skin/classic/browser/tabbrowser/tab-loading-inverted.png     (../shared/tabbrowser/tab-loading-inverted.png)
   skin/classic/browser/tabbrowser/tab-loading-inverted@2x.png  (../shared/tabbrowser/tab-loading-inverted@2x.png)
   skin/classic/browser/tabbrowser/loading.svg                  (../shared/tabbrowser/loading.svg)
   skin/classic/browser/tabbrowser/loading-burst.svg            (../shared/tabbrowser/loading-burst.svg)
   skin/classic/browser/tabbrowser/crashed.svg                  (../shared/tabbrowser/crashed.svg)
   skin/classic/browser/tabbrowser/indicator-tab-attention.svg  (../shared/tabbrowser/indicator-tab-attention.svg)
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/tabbrowser/tab-drag-indicator.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="29"><path d="M6 0a5 5 0 015 5 4.85 4.85 0 01-3 4.48V26a1 1 0 01-1 1H5a1 1 0 01-1-1V9.48C2.02 8.81 1.2 6.93 1 5a5 5 0 015-5z" fill="#fff" filter="drop-shadow(0 1px 0.5px rgba(0,0,0,0.496))"/><path d="M6 1a4 4 0 014 4c-.17 2.25-1.05 3.02-3 3.84V26H5V8.84C3.12 8.28 2.19 6.89 2 5a4 4 0 014-4zm0 2a2 2 0 100 4 2 2 0 000-4z" fill="#0a84ff"/></svg>
\ No newline at end of file
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -608,16 +608,29 @@
 .tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned]):not([selected="true"]):-moz-locale-dir(rtl) {
   background-position-x: right 11px;
 }
 
 .tab-label[attention]:not([selected="true"]) {
   font-weight: bold;
 }
 
+/* Tab drag and drop */
+
+.tab-drop-indicator-box {
+  -moz-box-align: center;
+}
+
+.tab-drop-indicator {
+  list-style-image: url(chrome://browser/skin/tabbrowser/tab-drag-indicator.svg);
+  /* The z-index needs to be big enough to trump other positioned UI pieces
+     that we want to overlay. The selected tab uses 2. */
+  z-index: 3;
+}
+
 /* Drag space */
 
 .titlebar-spacer[type="pre-tabs"],
 .titlebar-spacer[type="post-tabs"] {
   width: 40px;
 }
 
 @media (max-width: 500px) {
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/toolbar-drag-indicator.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="18"><path d="M4 1a3 3 0 013 3c.009.923-.377 1.542-1 2.165V16a1 1 0 01-1 1H3a1 1 0 01-1-1V6.165C1.288 5.644 1.083 4.828 1 4a3 3 0 013-3z" fill="#fff" filter="drop-shadow(0 0.5px 0.25px rgba(0,0,0,0.5))"/><path d="M3 5h2v11H3z" fill="#0a84ff"/><path d="M4 2a2 2 0 11.001 3.999A2 2 0 014 2zm0 1.333a.667.667 0 10.001 1.335A.667.667 0 004 3.333z" fill="#0a84ff"/></svg>
\ No newline at end of file
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -598,36 +598,22 @@ menuitem.bookmark-item {
 
 /* tabbrowser-tab focus ring */
 .keyboard-focused-tab > .tab-stack > .tab-content,
 .tabbrowser-tab:focus:not([aria-activedescendant]) > .tab-stack > .tab-content {
   outline: 1px dotted;
   outline-offset: -6px;
 }
 
-/* Tab DnD indicator */
-.tab-drop-indicator {
-  list-style-image: url(chrome://browser/skin/tabbrowser/tabDragIndicator.png);
-  margin-bottom: -9px;
-  /* The z-index needs to be big enough to trump other positioned UI pieces
-     that we want to overlay. The expanded urlbar uses 3. */
-  z-index: 4;
-}
-
 /* All tabs menupopup */
 
 .alltabs-item[selected="true"] {
   font-weight: bold;
 }
 
-/* Bookmarks toolbar */
-#PlacesToolbarDropIndicator {
-  list-style-image: url(chrome://browser/skin/places/toolbarDropMarker.png);
-}
-
 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
   -moz-appearance: none;
   background: Highlight !important;
   color: HighlightText !important;
 }
 
 %include ../shared/notification-icons.inc.css
 %include ../shared/addon-notification.inc.css
--- a/browser/themes/windows/jar.mn
+++ b/browser/themes/windows/jar.mn
@@ -20,27 +20,25 @@ browser.jar:
 * skin/classic/browser/customizableui/panelUI.css       (customizableui/panelUI.css)
 * skin/classic/browser/downloads/allDownloadsView.css   (downloads/allDownloadsView.css)
 * skin/classic/browser/downloads/downloads.css                 (downloads/downloads.css)
   skin/classic/browser/notification-icons/geo-blocked.svg      (notification-icons/geo-blocked.svg)
   skin/classic/browser/notification-icons/geo-detailed.svg     (notification-icons/geo-detailed.svg)
   skin/classic/browser/notification-icons/geo.svg              (notification-icons/geo.svg)
 * skin/classic/browser/places/sidebar.css                      (places/sidebar.css)
 * skin/classic/browser/places/organizer.css                    (places/organizer.css)
-  skin/classic/browser/places/toolbarDropMarker.png            (places/toolbarDropMarker.png)
   skin/classic/browser/places/editBookmark.css                 (places/editBookmark.css)
   skin/classic/browser/preferences/alwaysAsk.png               (preferences/alwaysAsk.png)
   skin/classic/browser/preferences/application.png             (preferences/application.png)
   skin/classic/browser/preferences/saveFile.png                (preferences/saveFile.png)
   skin/classic/browser/preferences/preferences.css             (preferences/preferences.css)
 * skin/classic/browser/preferences/in-content/preferences.css  (preferences/in-content/preferences.css)
 * skin/classic/browser/preferences/in-content/dialog.css       (preferences/in-content/dialog.css)
   skin/classic/browser/preferences/applications.css            (preferences/applications.css)
   skin/classic/browser/share.svg                               (share.svg)
-  skin/classic/browser/tabbrowser/tabDragIndicator.png         (tabbrowser/tabDragIndicator.png)
   skin/classic/browser/window-controls/close.svg                 (window-controls/close.svg)
   skin/classic/browser/window-controls/close-highcontrast.svg    (window-controls/close-highcontrast.svg)
   skin/classic/browser/window-controls/close-themes.svg          (window-controls/close-themes.svg)
   skin/classic/browser/window-controls/maximize.svg              (window-controls/maximize.svg)
   skin/classic/browser/window-controls/maximize-highcontrast.svg (window-controls/maximize-highcontrast.svg)
   skin/classic/browser/window-controls/maximize-themes.svg       (window-controls/maximize-themes.svg)
   skin/classic/browser/window-controls/minimize.svg              (window-controls/minimize.svg)
   skin/classic/browser/window-controls/minimize-highcontrast.svg (window-controls/minimize-highcontrast.svg)
deleted file mode 100644
index 6c1b61d30f3e2190212d4dae4d9f5dd4fff54d42..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index c363a20c1009aaddd2e93723d29bfc661b3412f1..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001