Issue 5778 - Hide More filters section when there is no filter

new-options.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-present eyeo GmbH
  *
  * Adblock Plus is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 3 as
  * published by the Free Software Foundation.
  *
  * Adblock Plus is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ skipping 34 matching lines @@
   const minuteInMs = 60000;
   const hourInMs = 3600000;
   const fullDayInMs = 86400000;
 
   function Collection(details)
   {
     this.details = details;
     this.items = [];
   }
 
-  Collection.prototype._setEmpty = function(table, texts)
+  Collection.prototype._setEmpty = function(table, detail, removeEmpty)

[ire, 2017/09/26 08:37:55]

NIT: This function and the nested if statements are a bit confusing to follow. I
would suggest making it flatter, e.g.:


if (removeEmpty && detail.removeEmptyAction)
  ...
else if (removeEmpty)
  ...
else if (detail.emptyText)
  ...
else if (detail.setEmptyAction)
  ...

[saroyanm, 2017/09/26 16:35:25]

Absolutely, my bad, now should be more readable I assume.

   {
-    let placeholders = table.querySelectorAll(".empty-placeholder");
+    if (removeEmpty)
+    {
+      let placeholders = table.querySelectorAll(".empty-placeholder");
+      if (placeholders.length > 0)
+      {
+        for (let placeholder of placeholders)
+          table.removeChild(placeholder);
+      }
 
-    if (texts && placeholders.length == 0)
+      if (detail.removeEmptyAction)
+        execAction(detail.removeEmptyAction, table);
+    }
+    else
     {
-      for (let text of texts)
+      if (detail.emptyText)
       {
-        let placeholder = document.createElement("li");
-        placeholder.className = "empty-placeholder";
-        placeholder.textContent = getMessage(text);
-        table.appendChild(placeholder);
+        for (let text of detail.emptyText)
+        {
+          let placeholder = document.createElement("li");
+          placeholder.className = "empty-placeholder";
+          placeholder.textContent = getMessage(text);
+          table.appendChild(placeholder);
+        }
       }
-    }
-    else if (placeholders.length > 0)
-    {
-      for (let placeholder of placeholders)
-        table.removeChild(placeholder);
+
+      if (detail.setEmptyAction)
+        execAction(detail.setEmptyAction, table);
     }
   };
 
   Collection.prototype._createElementQuery = function(item)
   {
     let access = (item.url || item.text).replace(/'/g, "\\'");
     return function(container)
     {
       return container.querySelector("[data-access='" + access + "']");
     };
@@ skipping 63 matching lines @@
 
       for (let control of listItem.querySelectorAll(".control"))
       {
         if (control.hasAttribute("title"))
         {
           let titleValue = getMessage(control.getAttribute("title"));
           control.setAttribute("title", titleValue);
         }
       }
 
-      this._setEmpty(table, null);
+      this._setEmpty(table, detail, true);
       if (table.children.length > 0)
         table.insertBefore(listItem, table.children[this.items.indexOf(item)]);
       else
         table.appendChild(listItem);
 
       this.updateItem(item);
     }
     return length;
   };
 
@@ skipping 25 matching lines @@
               break;
 
             focusableElement = focusableElement.parentElement;
           }
           focusNextElement(focusableElement || document, control);
         }
       }
 
       element.parentElement.removeChild(element);
       if (this.items.length == 0)
-        this._setEmpty(table, detail.emptyText);
+        this._setEmpty(table, detail);
     }
   };
 
   Collection.prototype.updateItem = function(item)
   {
     let oldIndex = this.items.indexOf(item);
     this._sortItems();
     let access = (item.url || item.text).replace(/'/g, "\\'");
     for (let i = 0; i < this.details.length; i++)
     {
@@ skipping 96 matching lines @@
     {
       let table = E(detail.id);
       let element = table.firstChild;
       while (element)
       {
         if (element.tagName == "LI" && !element.classList.contains("static"))
           table.removeChild(element);
         element = element.nextElementSibling;
       }
 
-      this._setEmpty(table, detail.emptyText);
+      this._setEmpty(table, detail);
     }
   };
 
   function focusNextElement(container, currentElement)
   {
     let focusables = container.querySelectorAll("a, button, input, .control");
     focusables = Array.prototype.slice.call(focusables);
     let index = focusables.indexOf(currentElement);
     index += (index == focusables.length - 1) ? -1 : 1;
 
@@ skipping 17 matching lines @@
     }
   ]);
   collections.allLangs = new Collection([
     {
       id: "all-lang-table-add",
       emptyText: ["options_dialog_language_other_empty"]
     }
   ]);
   collections.more = new Collection([
     {
-      id: "more-list-table"
+      id: "more-list-table",
+      setEmptyAction: "hide-more-section",
+      removeEmptyAction: "show-more-section"

[ire, 2017/09/26 08:37:55]

NIT: Calling it "hide-more-section" seems to general when this is specific to
the more filters section. Suggest:
"hide-more-filters-section"/"show-more-filters-section" etc.

[saroyanm, 2017/09/26 16:35:25]

I agree with you, done.

     }
   ]);
   collections.whitelist = new Collection([
     {
       id: "whitelisting-table",
       emptyText: ["options_whitelist_empty_1", "options_whitelist_empty_2"]
     }
   ]);
   collections.filterLists = new Collection([
     {
@@ skipping 208 matching lines @@
             break;
           }
         }
         break;
       case "close-dialog":
         closeDialog();
         break;
       case "edit-custom-filters":
         setCustomFiltersView("write");
         break;
+      case "hide-more-section":
+        E("more-filters").setAttribute("aria-hidden", true);
+        break;
       case "hide-notification":
         hideNotification();
         break;
       case "import-subscription": {
         let url = E("blockingList-textbox").value;
         addEnableSubscription(url);
         closeDialog();
         break;
       }
       case "open-context-menu": {
@@ skipping 23 matching lines @@
         sendMessageHandleErrors({
           type: "filters.importRaw",
           text: E("custom-filters-raw").value,
           removeExisting: true
         },
         () =>
         {
           setCustomFiltersView("read");
         });
         break;
+      case "show-more-section":
+        E("more-filters").setAttribute("aria-hidden", false);
+        break;
       case "switch-acceptable-ads":
         let value = element.value || element.dataset.value;
         ext.backgroundPage.sendMessage({
           type: value == "privacy" ? "subscriptions.add" :
             "subscriptions.remove",
           url: acceptableAdsPrivacyUrl
         });
         ext.backgroundPage.sendMessage({
           type: value == "ads" ? "subscriptions.add" : "subscriptions.remove",
           url: acceptableAdsUrl
@@ skipping 738 matching lines @@
   });
   ext.backgroundPage.sendMessage({
     type: "subscriptions.listen",
     filter: ["added", "disabled", "homepage", "lastDownload", "removed",
              "title", "downloadStatus", "downloading"]
   });
 
   window.addEventListener("DOMContentLoaded", onDOMLoaded, false);
   window.addEventListener("hashchange", onHashChange, false);
 }