Changed UI for extensions popup

src/browser/components/customizableui/content/panelUI-inc-xhtml.patch

@@ -0,0 +1,17 @@
+diff --git a/browser/components/customizableui/content/panelUI.inc.xhtml b/browser/components/customizableui/content/panelUI.inc.xhtml
+index 956a6ae45d7adbec1513c5af528ebb687a4b7d0d..83b23e84cb6895497c1346f7c4aff15173e67b5c 100644
+--- a/browser/components/customizableui/content/panelUI.inc.xhtml
++++ b/browser/components/customizableui/content/panelUI.inc.xhtml
+@@ -81,9 +81,10 @@
+             <html:span data-l10n-id="unified-extensions-header-title"/>
+           </html:h1>
+         </box>
+-
++        <html:p id="unified-extensions-description" data-l10n-id="unified-extensions-description" class="panel-description"/>
++#if 0
+         <toolbarseparator />
+-
++#endif
+         <vbox class="panel-subview-body" context="unified-extensions-context-menu">
+           <html:div id="unified-extensions-messages-container">
+             <!-- messages will be inserted here -->

src/browser/locales/en-US/browser/unifiedExtensions-ftl.patch

@@ -0,0 +1,13 @@
+diff --git a/browser/locales/en-US/browser/unifiedExtensions.ftl b/browser/locales/en-US/browser/unifiedExtensions.ftl
+index 8db0d9488ac334ada07bf3f537f78cdc99577fb7..acc1d60d5577ffafe982557757c868fa691a1d96 100644
+--- a/browser/locales/en-US/browser/unifiedExtensions.ftl
++++ b/browser/locales/en-US/browser/unifiedExtensions.ftl
+@@ -10,6 +10,8 @@ unified-extensions-header-title = Extensions
+ unified-extensions-manage-extensions =
+     .label = Manage extensions
+ 
++unified-extensions-description = Extensions are used to bring more extra functionality into { -brand-short-name }. 
++
+ ## An extension in the main list
+ 
+ # Each extension in the unified extensions panel (list) has a secondary button

src/toolkit/themes/shared/popup-css.patch

@@ -1,5 +1,5 @@
 diff --git a/toolkit/themes/shared/popup.css b/toolkit/themes/shared/popup.css
-index ddc41a66ed0e3688ce34052652bef1fe33a08d49..53575e1af10d764b131ac20648f1fdd84b652d60 100644
+index ddc41a66ed0e3688ce34052652bef1fe33a08d49..78005dc087044ed57e974f6aa18dd23d61bdb76b 100644
 --- a/toolkit/themes/shared/popup.css
 +++ b/toolkit/themes/shared/popup.css
 @@ -2,6 +2,8 @@
@@ -19,7 +19,8 @@ index ddc41a66ed0e3688ce34052652bef1fe33a08d49..53575e1af10d764b131ac20648f1fdd8
 +  --panel-background: var(--arrowpanel-background);
    --panel-color: MenuText;
    --panel-padding-block: 4px;
-   --panel-padding: var(--panel-padding-block) 0;
+-  --panel-padding: var(--panel-padding-block) 0;
++  --panel-padding: var(--panel-padding-block) 0 5px 0;
    --panel-border-radius: 4px;
 -  --panel-border-color: ThreeDShadow;
 +  --panel-border-color: transparent /* var(--arrowpanel-border-color) */ !important;

src/toolkit/themes/shared/zen-popup.css

@@ -9,7 +9,7 @@
   --uc-arrowpanel-menuitem-margin-inline: 4px;
   --uc-arrowpanel-menuitem-margin-block: 2px;
   --panel-separator-margin-vertical: 2px !important;
-  --panel-separator-margin-horizontal: 0 !important;
+  --panel-separator-margin-horizontal: 1px !important;
 
   --uc-panel-zoom-button-padding: 8px;
   --uc-panel-zoom-button-inline-padding: 9px;
@@ -35,6 +35,9 @@
   --uc-contextmenu-menuitem-margin: var(--uc-contextmenu-menuitem-margin-block) var(--uc-contextmenu-menuitem-margin-inline);
   --uc-contextmenu-separator-vertical: calc(4px - var(--uc-contextmenu-menuitem-border-width));
   --uc-contextmenu-separator-horizontal: 0;
+
+  --panel-separator-color: var(--zen-colors-secondary) !important;
+  --zen-panel-separator-width: 2px;
 }
 
 /* app menu */
@@ -217,8 +220,10 @@
   margin-inline: 0 !important;
 }
 
-#identity-popup-mainView > toolbarseparator:first-child {
+#identity-popup-mainView > toolbarseparator:first-child,
+#unified-extensions-view > toolbarseparator:first-child {
   display: none !important;
+  opacity: 0 !important;
 }
 
 
@@ -240,7 +245,45 @@ toolbarbutton:not(
 ),
 #PanelUI-zen-profiles menuitem {
   /** ADD HERE ALL TYPES OF BUTTONS THAT WANT TO LOOK CHROME LIKE!!! */
-  margin-left: 0 !important;
-  margin: 2.5px 0 !important;
+  margin: 0 !important;
   border-radius: 0 !important;
 }
+
+.panel-subview-footer-button {
+  padding-top: 10px !important;
+  padding-bottom: 10px !important;
+}
+
+#PanelUI-zen-profiles menuitem {
+  padding: 5px !important;
+}
+
+#PanelUI-zen-profiles menuitem:last-child {
+  margin-bottom: 5px !important;
+}
+
+.unified-extensions-item-action-button {
+  padding: 5px 20px !important;
+}
+
+#unified-extensions-description {
+  padding: 0 20px;
+  margin: 0 !important;
+}
+
+.unified-extensions-item {
+  padding: 0 !important;
+}
+
+.panel-subview-footer-button {
+  --arrowpanel-menuitem-padding-block: 20px !important;
+  --arrowpanel-menuitem-padding-inline: 15px !important;
+}
+
+toolbarseparator, menuseparator {
+  border-width: var(--zen-panel-separator-width) !important;
+}
+
+#appMenu-zoom-controls {
+  border-top-width: var(--zen-panel-separator-width) !important;
+}