[NTP] Fix various tile reorder issues and edit menu icon styling

- Do not start reordering if a modifier key is also held down (e.g.
  ctrl, shift, etc.)
- Fix reorder CSS if a theme or custom background is applied.
  - With theme: https://screenshot.googleplex.com/eVSKahPM34w.png
  - With custom bg: https://screenshot.googleplex.com/mQ0hPUJ9XLs.png
  - With theme and custom bg: https://screenshot.googleplex.com/XkSBSEtpxV1.png
- For themes/custom backgrounds, keep the edit menu icon white when
  focused using keyboard navigation. This makes it slightly easier to
  see on multicolored backgrounds.
  - Before: https://screenshot.googleplex.com/Agf1nZaxwwP.png
  - After: https://screenshot.googleplex.com/fPZmseG3LyN.png

Bug: 851335
Change-Id: Ic7fb6d5522dbc5b5395fadf5766ac643613a8bfd
Reviewed-on: https://chromium-review.googlesource.com/c/1335027Reviewed-by: Ramya Nagarajan <ramyan@chromium.org>
Commit-Queue: Kristi Park <kristipark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#608068}

chrome/browser/resources/local_ntp/most_visited_single.css

@@ -394,6 +394,7 @@ html[dir=rtl] .mv-favicon {
 
 .md-tile-container.reorder .md-tile {
   background-color: white;
+  border-radius: 4px;
   box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3),
       0 4px 8px 3px rgba(60, 64, 67, 0.15);
   transition-duration: 200ms;
@@ -408,7 +409,7 @@ html[dir=rtl] .mv-favicon {
   padding: var(--md-tile-padding-vertical) var(--md-tile-padding-horizontal);
 }
 
-body.using-theme .md-tile {
+body.using-theme .md-tile-container .md-tile {
   /* The theme title pill adds 2*4px of vertical padding. */
   padding-bottom: calc(var(--md-tile-padding-vertical) - 2*4px);
 }
@@ -519,7 +520,7 @@ body.mac-chromeos .md-title {
 }
 
 /* Apply when a custom background is set */
-body.dark-theme .md-title {
+body.dark-theme .md-tile-container:not(.reorder) .md-title {
   color: rgb(248, 249, 250);
   text-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
 }
@@ -531,7 +532,7 @@ body.using-theme .md-title-container {
   padding: 4px;
 }
 
-body.using-theme .md-title {
+body.using-theme .md-tile-container:not(.reorder) .md-title {
   color: rgba(33, 32, 36, 0.86);
   text-shadow: unset;
 }
@@ -549,6 +550,11 @@ body.using-theme .md-title {
   width: var(--md-menu-size);
 }
 
+html[dir=rtl] .md-menu {
+  left: 0;
+  right: auto;
+}
+
 body:not(.reordering) .md-menu:active,
 body:not(.reordering) .md-menu:focus:not(.mouse-navigation) {
   opacity: 1;
@@ -584,21 +590,18 @@ body:not(.reordering) .md-menu:focus:not(.mouse-navigation) {
   width: var(--md-edit-menu-size);
 }
 
-body.dark-theme .md-menu::after {
-  background-color: white;
-}
-
-html[dir=rtl] .md-menu {
-  left: 0;
-  right: auto;
-}
-
 body:not(.reordering) .md-menu:hover::after,
 body:not(.reordering) .md-menu:focus::after {
   background-color: rgba(33, 32, 36, 0.71);
 }
 
+body.dark-theme .md-tile-container:not(.reorder) .md-menu::after,
+body.dark-theme:not(.reordering) .md-menu:focus:not(.mouse-navigation)::after {
+  background-color: white;
+}
+
+body.dark-theme:not(.reordering) .md-menu:active::after,
 body.dark-theme:not(.reordering) .md-menu:hover::after,
-body.dark-theme:not(.reordering) .md-menu:focus::after {
+body.dark-theme:not(.reordering) .md-menu.mouse-navigation:focus::after {
   background-color: rgb(218, 220, 224);
 }

chrome/browser/resources/local_ntp/most_visited_single.js

@@ -643,22 +643,29 @@ function setupReorder(tile) {
   // Starts the reorder flow after the user has held the mouse button down for
   // |REORDER_TIMEOUT_DELAY|.
   tile.addEventListener('mousedown', (event) => {
-    // Do not reorder if the edit menu was clicked.
-    if (event.button == 0 /* LEFT CLICK */ &&
+    // Do not reorder if the edit menu was clicked or if ctrl/shift/alt/meta is
+    // also held down.
+    if (event.button == 0 /* LEFT CLICK */ && !event.ctrlKey &&
+        !event.shiftKey && !event.altKey && !event.metaKey &&
         !event.target.classList.contains(CLASSES.MD_MENU)) {
       let timeout = -1;
 
       // Cancel the timeout if the user drags the mouse off the tile and
-      // releases.
+      // releases or if the mouse if released.
       let dragend = document.addEventListener('dragend', () => {
         window.clearTimeout(timeout);
       }, {once: true});
+      let mouseup = document.addEventListener('mouseup', () => {
+        if (event.button == 0 /* LEFT CLICK */)
+          window.clearTimeout(timeout);
+      }, {once: true});
 
       // Wait for |REORDER_TIMEOUT_DELAY| before starting the reorder flow.
       timeout = window.setTimeout(() => {
         if (!reordering)
           startReorder(tile);
         document.removeEventListener('dragend', dragend);
+        document.removeEventListener('mouseup', mouseup);
       }, REORDER_TIMEOUT_DELAY);
     }
   });