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

chrome/browser/resources/ntp/apps.css

Index: chrome/browser/resources/ntp/apps.css
diff --git a/chrome/browser/resources/ntp/apps.css b/chrome/browser/resources/ntp/apps.css
index 2d03d584f0872f3d88044fbebe93bcae9a83d711..3184702811075dd8514c86be9eccddbb3e039725 100644
--- a/chrome/browser/resources/ntp/apps.css
+++ b/chrome/browser/resources/ntp/apps.css
@@ -2,7 +2,6 @@
 
 #apps-content {
   position: relative;
-  width: intrinsic;
   max-width: 780px;  /* (124 + margin * 2) * 6 */
 }
 
@@ -28,9 +27,8 @@ html.apps-promo-visible #apps-content {
   -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 */
 }
@@ -78,17 +76,25 @@ html.apps-promo-visible #apps-content {
   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);
@@ -112,7 +118,7 @@ html[install-animation-enabled=true] .app[new=installed] {
   -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");
 }
 
@@ -154,18 +160,18 @@ 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;
 }
 
@@ -175,12 +181,12 @@ 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%;
 }