Default sidebar width on large and ultrawide screens (#648)

resolves rdar://105566775

Author: Dobromir Hristov

src/components/AdjustableSidebarWidth.vue

@@ -65,8 +65,9 @@ import { baseNavStickyAnchorId } from 'docc-render/constants/nav';
 export const STORAGE_KEY = 'sidebar';
 
 // the maximum width, after which the full-width content does not grow
-export const MAX_WIDTH = 1920;
+export const MAX_WIDTH = 1921;
 export const ULTRA_WIDE_DEFAULT = 543;
+export const LARGE_DEFAULT_WIDTH = 400;
 
 export const eventsMap = {
   touch: {
@@ -130,7 +131,7 @@ export default {
     // have a default width for very large screens, or use half of the min and max
     const defaultWidth = windowWidth >= MAX_WIDTH
       ? ULTRA_WIDE_DEFAULT
-      : Math.round((minWidth + maxWidth) / 2);
+      : LARGE_DEFAULT_WIDTH;
     // get the already stored data, fallback to a default one.
     const storedWidth = storage.get(STORAGE_KEY, defaultWidth);
     return {

tests/unit/components/AdjustableSidebarWidth.spec.js

@@ -13,6 +13,7 @@ import AdjustableSidebarWidth, {
   STORAGE_KEY,
   MAX_WIDTH,
   ULTRA_WIDE_DEFAULT,
+  LARGE_DEFAULT_WIDTH,
 } from '@/components/AdjustableSidebarWidth.vue';
 
 import store from '@/stores/DocumentationTopicStore';
@@ -106,9 +107,9 @@ describe('AdjustableSidebarWidth', () => {
   });
 
   describe('on mount', () => {
-    it('sets the `width` to the middle between min and max for `large`, on mount', () => {
+    it('sets the `width` to the `large` default width, on mount', () => {
       const wrapper = createWrapper();
-      assertWidth(wrapper, 350); // 35% on large
+      assertWidth(wrapper, LARGE_DEFAULT_WIDTH);
     });
 
     it('changes the `width`, to the next closest max or min, on mount, as soon as the breakpoint gets changed', () => {
@@ -145,7 +146,7 @@ describe('AdjustableSidebarWidth', () => {
       assertWidth(wrapper, 450);
       // assert the storage was called with the key and the default size
       // 350 is half of min and max on Large
-      expect(storage.get).toHaveBeenLastCalledWith(STORAGE_KEY, 350);
+      expect(storage.get).toHaveBeenLastCalledWith(STORAGE_KEY, LARGE_DEFAULT_WIDTH);
     });
 
     it('sets the `width` to the `max width allowed`, if stored value is bigger', () => {
@@ -369,8 +370,8 @@ describe('AdjustableSidebarWidth', () => {
     // assert drop
     document.dispatchEvent(createEvent(eventsMap.mouse.end));
     // assert emit event
-    expect(wrapper.emitted('width-change')).toHaveLength(4);
-    expect(wrapper.emitted('width-change')[3]).toEqual([maxWidth]);
+    expect(wrapper.emitted('width-change')).toHaveLength(3);
+    expect(wrapper.emitted('width-change')[2]).toEqual([maxWidth]);
     // assert saved storage
     expect(storage.set).toHaveBeenLastCalledWith(STORAGE_KEY, maxWidth);
     // assert drag stopped
@@ -407,8 +408,8 @@ describe('AdjustableSidebarWidth', () => {
     // assert drop
     document.dispatchEvent(createEvent(eventsMap.touch.end));
     // assert emit event
-    expect(wrapper.emitted('width-change')).toHaveLength(4);
-    expect(wrapper.emitted('width-change')[3]).toEqual([maxWidth]);
+    expect(wrapper.emitted('width-change')).toHaveLength(3);
+    expect(wrapper.emitted('width-change')[2]).toEqual([maxWidth]);
     // assert saved storage
     expect(storage.set).toHaveBeenLastCalledWith(STORAGE_KEY, maxWidth);
     // assert drag stopped