DevTools: Disable Audits2 buttons when service worker is active

third_party/WebKit/Source/devtools/front_end/audits2/Audits2Panel.js

 // Copyright (c) 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
+ * @implements {SDK.SDKModelObserver<!SDK.ServiceWorkerManager>}
  * @unrestricted
  */
 Audits2.Audits2Panel = class extends UI.PanelWithSidebar {
   constructor() {
     super('audits2');
     this.setHideOnDetach();
     this.registerRequiredCSS('audits2/audits2Panel.css');
     this.registerRequiredCSS('audits2/lighthouse/report-styles.css');
 
     this._protocolService = new Audits2.ProtocolService();
@@ skipping 20 matching lines @@
     this._treeOutline.registerRequiredCSS('audits2/audits2Tree.css');
     this.panelSidebarElement().appendChild(this._treeOutline.element);
 
     this._dropTarget = new UI.DropTarget(
         this.contentElement, [UI.DropTarget.Types.Files], Common.UIString('Drop audit file here'),
         this._handleDrop.bind(this));
 
     for (var preset of Audits2.Audits2Panel.Presets)
       preset.setting.addChangeListener(this._updateStartButtonEnabled.bind(this));
     this._showLandingPage();
+    SDK.targetManager.observeModels(SDK.ServiceWorkerManager, this);
+  }
+
+  /**
+   * @override
+   * @param {!SDK.ServiceWorkerManager} serviceWorkerManager
+   */
+  modelAdded(serviceWorkerManager) {

[caseq, 2017/05/23 21:44:00]

Use SDK.targetManager.addModelListener() instead?

[phulce, 2017/05/23 22:13:32]

Talked to pavel about this too, it's somewhat convenient and more readable in
_hasActiveServiceWorker to let the manager do the bookkeeping on the
registrations and versions so that we can just loop through them whenever we
want. There should only ever be one manager so we won't be wasting too many
cycles on adding event and removing event listeners. 

Is there another benefit to using addModelListener we might have missed?

+    if (this._manager)
+      return;
+
+    this._manager = serviceWorkerManager;
+    this._serviceWorkerListeners = [
+      this._manager.addEventListener(
+          SDK.ServiceWorkerManager.Events.RegistrationUpdated, this._updateStartButtonEnabled, this),
+      this._manager.addEventListener(
+          SDK.ServiceWorkerManager.Events.RegistrationDeleted, this._updateStartButtonEnabled, this),
+    ];
+
+    this._updateStartButtonEnabled();
+  }
+
+  /**
+   * @override
+   * @param {!SDK.ServiceWorkerManager} serviceWorkerManager
+   */
+  modelRemoved(serviceWorkerManager) {
+    if (!this._manager || this._manager !== serviceWorkerManager)
+      return;
+
+    Common.EventTarget.removeEventListeners(this._serviceWorkerListeners);
+    this._manager = null;
+    this._serviceWorkerListeners = null;
+    this._updateStartButtonEnabled();
+  }
+
+  /**
+   * @return {boolean}
+   */
+  _hasActiveServiceWorker() {
+    if (!this._manager)
+      return false;
+
+    var inspectedURL = SDK.targetManager.mainTarget().inspectedURL().asParsedURL();
+    var inspectedOrigin = inspectedURL && inspectedURL.securityOrigin();
+    for (var registration of this._manager.registrations().values()) {
+      if (registration.securityOrigin !== inspectedOrigin)
+        continue;
+
+      for (var version of registration.versions.values()) {
+        if (version.controlledClients.length > 1)
+          return true;
+      }
+    }
+
+    return false;
+  }
+
+  /**
+   * @return {boolean}
+   */
+  _hasAtLeastOneCategory() {
+    return Audits2.Audits2Panel.Presets.some(preset => preset.setting.get());
+  }
+
+  _updateStartButtonEnabled() {
+    var hasActiveServiceWorker = this._hasActiveServiceWorker();
+    var hasAtLeastOneCategory = this._hasAtLeastOneCategory();
+    var isDisabled = hasActiveServiceWorker || !hasAtLeastOneCategory;
+
+    if (this._dialogHelpText && hasActiveServiceWorker) {
+      this._dialogHelpText.textContent = Common.UIString(
+          'Multiple tabs are being controlled by the same service worker. ' +
+          'Close your other tabs on the same origin to audit this page.');
+    }
+
+    if (this._dialogHelpText && !hasAtLeastOneCategory)
+      this._dialogHelpText.textContent = Common.UIString('At least one category must be selected.');
+
+    if (this._dialogHelpText)
+      this._dialogHelpText.classList.toggle('hidden', !isDisabled);
+
+    if (this._startButton)
+      this._startButton.disabled = isDisabled;
   }
 
   _clearAll() {
     this._treeOutline.removeChildren();
     this._showLandingPage();
   }
 
   _deleteSelected() {
     var selection = this._treeOutline.selectedTreeElement;
     if (selection)
@@ skipping 39 matching lines @@
 
     for (var preset of Audits2.Audits2Panel.Presets) {
       preset.setting.setTitle(preset.title);
       var checkbox = new UI.ToolbarSettingCheckbox(preset.setting);
       var row = this._auditSelectorForm.createChild('div', 'vbox audits2-launcher-row');
       row.appendChild(checkbox.element);
       row.createChild('span', 'audits2-launcher-description dimmed').textContent = preset.description;
     }
 
     this._statusView = this._createStatusView(uiElement);
+    this._dialogHelpText = uiElement.createChild('div', 'audits2-dialog-help-text');
 
     var buttonsRow = uiElement.createChild('div', 'audits2-dialog-buttons hbox');
     this._startButton =
         UI.createTextButton(Common.UIString('Run audit'), this._start.bind(this), 'material-button default');
     this._updateStartButtonEnabled();
     buttonsRow.appendChild(this._startButton);
     this._cancelButton = UI.createTextButton(Common.UIString('Cancel'), this._cancel.bind(this), 'material-button');
     buttonsRow.appendChild(this._cancelButton);
 
     this._dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.SetExactWidthMaxHeight);
     this._dialog.setMaxContentSize(new UI.Size(500, 400));
     this._dialog.show(this.mainElement());
     auditsViewElement.tabIndex = 0;
     auditsViewElement.focus();
   }
 
-  _updateStartButtonEnabled() {
-    if (!this._startButton)
-      return;
-    for (var preset of Audits2.Audits2Panel.Presets) {
-      if (preset.setting.get()) {
-        this._startButton.disabled = false;
-        return;
-      }
-    }
-    this._startButton.disabled = true;
-  }
-
   /**
    * @param {!Element} launcherUIElement
    * @return {!Element}
    */
   _createStatusView(launcherUIElement) {
     var statusView = launcherUIElement.createChild('div', 'audits2-status vbox hidden');
     this._statusIcon = statusView.createChild('div', 'icon');
     this._statusElement = statusView.createChild('div');
     this._updateStatus(Common.UIString('Loading...'));
     return statusView;
@@ skipping 537 matching lines @@
           return;
 
         var element = Components.DOMPresentationUtils.linkifyNodeReference(node, undefined, detailsItem.snippet);
         origElement.title = '';
         origElement.textContent = '';
         origElement.appendChild(element);
       });
     });
   }
 };