[DevTools] Introduce Unregister/Start/Stop/Inspect buttons to ServiceWorkersView [2/2 blink]

Source/devtools/front_end/resources/serviceWorkersView.css

Index: Source/devtools/front_end/resources/serviceWorkersView.css
diff --git a/Source/devtools/front_end/resources/serviceWorkersView.css b/Source/devtools/front_end/resources/serviceWorkersView.css
index d3ea6a8b018bfd7ef4cb56d1909a9b2db7d4e52a..b722e88b405e84432ffe882fc4cd0a200f43db5d 100644
--- a/Source/devtools/front_end/resources/serviceWorkersView.css
+++ b/Source/devtools/front_end/resources/serviceWorkersView.css
@@ -30,8 +30,12 @@
     padding: 5px;
 }
 
+.service-workers-registration-header {
+    display: flex;
+}
+
 .service-workers-registration-title {
-    font-size: 15px;
+    font-size: 18px;
 }
 
 .service-workers-versions-table {
@@ -54,35 +58,115 @@
     background-color: #eee;
 }
 
-.service-workers-version-row {
-    display: flex;
-    height: 30px;
-}
-
 .service-workers-version-mode {
+    display: flex;
+    flex: 1;
     font-weight: bold;
     overflow: hidden;
+    position: relative;
     text-overflow: ellipsis;
-    width: 70px;
+}
+
+.service-workers-version-mode-text {
+    position: absolute;
+    top: 50%;
+    transform: translate(3px,-50%);
+}
+
+.service-workers-versions {
+    display: flex;
+    flex: 6;
+}
+
+.service-workers-version-row {
+    display: flex;
+    min-height: 30px;
+    width: 100%;
 }
 
 .service-workers-version-status {
     border-left: 1px solid #e1e1e1;
+    display: flex;
+    flex: 0.7;
     overflow: hidden;
+    position: relative;
     text-overflow: ellipsis;
-    width: 70px;
+}
+
+.service-workers-version-status-text {
+    position: absolute;
+    top: 50%;
+    transform: translate(3px,-50%);
 }
 
 .service-workers-version-running-status {
     border-left: 1px solid #e1e1e1;
+    display: flex;
+    flex: 1;
     overflow: hidden;
+    position: relative;
     text-overflow: ellipsis;
-    width: 70px;
+}
+
+.service-workers-version-running-status-text {
+    position: absolute;
+    top: 50%;
+    transform: translate(30px,-50%);
+}
+
+.service-workers-version-running-status-button {
+    position: absolute;
+    top: 50%;
+    transform: translate(0,-50%);
 }
 
 .service-workers-version-script-url {
     border-left: 1px solid #e1e1e1;
+    display: block;
+    flex: 3;
     overflow: hidden;
     text-overflow: ellipsis;
-    width: 200px;
+}
+
+.service-workers-version-inspect {
+    color: #00e;
+    cursor: pointer;
+    text-decoration: underline;
+}
+
+.service-workers-start-button {
+    -webkit-mask-position: -64px -48px;
+}
+
+.service-workers-stop-button {
+    -webkit-mask-position: -96px -48px;
+}
+
+.service-workers-unregister-button {
+    -webkit-mask-position: -128px -24px;
+}
+
+.service-workers-button {
+    -webkit-mask-image: url(Images/statusbarButtonGlyphs.png);
+    -webkit-mask-size: 320px 144px;
+    background-color: rgba(0, 0, 0, 0.75);
+    height: 24px;
+    opacity: 0.8;
+    width: 30px;
+    border: 0;
+    padding: 0;
+}
+
+@media (-webkit-min-device-pixel-ratio: 1.5) {
+.service-workers-button {
+    -webkit-mask-image: url(Images/statusbarButtonGlyphs_2x.png);
+}
+} /* media */
+
+.service-workers-button:hover {
+    opacity: 1;
+}
+
+.service-workers-button:active {
+    opacity: 0.8;
 }