[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 27 matching lines @@
   width: 14px;
 }
 
 .app > .app-settings {
   -webkit-transition: opacity .3s;
   -webkit-transition-delay: 0;
   background-image: url(chrome://theme/IDR_BALLOON_WRENCH);
   opacity: 0;
 }
 
-.app > .app-settings:hover {
+.app:not(.dragging) > .app-settings:hover {

[Aaron Boodman, 2011/01/22 23:42:57]

If possible, it would be better to have the .dragging class override the .app
class. This way when people add additional rules including .app, they won't have
to remember to do :not(.dragging).

So for example, if you don't want .app.dragging to have a background image, then
have it declare background-image:none.

We already have a similar problem with .section:not(.collapsed), but we
shouldn't replicate it.

[jstritar, 2011/01/24 01:00:42]

Done. Definitely makes it simpler.

   -webkit-transition: none;
   background-image: url(chrome://theme/IDR_BALLOON_WRENCH_H);
 }
 
-.app:hover > .app-settings,
+.app:hover:not(.dragging) > .app-settings,
 .app > .app-settings:focus {
   -webkit-transition-delay: .5s;
   opacity: .9;
 }
 
+.app.dragging {
+  opacity: .7;
+}
+
+#apps-content[launcher-animations=true] .app {
+  -webkit-transition: top .20s, left .20s, right .20s;

[Aaron Boodman, 2011/01/22 23:42:57]

It seems that the convention in the rest of the css is .2s (as opposed to .20s).

[jstritar, 2011/01/24 01:00:42]

Done.

+}
+
 @-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 {

[Aaron Boodman, 2011/01/22 23:42:57]

Why this change?

[jstritar, 2011/01/24 01:00:42]

For the other apps, the app-id attribute is on the <a> inside the app's <div>.
Having this one on the <div> made using querySelector in a uniform way
difficult, and it seemed to only be used as a class / selector anyways. (The <a>
inside the div still has app-id=web-store-entry).

   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%;
 }