add styling, resources

packages/codemirror/src/editor.ts

@@ -469,7 +469,7 @@ export class CodeMirrorEditor implements CodeEditor.IEditor {
    */
   revealSelection(selection: CodeEditor.IRange): void {
     const range = this._toCodeMirrorRange(selection);
-    this._editor.scrollIntoView(range);
+    this._editor.scrollIntoView(range); // TODO
   }
 
   /**

packages/codemirror/typings/codemirror/codemirror.d.ts

@@ -52,6 +52,12 @@ declare module 'codemirror' {
     handler: (instance: Editor, event: KeyboardEvent) => void
   ): void;
 
+  interface Editor {
+    /** Scrolls the given element into view. pos is a { from, to } object, in editor-local coordinates.
+     The margin parameter is optional. When given, it indicates the amount of pixels around the given area that should be made visible as well. */
+    scrollIntoView(pos: Range, margin?: number): void;
+  }
+
   interface Selection {
     /**
      * the fixed side of the selection

packages/documentsearch-extension/src/searchoverlay.tsx

@@ -9,11 +9,18 @@ import { IDisplayState, ISearchProvider } from '.';
 const OVERLAY_CLASS = 'jp-DocumentSearch-overlay';
 const INPUT_CLASS = 'jp-DocumentSearch-input';
 const INPUT_WRAPPER_CLASS = 'jp-DocumentSearch-input-wrapper';
-const INPUT_BUTTON_CLASS_OFF = 'jp-DocumentSearch-input-button-off';
-const INPUT_BUTTON_CLASS_ON = 'jp-DocumentSearch-input-button-on';
+const REGEX_BUTTON_CLASS_OFF =
+  'jp-DocumentSearch-input-button-off jp-DocumentSearch-regex-button';
+const REGEX_BUTTON_CLASS_ON =
+  'jp-DocumentSearch-input-button-on jp-DocumentSearch-regex-button';
+const CASE_BUTTON_CLASS_OFF =
+  'jp-DocumentSearch-input-button-off jp-DocumentSearch-case-button';
+const CASE_BUTTON_CLASS_ON =
+  'jp-DocumentSearch-input-button-on jp-DocumentSearch-case-button';
 const INDEX_COUNTER_CLASS = 'jp-DocumentSearch-index-counter';
 const UP_DOWN_BUTTON_WRAPPER_CLASS = 'jp-DocumentSearch-up-down-wrapper';
-const UP_DOWN_BUTTON_CLASS = 'jp-DocumentSearch-up-down-button-class';
+const UP_BUTTON_CLASS = 'jp-DocumentSearch-up-button';
+const DOWN_BUTTON_CLASS = 'jp-DocumentSearch-down-button';
 const CLOSE_BUTTON_CLASS = 'jp-DocumentSearch-close-button';
 const REGEX_ERROR_CLASS = 'jp-DocumentSearch-regex-error';
 
@@ -49,11 +56,11 @@ class SearchEntry extends React.Component<ISearchEntryProps> {
 
   render() {
     const caseButtonToggleClass = this.props.caseSensitive
-      ? INPUT_BUTTON_CLASS_ON
-      : INPUT_BUTTON_CLASS_OFF;
+      ? CASE_BUTTON_CLASS_ON
+      : CASE_BUTTON_CLASS_OFF;
     const regexButtonToggleClass = this.props.useRegex
-      ? INPUT_BUTTON_CLASS_ON
-      : INPUT_BUTTON_CLASS_OFF;
+      ? REGEX_BUTTON_CLASS_ON
+      : REGEX_BUTTON_CLASS_OFF;
 
     return (
       <div className={INPUT_WRAPPER_CLASS}>
@@ -68,15 +75,11 @@ class SearchEntry extends React.Component<ISearchEntryProps> {
         <button
           className={caseButtonToggleClass}
           onClick={() => this.props.onCaseSensitiveToggled()}
-        >
-          A<sup>a</sup>
-        </button>
+        />
         <button
           className={regexButtonToggleClass}
           onClick={() => this.props.onRegexToggled()}
-        >
-          .*
-        </button>
+        />
       </div>
     );
   }
@@ -91,17 +94,13 @@ function UpDownButtons(props: IUpDownProps) {
   return (
     <div className={UP_DOWN_BUTTON_WRAPPER_CLASS}>
       <button
-        className={UP_DOWN_BUTTON_CLASS}
+        className={UP_BUTTON_CLASS}
         onClick={() => props.onHighlightPrevious()}
-      >
-        ^
-      </button>
+      />
       <button
-        className={UP_DOWN_BUTTON_CLASS}
+        className={DOWN_BUTTON_CLASS}
         onClick={() => props.onHightlightNext()}
-      >
-        v
-      </button>
+      />
     </div>
   );
 }
@@ -114,11 +113,11 @@ interface ISearchIndexProps {
 function SearchIndices(props: ISearchIndexProps) {
   return (
     <>
-      <label className={INDEX_COUNTER_CLASS}>
+      <div className={INDEX_COUNTER_CLASS}>
         {props.totalMatches === 0
           ? '-/-'
           : `${props.currentIndex + 1}/${props.totalMatches}`}
-      </label>
+      </div>
     </>
   );
 }

packages/documentsearch-extension/style/index.css

@@ -15,7 +15,7 @@
   right: 0;
   z-index: 5;
   min-width: 300px;
-  padding: 3px;
+  padding: 2px;
   font-size: var(--jp-ui-font-size1);
 }
 
@@ -36,8 +36,18 @@
 
 .jp-DocumentSearch-input-wrapper button {
   outline: 0;
-  width: 25px;
+  border: none;
+  width: 20px;
   height: 20px;
+  background-color: var(--jp-layout-color0);
+}
+
+.jp-DocumentSearch-regex-button {
+  background-image: var(--jp-icon-search-regex);
+}
+
+.jp-DocumentSearch-case-button {
+  background-image: var(--jp-icon-search-case-sensitive);
 }
 
 .jp-DocumentSearch-input-button:before {
@@ -46,32 +56,44 @@
 }
 
 .jp-DocumentSearch-input-button-off {
-  border: none;
+  opacity: var(--jp-search-toggle-off-opacity);
 }
 
 .jp-DocumentSearch-input-button-off:hover {
-  border: 1px solid var(--jp-inverse-layout-color3);
+  opacity: var(--jp-search-toggle-hover-opacity);
 }
 
 .jp-DocumentSearch-input-button-on {
-  border: 1px solid var(--jp-inverse-layout-color0);
+  opacity: var(--jp-search-toggle-on-opacity);
 }
 
 .jp-DocumentSearch-index-counter {
-  padding-left: 5px;
+  padding-left: 10px;
+  padding-right: 10px;
   user-select: none;
+  min-width: 50px;
+  display: inline-block;
 }
 
 .jp-DocumentSearch-up-down-wrapper {
   display: inline-block;
 }
 
-.jp-DocumentSearch-up-down-button-class {
+.jp-DocumentSearch-up-down-wrapper button {
   outline: 0;
   border: none;
-  width: 25px;
+  width: 20px;
   height: 20px;
-  background: none;
+  padding-bottom: 5px;
+  background-color: var(--jp-layout-color0);
+}
+
+.jp-DocumentSearch-up-button {
+  background-image: var(--jp-icon-search-arrow-up);
+}
+
+.jp-DocumentSearch-down-button {
+  background-image: var(--jp-icon-search-arrow-down);
 }
 
 .jp-DocumentSearch-close-button {

packages/theme-dark-extension/style/icons/jupyter/search_arrow_down.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 22 20" style="enable-background:new 0 0 22 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#A5A5A5;}
+</style>
+<rect class="st0" width="22" height="20"/>
+<polygon class="st1" points="11,13.7 4.6,7.4 5.4,6.6 11,12.3 16.6,6.6 17.4,7.4 "/>
+</svg>

packages/theme-dark-extension/style/icons/jupyter/search_arrow_up.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Up" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 22 20" style="enable-background:new 0 0 22 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#A5A5A5;}
+</style>
+<rect class="st0" width="22" height="20"/>
+<polygon class="st1" points="16.6,13.4 11,7.7 5.4,13.4 4.6,12.6 11,6.3 17.4,12.6 "/>
+</svg>

packages/theme-dark-extension/style/icons/jupyter/search_case_sensitive.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#A5A5A5;}
+</style>
+<rect class="st0" width="20" height="20"/>
+<rect x="2" y="2" class="st1" width="16" height="16"/>
+<path d="M7.6,8h0.9l3.5,8h-1.1L10,14H6l-0.9,2H4L7.6,8z M8,9.1L6.4,13h3.2L8,9.1z"/>
+<path d="M16.6,9.8c-0.2,0.1-0.4,0.1-0.7,0.1c-0.2,0-0.4-0.1-0.6-0.2c-0.1-0.1-0.2-0.4-0.2-0.7c-0.3,0.3-0.6,0.5-0.9,0.7
+	c-0.3,0.1-0.7,0.2-1.1,0.2c-0.3,0-0.5,0-0.7-0.1c-0.2-0.1-0.4-0.2-0.6-0.3c-0.2-0.1-0.3-0.3-0.4-0.5c-0.1-0.2-0.1-0.4-0.1-0.7
+	c0-0.3,0.1-0.6,0.2-0.8c0.1-0.2,0.3-0.4,0.4-0.5C12,7,12.2,6.9,12.4,6.8s0.5-0.1,0.7-0.2c0.3-0.1,0.5-0.1,0.7-0.1
+	c0.2,0,0.4-0.1,0.6-0.1c0.2,0,0.3-0.1,0.4-0.2C15,6.1,15.1,6,15.1,5.8c0-1-1.1-1-1.3-1c-0.4,0-1.4,0-1.4,1.2h-0.9
+	c0-0.4,0.1-0.7,0.2-1c0.1-0.2,0.3-0.4,0.5-0.6c0.2-0.2,0.5-0.3,0.8-0.3C13.2,4,13.5,4,13.8,4c0.3,0,0.5,0,0.8,0.1
+	c0.3,0,0.5,0.1,0.7,0.2c0.2,0.1,0.4,0.3,0.5,0.5C15.9,5,16,5.2,16,5.6v2.9c0,0.2,0,0.4,0,0.5c0,0.1,0.1,0.2,0.3,0.2
+	c0.1,0,0.2,0,0.3,0V9.8z M15.1,6.9C13.9,7.5,12,7.1,12,8.3c0,1.4,3.1,1,3.1-0.5V6.9z"/>
+</svg>

packages/theme-dark-extension/style/icons/jupyter/search_regex.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#A5A5A5;}
+</style>
+<g id="Regex_Icon">
+	<rect class="st0" width="20" height="20"/>
+	<rect x="2" y="2" class="st1" width="16" height="16"/>
+	<circle cx="5.5" cy="14.5" r="1.5"/>
+	<g>
+		<rect x="12" y="4" width="1" height="8"/>
+		<rect x="12" y="4" transform="matrix(-0.5 -0.866 0.866 -0.5 11.8218 22.8253)" width="1" height="8"/>
+		<rect x="12" y="4" transform="matrix(-0.5 0.866 -0.866 -0.5 25.6782 1.1747)" width="1" height="8"/>
+	</g>
+</g>
+</svg>

packages/theme-dark-extension/style/urls.css

@@ -90,6 +90,10 @@
   --jp-icon-save: url('icons/md/save.svg');
   --jp-icon-search-white: url('icons/md/search.svg');
   --jp-icon-search: url('icons/md/search.svg');
+  --jp-icon-search-arrow-up: url('icons/jupyter/search_arrow_up.svg');
+  --jp-icon-search-arrow-down: url('icons/jupyter/search_arrow_down.svg');
+  --jp-icon-search-case-sensitive: url('icons/jupyter/search_case_sensitive.svg');
+  --jp-icon-search-regex: url('icons/jupyter/search_regex.svg');
   --jp-icon-settings: url('icons/jupyter/settings.svg');
   --jp-icon-spreadsheet-selected: url('icons/jupyter/csv_selected.svg');
   --jp-icon-spreadsheet: url('icons/jupyter/csv.svg');

packages/theme-dark-extension/style/variables.css

@@ -363,4 +363,10 @@ all of MD as it is not optimized for dense, information rich UIs.
   /* Sidebar-related styles */
 
   --jp-sidebar-min-width: 180px;
+
+  /* Search-related styles */
+
+  --jp-search-toggle-off-opacity: 0.5;
+  --jp-search-toggle-hover-opacity: 0.75;
+  --jp-search-toggle-on-opacity: 1;
 }

packages/theme-light-extension/style/icons/jupyter/search_arrow_down.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 22 20" style="enable-background:new 0 0 22 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#A5A5A5;}
+</style>
+<rect class="st0" width="22" height="20"/>
+<polygon class="st1" points="11,13.7 4.6,7.4 5.4,6.6 11,12.3 16.6,6.6 17.4,7.4 "/>
+</svg>

packages/theme-light-extension/style/icons/jupyter/search_arrow_up.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Up" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 22 20" style="enable-background:new 0 0 22 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#A5A5A5;}
+</style>
+<rect class="st0" width="22" height="20"/>
+<polygon class="st1" points="16.6,13.4 11,7.7 5.4,13.4 4.6,12.6 11,6.3 17.4,12.6 "/>
+</svg>

packages/theme-light-extension/style/icons/jupyter/search_case_sensitive.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#A5A5A5;}
+</style>
+<rect class="st0" width="20" height="20"/>
+<rect x="2" y="2" class="st1" width="16" height="16"/>
+<path d="M7.6,8h0.9l3.5,8h-1.1L10,14H6l-0.9,2H4L7.6,8z M8,9.1L6.4,13h3.2L8,9.1z"/>
+<path d="M16.6,9.8c-0.2,0.1-0.4,0.1-0.7,0.1c-0.2,0-0.4-0.1-0.6-0.2c-0.1-0.1-0.2-0.4-0.2-0.7c-0.3,0.3-0.6,0.5-0.9,0.7
+	c-0.3,0.1-0.7,0.2-1.1,0.2c-0.3,0-0.5,0-0.7-0.1c-0.2-0.1-0.4-0.2-0.6-0.3c-0.2-0.1-0.3-0.3-0.4-0.5c-0.1-0.2-0.1-0.4-0.1-0.7
+	c0-0.3,0.1-0.6,0.2-0.8c0.1-0.2,0.3-0.4,0.4-0.5C12,7,12.2,6.9,12.4,6.8s0.5-0.1,0.7-0.2c0.3-0.1,0.5-0.1,0.7-0.1
+	c0.2,0,0.4-0.1,0.6-0.1c0.2,0,0.3-0.1,0.4-0.2C15,6.1,15.1,6,15.1,5.8c0-1-1.1-1-1.3-1c-0.4,0-1.4,0-1.4,1.2h-0.9
+	c0-0.4,0.1-0.7,0.2-1c0.1-0.2,0.3-0.4,0.5-0.6c0.2-0.2,0.5-0.3,0.8-0.3C13.2,4,13.5,4,13.8,4c0.3,0,0.5,0,0.8,0.1
+	c0.3,0,0.5,0.1,0.7,0.2c0.2,0.1,0.4,0.3,0.5,0.5C15.9,5,16,5.2,16,5.6v2.9c0,0.2,0,0.4,0,0.5c0,0.1,0.1,0.2,0.3,0.2
+	c0.1,0,0.2,0,0.3,0V9.8z M15.1,6.9C13.9,7.5,12,7.1,12,8.3c0,1.4,3.1,1,3.1-0.5V6.9z"/>
+</svg>

packages/theme-light-extension/style/icons/jupyter/search_regex.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#A5A5A5;}
+</style>
+<g id="Regex_Icon">
+	<rect class="st0" width="20" height="20"/>
+	<rect x="2" y="2" class="st1" width="16" height="16"/>
+	<circle cx="5.5" cy="14.5" r="1.5"/>
+	<g>
+		<rect x="12" y="4" width="1" height="8"/>
+		<rect x="12" y="4" transform="matrix(-0.5 -0.866 0.866 -0.5 11.8218 22.8253)" width="1" height="8"/>
+		<rect x="12" y="4" transform="matrix(-0.5 0.866 -0.866 -0.5 25.6782 1.1747)" width="1" height="8"/>
+	</g>
+</g>
+</svg>

packages/theme-light-extension/style/urls.css

@@ -89,6 +89,10 @@
   --jp-icon-save: url('icons/md/save.svg');
   --jp-icon-search-white: url('icons/md/search-white.svg');
   --jp-icon-search: url('icons/md/search.svg');
+  --jp-icon-search-arrow-up: url('icons/jupyter/search_arrow_up.svg');
+  --jp-icon-search-arrow-down: url('icons/jupyter/search_arrow_down.svg');
+  --jp-icon-search-case-sensitive: url('icons/jupyter/search_case_sensitive.svg');
+  --jp-icon-search-regex: url('icons/jupyter/search_regex.svg');
   --jp-icon-settings: url('icons/jupyter/settings.svg');
   --jp-icon-spreadsheet-selected: url('icons/jupyter/csv_selected.svg');
   --jp-icon-spreadsheet: url('icons/jupyter/csv.svg');

packages/theme-light-extension/style/variables.css

@@ -360,4 +360,10 @@ all of MD as it is not optimized for dense, information rich UIs.
   /* Sidebar-related styles */
 
   --jp-sidebar-min-width: 180px;
+
+  /* Search-related styles */
+
+  --jp-search-toggle-off-opacity: 0.4;
+  --jp-search-toggle-hover-opacity: 0.65;
+  --jp-search-toggle-on-opacity: 1;
 }