Bug 1185808 - Improve devtool notification box layout when overflowing. r=pbro

- Make notificationbox buttons and closing affordance visible when overflowing,
- Apply ellipsis to message when overflowing (using the width=0 to not break flex layout),
- Add title to show potentially truncated message on hover,
- Simplify layout (remove the unnecessary nested flexbox layout).

TESTED=Locally using some mocked notification buttons. Run styleeditor and shared/component tests.

--HG--
extra : rebase_source : d458f2d6932da372f60f5372d89032886e29d86f

devtools/client/shared/components/NotificationBox.css

@@ -8,24 +8,23 @@
 .notificationbox .notificationInner {
   display: flex;
   flex-direction: row;
-}
-
-.notificationbox .details {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: row;
   align-items: center;
 }
 
-.notificationbox .notification-button {
-  text-align: right;
+.notificationInner .messageText {
+  flex: 1;
+  width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.notificationbox .messageText {
-  flex-grow: 1;
+.notificationInner .messageImage,
+.notificationbox .notificationButton,
+.notificationbox .messageCloseButton {
+  flex: none;
 }
 
-.notificationbox .details:dir(rtl)
 .notificationbox .notificationInner:dir(rtl) {
   flex-direction: row-reverse;
 }
@@ -50,7 +49,6 @@
 }
 
 .notificationbox .messageImage {
-  display: inline-block;
   background-size: 16px;
   width: 16px;
   height: 16px;

devtools/client/shared/components/NotificationBox.js

@@ -202,7 +202,7 @@ class NotificationBox extends Component {
     return (
       button({
         key: props.label,
-        className: "notification-button",
+        className: "notificationButton",
         accesskey: props.accesskey,
         onClick: onClick},
         props.label
@@ -220,17 +220,20 @@ class NotificationBox extends Component {
         className: "notification",
         "data-key": notification.value,
         "data-type": notification.type},
-        div({className: "notificationInner"},
-          div({className: "details"},
+        div(
+          {className: "notificationInner"},
           div({
             className: "messageImage",
-              "data-type": notification.type}),
-            span({className: "messageText"},
+            "data-type": notification.type,
+          }),
+          span({
+            className: "messageText",
+            title: notification.label,
+          },
             notification.label
           ),
           notification.buttons.map(props =>
             this.renderButton(props, notification)
-            )
           ),
           div({
             className: "messageCloseButton",