5 files changed, 62 insertions, 41 deletions

diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index 80e6daf19..fe43c42d2 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -9,6 +9,7 @@ import InfoBar from '../ui/InfoBar';
 import { Component as BasicAuth } from '../../features/basicAuth';
 import { Component as ShareFranz } from '../../features/shareFranz';
 import { Component as QuickSwitch } from '../../features/quickSwitch';
+import { Component as PublishDebugInfo } from '../../features/publishDebugInfo';
 import ErrorBoundary from '../util/ErrorBoundary';
 
 // import globalMessages from '../../i18n/globalMessages';
@@ -189,6 +190,7 @@ class AppLayout extends Component {
               <BasicAuth />
               <ShareFranz />
               <QuickSwitch />
+              <PublishDebugInfo />
               {services}
               {children}
               <TrialStatusBar />
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index 48a83c5a1..bd10ccb4a 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -118,21 +118,12 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp
                 type="button"
                 className="sidebar__button"
                 onClick={() => {
-                  // Disable lock first - otherwise the application might not update correctly
                   actions.settings.update({
                     type: 'app',
                     data: {
-                      locked: false,
+                      locked: true,
                     },
                   });
-                  setTimeout(() => {
-                    actions.settings.update({
-                      type: 'app',
-                      data: {
-                        locked: true,
-                      },
-                    });
-                  }, 0);
                 }}
                 data-tip={`${intl.formatMessage(messages.lockFerdi)} (${ctrlKey}+Shift+L)`}
               >
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
index 860863d26..f6832038a 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.js
@@ -135,9 +135,11 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
     } = this.props;
 
     const {
-      showServiceNavigationBar,
+      navigationBarBehaviour,
     } = stores.settings.app;
 
+    const showNavBar = navigationBarBehaviour === 'always' || (navigationBarBehaviour === 'custom' && service.recipe.id === CUSTOM_WEBSITE_ID);
+
     const webviewClasses = classnames({
       services__webview: true,
       'services__webview-wrapper': true,
@@ -193,7 +195,7 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
           <>
             {!service.isHibernating ? (
               <>
-                {(service.recipe.id === CUSTOM_WEBSITE_ID || showServiceNavigationBar) && (
+                {showNavBar && (
                   <WebControlsScreen service={service} />
                 )}
                 <ServiceWebview
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index fa34ac60b..98051d78f 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -33,6 +33,18 @@ const messages = defineMessages({
     id: 'settings.service.form.openDarkmodeCss',
     defaultMessage: '!!!Open darkmode.css',
   },
+  openUserCss: {
+    id: 'settings.service.form.openUserCss',
+    defaultMessage: '!!!Open user.css',
+  },
+  openUserJs: {
+    id: 'settings.service.form.openUserJs',
+    defaultMessage: '!!!Open user.js',
+  },
+  recipeFileInfo: {
+    id: 'settings.service.form.recipeFileInfo',
+    defaultMessage: '!!!Your user files will be inserted into the webpage so you can customize services in any way you like. User files are only stored locally and are not transferred to other computers using the same account.',
+  },
   availableServices: {
     id: 'settings.service.form.availableServices',
     defaultMessage: '!!!Available services',
@@ -131,8 +143,7 @@ export default @observer class EditServiceForm extends Component {
     form: PropTypes.instanceOf(Form).isRequired,
     onSubmit: PropTypes.func.isRequired,
     onDelete: PropTypes.func.isRequired,
-    openDarkmodeCss: PropTypes.func.isRequired,
-    isOpeningDarkModeCss: PropTypes.bool.isRequired,
+    openRecipeFile: PropTypes.func.isRequired,
     isSaving: PropTypes.bool.isRequired,
     isDeleting: PropTypes.bool.isRequired,
     isProxyFeatureEnabled: PropTypes.bool.isRequired,
@@ -169,7 +180,7 @@ export default @observer class EditServiceForm extends Component {
         if (recipe.validateUrl && values.customUrl) {
           this.setState({ isValidatingCustomUrl: true });
           try {
-            values.customUrl = normalizeUrl(values.customUrl, { stripWWW: false });
+            values.customUrl = normalizeUrl(values.customUrl, { stripWWW: false, removeTrailingSlash: false });
             isValid = await recipe.validateUrl(values.customUrl);
           } catch (err) {
             console.warn('ValidateURL', err);
@@ -199,8 +210,7 @@ export default @observer class EditServiceForm extends Component {
       isSaving,
       isDeleting,
       onDelete,
-      openDarkmodeCss,
-      isOpeningDarkModeCss,
+      openRecipeFile,
       isProxyFeatureEnabled,
       isServiceProxyIncludedInCurrentPlan,
       isSpellcheckerIncludedInCurrentPlan,
@@ -226,23 +236,6 @@ export default @observer class EditServiceForm extends Component {
       />
     );
 
-    const openDarkmodeCssButton = isOpeningDarkModeCss ? (
-      <Button
-        label={intl.formatMessage(messages.openDarkmodeCss)}
-        loaded={false}
-        buttonType="secondary"
-        className="settings__open-dark-mode-button"
-        disabled
-      />
-    ) : (
-      <Button
-        buttonType="secondary"
-        label={intl.formatMessage(messages.openDarkmodeCss)}
-        className="settings__open-dark-mode-button"
-        onClick={openDarkmodeCss}
-      />
-    );
-
     let activeTabIndex = 0;
     if (recipe.hasHostedOption && service.team) {
       activeTabIndex = 1;
@@ -430,11 +423,39 @@ export default @observer class EditServiceForm extends Component {
               </PremiumFeatureContainer>
             )}
           </form>
+
+          {action === 'edit' && (
+            <>
+              <div className="settings__open-recipe-file-container">
+                <Button
+                  buttonType="secondary"
+                  label={intl.formatMessage(messages.openDarkmodeCss)}
+                  className="settings__open-recipe-file-button"
+                  onClick={() => openRecipeFile('darkmode.css')}
+                />
+                <Button
+                  buttonType="secondary"
+                  label={intl.formatMessage(messages.openUserCss)}
+                  className="settings__open-recipe-file-button"
+                  onClick={() => openRecipeFile('user.css')}
+                />
+                <Button
+                  buttonType="secondary"
+                  label={intl.formatMessage(messages.openUserJs)}
+                  className="settings__open-recipe-file-button"
+                  onClick={() => openRecipeFile('user.js')}
+                />
+              </div>
+              <p style={{ marginTop: 10 }}>
+                <span className="mdi mdi-information" />
+                {intl.formatMessage(messages.recipeFileInfo)}
+              </p>
+            </>
+          )}
         </div>
         <div className="settings__controls">
           {/* Delete Button */}
           {action === 'edit' && deleteButton}
-          {action === 'edit' && openDarkmodeCssButton}
 
           {/* Save Button */}
           {isSaving || isValidatingCustomUrl ? (
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index f7868db50..f41c7db8e 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -252,8 +252,11 @@ export default @observer class EditSettingsForm extends Component {
             <Toggle field={form.$('runInBackground')} />
             <Toggle field={form.$('enableSystemTray')} />
             {isTrayEnabled && <Toggle field={form.$('startMinimized')} />}
+            {process.platform === 'win32' && (
+              <Toggle field={form.$('minimizeToSystemTray')} />
+            )}
             <Toggle field={form.$('privateNotifications')} />
-            <Toggle field={form.$('showServiceNavigationBar')} />
+            <Select field={form.$('navigationBarBehaviour')} />
 
             <Hr />
 
@@ -279,10 +282,6 @@ export default @observer class EditSettingsForm extends Component {
 
             <Hr />
 
-            {process.platform === 'win32' && (
-              <Toggle field={form.$('minimizeToSystemTray')} />
-            )}
-
             <Input
               placeholder="Server"
               onChange={e => this.submit(e)}
@@ -450,7 +449,7 @@ export default @observer class EditSettingsForm extends Component {
             <Hr />
 
             {isMac && <Toggle field={form.$('adaptableDarkMode')} />}
-            {!(isMac && isAdaptableDarkModeEnabled) && <Toggle field={form.$('darkMode')} disabled={isAdaptableDarkModeEnabled} />}
+            {!(isMac && isAdaptableDarkModeEnabled) && <Toggle field={form.$('darkMode')} />}
             {(isDarkmodeEnabled || isAdaptableDarkModeEnabled) && (
               <>
                 <Toggle field={form.$('universalDarkMode')} />
@@ -469,6 +468,12 @@ export default @observer class EditSettingsForm extends Component {
 
             <Hr />
 
+            <Select field={form.$('serviceRibbonWidth')} />
+
+            <Select field={form.$('iconSize')} />
+
+            <Hr />
+
             <Input
               placeholder="Accent Color"
               onChange={e => this.submit(e)}