NNTP: Merge the recent activities into one list and show more items...

chrome/browser/resources/new_new_tab.css

 html {
   /* This is needed because of chrome://theme/css/new_tab.css */
   height: 100%;
 }
 
 body {
   margin: 0;
 }
 
 #main {
@@ skipping 338 matching lines @@
 .list .title > div {
   color: rgb(6, 45, 117);
 }
 
 .section {
   background: white;
   -webkit-border-radius: 4px;
   white-space: nowrap;
   text-overflow: ellipsis;
   border: 1px solid hsl(213, 65%, 92%);
-  padding-bottom: 5px;
   overflow: hidden;
-  min-height: 198px; /* height of 6 items plus the header */
+  min-height: 151px; /* height of 5 items plus the header */
   vertical-align: top;
   margin: 0;
+  margin-bottom: 10px;
 }
 
 .section > h2 {
   background-image: -webkit-gradient(linear, left top, left bottom,
       from(hsl(213, 87%, 67%)),
       to(hsl(213, 66%, 57%)));
   -webkit-border-top-left-radius: 2px;
   -webkit-border-top-right-radius: 2px;
   padding: 4px 8px;
   color: white;
@@ skipping 29 matching lines @@
   text-decoration: none;
   padding-top: 6px;
   white-space: normal;
 }
 
 .tips-container {
   padding-top: 4px;
 }
 
 .window {
-  position: relative;
   overflow: visible; /* We use visible so that the menu can be a child and shown
                         on :hover. To get this to work we have to set visibility
                         to visible which unfortunately breaks the ellipsis for t
                         he window items */
   background-image: url(chrome://theme/newtab_closed_window);
 }
 
 .window-menu {
   position: absolute;
   display: none;
   border: 1px solid #999;
-  -webkit-box-shadow: 5px 5px 10px hsla(0, 0%, 0%, .3);
+  -webkit-box-shadow: 2px 2px 3px hsla(0, 0%, 0%, .3);
   background-color: hsla(213, 0%, 100%, .95);
   width: 157px;
   left: 0;
   white-space: nowrap;
   z-index: 2;
   padding: 1px;
   cursor: default;
 }
 
+/* Made to look like a tooltip using vista/win7 look and feel.
+   TODO(arv): Replace with -webkit-appearance once issue 17371 is fixed
+ */
+#window-menu {
+  pointer-events: none;
+  border: 1px solid rgb(118,118,118);
+  -webkit-border-radius: 3px;
+  padding: 0px 3px;
+  background: -webkit-gradient(linear, left top, left bottom,
+                               from(white),
+                               to(rgb(228,229,240)));
+  width: auto;
+  max-width: 300px;
+}
+
 .hbox {
   display: -webkit-box;
   -webkit-box-orient: horizontal;
 }
 
-#recent-tabs,
-#downloads {
-  -webkit-box-flex: 1;
-  width: 50%;
-}
-
 .section h3 {
   padding: 8px 5px;
   padding-bottom: 0;
   font-size: 80%;
   font-weight: normal;
   margin: 0;
   -webkit-margin-start: 2px;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .item-container {
   margin: 0 5px;
   text-decoration: underline;
   color: hsl(213, 27%, 68%);
 }
 
 .item.nav:after {
   content: '\00bb'; /* raque gets flipped automatically in rtl */
-  font-size: 120%;
+  font-size: 115%;
   -webkit-padding-start: 2px;
 }
 
 #recent-activities {
   -webkit-transition: width .15s, opacity .15s;
 }
 
+#recent-activities > .item-container {
+  -webkit-column-count: 2;
+  -webkit-column-gap: 20px;
+  height: 120px;
+}
+
+#recent-activities.large > .item-container {
+  -webkit-column-count: 4;
+}
+
 .section {
   -webkit-box-flex: 1;
   width: 50%;
   display: inline-block;
 }
 
 #view-toolbar {
   -webkit-user-select: none;
   text-align: right;
   position: relative;
@@ skipping 200 matching lines @@
   }
 
   #t3, #t7 {
     left: 534px;
   }
 
   #t4, #t5, #t6, #t7 {
     top: 147px;
   }
 }