New addons page suggestion

Add-ons
#1

There are things to like about the new addons page, and just as many not to like. For instance, this major annoyance: when disabling an addon, it does not stay right there and indicate that it’s been disabled like with the old interface. Instead, the disabled addon disappears; it is then found in the Disabled section.

With 55 addons, all the paging up and down is a big hassle compared to how it used to work. Yes, I know I can disable ‘extensions.htmlaboutaddons.enabled’ but I’m sure that option will be deprecated soon.

#2

If you are tempted to try a style hack in a userContent.css file, here is an example of a two-column extensions list, Enabled on the left, Disabled on the right. (Widths are hard-coded, I couldn’t figure out a good way to make the layout responsive.)

addon-list[type="extension"] {
  display: block !important;
  position: relative !important;
}
addon-list[type="extension"] section {
  position: absolute !important;
  top: 0px !important;
  max-width: 530px !important;
  width: 530px !important;
}
addon-list[type="extension"] section[section="0"] {
  left: 0 !important;
}
addon-list[type="extension"] section[section="1"] {
  left: 545px !important;
  background-color: #ddd !important;
  padding: 0 12px !important;
  border-radius: 6px !important;
}
addon-list[type="extension"] addon-card:not([expanded]) {
  display: block !important;
  max-width: 530px !important;
}
addon-list[type="extension"] addon-card:not([expanded]) .card-contents,
addon-list[type="extension"] addon-card:not([expanded]) .addon-description {
  display: block !important;
  max-width: 435px !important;
}
recommended-extensions-section {
  display: none !important;
}
#3

Thanks a lot, @jscher2000. I like it; tweaked it a good deal to fit the margins/compact, etc. Still missing the one-click-to-disable/enable, but this is an improvement.

addon-list[type=“extension”] {display: block !important; position: relative !important;}
addon-list[type=“extension”] section {position: absolute !important; top: 0px !important;
max-width: 475px !important; width: 475px !important;}
addon-list[type=“extension”] section[section=“0”] {left: 0 !important; background-color: Silver !important;}
addon-list[type=“extension”] section[section=“1”] {left: 500px !important; background-color: Silver !important; padding: 0 10px !important; border-radius: 0 !important;}
addon-list[type=“extension”] addon-card:not([expanded]) {display: block !important;
max-width: 550px !important;}
addon-list[type=“extension”] addon-card:not([expanded]) .card-contents,
addon-list[type=“extension”] addon-card:not([expanded]) .addon-description {display: block !important; max-width: 375px !important;}
.addon.card {height: 7px !important; padding-top: 2px !important; margin-bottom: 4px !important; border-radius: 0 !important;}
.addon.card:hover {box-shadow: none !important;}
.addon-name {font-size: 15px !important;}
.addon-description {color: Black !important; font-size: 14px !important;}
addon-list[type=“extension”] addon-card:not([expanded]) .addon-description {display:none !important;}
addon-details {color: Black !important; font-size: 17px !important;}
.card-heading-icon {height: 20px !important;}
recommended-extensions-section {display: none !important;}