vscode-vibrancy

README.md

@@ -1,89 +1,53 @@
-# Custom CSS and JS
+# Visual Studio Code Extension - Vibrancy
 
-### **SPECIAL NOTE: If Code complains about that it is corrupted, simply click “Don't show again”.**
+Enable Acrylic/Glass effect for your VS Code.
-### **NOTE: Every time after Code is updated, please re-enable Custom CSS.**
-### **NOTE: Every time you change the configuration, please re-enable Custom CSS.**
 
-Custom CSS to your VS Code. Based on [robertohuertasm](https://github.com/robertohuertasm)’s [vscode-icons](https://github.com/robertohuertasm/vscode-icons).
+![screenshot](./screenshot.png)
 
-![screenshot](https://raw.githubusercontent.com/be5invis/vscode-custom-css/master/screenshot.png)
+[![](https://vsmarketplacebadge.apphb.com/version/eyhn.vscode-vibrancy.svg)](https://marketplace.visualstudio.com/items?itemName=eyhn.vscode-vibrancy) 
+[![](https://img.shields.io/visual-studio-marketplace/stars/eyhn.vscode-vibrancy.svg)](https://marketplace.visualstudio.com/items?itemName=eyhn.vscode-vibrancy)
+
+[![](https://img.shields.io/github/stars/eyhn/vscode-vibrancy.svg?style=social)](https://github.com/eyhn/vscode-vibrancy) 
+[![](https://img.shields.io/github/watchers/eyhn/vscode-vibrancy.svg?style=social)](https://github.com/eyhn/vscode-vibrancy)
+
+Links: [Github](https://github.com/eyhn/vscode-vibrancy)  [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=eyhn.vscode-vibrancy)
+
+## Supported Operating Systems
+
+Windows 10 ✔
+
+MacOS ✔
 
 ## Getting Started
 
-1. Install this extension.
+1. Make sure the color theme you selected is the 'Dark+ (default)'
 
-2. Add to `settings.json`:
+![step-1](./step-1.png)
 
-   ```json
+2. Install this extension from [the Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=eyhn.vscode-vibrancy).
-       "vscode_custom_css.imports": [""],
-       "vscode_custom_css.policy": true,
-   ```
 
-   **VERY IMPORTANT**: Items in `vscode_custom_css.imports` must be **URL**s. Plain file paths are **NOT URLs**.
+3. Press F1 and Activate command "Reload Vibrancy".
 
-   - **Windows File URL Example**: `file:///C:/Users/MyUserName/Documents/custom.css`
+![step-3](./step-3.png)
-     - The `C:/` part is **REQUIRED.**
 
-   - **MacOS and Linux File URL Example**: `file:///Users/MyUserName/Documents/custom.css`
+4. Restart.
-   - [See here](https://en.wikipedia.org/wiki/File_URI_scheme) for more details.
 
-3. Restart VSCode with proper permission to modify itself:
+Every time after Code is updated, please re-enable vibrancy.
 
-   1. **Windows**: Restart with Administrator Permission.
+## Warns：
+This extension works by editting the vscode's css file.
+So, a information appears while the first time to install or vscode update.U can click the [never show again] to avoid it.
 
-   2. **MacOS and Linux**: See instructions below.
+![screenshot](./warns.png)
 
-4. Activate command "Reload Custom CSS and JS".
+## FAQs
 
-5. Restart.
+### How to uninstall?
 
+Press F1 and Activate command "Disable Vibrancy", and Restart Visual Studio Code.
 
-## Extension commands
+## Thanks ⭐
 
-As you know to access the command palette and introduce commands you can use ***F1*** (all OS), ***Ctrl+Shift+P*** (Windows & Linux) or ***Cmd+Shift+P*** (OS X).
+[be5invis/vscode-custom-css](https://github.com/be5invis/vscode-custom-css) : The basis of this extension program
 
-- ***Enable Custom CSS and JS*** : It enables custom CSS and JS URLs listed in “`vscode_custom_css.imports`”, an array containing URLs of your custom CSS and JS files, in your user settings.
+[DIYgod](https://github.com/microsoft/vscode/issues/32257#issuecomment-509936623) : Fix issues with VSCode 1.36
-- ***Disable Custom CSS and JS***: It will disable custom CSS.
-- ***Reload Custom CSS and JS***: Disable and then re-enable it.
-
-## Windows users
-
-**In Windows, make sure you run your VS Code in Administrator mode before enabling or disabling your custom style!**
-
-## Mac and Linux users
-**The extension would NOT if Code cannot modify itself.** The cases include:
-
-- Code files being read-only, like on a read-only file system or,
-- Code is not started with the permissions to modify itself.
-
-**You need to claim ownership on Code's installation directory, by running this command**:
-
-```sh
-sudo chown -R $(whoami) <Path to Code>
-```
-
-The placeholder `<Path to Code>` means the path to VSCode installation. It is typically:
-
-- `/Applications/Visual Studio Code.app/Contents/MacOS/Electron`, on MacOS;
-- `/Applications/Visual Studio Code - Insiders.app/Contents/MacOS/Electron`, on MacOS when using Insiders branch;
-- `/usr/share/code`, on most Linux;
-- `/opt/visual-studio-code/` on Arch Linux.
-
-Mac and Linux package managers may have customized installation path. Please double check your path is correct.
-
-# Disclaimer
-
-This extension modifies some VS Code files so use it at your own risk.
-Currently, icons are not supported by the extension functionality that VS Code provides so this extension solves this issue by injecting code into:
-
-- `electron-browser/index.html`.
-
-The extension will keep a copy of the original file in case something goes wrong. That's what the disable command will do for you.
-
-As this extension modifies VS Code files it will get disabled with every VS Code update. You will have to enable icons again via command palette.
-
-Take into account that this extension is still in beta so you may find some bugs while playing with it. Please, report them to [the issues section of the Github's repo](https://github.com/be5invis/vscode-custom-css/issues).
-
-**Please, leave a review if you can so the VS Code Team can know that this is a very demanded feature and, maybe, they can then provide a proper way to extend the IDE regarding icons and customizations soon enough. ;D**
-
-More file extensions will be supported shortly!

package-lock.json

@@ -1,6 +1,6 @@
 {
-	"name": "vscode-custom-css",
+	"name": "vscode-vibrancy",
-	"version": "3.0.3",
+	"version": "1.0.0",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {

package.json

@@ -1,13 +1,13 @@
 {
-  "name": "vscode-custom-css",
+  "name": "vscode-vibrancy",
-  "displayName": "Custom CSS and JS Loader",
+  "displayName": "Vibrancy",
-  "description": "Custom CSS and JS for Visual Studio Code",
+  "description": "Vibrancy Effect for Visual Studio Code",
-  "version": "3.0.4",
+  "version": "1.0.1",
-  "publisher": "be5invis",
+  "publisher": "eyhn",
   "author": {
-    "email": "belleve@typeof.net",
+    "email": "cneyhn@gmail.com",
-    "name": "Belleve Invis",
+    "name": "eyhn",
-    "url": "https://typeof.net"
+    "url": "https://eyhn.in"
   },
   "engines": {
     "vscode": "^1.28.0"
@@ -18,10 +18,10 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/be5invis/vscode-custom-css"
+    "url": "https://github.com/EYHN/vscode-vibrancy"
   },
   "bugs": {
-    "url": "https://github.com/be5invis/vscode-custom-css/issues"
+    "url": "https://github.com/EYHN/vscode-vibrancy/issues"
   },
   "preview": true,
   "icon": "images/logo.png",
@@ -35,47 +35,22 @@
   "contributes": {
     "commands": [
       {
-        "command": "extension.installCustomCSS",
+        "command": "extension.installVibrancy",
-        "title": "Enable Custom CSS and JS"
+        "title": "Enable Vibrancy"
       },
       {
-        "command": "extension.uninstallCustomCSS",
+        "command": "extension.uninstallVibrancy",
-        "title": "Disable Custom CSS and JS"
+        "title": "Disable Vibrancy"
       },
       {
-        "command": "extension.updateCustomCSS",
+        "command": "extension.updateVibrancy",
-        "title": "Reload Custom CSS and JS"
+        "title": "Reload Vibrancy"
       }
-    ],
+    ]
-    "configuration": {
-      "title": "Custom CSS/JS Configuration",
-      "properties": {
-        "vscode_custom_css.imports": {
-          "description": "Custom CSS/JS files, as an array of URLs, not file paths",
-          "type": "array",
-          "default": []
-        },
-        "vscode_custom_css.statusbar": {
-          "description": "Enable Status Indicator",
-          "type": "boolean",
-          "default": true
-        },
-        "vscode_custom_css.policy": {
-          "description": "Disable vscode Content Policy (required if loading from URL)",
-          "type": "boolean",
-          "default": false
-        }
-      }
-    }
   },
   "devDependencies": {},
   "dependencies": {
     "file-url": "^2.0.2",
     "xmlhttprequest": "^1.8.0"
-  },
-  "__metadata": {
-    "id": "1b160753-ae5e-42bb-82ad-d115ce5c10f4",
-    "publisherDisplayName": "be5invis",
-    "publisherId": "8c148d69-cbc6-480b-bd8b-a42715926324"
   }
 }

src/extension.js

@@ -9,7 +9,7 @@ var fileUrl = require('file-url');
 
 function activate(context) {
 
-	console.log('vscode-customcss is active!');
+	console.log('vscode-vibrancy is active!');
 
 	process.on('uncaughtException', function (err) {
 		if (/ENOENT|EACCES|EPERM/.test(err.code)) {
@@ -25,7 +25,130 @@ function activate(context) {
 	var base = appDir + (isWin ? '\\vs\\code' : '/vs/code');
 
 	var htmlFile = base + (isWin ? '\\electron-browser\\workbench\\workbench.html' : '/electron-browser/workbench/workbench.html');
-	var htmlFileBack = base + (isWin ? '\\electron-browser\\workbench\\workbench.html.bak-customcss' : '/electron-browser/workbench/workbench.bak-customcss');
+	var htmlFileBack = base + (isWin ? '\\electron-browser\\workbench\\workbench.html.bak-vibrancy' : '/electron-browser/workbench/workbench.bak-vibrancy');
+
+	var injectHTML = `
+	<script>
+	w = nodeRequire('electron')
+   .remote
+   .getCurrentWindow();
+
+	w.setBackgroundColor('#00000000');
+
+	${isWin ? 
+		`
+		bbnative = nodeRequire(${JSON.stringify(__dirname + '\\blurbehind.node')});
+		bbnative.blurbehind(w.getNativeWindowHandle(), true);
+		` :
+		`w.setVibrancy('ultra-dark');`
+	}
+	
+	// hack
+	const width = w.getBounds().width;
+	w.setBounds({
+			width: width + 1,
+	});
+	w.setBounds({
+			width,
+	});
+
+	</script>
+
+	<style>
+	html {
+		background: 'transparent' !important;
+	}
+	
+	.scroll-decoration {
+		box-shadow: none !important;
+	}
+	
+	.minimap, .editor-scrollable>.decorationsOverviewRuler {
+		opacity: 0.6;
+	}
+	
+	.editor-container {
+		background: transparent !important;
+	}
+	
+	.search-view .search-widget .input-box, .search-view .search-widget .input-box .monaco-inputbox,
+	.monaco-workbench>.part.editor>.content>.one-editor-silo>.container>.title .tabs-container>.tab,
+	.monaco-editor-background,
+	.monaco-editor .margin,
+	.monaco-workbench>.part>.content,
+	.monaco-workbench>.editor>.content>.one-editor-silo.editor-one,
+	.monaco-workbench>.part.editor>.content>.one-editor-silo>.container>.title,
+	.monaco-workbench>.part>.title,
+	.monaco-workbench,
+	.monaco-workbench>.part,
+	body {
+		background: transparent !important;
+	}
+	
+	.editor-group-container>.tabs {
+		background-color: transparent !important;
+	}
+	
+	.editor-group-container>.tabs .tab {
+		background-color: transparent !important;
+	}
+	
+	.editor-group-container>.tabs .tab.active, .editor-group-container>.tabs .monaco-breadcrumbs {
+		background-color: rgba(37, 37, 37,0.3) !important;
+	}
+	
+	.monaco-list.settings-toc-tree .monaco-list-row.focused {
+		outline-color: rgb(37, 37, 37,0.6) !important;
+	}
+	
+	.monaco-list.settings-toc-tree .monaco-list-row.selected,
+	.monaco-list.settings-toc-tree .monaco-list-row.focused,
+	.monaco-list .monaco-list-row.selected,
+	.monaco-list.settings-toc-tree:not(.drop-target) .monaco-list-row:hover:not(.selected):not(.focused) {
+		background-color: rgb(37, 37, 37,0.6) !important;
+	}
+	
+	.monaco-list.settings-editor-tree .monaco-list-row {
+		background-color: transparent !important;
+		outline-color: transparent !important;
+	}
+	
+	.monaco-inputbox {
+		background-color: rgba(41, 41, 41,0.2) !important;
+	}
+	
+	.monaco-editor .selected-text {
+		background-color: rgba(58, 61, 65,0.6) !important;
+	}
+	
+	.monaco-editor .focused .selected-text {
+		background-color: rgba(38, 79, 120,0.6) !important;
+	}
+	
+	.monaco-editor .view-overlays .current-line {
+		border-color: rgba(41, 41, 41,0.2) !important;
+	}
+	
+	.extension-editor,
+	.monaco-inputbox>.wrapper>.input,
+	.monaco-workbench>.part.editor>.content>.one-editor-silo>.container>.title .tabs-container>.tab.active,
+	.preferences-editor>.preferences-header,
+	.preferences-editor>.preferences-editors-container.side-by-side-preferences-editor .preferences-header-container,
+	.monaco-editor, .monaco-editor .inputarea.ime-input {
+		background: transparent !important;
+	}
+
+	
+	.monaco-workbench>.part.sidebar {
+		background-color: rgba(37, 37, 38, 0.3) !important;
+	}
+	
+	
+	.editor-group-container>.tabs .tab {
+		border: none !important;
+	}
+	</style>
+	`
 
 	function httpGet(theUrl)
 	{
@@ -38,40 +161,14 @@ function activate(context) {
 	}
 
 	function replaceCss() {
-		var config = vscode.workspace.getConfiguration("vscode_custom_css");
-		console.log(config);
-		if (!config || !config.imports || !(config.imports instanceof Array)) {
-			vscode.window.showInformationMessage(msg.notconfigured);
-			console.log(msg.notconfigured);
-			fUninstall();
-			return;
-		};
-		var injectHTML = config.imports.map(function (x) {
-			if (!x) return;
-			if (typeof x === 'string') {
-				if (/^file.*\.js$/.test(x)) return '<script src="' + x + '"></script>';
-				if (/^file.*\.css$/.test(x)) return '<link rel="stylesheet" href="' + x + '"/>';
-				if (/^http.*\.js$/.test(x)) return '<script>' + httpGet(x) + '</script>';
-				if (/^http.*\.css$/.test(x)) return '<style>' + httpGet(x) + '</style>';
-			}
-		}).join('');
 		try {
 			var html = fs.readFileSync(htmlFile, 'utf-8');
-			html = html.replace(/<!-- !! VSCODE-CUSTOM-CSS-START !! -->[\s\S]*?<!-- !! VSCODE-CUSTOM-CSS-END !! -->/, '');
+			html = html.replace(/<!-- !! VSCODE-VIBRANCY-START !! -->[\s\S]*?<!-- !! VSCODE-VIBRANCY-END !! -->/, '');
 
-			if (config.policy) {
+			html = html.replace(/<meta.*http-equiv="Content-Security-Policy".*>/, '');
-				html = html.replace(/<meta.*http-equiv="Content-Security-Policy".*>/, '');
-			}
-
-			var indicatorClass = ''
-			var indicatorJS = ''
-			if (config.statusbar){
-				indicatorClass = '__CUSTOM_CSS_JS_INDICATOR_CLS'
-				indicatorJS = `<script src="${fileUrl(__dirname + '/statusbar.js')}"></script>`
-			}
 
 			html = html.replace(/(<\/html>)/,
-				'<!-- !! VSCODE-CUSTOM-CSS-START !! -->' + indicatorJS + injectHTML + '<!-- !! VSCODE-CUSTOM-CSS-END !! --></html>');
+				'<!-- !! VSCODE-VIBRANCY-START !! -->' + injectHTML + '<!-- !! VSCODE-VIBRANCY-END !! --></html>');
 			fs.writeFileSync(htmlFile, html, 'utf-8');
 			enabledRestart();
 		} catch (e) {
@@ -100,6 +197,7 @@ function activate(context) {
 
 	function installItem(bakfile, orfile, cleanInstallFunc) {
 		fs.stat(bakfile, function (errBak, statsBak) {
+			console.log(errBak, statsBak)
 			if (errBak) {
 				// clean installation
 				cleanInstallFunc();
@@ -197,13 +295,13 @@ function activate(context) {
 		fUninstall(true);
 	}
 
-	var installCustomCSS = vscode.commands.registerCommand('extension.installCustomCSS', fInstall);
+	var installVibrancy = vscode.commands.registerCommand('extension.installVibrancy', fInstall);
-	var uninstallCustomCSS = vscode.commands.registerCommand('extension.uninstallCustomCSS', fUninstall);
+	var uninstallVibrancy = vscode.commands.registerCommand('extension.uninstallVibrancy', fUninstall);
-	var updateCustomCSS = vscode.commands.registerCommand('extension.updateCustomCSS', fUpdate);
+	var updateVibrancy = vscode.commands.registerCommand('extension.updateVibrancy', fUpdate);
 
-	context.subscriptions.push(installCustomCSS);
+	context.subscriptions.push(installVibrancy);
-	context.subscriptions.push(uninstallCustomCSS);
+	context.subscriptions.push(uninstallVibrancy);
-	context.subscriptions.push(updateCustomCSS);
+	context.subscriptions.push(updateVibrancy);
 }
 exports.activate = activate;
 

src/messages.js

@@ -1,10 +1,8 @@
 exports.messages = {
 	admin: 'Run VS Code with admin privileges so the changes can be applied.',
-	enabled: 'Custom CSS and JS enabled. Restart to take effect. If Code complains about it is corrupted, CLICK DON\'T SHOW AGAIN. See README for more detail.',
+	enabled: 'Vibrancy enabled. Restart to take effect. If Code complains about it is corrupted, CLICK DON\'T SHOW AGAIN. See README for more detail.',
-	disabled: 'Custom CSS and JS disabled and reverted to default. Restart to take effect.',
+	disabled: 'Vibrancy disabled and reverted to default. Restart to take effect.',
-	already_disabled: 'Custom CSS and JS already disabled.',
+	already_disabled: 'Vibrancy already disabled.',
 	smthingwrong: 'Something went wrong: ',
-	restartIde: 'Restart Visual Studio Code',
+	restartIde: 'Restart Visual Studio Code'
-	notfound: 'Custom CSS and JS not found.',
-	notconfigured: 'Custom CSS and JS path not configured. Please set "vscode_custom_css.imports" in your user settings.'
 };

src/statusbar.js

@@ -1,13 +0,0 @@
-(function () {
-    function patch() {
-        const e1 = document.querySelector('#workbench\\.parts\\.statusbar');
-        const e2 = document.querySelector('#workbench\\.parts\\.statusbar > .__CUSTOM_CSS_JS_INDICATOR_CLS');
-        if (e1 && !e2) {
-            let e = document.createElement('span');
-            e.className = 'statusbar-item right __CUSTOM_CSS_JS_INDICATOR_CLS';
-            e.innerHTML = `<i class="octicon octicon-paintcan"></i>`;
-            e1.appendChild(e)
-        }
-    };
-    setInterval(patch, 5000)
-})();

yarn.lock

@@ -0,0 +1,13 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+file-url@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/file-url/-/file-url-2.0.2.tgz#e951784d79095127d3713029ab063f40818ca2ae"
+  integrity sha1-6VF4TXkJUSfTcTApqwY/QIGMoq4=
+
+xmlhttprequest@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz#67fe075c5c24fef39f9d65f5f7b7fe75171968fc"
+  integrity sha1-Z/4HXFwk/vOfnWX197f+dRcZaPw=