[Navigator] Make the component bar more obvious when customizing toolbars

navigator/base/content/navigator.css

@@ -11,6 +11,21 @@
   display: none;
 }
 
+/* ::::: Make the component bar an obvious customization point ::::: */
+#component-bar[customizing="true"] {
+  min-width: 64px;
+}
+
+#component-bar[customizing="true"] > toolbarpaletteitem {
+  animation: pulseComponentBar 2000ms infinite;
+}
+
+@keyframes pulseComponentBar {
+  50% {
+    opacity: 0.25;
+  }
+}
+
 /* ::::: tabbed browser ::::: */
 
 tabbrowser {

navigator/base/content/navigator.xul

@@ -510,18 +510,18 @@
   <panel id="customizeToolbarSheetPopup"/>
 
   <statusbar id="status-bar" class="chromeclass-status">
-      <toolbar id="component-bar"
-               toolboxid="navigator-toolbox"
-               mode="icons"
-               iconsize="small"
-               labelalign="end"
-               defaultmode="icons"
-               defaulticonsize="small"
-               defaultlabelalign="end"
-               xpfe="false"
-               customizable="true"
-               persist="collapsed">
-      </toolbar>
+    <toolbar id="component-bar"
+             toolboxid="navigator-toolbox"
+             mode="icons"
+             iconsize="small"
+             labelalign="end"
+             defaultset=""
+             defaultmode="icons"
+             defaulticonsize="small"
+             defaultlabelalign="end"
+             xpfe="false"
+             customizable="true"
+             persist="collapsed"/>
     <statusbarpanel id="statusbar-display" label="&statusText.label;" flex="1"/>
     <statusbarpanel class="statusbarpanel-progress" id="statusbar-progresspanel" collapsed="true">
       <progressmeter class="progressmeter-statusbar" id="statusbar-icon" mode="normal" value="0"/>