Merge branch 'searchfixes' of https://github.com/ethereum/remix-project into searchfixes

apps/remix-ide-e2e/src/tests/editor.test.ts

@@ -92,13 +92,13 @@ module.exports = {
       .executeScript('remix.exeCurrent()')
       .scrollToLine(32)
       .waitForElementPresent('.highlightLine33', 60000)
-      .checkElementStyle('.highlightLine33', 'background-color', 'rgb(44, 62, 80)')
+      .checkElementStyle('.highlightLine33', 'background-color', 'rgb(52, 152, 219)')
       .scrollToLine(40)
       .waitForElementPresent('.highlightLine41', 60000)
-      .checkElementStyle('.highlightLine41', 'background-color', 'rgb(44, 62, 80)')
+      .checkElementStyle('.highlightLine41', 'background-color', 'rgb(52, 152, 219)')
       .scrollToLine(50)
       .waitForElementPresent('.highlightLine51', 60000)
-      .checkElementStyle('.highlightLine51', 'background-color', 'rgb(44, 62, 80)')
+      .checkElementStyle('.highlightLine51', 'background-color', 'rgb(52, 152, 219)')
   },
 
   'Should remove 1 highlight from source code #group1': '' + function (browser: NightwatchBrowser) {
@@ -111,8 +111,8 @@ module.exports = {
       .waitForElementVisible('li[data-id="treeViewLitreeViewItemcontracts/3_Ballot.sol"]')
       .click('li[data-id="treeViewLitreeViewItemcontracts/3_Ballot.sol"]')
       .waitForElementNotPresent('.highlightLine33', 60000)
-      .checkElementStyle('.highlightLine41', 'background-color', 'rgb(44, 62, 80)')
-      .checkElementStyle('.highlightLine51', 'background-color', 'rgb(44, 62, 80)')
+      .checkElementStyle('.highlightLine41', 'background-color', 'rgb(52, 152, 219)')
+      .checkElementStyle('.highlightLine51', 'background-color', 'rgb(52, 152, 219)')
   },
 
   'Should remove all highlights from source code #group1': function (browser: NightwatchBrowser) {

apps/remix-ide/src/app/files/filesystems/fileSystemUtility.ts

@@ -43,6 +43,7 @@ export class fileSystemUtility {
     downloadBackup = async (fs: fileSystem) => {
         try {
             const zip = new JSZip()
+            zip.file("readme.txt", "This is a Remix backup file.\nThis zip should be used by the restore backup tool in Remix.\nThe .workspaces directory contains your workspaces.")
             await fs.checkWorkspaces()
             await this.copyFolderToJson('/', null, null, fs.fs, ({ path, content }) => {
                 zip.file(path, content)

apps/remix-ide/src/app/panels/tab-proxy.js

@@ -20,14 +20,15 @@ export class TabProxy extends Plugin {
     this._view = {}
     this._handlers = {}
     this.loadedTabs = []
-    this.el = document.createElement('div')
     this.dispatch = null
+    this.themeQuality = 'dark'
   }
 
   onActivation () {
     this.on('theme', 'themeChanged', (theme) => {
+      this.themeQuality = theme.quality
       // update invert for all icons
-      this.updateImgStyles()
+      this.renderComponent()
     })
 
     this.on('fileManager', 'filesAllClosed', () => {
@@ -157,13 +158,6 @@ export class TabProxy extends Plugin {
     this.tabsApi.activateTab(name)
   }
 
-  updateImgStyles () {
-    const images = this.el.getElementsByClassName('iconImage')
-    for (const element of images) {
-      this.call('theme', 'fixInvert', element)
-    }
-  }
-
   switchTab (tabName) {
     if (this._handlers[tabName]) {
       this._handlers[tabName].switchTo()
@@ -265,7 +259,6 @@ export class TabProxy extends Plugin {
     }
 
     this.renderComponent()
-    this.updateImgStyles()
     this._handlers[name] = { switchTo, close }
   }
 
@@ -277,7 +270,6 @@ export class TabProxy extends Plugin {
       return tab.name !== name
     })
     this.renderComponent()
-    this.updateImgStyles()
     if (previous) this.switchTab(previous.name)
   }
 
@@ -291,7 +283,7 @@ export class TabProxy extends Plugin {
   }
 
   updateComponent(state) {
-    return <TabsUI tabs={state.loadedTabs} onSelect={state.onSelect} onClose={state.onClose} onZoomIn={state.onZoomIn} onZoomOut={state.onZoomOut} onReady={state.onReady} />
+    return <TabsUI tabs={state.loadedTabs} onSelect={state.onSelect} onClose={state.onClose} onZoomIn={state.onZoomIn} onZoomOut={state.onZoomOut} onReady={state.onReady} themeQuality={state.themeQuality} />
   }
 
   renderComponent () {
@@ -322,7 +314,8 @@ export class TabProxy extends Plugin {
       onClose,
       onZoomIn,
       onZoomOut,
-      onReady
+      onReady,
+      themeQuality: this.themeQuality
     })
   }
 

apps/remix-ide/src/assets/css/themes/bootstrap-cerulean.min.css

@@ -32,6 +32,7 @@
     --light:#f8f9fa;
     --dark:#343a40;
     --body-bg: #fff;
+    --text-bg-mark: #fcf8e3;
     --breakpoint-xs:0;
     --breakpoint-sm:576px;
     --breakpoint-md:768px;
@@ -333,7 +334,7 @@ hr {
 }
 .mark,mark {
     padding:.2em;
-    background-color:#fcf8e3
+    background-color:var(--text-bg-mark);
 }
 .list-unstyled {
     padding-left:0;

apps/remix-ide/src/assets/css/themes/bootstrap-cyborg.min.css

@@ -34,6 +34,7 @@
     --light:#222;
     --dark:#adafae;
     --body-bg: #060606;
+    --text-bg-mark: #fcf8e3;
     --breakpoint-xs:0;
     --breakpoint-sm:576px;
     --breakpoint-md:768px;
@@ -335,7 +336,7 @@ hr {
 }
 .mark,mark {
     padding:.2em;
-    background-color:#fcf8e3
+    background-color:var(--text-bg-mark);
 }
 .list-unstyled {
     padding-left:0;

apps/remix-ide/src/assets/css/themes/bootstrap-flatly.min.css

@@ -32,6 +32,7 @@
 	--light:#ecf0f1;
 	--dark:#7b8a8b;
 	--body-bg: #fff;
+	--text-bg-mark: #fcf8e3;
 	--breakpoint-xs:0;
 	--breakpoint-sm:576px;
 	--breakpoint-md:768px;
@@ -331,7 +332,7 @@ hr {
 }
 .mark,mark {
 	padding:.2em;	
-	background-color:#fcf8e3
+	background-color: var(--text-bg-mark);
 }
 .list-unstyled {
 	padding-left:0;	

apps/remix-ide/src/assets/css/themes/bootstrap-spacelab.min.css

@@ -33,6 +33,7 @@
     --light:#eee;
     --dark:#333;
     --body-bg:#fff;
+    --text-bg-mark: #fcf8e3;
     --breakpoint-xs:0;
     --breakpoint-sm:576px;
     --breakpoint-md:768px;
@@ -334,7 +335,7 @@ hr {
 }
 .mark,mark {
     padding:.2em;
-    background-color:#fcf8e3
+    background-color: var(--text-bg-mark);
 }
 .list-unstyled {
     padding-left:0;

apps/remix-ide/src/assets/css/themes/remix-black_undtds.css

@@ -23,6 +23,7 @@
   --dark: #1a1a1a;
   --text: #babbcc;
   --body-bg: #1a1a1a;
+  --text-bg-mark: #a5a5a5;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
   --breakpoint-md: 768px;
@@ -413,7 +414,7 @@ small {
 .mark,
 mark {
   padding: 0.2em;
-  background-color: #fcf8e3;
+  background-color: var(--text-bg-mark);
 }
 .list-unstyled {
   padding-left: 0;

apps/remix-ide/src/assets/css/themes/remix-candy_ikhg4m.css

@@ -15,13 +15,14 @@
   --primary: #fc58a3;
   --secondary: #e2f5f2;
   --success: #24b882;
-  --info: #69c7e9;
+  --info: #00bbff;
   --warning: #fabe33;
   --danger: #f80b0b;
   --light: #fff;
   --dark: #645fb5;
   --text: #11556c;
   --body-bg: #d5efff;
+  --text-bg-mark: #fcf8e3;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
   --breakpoint-md: 768px;
@@ -476,7 +477,7 @@ small,
 mark,
 .mark {
   padding: 0.2em;
-  background-color: #fcf8e3;
+  background-color: var(--text-bg-mark);
 }
 
 .list-unstyled {

apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css

@@ -23,6 +23,7 @@
   --dark: #222336;
   --text: #babbcc;
   --text-background: #222336;
+  --text-bg-mark: #8388b2;
   --body-bg: #222336;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
@@ -411,7 +412,7 @@ small {
 .mark,
 mark {
   padding: 0.2em;
-  background-color: #fcf8e3;
+  background-color: var(--text-bg-mark);
 }
 .list-unstyled {
   padding-left: 0;

apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css

@@ -22,6 +22,7 @@
   --dark: #f8fafe;
   --text: #3b445e;
   --body-bg: #eef1f6;
+  --text-bg-mark: #fcf8e3;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
   --breakpoint-md: 768px;
@@ -472,7 +473,7 @@ small,
 mark,
 .mark {
   padding: 0.2em;
-  background-color: #fcf8e3;
+  background-color: var(--text-bg-mark);
 }
 
 .list-unstyled {

apps/remix-ide/src/assets/css/themes/remix-midcentury_hrzph3.css

@@ -15,13 +15,14 @@
   --primary: #5F5E2C;
   --secondary: #e2f5f2;
   --success: #01670f;
-  --info: #69c7e9;
+  --info: #259bc5;
   --warning: #f5ba30;
   --danger: #E64F29;
   --light: #eeede9;
   --dark: #01414E;
   --text: #11556c;
   --body-bg: #DBE2E0;
+  --text-bg-mark: #fcf8e3;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
   --breakpoint-md: 768px;
@@ -477,7 +478,7 @@ small,
 mark,
 .mark {
   padding: 0.2em;
-  background-color: #fcf8e3;
+  background-color: var(--text-bg-mark);
 }
 
 .list-unstyled {

libs/remix-ui/editor/src/lib/remix-ui-editor.css

@@ -21,6 +21,8 @@
 }
 
 .inline-class {
-    background: var(--primary) !important;
-    color: var(--text) !important;
+    background: var(--info) !important;
+    color: var(--white) !important;
+    filter: opacity(0.5);
+    font-weight: bolder;
 }

libs/remix-ui/editor/src/lib/remix-ui-editor.tsx

@@ -208,6 +208,7 @@ export const EditorUI = (props: EditorUIProps) => {
         'editor.lineHighlightBorder': secondaryColor,
         'editor.lineHighlightBackground': textbackground === darkColor ? lightColor : secondaryColor,
         'editorGutter.background': lightColor,
+        //'editor.selectionHighlightBackground': secondaryColor,
         'minimap.background': lightColor,
         'menu.foreground': textColor,
         'menu.background': textbackground,
@@ -254,7 +255,8 @@ export const EditorUI = (props: EditorUIProps) => {
     if (typeOfDecoration === 'markerPerFile') {
       decoration = decoration as sourceMarker
       let isWholeLine = false
-      if (decoration.position.start.line === decoration.position.end.line && decoration.position.end.column - decoration.position.start.column < 3) {
+      if ((decoration.position.start.line === decoration.position.end.line && decoration.position.end.column - decoration.position.start.column < 2) ||
+        (decoration.position.start.line !== decoration.position.end.line)) {
         // in this case we force highlighting the whole line (doesn't make sense to highlight 2 chars)
         isWholeLine = true
       }
@@ -263,7 +265,7 @@ export const EditorUI = (props: EditorUIProps) => {
         range: new monacoRef.current.Range(decoration.position.start.line + 1, decoration.position.start.column + 1, decoration.position.end.line + 1, decoration.position.end.column + 1),
         options: {
           isWholeLine,
-          inlineClassName: `inline-class border-0 selectionHighlight highlightLine${decoration.position.start.line + 1}`
+          inlineClassName: `${isWholeLine ? 'alert-info' : 'inline-class'}  border-0 highlightLine${decoration.position.start.line + 1}`
         }
       }
     }

libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx

@@ -197,6 +197,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
     try {
       plugin.call('notification', 'toast', 'preparing files for download, please wait..')
       const zip = new JSZip()
+      zip.file("readme.txt", "This is a Remix backup file.\nThis zip should be used by the restore backup tool in Remix.\nThe .workspaces directory contains your workspaces.")
       const browserProvider = fileManager.getProvider('browser')
       await browserProvider.copyFolderToJson('/', ({ path, content }) => {
         zip.file(path, content)

libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx

@@ -10,6 +10,7 @@ export interface TabsUIProps {
  onZoomOut: () => void
  onZoomIn: () => void
  onReady: (api: any) => void
+ themeQuality: "dark"
 }
 
 export interface TabsUIApi {
@@ -35,9 +36,11 @@ export const TabsUI = (props: TabsUIProps) => {
   const renderTab = (tab, index) => {
     const classNameImg = 'my-1 mr-1 text-dark ' + tab.iconClass
     const classNameTab = 'nav-item nav-link d-flex justify-content-center align-items-center px-2 py-1 tab' + (index === currentIndexRef.current ? ' active' : '')
+    const invert = props.themeQuality === 'dark' ? 'invert(1)' : 'invert(0)'
+
     return (
       <div ref={el => { tabsRef.current[index] = el }} className={classNameTab} data-id={index === currentIndexRef.current ? 'tab-active' : ''} title={tab.tooltip}>
-        {tab.icon ? (<img className="my-1 mr-1 iconImage" src={tab.icon} />) : (<i className={classNameImg}></i>)}
+        {tab.icon ? (<img className="my-1 mr-1 iconImage" style={{filter: invert}} src={tab.icon} />) : (<i className={classNameImg}></i>)}
         <span className="title-tabs">{tab.title}</span>
         <span className="close-tabs" onClick={(event) => { props.onClose(index); event.stopPropagation() }}>
           <i className="text-dark fas fa-times"></i>