diff --git a/src/search-injection/components/Results.tsx b/src/search-injection/components/Results.tsx index 6114a3f32c..560bae3d58 100644 --- a/src/search-injection/components/Results.tsx +++ b/src/search-injection/components/Results.tsx @@ -111,32 +111,37 @@ class Results extends React.Component { onClick={props.seeMoreResults} /> - - - props.toggleStickyContainer( - !this.props.isSticky, - ) - } - background={ - this.props.isSticky - ? 'greyScale3' - : null - } - /> - + {!( + this.props.searchEngine === 'brave' || + this.props.searchEngine === 'duckduckgo' + ) && ( + + + props.toggleStickyContainer( + !this.props.isSticky, + ) + } + background={ + this.props.isSticky + ? 'greyScale3' + : null + } + /> + + )} { constants.REACT_ROOTS.searchEngineInjection, ) - if (isSticky) { + if ( + isSticky && + !( + this.props.searchEngine === 'brave' || + this.props.searchEngine === 'duckduckgo' + ) + ) { target.style.position = 'sticky' target.style.top = '100px' target.style.zIndex = '100' @@ -424,7 +430,12 @@ class Container extends React.Component { renderResultItems={this.renderResultItems} renderNotification={this.renderNotification()} getRootElement={this.props.getRootElement} - isSticky={this.state.isStickyContainer} + isSticky={ + !( + this.props.searchEngine === 'brave' || + this.props.searchEngine === 'duckduckgo' + ) && this.state.isStickyContainer + } toggleStickyContainer={this.toggleStickyContainer} updateQuery={this.props.updateQuery} query={this.props.query} diff --git a/src/search-injection/constants.ts b/src/search-injection/constants.ts index c16ea2a830..5fa432548c 100644 --- a/src/search-injection/constants.ts +++ b/src/search-injection/constants.ts @@ -27,7 +27,7 @@ export const SEARCH_ENGINES: { duckduckgo: { regex: /(http[s]?:\/\/)?(www.)?duckduckgo[.\w]+\/.*?[?&]q=.*/, container: { - above: 'results--main', + above: 'js-react-sidebar', side: 'js-react-sidebar', }, containerType: 'class', @@ -35,18 +35,18 @@ export const SEARCH_ENGINES: { brave: { regex: /(http[s]?:\/\/)?(www.)?brave[.\w]+\/search\?.*/, container: { - above: 'results', - side: 'side-right', - sideAlternative: 'rcnt', + above: 'sidebar', + side: 'sidebar', + sideAlternative: 'sidebar', }, containerType: 'id', }, bing: { regex: /(http[s]?:\/\/)?(www.)?bing[.\w]+\/search\?.*/, container: { - above: 'b_results', + above: 'b_context', side: 'b_context', - sideAlternative: 'rcnt', + sideAlternative: 'b_context', }, containerType: 'id', }, diff --git a/src/search-injection/searchInjection.tsx b/src/search-injection/searchInjection.tsx index e6aac043c0..d6fcdfd1d0 100644 --- a/src/search-injection/searchInjection.tsx +++ b/src/search-injection/searchInjection.tsx @@ -257,12 +257,12 @@ export const handleRenderSearchInjection = async ( } if (searchEngine === 'brave') { - const suggestionsContainer = document.getElementById( + const suggestionsContainer = document.getElementsByClassName( searchEngineObj.container.side, - ) - const containerWithSuggestions = document.getElementById( + )[0] as HTMLElement + const containerWithSuggestions = document.getElementsByClassName( searchEngineObj.container.sideAlternative, - ) + )[0] as HTMLElement if (position === 'side') { if (!suggestionsContainer) { @@ -284,9 +284,9 @@ export const handleRenderSearchInjection = async ( ) } } else { - const containerAbove = document.getElementById( + const containerAbove = document.getElementsByClassName( searchEngineObj.container.above, - ) + )[0] as HTMLElement containerAbove.insertBefore(root, containerAbove.firstChild) } } @@ -410,9 +410,19 @@ export const handleRenderSearchInjection = async ( } }) - const targetNode = document.getElementById( - constants.SEARCH_ENGINES[searchEngine].container.sideAlternative, - ) + let targetNode = null + + if (searchEngine === 'brave' || searchEngine === 'duckduckgo') { + targetNode = document.getElementsByClassName( + constants.SEARCH_ENGINES[searchEngine].container.sideAlternative, + )[0] as HTMLElement + targetNode.style.overflow = 'visible' + } else { + targetNode = document.getElementById( + constants.SEARCH_ENGINES[searchEngine].container.sideAlternative, + ) + } + const existingInjection = document.getElementById( '__MEMEX-SEARCH-INJECTION-ROOT', )