Bug 1153292 - part2: aboutdebugging: fix service worker layout if buttons are not displayed;r=janx draft
authorJulian Descottes <jdescottes@mozilla.com>
Thu, 11 Aug 2016 19:44:12 +0200
changeset 420133 bd35e5e913583d4235435c106aeee79a8a478534
parent 420132 caca55e0004d2479cd2fb5358cf45fa9455493b1
child 420134 f7e023708f8954b978b189025fd0b06c587d6a8e
push id31104
push userjdescottes@mozilla.com
push dateMon, 03 Oct 2016 13:33:13 +0000
reviewersjanx
bugs1153292
milestone52.0a1
Bug 1153292 - part2: aboutdebugging: fix service worker layout if buttons are not displayed;r=janx MozReview-Commit-ID: cGzVVcNyNv
devtools/client/aboutdebugging/aboutdebugging.css
--- a/devtools/client/aboutdebugging/aboutdebugging.css
+++ b/devtools/client/aboutdebugging/aboutdebugging.css
@@ -10,16 +10,17 @@ html, body {
 h2, h3, h4 {
   margin-bottom: 10px;
 }
 
 button {
   padding-left: 20px;
   padding-right: 20px;
   min-width: 100px;
+  margin: 0 4px;
 }
 
 /* Category panels */
 
 .category {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -55,36 +56,35 @@ button {
   padding: 0;
 }
 
 .target-container {
   margin-top: 5px;
   min-height: 34px;
   display: flex;
   flex-direction: row;
-  align-items: baseline;
+  align-items: self-start;
 }
 
 .target-icon {
   height: 24px;
-  margin: 6px 5px 0 0;
-  /* Override the icon alignment and center it using margin-top. */
-  align-self: flex-start;
+  margin: 0 5px 0 0;
 }
 
 .target-icon:not([src]) {
   display: none;
 }
 
 .inverted-icons .target-icon {
   filter: invert(30%);
 }
 
 .target {
   flex: 1;
+  margin-top: 2px;
   /* This is silly: https://bugzilla.mozilla.org/show_bug.cgi?id=1086218#c4. */
   min-width: 0;
 }
 
 .target-details {
   margin: 0;
   padding: 0;
   list-style-type: none
@@ -117,17 +117,17 @@ button {
   margin-left: 8px;
 }
 
 .target-status {
   box-sizing: border-box;
   display: inline-block;
 
   min-width: 50px;
-  margin-right: 5px;
+  margin: 4px 5px 0 0;
   padding: 2px;
 
   border-width: 1px;
   border-style: solid;
 
   font-size: 0.6em;
   text-align: center;
 }
@@ -138,17 +138,19 @@ button {
 }
 
 .target-status-running {
   border-color: limegreen;
   background-color: palegreen;
 }
 
 .target-name {
-  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .addons-controls {
   display: flex;
   flex-direction: row;
 }
 
 .addons-install-error {