Another batrch of performance improvements for NNTP...

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 18 matching lines @@
   -webkit-transition: none !important;
   -webkit-animation: none !important;
 }
 
 /* Most Visited */
 
 #most-visited {
   position: relative;
   padding: 0;
   margin-bottom: 34px;
+  height: 372px;
   -webkit-user-select: none;
   -webkit-transition: height .5s, opacity .5s;
 }
 
+.small #most-visited {
+  height: 294px;
+}
+
 @-webkit-keyframes 'thumbnail-enter' {
   /* 2.5s */
   0%, 20% {
     -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, .5);
     -webkit-border-radius: 4px;
   }
 
   100% {
     -webkit-border-top-left-radius: 0;
     -webkit-border-top-right-radius: 0;
@@ skipping 29 matching lines @@
 
 .thumbnail-container {
   position: absolute;
   -webkit-transition: top .5s, left .5s;
   color: black;
   text-decoration: none;
   -webkit-transition: left .5s, top .5s;
 }
 
 .thumbnail,
-.thumbnail-container .title {
+.thumbnail-container > .title {
   width: 212px; /* natural size is 196 */
   height: 132px; /* 136 */
   -webkit-transition: width .5s, height .5s;
 }
 
 .small .thumbnail,
-.small .thumbnail-container .title {
+.small .thumbnail-container > .title {
   width: 150px;
   height: 93px;
 }
 
 .thumbnail-wrapper {
   display: block;
   -webkit-background-size: 212px 132px;
   background: no-repeat 4px 4px;
   background-color: white;
   -webkit-border-radius: 5px;
@@ skipping 13 matching lines @@
 }
 
 .filler .thumbnail-wrapper {
   visibility: inherit;
   border: 1px solid hsl(0, 0%, 90%);
   background-color: hsl(0, 0%, 95%);
   -webkit-border-radius: 2px;
   display: block;
 }
 
-.filler .thumbnail-wrapper .thumbnail {
+.filler .thumbnail {
   visibility: visible;
   border-color: hsl(0, 0%, 90%);
   background-color: hsl(0, 0%, 95%);
 }
 
 .edit-bar {
   opacity: 0;
   pointer-events: none;
   display: -webkit-box;
   -webkit-box-orient: horizontal;
@@ skipping 66 matching lines @@
 .edit-bar > .remove:hover {
   background-image: url(chrome://theme/newtab_close_h);
 }
 
 .edit-bar > .remove:active {
   background-image: url(chrome://theme/newtab_close_p);
 }
 
 :link,
 :visited,
-.link,
-.thumbnail-container a {
+.link {
   cursor: pointer;
   text-decoration: underline;
   color: hsl(213, 90%, 24%);
 }
 
-.thumbnail-container .title,
-.small .thumbnail-container .title {
+.thumbnail-container > .title,
+.small .thumbnail-container > .title {
   line-height: 16px;
   height: 16px;
   margin: 0;
   margin-top: 4px;
   font-size: 100%;
   font-weight:normal;
   padding: 0 3px;
   opacity: 1;
   -webkit-transition: opacity .5s;
   color: black;
 }
 
-.thumbnail-container .title div {
+.thumbnail-container > .title > div {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 
   background: no-repeat 0 50%;
   -webkit-background-size: 16px;
   padding-left: 20px; /* we cannot use padding start here because even if we set
                          the direction we always want the icon on the same side
                       */
   padding-right: 0;
 }
 
-html[dir=rtl] .thumbnail-container .title div {
+html[dir=rtl] .thumbnail-container > .title > div {
   background-position-x: 100%;
   padding-left: 0;
   padding-right: 20px;
   text-align: right;
 }
 
 .thumbnail {
   border: 3px solid hsla(213, 63%, 93%, 1);
   padding: 1px;
   -webkit-border-radius: 5px;
@@ skipping 15 matching lines @@
   -webkit-border-top-left-radius: 0;
   -webkit-border-top-right-radius: 0;
 
   background-image: -webkit-gradient(linear, left top, left bottom,
     from(hsla(0, 0%, 0%, 0)),
     color-stop(0.85, hsla(0, 0%, 47%, 0)),
     to(hsla(0, 0%, 47%, 0.2))
     );
 }
 
-.thumbnail-container:hover .edit-mode-border {
+.thumbnail-container:hover > .edit-mode-border {
   -webkit-animation: 'edit-mode-border-enter' 2.5s;
   background-color: hsla(213, 66%, 57%, 1);
   -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, .5);
 }
 
 .dragging {
   -webkit-transition: none;
 }
 
-.dragging .title {
-  opacity: 0;
+.dragging > .title {
+  opacity: 0 !important;
 }
 
-.list .dragging .title {
+.list > .dragging > .title {
   opacity: 1;
 }
 
 .hide {
   opacity: 0 !important;
   visibility: hidden !important;
 }
 
 @-webkit-keyframes 'fade-in' {
   0% {
@@ skipping 52 matching lines @@
 .list .thumbnail,
 .list .edit-bar {
   display: none;
 }
 
 .list .title,
 .small .list .title {
   width: auto;
 }
 
-.list .thumbnail-container {
+.list > .thumbnail-container {
   -webkit-box-sizing: border-box;
 }
 
 .list .title,
 .small .list .title {
   font-size: 140%;
   line-height: 40px;
   height: 40px;
   color: hsl(213, 27%, 68%);
   text-decoration: underline;
 }
 
-.list .title div {
+.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;
@@ skipping 121 matching lines @@
   -webkit-user-select: none;
   text-align: right;
   position: relative;
   top: 35px;
 }
 
 html[dir='rtl'] #view-toolbar {
   text-align: left;
 }
 
-#view-toolbar input {
+#view-toolbar > input {
   -webkit-appearance: none;
   background-color: transparent;
   width: 19px;
   height: 17px;
   margin: 0;
   border: 0;
   padding: 0;
   vertical-align: top;
   -webkit-margin-start: 5px;
 }
 
 #lower-sections {
   position: relative;
   overflow: hidden;
   -webkit-transition: height .5s, width .5s, opacity .5s;
   white-space: nowrap;
 }
 
-#lower-sections .section {
+#lower-sections > .section {
   -webkit-transition: width .5s, opacity .5s, left .5s;
   -webkit-box-sizing: border-box;
   width: 460px; /* Set default size so we don't have to do a js layout at
                    load */
 }
 
-.small #lower-sections .section {
+.small #lower-sections > .section {
   width: 336px; /* Same here, see above */
 }
 
 #lower-sections .spacer {
   width: 20px;
   -webkit-transition: width .5s;
   display: inline-block;
 }
 
 #thumb-checkbox {
@@ skipping 77 matching lines @@
 #option-menu > div {
   padding: 3px 8px;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 #option-menu > [selected] {
   background-color: hsla(213, 66%, 57%, 1);
   color: white;
 }