DevTools: Fix service workers list display issues

1. Show scroll (if needed) for the top-level component.
2. Disable scrolls for the individual service worker lists.
3. Fix white background for the "Other origin" list

Bug: 785136
Change-Id: I55e8ff08c72609b34b0aba8b9e5729d86a54c663
Reviewed-on: https://chromium-review.googlesource.com/776115Reviewed-by: Andrey Kosyakov <caseq@chromium.org>
Commit-Queue: Eugene Ostroukhov <eostroukhov@chromium.org>
Cr-Commit-Position: refs/heads/master@{#519852}

third_party/WebKit/Source/devtools/front_end/resources/ServiceWorkersView.js

@@ -10,6 +10,7 @@ Resources.ServiceWorkersView = class extends UI.VBox {
     this.registerRequiredCSS('resources/serviceWorkersView.css');
 
     this._currentWorkersView = new UI.ReportView(Common.UIString('Service Workers'));
+    this._currentWorkersView.setBodyScrollable(false);
     this.contentElement.classList.add('service-worker-list');
     this._currentWorkersView.show(this.contentElement);
     this._currentWorkersView.element.classList.add('service-workers-this-origin');
@@ -43,6 +44,7 @@ Resources.ServiceWorkersView = class extends UI.VBox {
     toolbar.appendToolbarItem(this._filter);
 
     this._otherWorkersView = new UI.ReportView();
+    this._otherWorkersView.setBodyScrollable(false);
     this._otherWorkersView.show(this._otherWorkers);
     this._otherWorkersView.element.classList.add('service-workers-for-other-origins');
 

third_party/WebKit/Source/devtools/front_end/resources/serviceWorkersView.css

@@ -114,6 +114,7 @@
 
 .service-worker-list {
     background-color: #f9f9f9;
+    overflow: auto;
 }
 
 .service-workers-this-origin {
@@ -121,13 +122,6 @@
     flex-grow: 0;
 }
 
-.service-workers-other-origin {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    flex-shrink: 1;
-}
-
 .service-worker-has-current .service-workers-other-origin {
     margin-top: 16px;
     border-top: 1px solid rgb(230, 230, 230)
@@ -137,6 +131,12 @@
     display: none;
 }
 
+.service-workers-this-origin,
+.service-worker-filter,
+.service-workers-other-origin {
+    min-width: 400px;
+}
+
 .service-worker-filter{
     padding: 16px 20px 12px 12px;
     flex-grow: 0;

third_party/WebKit/Source/devtools/front_end/ui/ReportView.js

@@ -12,12 +12,12 @@ UI.ReportView = class extends UI.VBox {
     super(true);
     this.registerRequiredCSS('ui/reportView.css');
 
-    var contentBox = this.contentElement.createChild('div', 'report-content-box');
-    this._headerElement = contentBox.createChild('div', 'report-header vbox');
+    this._contentBox = this.contentElement.createChild('div', 'report-content-box');
+    this._headerElement = this._contentBox.createChild('div', 'report-header vbox');
     this._titleElement = this._headerElement.createChild('div', 'report-title');
     this._titleElement.textContent = title;
 
-    this._sectionList = contentBox.createChild('div', 'vbox');
+    this._sectionList = this._contentBox.createChild('div', 'vbox');
   }
 
   /**
@@ -92,6 +92,14 @@ UI.ReportView = class extends UI.VBox {
   setHeaderVisible(visible) {
     this._headerElement.classList.toggle('hidden', !visible);
   }
+
+
+  /**
+   * @param {boolean} scrollable
+   */
+  setBodyScrollable(scrollable) {
+    this._contentBox.classList.toggle('no-scroll', !scrollable);
+  }
 };
 
 /**

third_party/WebKit/Source/devtools/front_end/ui/reportView.css

@@ -14,6 +14,10 @@
     overflow: auto;
 }
 
+.report-content-box.no-scroll {
+    overflow: visible;
+}
+
 .report-header {
     border-bottom: 1px solid rgb(230, 230, 230);
     padding: 12px 24px;