diff --git a/README.md b/README.md index be40bc9..448b981 100644 --- a/README.md +++ b/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”.** -### **NOTE: Every time after Code is updated, please re-enable Custom CSS.** -### **NOTE: Every time you change the configuration, please re-enable Custom CSS.** +Enable Acrylic/Glass effect for your VS Code. -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 - "vscode_custom_css.imports": [""], - "vscode_custom_css.policy": true, - ``` +2. Install this extension from [the Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=eyhn.vscode-vibrancy). - **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` - - The `C:/` part is **REQUIRED.** +![step-3](./step-3.png) - - **MacOS and Linux File URL Example**: `file:///Users/MyUserName/Documents/custom.css` - - [See here](https://en.wikipedia.org/wiki/File_URI_scheme) for more details. +4. Restart. -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. -- ***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) -``` - -The placeholder `` 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! +[DIYgod](https://github.com/microsoft/vscode/issues/32257#issuecomment-509936623) : Fix issues with VSCode 1.36 \ No newline at end of file diff --git a/images/logo.png b/images/logo.png index 336acfb..f0af690 100644 Binary files a/images/logo.png and b/images/logo.png differ diff --git a/package-lock.json b/package-lock.json index a88fa71..3c5cdee 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { - "name": "vscode-custom-css", - "version": "3.0.3", + "name": "vscode-vibrancy", + "version": "1.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 488acb8..a536617 100644 --- a/package.json +++ b/package.json @@ -1,13 +1,13 @@ { - "name": "vscode-custom-css", - "displayName": "Custom CSS and JS Loader", - "description": "Custom CSS and JS for Visual Studio Code", - "version": "3.0.4", - "publisher": "be5invis", + "name": "vscode-vibrancy", + "displayName": "Vibrancy", + "description": "Vibrancy Effect for Visual Studio Code", + "version": "1.0.1", + "publisher": "eyhn", "author": { - "email": "belleve@typeof.net", - "name": "Belleve Invis", - "url": "https://typeof.net" + "email": "cneyhn@gmail.com", + "name": "eyhn", + "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", - "title": "Enable Custom CSS and JS" + "command": "extension.installVibrancy", + "title": "Enable Vibrancy" }, { - "command": "extension.uninstallCustomCSS", - "title": "Disable Custom CSS and JS" + "command": "extension.uninstallVibrancy", + "title": "Disable Vibrancy" }, { - "command": "extension.updateCustomCSS", - "title": "Reload Custom CSS and JS" + "command": "extension.updateVibrancy", + "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" } } diff --git a/screenshot.png b/screenshot.png index 6432825..61856f2 100644 Binary files a/screenshot.png and b/screenshot.png differ diff --git a/src/blurbehind.node b/src/blurbehind.node new file mode 100644 index 0000000..42366d7 Binary files /dev/null and b/src/blurbehind.node differ diff --git a/src/extension.js b/src/extension.js index 78c517c..9f472a4 100644 --- a/src/extension.js +++ b/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 = ` + + + + ` 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 ''; - if (/^file.*\.css$/.test(x)) return ''; - if (/^http.*\.js$/.test(x)) return ''; - if (/^http.*\.css$/.test(x)) return ''; - } - }).join(''); try { var html = fs.readFileSync(htmlFile, 'utf-8'); - html = html.replace(/[\s\S]*?/, ''); + html = html.replace(/[\s\S]*?/, ''); - if (config.policy) { - html = html.replace(//, ''); - } - - var indicatorClass = '' - var indicatorJS = '' - if (config.statusbar){ - indicatorClass = '__CUSTOM_CSS_JS_INDICATOR_CLS' - indicatorJS = `` - } + html = html.replace(//, ''); html = html.replace(/(<\/html>)/, - '' + indicatorJS + injectHTML + ''); + '' + injectHTML + ''); 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 uninstallCustomCSS = vscode.commands.registerCommand('extension.uninstallCustomCSS', fUninstall); - var updateCustomCSS = vscode.commands.registerCommand('extension.updateCustomCSS', fUpdate); + var installVibrancy = vscode.commands.registerCommand('extension.installVibrancy', fInstall); + var uninstallVibrancy = vscode.commands.registerCommand('extension.uninstallVibrancy', fUninstall); + var updateVibrancy = vscode.commands.registerCommand('extension.updateVibrancy', fUpdate); - context.subscriptions.push(installCustomCSS); - context.subscriptions.push(uninstallCustomCSS); - context.subscriptions.push(updateCustomCSS); + context.subscriptions.push(installVibrancy); + context.subscriptions.push(uninstallVibrancy); + context.subscriptions.push(updateVibrancy); } exports.activate = activate; diff --git a/src/messages.js b/src/messages.js index f48db50..ae81e87 100644 --- a/src/messages.js +++ b/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.', - disabled: 'Custom CSS and JS disabled and reverted to default. Restart to take effect.', - already_disabled: 'Custom CSS and JS already disabled.', + 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: 'Vibrancy disabled and reverted to default. Restart to take effect.', + already_disabled: 'Vibrancy already disabled.', smthingwrong: 'Something went wrong: ', - 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.' + restartIde: 'Restart Visual Studio Code' }; diff --git a/src/statusbar.js b/src/statusbar.js deleted file mode 100644 index d794bbf..0000000 --- a/src/statusbar.js +++ /dev/null @@ -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 = ``; - e1.appendChild(e) - } - }; - setInterval(patch, 5000) -})(); \ No newline at end of file diff --git a/step-1.png b/step-1.png new file mode 100644 index 0000000..ac238e1 Binary files /dev/null and b/step-1.png differ diff --git a/step-3.png b/step-3.png new file mode 100644 index 0000000..77f7db5 Binary files /dev/null and b/step-3.png differ diff --git a/vscode-vibrancy-1.0.0.vsix b/vscode-vibrancy-1.0.0.vsix new file mode 100644 index 0000000..34a0c7f Binary files /dev/null and b/vscode-vibrancy-1.0.0.vsix differ diff --git a/vscode-vibrancy-1.0.1.vsix b/vscode-vibrancy-1.0.1.vsix new file mode 100644 index 0000000..9a2d4ae Binary files /dev/null and b/vscode-vibrancy-1.0.1.vsix differ diff --git a/warns.png b/warns.png new file mode 100644 index 0000000..81d29f7 Binary files /dev/null and b/warns.png differ diff --git a/yarn.lock b/yarn.lock new file mode 100644 index 0000000..18bc946 --- /dev/null +++ b/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=