messageTray: Implement new notification designs

Rather than use an StTable, a custom ShellGenericContainer, and plenty
of hacky style classes, replace them all with standard BoxLayouts and
Bins.

Remove the customContent parameter in favor of subclasses setting the
child of this._bodyBin instead.

With this comes a whole new notification implementation to implement
the new notification designs.

We lose a few of the fancy features like showing the first part of
the body, ellipsized, next the banner when it will fit, and some other
layout logic. But since the design of notifications is changing
substantially anyways, I don't feel too bad...

data/theme/gnome-shell.css

@@ -414,8 +414,6 @@ StScrollBar StButton#vhandle:active {
 /* Buttons */
 
 .candidate-page-button,
-.notification-button,
-.notification-icon-button,
 .hotplug-notification-item,
 .modal-dialog-button,
 .app-view-control {
@@ -430,16 +428,12 @@ StScrollBar StButton#vhandle:active {
 }
 
 .candidate-page-button:hover,
-.notification-button:hover,
-.notification-icon-button:hover,
 .hotplug-notification-item:hover,
 .modal-dialog-button:hover {
     background-gradient-start: rgba(255, 255, 255, 0.3);
     background-gradient-end: rgba(255, 255, 255, 0.1);
 }
 
-.notification-button:focus,
-.notification-icon-button:focus,
 .hotplug-notification-item:focus,
 .modal-dialog-button:focus,
 .app-view-control:focus {
@@ -453,8 +447,6 @@ StScrollBar StButton#vhandle:active {
 
 .candidate-page-button:active,
 .candidate-page-button:pressed,
-.notification-button:active,
-.notification-icon-button:active,
 .hotplug-notification-item:active,
 .modal-dialog-button:active,
 .modal-dialog-button:pressed,
@@ -464,8 +456,6 @@ StScrollBar StButton#vhandle:active {
 }
 
 .candidate-page-button:insensitive,
-.notification-button:insensitive,
-.notification-icon-button:insensitive,
 .modal-dialog-button:insensitive {
     border-color: #666666;
     color: #9f9f9f;
@@ -477,7 +467,6 @@ StScrollBar StButton#vhandle:active {
 
 #searchEntry,
 .modal-dialog-button,
-.notification-button,
 .hotplug-notification-item,
 .app-view-controls,
 #screenShieldNotifications {
@@ -1532,28 +1521,63 @@ StScrollBar StButton#vhandle:active {
     color: #999999;
 }
 
-.notification {
-    border-radius: 10px 10px 0px 0px;
-    background: rgba(0,0,0,0.9);
-    padding: 8px 8px 4px 8px;
-    spacing-rows: 4px;
-    spacing-columns: 10px;
-}
-
 .notification, #notification-container {
     font-size: 11pt;
     width: 34em;
 }
 
-.notification.multi-line-notification {
-    padding-bottom: 8px;
+.notification-main-button,
+.notification-button {
+    background: rgba(0,0,0,0.9);
 }
 
-.notification-unexpanded {
-    /* We want to force the actor at a specific size, irrespective
-       of its minimum and preferred size, so we override both */
-    min-height: 36px;
-    height: 36px;
+.notification-main-button {
+    border-radius: 10px 10px 0px 0px;
+}
+
+.notification-main-content {
+    padding: 8px;
+    spacing: 8px;
+}
+
+.notification-action-area {
+    padding: 8px;
+}
+
+.notification-action-area,
+.notification-button {
+    border-top: 1px solid #666;
+}
+
+.notification-button {
+    padding: 8px 0px;
+    border-right: 1px solid #666;
+}
+
+.notification-main-button:hover,
+.notification-button:hover {
+    background: rgba(100,100,100,0.9);
+}
+
+.notification-main-button:active,
+.notification-button:active {
+    background: rgba(255,255,255,0.1);
+}
+
+.notification-button:last-child {
+    border-right-width: 0px;
+}
+
+.notification-title-box {
+    spacing: 8px;
+}
+
+.notification-scrollview:ltr > StScrollBar {
+    padding-left: 6px;
+}
+
+.notification-scrollview:rtl > StScrollBar {
+    padding-right: 6px;
 }
 
 .summary-boxpointer {
@@ -1595,47 +1619,6 @@ StScrollBar StButton#vhandle:active {
     -st-vfade-offset: 24px;
 }
 
-.notification-scrollview:ltr > StScrollBar {
-    padding-left: 6px;
-}
-
-.notification-scrollview:rtl > StScrollBar {
-    padding-right: 6px;
-}
-
-.notification-body {
-    spacing: 5px;
-}
-
-.notification-actions {
-    padding-top: 18px;
-    spacing: 10px;
-}
-
-.notification-button {
-    -st-natural-width: 140px;
-    padding: 4px 4px 5px;
-}
-
-.notification-button:focus {
-    -st-natural-width: 138px;
-    padding: 3px 4px 4px;
-}
-
-.notification-icon-button {
-    border-radius: 5px;
-    padding: 5px;
-}
-
-.notification-icon-button:focus {
-    padding: 4px;
-}
-
-.notification-icon-button > StIcon {
-    icon-size: 16px;
-    padding: 8px;
-}
-
 .secondary-icon {
     icon-size: 1.09em;
 }
@@ -1697,7 +1680,11 @@ StScrollBar StButton#vhandle:active {
     padding-right: 4px;
 }
 
-.chat-notification-scrollview{
+.chat-notification-body-box {
+    spacing: 5px;
+}
+
+.chat-notification-scrollview {
     max-height: 22em;
 }
 
@@ -2616,8 +2603,7 @@ StScrollBar StButton#vhandle:active {
     padding-bottom: 0px;
 }
 
-#screenShieldNotifications .notification-button,
-#screenShieldNotifications .notification-icon-button {
+#screenShieldNotifications .notification-button {
     border: 1px rgba(255,255,255,0.5);
 }