support showing panel on all pages (#1208)

Previously, the panel would only be displayed on the blob or tree pages. Now it can appear on any page. There are no panel views yet that are intended to show up on other pages, but it is now possible.

This change also makes it so that the panel takes up the full screen width, even on tree/blob pages. Previously it only took up the partial width starting at the sidebar (if open) on the left. Having more width in the panel is more important than having more height on the sidebar, so this change is beneficial. (It also is much simpler to implement this way rather than continuing to have the panel take partial width on tree/blob page, because it allows the panel to be rendered in a single place high up in the React component hierarchy.)

Author: sqs

web/src/Layout.tsx

@@ -14,6 +14,7 @@ import { GlobalDebug } from './global/GlobalDebug'
 import { KeybindingsProps } from './keybindings'
 import { IntegrationsToast } from './marketing/IntegrationsToast'
 import { GlobalNavbar } from './nav/GlobalNavbar'
+import { ResizablePanel } from './panel/Panel'
 import { RepoHeaderActionButton } from './repo/RepoHeader'
 import { RepoRevContainerRoute } from './repo/RepoRevContainer'
 import { LayoutRouteProps } from './routes'
@@ -115,6 +116,11 @@ export const Layout: React.FunctionComponent<LayoutProps> = props => {
                     )
                 })}
             </Switch>
+            <ResizablePanel
+                history={props.history}
+                location={props.location}
+                extensionsController={props.extensionsController}
+            />
             <GlobalDebug {...props} />
         </div>
     )

web/src/panel/Panel.scss

@@ -16,8 +16,9 @@
     width: 100%;
 
     &--resizable {
-        min-height: 10rem;
-        max-height: 80%;
+        min-height: 6rem;
+        max-height: calc(100% - 3rem);
+        width: 100%;
     }
 
     &__empty {

web/src/panel/Panel.tsx

@@ -30,7 +30,6 @@ export interface PanelItem extends Tab<string> {
 }
 
 interface Props extends ExtensionsControllerProps {
-    isLightTheme: boolean
     location: H.Location
     history: H.History
 }

web/src/repo/routes.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { Redirect, RouteComponentProps } from 'react-router'
 import { getModeFromPath } from '../../../shared/src/languages'
-import { ResizablePanel } from '../panel/Panel'
 import { formatHash, isLegacyFragment, parseHash } from '../util/url'
 import { BlobPage } from './blob/BlobPage'
 import { RepositoryCommitsPage } from './commits/RepositoryCommitsPage'
@@ -110,7 +109,6 @@ export const repoRevContainerRoutes: ReadonlyArray<RepoRevContainerRoute> = [
                                     isLightTheme={context.isLightTheme}
                                 />
                             )}
-                            <ResizablePanel {...context} />
                         </div>
                     )}
                 </>