Polish the new tab notification code a bit, as per request in last review (style changes).

BUG=88067
TEST=None, notifications should work as before.
Review URL: http://codereview.chromium.org/7623010

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@96542 0039d316-1c4b-4281-b951-d872f2087c98

chrome/browser/resources/new_tab.html

@@ -171,18 +171,16 @@ if ('mode' in hashParams) {
     </div>
     <div id="apps-content"></div>
     <div id="app-notification-bubble" class="notification-bubble">
-      <img id="app-notification-close" src="chrome://theme/IDR_CLOSE_BAR"
-          class="app-notification-close">
+      <img id="app-notification-close" src="chrome://theme/IDR_CLOSE_BAR">
       <strong id="app-notification-title"></strong><br>
       <span id="app-notification-message"></span><br><br>
       <a id="app-notification-link"></a>
     </div>
-    <div id="arrow-contents"
-        class="arrow arrow-contents notification-bubble-closed"></div>
-    <div id="arrow-border"
-        class="arrow arrow-border notification-bubble-closed"></div>
-    <div id="arrow-shadow"
-        class="arrow arrow-shadow notification-bubble-closed"></div>
+    <div id="arrow-container" class="notification-bubble-closed">
+        <div id="arrow-contents" class="arrow"></div>
+        <div id="arrow-border" class="arrow"></div>
+        <div id="arrow-shadow" class="arrow"></div>
+    </div>
   </div>
   <div class="maxiview" id="most-visited-maxiview"></div>
 

chrome/browser/resources/ntp/apps.css

@@ -107,7 +107,7 @@ enough extra space in the small grid layout.
   color: Blue;
 }
 
-.app-notification-close {
+#app-notification-close {
   height: 14px;
   position: absolute;
   right: 6px;
@@ -223,7 +223,6 @@ html[dir=rtl] .app.web-store-entry.loner {
   font-family: Helvetica, Arial, sans-serif;
   font-size : 107%;
   min-height: 100px;
-  min-width: 200px;  
   opacity: 0;
   padding: 10px;
   position: absolute;
@@ -245,26 +244,35 @@ html[dir=rtl] .app.web-store-entry.loner {
   pointer-events: none;
 }
 
-/* A content-less div with this setting, will create an arrow when coupled
-   with the arrow_* styles below it. */
+div#arrow-container {
+  position: absolute;
+  -webkit-transition: opacity 0.2s linear;
+}
+/* The following arrow class (div.arrow) creates a triangle when used in
+   conjunction with the next three div styles below it (arrow-contents,
+   shadow and border). The border-color property determines which direction
+   the arrow is facing. */
 div.arrow {
   border-style: solid;
   border-width: 12px;
-  height: 0px;
-  width: 0px;
-  position: absolute;
+  height: 0;
+  width: 0;
 }
-div.arrow-contents {
+div#arrow-contents {
   border-color: transparent white transparent transparent;
+  padding-left: 3px;
+  position: absolute;
   z-index: 2;
-  -webkit-transition: opacity 0.2s linear;
 }
-div.arrow-shadow {
-  border-color: transparent gray transparent transparent;
-  -webkit-transition: opacity 0.2s linear;
+div#arrow-shadow {
+  border-color: transparent #B5B5B5 transparent transparent;
+  opacity: 0.5;
+  padding-left: 1px;
+  position: absolute;
 }
-div.arrow-border {
+div#arrow-border {
   border-color: transparent #B5B5B5 transparent transparent;
+  padding-left: 2px;
+  position: absolute;  
   z-index: 1;
-  -webkit-transition: opacity 0.2s linear;
 }

chrome/browser/resources/ntp/apps.js

@@ -192,29 +192,17 @@ function showNotificationBubble(event) {
   bubble.style.top = y + "px";
 
   // Move the arrow and shadow to the right location.
-  var arrow = $('arrow-contents');
-  var border = $('arrow-border');
-  var shadow = $('arrow-shadow');
+  var arrow_container = $('arrow-container');
   y += 26;
-  x -= arrow.style.width + 23;
-  arrow.style.left = x + "px";
-  arrow.style.top = y + "px";
-  x -= 1;
-  border.style.left = x + "px";
-  border.style.top = y + "px";
-  x -= 1;
-  shadow.style.left = x + "px";
-  shadow.style.top = y + "px";
+  x -= arrow_container.style.width + 25;
+  arrow_container.style.left = x + "px";
+  arrow_container.style.top = y + "px";
 
   // Animate the bubble into view.
   bubble.classList.add("notification-bubble-opened");
   bubble.classList.remove("notification-bubble-closed");
-  arrow.classList.add("notification-bubble-opened");
-  arrow.classList.remove("notification-bubble-closed");
-  border.classList.add("notification-bubble-opened");
-  border.classList.remove("notification-bubble-closed");
-  shadow.classList.add("notification-bubble-opened");
-  shadow.classList.remove("notification-bubble-closed");
+  arrow_container.classList.add("notification-bubble-opened");
+  arrow_container.classList.remove("notification-bubble-closed");
 
   bubble.focus();
 }
@@ -224,12 +212,8 @@ function hideNotificationBubble(event) {
   // This will fade the bubble out of existence.
   $('app-notification-bubble').classList.add("notification-bubble-closed");
   $('app-notification-bubble').classList.remove("notification-bubble-opened");
-  $('arrow-border').classList.add("notification-bubble-closed");
-  $('arrow-border').classList.remove("notification-bubble-opened");
-  $('arrow-shadow').classList.add("notification-bubble-closed");
-  $('arrow-shadow').classList.remove("notification-bubble-opened");
-  $('arrow-contents').classList.add("notification-bubble-closed");
-  $('arrow-contents').classList.remove("notification-bubble-opened");
+  $('arrow-container').classList.add("notification-bubble-closed");
+  $('arrow-container').classList.remove("notification-bubble-opened");
 }
 
 var apps = (function() {