[NTP] Allow reordering of apps via drag and drop.

chrome/browser/resources/ntp/apps.css

 /* Apps */
 
 #apps-content {
   position: relative;
-  width: intrinsic;
   max-width: 780px;  /* (124 + margin * 2) * 6 */
 }
 
 html.apps-promo-visible #apps-content {
   max-width: 650px; /* (124 + margin * 2) * 5 */
 }
 
 /* small */
 @media (max-width: 940px) {
   /*
   We don't need to do anything for html.apps-promo-visible because there is
   enough extra space in the small grid layout.
   */
   #apps-content,
   html.apps-promo-visible #apps-content {
     max-width: 520px;  /* (124 + margin * 2) * 4 */
   }
 }
 
 .app,
 .app[new=installed] {
   box-sizing: border-box;
   -webkit-perspective: 400;
   border-radius: 10px;
   color: black;
-  display: inline-block;
   margin: 5px 3px;
-  position: relative;
+  position: absolute;
   height: 136px;
   width: 124px; /* 920 / 7 - margin * 2 */
 }
 
 .app a {
   border-radius: 10px;
   bottom: 0;
   left: 0;
   position: absolute;
   right: 0;
@@ skipping 38 matching lines @@
   -webkit-transition: none;
   background-image: url(chrome://theme/IDR_BALLOON_WRENCH_H);
 }
 
 .app:hover > .app-settings,
 .app > .app-settings:focus {
   -webkit-transition-delay: .5s;
   opacity: .9;
 }
 
+.app.dragging > .app-settings {
+  background-image: none;
+}
+
+.app.dragging {
+  opacity: .7;
+  z-index: 2;
+}
+
+#apps-content[launcher-animations=true] .app {
+  -webkit-transition: top .2s, left .2s, right .2s;
+}
+
 @-webkit-keyframes bounce {
   0% {
     -webkit-transform: scale(0, 0);
   }
 
   60% {
     -webkit-transform: scale(1.2, 1.2);
   }
 
   100% {
     -webkit-transform: scale(1, 1);
   }
 }
 
 html[install-animation-enabled=true] .app[new=new] {
   opacity: 0;
 }
 
 html[install-animation-enabled=true] .app[new=installed] {
   -webkit-animation: bounce .5s ease-in-out;
   -webkit-transition: opacity .5s;
 }
 
-.app[app-id=web-store-entry] > a {
+.app.web-store-entry > a {
   background-image: url("chrome://theme/IDR_WEBSTORE_ICON");
 }
 
 menu > button.default {
   font-weight: bold;
 }
 
 #apps-promo {
   display: none;
 }
@@ skipping 21 matching lines @@
   cursor: pointer;
   font-family: inherit;
   font-size: 90%;
   text-decoration: underline;
 }
 
 html[dir=rtl] #apps-promo-hide {
   float: left;
 }
 
-html.apps-promo-visible .app[app-id=web-store-entry] {
+html.apps-promo-visible .app.web-store-entry {
   position: absolute;
   left: 100%;
   top: 0;
   -webkit-margin-start: 22px;
 }
 
-html.apps-promo-visible[dir=rtl] .app[app-id=web-store-entry] {
+html.apps-promo-visible[dir=rtl] .app.web-store-entry {
   right: 100%;
 }
 
-html.apps-promo-visible .app[app-id=web-store-entry] a {
+html.apps-promo-visible .app.web-store-entry a {
   font-weight: bold;
 }
 
 /*
 We position the web store entry all by its lonesome in the top of the rightmost
 column when there is at least one full row of apps. Note that this is similar,
 but different than its position during promo (html.apps-promo-visible), so we
 never set .loner while the promo is running.
 */
-.app[app-id=web-store-entry].loner {
+.app.web-store-entry.loner {
   position: absolute;
   left: 100%;
   top: 0;
 }
 
-html[dir=rtl] .app[app-id=web-store-entry].loner {
+html[dir=rtl] .app.web-store-entry.loner {
   right: 100%;
 }