fix theming for github.com

Uses the latest CSS classes that GitHub.com uses, which fixes the theming.

Author: sqs

client/browser/src/shared/code-hosts/github/codeHost.module.scss

@@ -3,8 +3,8 @@
 :root {
  // Map out CSS variables to the theme-aware GitHub ones
  // Latest variable, backwards compat (GitHub Enterprise) fallback, last-resort fallback to Sourcegraph color (in case GitHub changes its variables again)
- --body-bg: var(--color-canvas-default, var(--color-bg-canvas, var(--white)));
- --border-color: var(--color-border-default, var(--color-border-primary, var(--secondary)));
+ --body-bg: var(--bgColor-default, var(--color-canvas-default, var(--color-bg-canvas, var(--white))));
+ --border-color: var(--borderColor-default, var(--color-border-default, var(--color-border-primary, var(--secondary))));
  --secondary: var(--color-btn-bg, var(--color-auto-gray-2), var(--gray-06));
 }
 
@@ -18,19 +18,12 @@
  }
 }
 
-.action-item {
- /* Match GitHub's button height even if button only contains icon
- * (no text that would push the height) */
- height: 28px;
-}
-
 .icon {
  height: 16px;
  width: 16px;
 }
 
 .code-view-toolbar {
- margin-bottom: -4px;
  text-align: right;
 }
 
@@ -44,7 +37,6 @@
 .code-view-toolbar-item {
  /* The space provides enough margin */
  margin-left: 0 !important;
- margin-bottom: 4px;
 }
 
 .hover-overlay-badge {

client/browser/src/shared/code-hosts/github/codeHost.tsx

@@ -32,11 +32,11 @@ import type { ViewResolver } from '../shared/views'
 import { diffDomFunctions, searchCodeSnippetDOMFunctions, singleFileDOMFunctions } from './domFunctions'
 import { resolveDiffFileInfo, resolveFileInfo, resolveSnippetFileInfo } from './fileInfo'
 import {
+ getEmbeddedData,
  getFileContainers,
- parseURL,
  getSelectorFor,
  isNewGitHubUI,
- getEmbeddedData,
+ parseURL,
  windowLocation__testingOnly,
 } from './util'
 
@@ -725,14 +725,14 @@ export const githubCodeHost: GithubCodeHost = {
  }),
  getViewContextOnSourcegraphMount: createOpenOnSourcegraphIfNotExists,
  viewOnSourcegraphButtonClassProps: {
- className: 'btn btn-sm tooltipped tooltipped-s',
+ className: 'Button Button--iconOnly Button--secondary Button--medium AppHeader-button',
  iconClassName,
  },
  check: checkIsGitHub,
  codeViewToolbarClassProps: {
  className: styles.codeViewToolbar,
  listItemClass: classNames(styles.codeViewToolbarItem, 'BtnGroup'),
- actionItemClass: classNames('btn btn-sm tooltipped tooltipped-s BtnGroup-item', styles.actionItem),
+ actionItemClass: 'Button Button--iconOnly Button--secondary Button--medium',
  actionItemPressedClass: 'selected',
  actionItemIconClass: classNames(styles.icon, 'v-align-text-bottom'),
  },

client/browser/src/shared/code-hosts/shared/codeHost.module.scss

@@ -1,4 +1,9 @@
 .hover-overlay {
  isolation: isolate;
  z-index: 2000 !important;
+ min-width: 20rem !important;
+}
+
+.badge-hidden {
+ display: none !important;
 }

client/browser/src/shared/code-hosts/shared/codeHost.tsx

@@ -7,35 +7,35 @@ import type { Renderer } from 'react-dom'
 import { createRoot } from 'react-dom/client'
 import {
  asyncScheduler,
+ BehaviorSubject,
  combineLatest,
+ concat,
  EMPTY,
  from,
+ fromEvent,
+ lastValueFrom,
  type Observable,
  of,
  Subject,
  Subscription,
- type Unsubscribable,
- concat,
- BehaviorSubject,
- fromEvent,
- lastValueFrom,
  throwError,
+ type Unsubscribable,
 } from 'rxjs'
 import {
  catchError,
  concatAll,
  concatMap,
+ distinctUntilChanged,
  filter,
  map,
  mergeMap,
  observeOn,
- switchMap,
- withLatestFrom,
- tap,
- startWith,
- distinctUntilChanged,
  retry,
+ startWith,
+ switchMap,
  take,
+ tap,
+ withLatestFrom,
 } from 'rxjs/operators'
 
 import type { HoverMerged } from '@sourcegraph/client-api'
@@ -51,11 +51,11 @@ import {
  asError,
  asObservable,
  isDefined,
+ isExternalLink,
  isInstanceOf,
+ type LineOrPositionOrRange,
  property,
  registerHighlightContributions,
- isExternalLink,
- type LineOrPositionOrRange,
 } from '@sourcegraph/common'
 import type { WorkspaceRoot } from '@sourcegraph/extension-api-types'
 import { gql, isHTTPAuthError } from '@sourcegraph/http-client'
@@ -72,18 +72,18 @@ import {
 } from '@sourcegraph/shared/src/hover/HoverOverlay'
 import { getModeFromPath } from '@sourcegraph/shared/src/languages'
 import type { PlatformContext, URLToFileContext } from '@sourcegraph/shared/src/platform/context'
-import { TelemetryV2Props } from '@sourcegraph/shared/src/telemetry'
+import { type TelemetryV2Props } from '@sourcegraph/shared/src/telemetry'
 import type { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
 import { createURLWithUTM } from '@sourcegraph/shared/src/tracking/utm'
 import {
  type FileSpec,
- type UIPositionSpec,
+ makeRepoGitURI,
  type RawRepoSpec,
  type RepoSpec,
  type ResolvedRevisionSpec,
  type RevisionSpec,
+ type UIPositionSpec,
  type ViewStateSpec,
- makeRepoGitURI,
 } from '@sourcegraph/shared/src/util/url'
 
 import { background } from '../../../browser-extension/web-extension-api/runtime'
@@ -95,8 +95,8 @@ import { CodeViewToolbar, type CodeViewToolbarClassProps } from '../../component
 import { TrackAnchorClick } from '../../components/TrackAnchorClick'
 import { WildcardThemeProvider } from '../../components/WildcardThemeProvider'
 import { isExtension, isInPage } from '../../context'
-import type { SourcegraphIntegrationURLs, BrowserPlatformContext } from '../../platform/context'
-import { resolveRevision, retryWhenCloneInProgressError, resolvePrivateRepo } from '../../repo/backend'
+import type { BrowserPlatformContext, SourcegraphIntegrationURLs } from '../../platform/context'
+import { resolvePrivateRepo, resolveRevision, retryWhenCloneInProgressError } from '../../repo/backend'
 import { ConditionalTelemetryRecorderProvider } from '../../telemetry'
 import { ConditionalTelemetryService, EventLogger } from '../../tracking/eventLogger'
 import { DEFAULT_SOURCEGRAPH_URL, getPlatformName, isDefaultSourcegraphUrl } from '../../util/context'
@@ -109,16 +109,16 @@ import { type GithubCodeHost, githubCodeHost, isGithubCodeHost } from '../github
 import { gitlabCodeHost } from '../gitlab/codeHost'
 import { phabricatorCodeHost } from '../phabricator/codeHost'
 
-import { type CodeView, trackCodeViews, fetchFileContentForDiffOrFileInfo } from './codeViews'
+import { type CodeView, fetchFileContentForDiffOrFileInfo, trackCodeViews } from './codeViews'
 import { NotAuthenticatedError, RepoURLParseError } from './errors'
 import { initializeExtensions } from './extensions'
 import { SignInButton } from './SignInButton'
-import { resolveRepoNamesForDiffOrFileInfo, defaultRevisionToCommitID } from './util/fileInfo'
+import { defaultRevisionToCommitID, resolveRepoNamesForDiffOrFileInfo } from './util/fileInfo'
 import { lprToSelectionsZeroIndexed } from './util/selections'
 import {
- type ViewOnSourcegraphButtonClassProps,
- ViewOnSourcegraphButton,
  ConfigureSourcegraphButton,
+ ViewOnSourcegraphButton,
+ type ViewOnSourcegraphButtonClassProps,
 } from './ViewOnSourcegraphButton'
 import { delayUntilIntersecting, trackViews, type ViewResolver } from './views'
 
@@ -227,7 +227,6 @@ export interface CodeHost {
 
  /**
  * Construct the URL to the specified file.
- *
  * @param sourcegraphURL The URL of the Sourcegraph instance.
  * @param target The target to build a URL for.
  * @param context Context information about this invocation.
@@ -474,6 +473,7 @@ function initCodeIntelligence({
  <HoverOverlay
  {...this.state.hoverOverlayProps}
  {...codeHost.hoverOverlayClassProps}
+ badgeClassName={styles.badgeHidden} // hide badges in browser ext
  className={classNames(styles.hoverOverlay, codeHost.hoverOverlayClassProps?.className)}
  telemetryService={telemetryService}
  telemetryRecorder={telemetryRecorder}
@@ -748,7 +748,7 @@ export async function handleCodeHost({
  * active Sourcegraph URL.
  * 2. It is a repository not added to the Sourcegraph instance (other than Cloud).
  * If the current state is `true`, we can short circuit subsequent requests.
- * */
+ */
  const repoSyncErrors = new BehaviorSubject<boolean>(false)
  // Set by `ViewOnSourcegraphButton` (cleans up and sets to `false` whenever it is unmounted).
  const setRepoSyncError = repoSyncErrors.next.bind(repoSyncErrors)
@@ -759,7 +759,7 @@ export async function handleCodeHost({
  * - repository is not added to other than Cloud Sourcegraph instance.
  *
  * (no side effects, doesn't notify `repoSyncErrors`)
- * */
+ */
  const checkRepoSyncError = async (error: any): Promise<boolean> =>
  isRepoNotFoundErrorLike(error) &&
  (isDefaultSourcegraphUrl(sourcegraphURL) ? !!(await codeHost.getContext?.())?.privateRepository : true)

client/browser/src/shared/platform/inlineExtensionsService.ts

@@ -51,13 +51,22 @@ export function getInlineExtensions(assetsURL: string): Observable<ExecutableExt
  promises.push(
  fetch(manifestURL)
  .then(response => checkOk(response).json())
- .then(
- (manifest: ExtensionManifest): ExecutableExtension => ({
+ .then((manifest: ExtensionManifest): ExecutableExtension => {
+ // HACK(sqs): Remove the not-super-useful "Find implementations" action.
+ try {
+ if (manifest.contributes?.actions) {
+ manifest.contributes.actions = []
+ }
+ } catch {
+ /* noop */
+ }
+
+ return {
  id: extensionID,
  manifest,
  scriptURL,
- })
- )
+ }
+ })
  )
  }
 

client/build-config/src/esbuild/stylePlugin.ts

@@ -1,7 +1,7 @@
 import fs from 'fs'
 import path from 'path'
 
-import { ResolverFactory, CachedInputFileSystem } from 'enhanced-resolve'
+import { CachedInputFileSystem, ResolverFactory } from 'enhanced-resolve'
 import type esbuild from 'esbuild'
 import postcss from 'postcss'
 import postcssModules from 'postcss-modules'
@@ -27,7 +27,7 @@ export const stylePlugin: esbuild.Plugin = {
 
  const modulesMap = new Map<string, string>()
  const modulesPlugin = postcssModules({
- generateScopedName: '[name]__[local]', // omit hash for local dev
+ generateScopedName: '[name]__[local]___[hash:base64:5]',
  localsConvention: 'camelCase',
  getJSON: (cssPath, json) => modulesMap.set(cssPath, JSON.stringify(json)),
  })
@@ -46,7 +46,7 @@ export const stylePlugin: esbuild.Plugin = {
  const isSCSS = inputPath.endsWith('.scss')
  const sassResult = isSCSS
  ? // renderSync is ~20% faster than render with an async callback (because it's blocked on CPU, not IO).
- // eslint-disable-next-line no-sync
+
  sass.renderSync({
  file: inputPath,
  data: inputContents,