Shopify Code Editor Maximized

README.md

This is a user style that can be used with the recommended Stylus app, or with the outdated Stylish for Firefox app.

It automatically maximizes the Shopify Code Editor whenever you open it from Themes > Edit Code or by other means.

It does the following:

• Hides all the unnecessary header bars, and menu, leaving only the file list, the tab bar and the file header.
• Removes the "Maximize" button.
• Reduces the width of the file list to just 80% of the original width. More space to code! (Pro tip: This is 22.4rem)
• Inverts the tab order so that the tabs are on the right (less distracting, and also the scroll bar goes on top).
• Hides the Trial period black bar notice. (In the code editor? Why, Shopify, why?)
• Hides the SCSS warning. (Yes, we know oh Shopify, it's deprecated. You can stop.)
• Fixes a problem where sometimes the code window gets whited out and won't show any code until page is refreshed.
• Hides the yellow bar that shows on a locked development store.
• Reverts the new UI design (white tab bar with green line on active tab) to the old design (grey tab bar with white active tab).

If this helped you or you need to remove something else or make something better, please leave a comment.

Note that this doesn't change the look to dark mode and I won't be doing look customizations here.

userContent.css

@-moz-document regexp("https\\:\\/\\/.*\\.myshopify\\.com\\/admin\\/themes\\/\\d+($|/$|\\?$|\\?.*)") {

.Polaris-Frame__GlobalRibbonContainer_1kirc {
  display: none;
}

.template-editor-toolbar {
  display: none;
}

.Polaris-Frame__Content_xd1mk {
  padding-bottom: 0;
}

._2KPOY {
  padding-bottom: 0;
}

.template-editor-layout {
  height: 100vh;
}

.template-editor-titlebar {
  display: none;
}

@media screen and (min-width: 580px) {
  .template-editor-layout__sidebar {
    /* flex: 0 1 28rem; */
    flex: 0 1 22.4rem;
  }
}

#AppFrameNav {
  display: none;
}

#AppFrameTopBar {
  display: none;
}

.Polaris-Frame__Main_yj28s {
  padding-left: 0 !important;
  padding-top: 0 !important;
}

.ui-banner.ui-banner--status-warning.ui-banner--within-page[data-bind-show="currentTab.key && (currentTab.key.endsWith('.scss') || currentTab.key.endsWith('.scss.liquid'))"] {
  display: none;
}

.template-editor-tab-bar__action {
  display: none;
}

#template-editor-tabs {
  transform: rotate(180deg);
}

#template-editor-tabs > li {
  transform: rotate(-180deg);
}

.CodeMirror-sizer {
  /* display: none; */
  display: block !important;
}

footer._2u7yF {
  display: none;
}

.newDesignLanguage .template-editor-tab-bar {
  border-bottom: none;
  background: #dfe3e8;
}

.newDesignLanguage .template-editor-tab {
  background-color: #dfe3e8;
}

.newDesignLanguage .template-editor-tab.active {
  background-color: white;
  -webkit-box-shadow: none;
  box-shadow: none;
}

}