Merge pull request #18000 from overleaf/ab-dev-enable-toolbar-default

[web] Enable the dev-toolbar by default in the dev environment

GitOrigin-RevId: 170e59e9b82268e621fe99ffcc82b7d68467e1b3

services/web/app/src/Features/SplitTests/SplitTestHandler.js

@@ -237,7 +237,7 @@ async function _getAssignment(
   const splitTest = await _getSplitTest(splitTestName)
   const currentVersion = SplitTestUtils.getCurrentVersion(splitTest)
 
-  if (Settings.splitTest.devToolbar.enabled) {
+  if (Settings.devToolbar.enabled) {
     const override = session?.splitTestOverrides?.[splitTestName]
     if (override) {
       return _makeAssignment(splitTest, override, currentVersion)
@@ -402,7 +402,7 @@ function getPercentile(analyticsId, splitTestName, splitTestPhase) {
 }
 
 function setOverrideInSession(session, splitTestName, variantName) {
-  if (!Settings.splitTest.devToolbar.enabled) {
+  if (!Settings.devToolbar.enabled) {
     return
   }
   if (!session.splitTestOverrides) {
@@ -477,7 +477,7 @@ async function _loadSplitTestInfoInLocals(locals, splitTestName, session) {
     const override = session?.splitTestOverrides?.[splitTestName]
 
     const currentVersion = SplitTestUtils.getCurrentVersion(splitTest)
-    if (!currentVersion.active && !Settings.splitTest.devToolbar.enabled) {
+    if (!currentVersion.active && !Settings.devToolbar.enabled) {
       return
     }
 
@@ -486,7 +486,7 @@ async function _loadSplitTestInfoInLocals(locals, splitTestName, session) {
       phase,
       badgeInfo: splitTest.badgeInfo?.[phase],
     }
-    if (Settings.splitTest.devToolbar.enabled) {
+    if (Settings.devToolbar.enabled) {
       info.active = currentVersion.active
       info.variants = currentVersion.variants.map(variant => ({
         name: variant.name,
@@ -495,7 +495,7 @@ async function _loadSplitTestInfoInLocals(locals, splitTestName, session) {
       info.hasOverride = !!override
     }
     LocalsHelper.setSplitTestInfo(locals, splitTestName, info)
-  } else if (Settings.splitTest.devToolbar.enabled) {
+  } else if (Settings.devToolbar.enabled) {
     LocalsHelper.setSplitTestInfo(locals, splitTestName, {
       missing: true,
     })

services/web/app/views/_mixins/foot_scripts.pug

@@ -1,6 +1,6 @@
 mixin foot-scripts()
 	each file in entrypointScripts(entrypoint)
 		script(type="text/javascript", nonce=scriptNonce, src=file, defer=deferScripts)
-	if (settings.splitTest.devToolbar.enabled)
+	if (settings.devToolbar.enabled)
 		each file in entrypointScripts("devToolbar")
 			script(type="text/javascript", nonce=scriptNonce, src=file, defer=deferScripts)

services/web/app/views/layout-base.pug

@@ -80,7 +80,7 @@ html(
 
 		block body
 
-		if (settings.splitTest.devToolbar.enabled)
+		if (settings.devToolbar.enabled)
 			div#dev-toolbar
 
 	block foot-scripts

services/web/config/settings.defaults.js

@@ -316,10 +316,8 @@ module.exports = {
     algorithm: process.env.OT_JWT_AUTH_ALG || 'HS256',
   },
 
-  splitTest: {
-    devToolbar: {
-      enabled: false,
-    },
+  devToolbar: {
+    enabled: false,
   },
 
   splitTests: [],

services/web/frontend/stylesheets/components/dev-toolbar.less

@@ -15,6 +15,36 @@
     border: none;
     text-decoration: none;
   }
+
+  .collapse-button {
+    position: absolute;
+    padding: 0;
+    margin-top: -2px;
+    color: @neutral-50;
+
+    span {
+      font-size: 28px;
+    }
+
+    &:hover {
+      color: @neutral-30;
+    }
+  }
+}
+
+.dev-tool-bar-open-button {
+  position: fixed;
+  bottom: -2px;
+  left: 6px;
+  color: @neutral-50;
+
+  span {
+    font-size: 28px;
+  }
+
+  &:hover {
+    color: @neutral-30;
+  }
 }
 
 .dev-toolbar-tooltip {

services/web/test/acceptance/config/settings.test.defaults.js

@@ -260,10 +260,8 @@ module.exports = {
     counterInit: 0,
   },
 
-  splitTest: {
-    devToolbar: {
-      enabled: false,
-    },
+  devToolbar: {
+    enabled: false,
   },
 }
 

services/web/test/unit/src/SplitTests/SplitTestHandlerTests.js

@@ -40,10 +40,8 @@ describe('SplitTestHandler', function () {
     this.Settings = {
       moduleImportSequence: [],
       overleaf: {},
-      splitTest: {
-        devToolbar: {
-          enabled: false,
-        },
+      devToolbar: {
+        enabled: false,
       },
     }
     this.AnalyticsManager = {