webui: Hide menu separators when all items below it until the next separator are hidden

Bug: 878324
Change-Id: I449362cec69c11182f9d13cdbd4b40410e3b027f
Reviewed-on: https://chromium-review.googlesource.com/c/1304178Reviewed-by: Naoki Fukino <fukino@chromium.org>
Commit-Queue: Joel Hockey <joelhockey@chromium.org>
Cr-Commit-Position: refs/heads/master@{#603425}

ui/webui/resources/js/cr/ui/menu.js

@@ -202,16 +202,26 @@ cr.define('cr.ui', function() {
     },
 
     /**
-     * Returns if the menu has any visible item.
+     * Returns whether the menu has any visible items.  Hides any separators
+     * where all items below it until the next separator are hidden.
      * @return {boolean} True if the menu has visible item. Otherwise, false.
      */
     hasVisibleItems: function() {
       var menuItems = this.menuItems;  // Cache.
-      for (var i = 0, menuItem; menuItem = menuItems[i]; i++) {
-        if (!menuItem.isSeparator() && this.isItemVisible_(menuItem))
-          return true;
+      var result = false;
+      var separatorRequired = false;
+      // Inspect items in reverse order to determine if the separator above each
+      // set of items is required.
+      for (var i = menuItems.length - 1; i >= 0; i--) {
+        var menuItem = menuItems[i];
+        if (menuItem.isSeparator()) {
+          menuItem.hidden = !separatorRequired;
+          separatorRequired = false;
+        }
+        if (this.isItemVisible_(menuItem))
+          result = separatorRequired = true;
       }
-      return false;
+      return result;
     },
 
     /**