Fix profile conditions issues (#1239)

* Add an event for when the number of profile conditions changes

* Update count

* Fix stale data being used

* Add "Remove group" option

ext/bg/js/settings/profile-conditions-ui.js

@@ -19,8 +19,9 @@
  * KeyboardMouseInputField
  */
 
-class ProfileConditionsUI {
+class ProfileConditionsUI extends EventDispatcher {
     constructor(settingsController) {
+        super();
         this._settingsController = settingsController;
         this._os = null;
         this._conditionGroupsContainer = null;
@@ -88,7 +89,12 @@ class ProfileConditionsUI {
         this._os = value;
     }
 
-    prepare(profileIndex, conditionGroups) {
+    async prepare(profileIndex) {
+        const options = await this._settingsController.getOptionsFull();
+        const {profiles} = options;
+        if (profileIndex < 0 || profileIndex >= profiles.length) { return; }
+        const {conditionGroups} = profiles[profileIndex];
+
         this._profileIndex = profileIndex;
         this._conditionGroupsContainer = document.querySelector('#profile-condition-groups');
         this._addConditionGroupButton = document.querySelector('#profile-add-condition-group');
@@ -195,6 +201,8 @@ class ProfileConditionsUI {
             items: []
         }]);
 
+        this._triggerConditionGroupCountChanged(this._children.length);
+
         return true;
     }
 
@@ -228,6 +236,8 @@ class ProfileConditionsUI {
             deleteCount: 0,
             items: [conditionGroup]
         }]);
+
+        this._triggerConditionGroupCountChanged(this._children.length);
     }
 
     _addConditionGroup(conditionGroup, index) {
@@ -269,6 +279,10 @@ class ProfileConditionsUI {
     _normalizeDomains(value) {
         return this.splitValue(value).join(', ');
     }
+
+    _triggerConditionGroupCountChanged(count) {
+        this.trigger('conditionGroupCountChanged', {count, profileIndex: this._profileIndex});
+    }
 }
 
 class ProfileConditionGroupUI {
@@ -302,6 +316,10 @@ class ProfileConditionGroupUI {
         return this._node;
     }
 
+    get childCount() {
+        return this._children.length;
+    }
+
     prepare(conditionGroup) {
         this._node = this._parent.instantiateTemplate('profile-condition-group');
         this._conditionContainer = this._node.querySelector('.profile-condition-list');
@@ -358,7 +376,7 @@ class ProfileConditionGroupUI {
         }]);
 
         if (this._children.length === 0) {
-            this._parent.removeConditionGroup(this);
+            this.removeSelf();
         }
 
         return true;
@@ -369,6 +387,10 @@ class ProfileConditionGroupUI {
         return this._parent.getPath(`conditionGroups[${this._index}]${property}`);
     }
 
+    removeSelf() {
+        this._parent.removeConditionGroup(this);
+    }
+
     // Private
 
     _onAddConditionButtonClick() {
@@ -455,7 +477,10 @@ class ProfileConditionUI {
         this._eventListeners.addEventListener(this._typeInput, 'change', this._onTypeChange.bind(this), false);
         this._eventListeners.addEventListener(this._operatorInput, 'change', this._onOperatorChange.bind(this), false);
         if (this._removeButton !== null) { this._eventListeners.addEventListener(this._removeButton, 'click', this._onRemoveButtonClick.bind(this), false); }
-        if (this._menuButton !== null) { this._eventListeners.addEventListener(this._menuButton, 'menuClosed', this._onMenuClosed.bind(this), false); }
+        if (this._menuButton !== null) {
+            this._eventListeners.addEventListener(this._menuButton, 'menuOpened', this._onMenuOpened.bind(this), false);
+            this._eventListeners.addEventListener(this._menuButton, 'menuClosed', this._onMenuClosed.bind(this), false);
+        }
     }
 
     cleanup() {
@@ -520,11 +545,21 @@ class ProfileConditionUI {
         this._removeSelf();
     }
 
+    _onMenuOpened({detail: {menu}}) {
+        const deleteGroup = menu.querySelector('.popup-menu-item[data-menu-action="deleteGroup"]');
+        if (deleteGroup !== null) {
+            deleteGroup.hidden = (this._parent.childCount <= 1);
+        }
+    }
+
     _onMenuClosed({detail: {action}}) {
         switch (action) {
             case 'delete':
                 this._removeSelf();
                 break;
+            case 'deleteGroup':
+                this._parent.removeSelf();
+                break;
             case 'resetValue':
                 this._resetValue();
                 break;

ext/bg/js/settings/profile-controller.js

@@ -92,6 +92,7 @@ class ProfileController {
         if (this._profileMoveUpButton !== null) { this._profileMoveUpButton.addEventListener('click', this._onMove.bind(this, -1), false); }
         if (this._profileMoveDownButton !== null) { this._profileMoveDownButton.addEventListener('click', this._onMove.bind(this, 1), false); }
 
+        this._profileConditionsUI.on('conditionGroupCountChanged', this._onConditionGroupCountChanged.bind(this));
         this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this));
         this._onOptionsChanged();
     }
@@ -334,7 +335,7 @@ class ProfileController {
 
         this._profileConditionsUI.cleanup();
         this._profileConditionsIndex = profileIndex;
-        this._profileConditionsUI.prepare(profileIndex, profile.conditionGroups);
+        this._profileConditionsUI.prepare(profileIndex);
         if (this._profileConditionsProfileName !== null) {
             this._profileConditionsProfileName.textContent = profile.name;
         }
@@ -368,7 +369,7 @@ class ProfileController {
         this._profileConditionsUI.cleanup();
         const conditionsProfile = this._getProfile(this._profileConditionsIndex !== null ? this._profileConditionsIndex : settingsProfileIndex);
         if (conditionsProfile !== null) {
-            this._profileConditionsUI.prepare(settingsProfileIndex, conditionsProfile.conditionGroups);
+            this._profileConditionsUI.prepare(settingsProfileIndex);
         }
 
         // Udpate profile entries
@@ -449,6 +450,13 @@ class ProfileController {
         this.moveProfile(this._settingsController.profileIndex, offset);
     }
 
+    _onConditionGroupCountChanged({count, profileIndex}) {
+        if (profileIndex >= 0 && profileIndex < this._profileEntryList.length) {
+            const profileEntry = this._profileEntryList[profileIndex];
+            profileEntry.setConditionGroupsCount(count);
+        }
+    }
+
     _addProfileEntry(profileIndex) {
         const profile = this._profiles[profileIndex];
         const node = this._settingsController.instantiateTemplate('profile-entry');
@@ -626,10 +634,14 @@ class ProfileEntry {
 
     updateState() {
         this._nameInput.value = this._profile.name;
-        this._countText.textContent = this._profile.conditionGroups.length;
+        this._countText.textContent = `${this._profile.conditionGroups.length}`;
         this._isDefaultRadio.checked = (this._index === this._profileController.profileCurrentIndex);
     }
 
+    setConditionGroupsCount(count) {
+        this._countText.textContent = `${count}`;
+    }
+
     // Private
 
     _onIsDefaultRadioChange(e) {

ext/bg/settings2.html

@@ -1792,6 +1792,7 @@
 <template id="profile-condition-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu">
     <button class="popup-menu-item" data-menu-action="resetValue">Reset value</button>
     <button class="popup-menu-item" data-menu-action="delete">Delete</button>
+    <button class="popup-menu-item" data-menu-action="deleteGroup">Delete group</button>
 </div></div></template>