ryanraposo/codeui

Customize your color theme for VS Code.

codeui's Issues

[Fix] Same colors but different digits should be grouped together

1. Toggle View to Palette View
2. #ccc & #cccccc is in 2 different groups

All 4 colors are the same:

• #fff
• #ffff
• #ffffff
• #ffffffff

EDIT(@ryanraposo):

Considerations

• For individual items, its important that CodeUI shows the hex value as it would appear in the theme file/settings.json.
• We might need to change group titles. An example: use the shortest, or most 'reduced' hex code possible for the group's color.

Implement cleanup of generated SVG files

[color-picker] [1/3] Push updates from the color picker to the extension

(1/3)

On the color-picker branch (see #24), a new view called Colors was added. Right now, there is no way to access or apply the selection.

To make it useful, step one is to...

Push updates from the color picker to the extension

• (media/main.js) Add a new constant vscode, set to acquireVscodeApi().

• (media/main.js) Add a new constant initialColor. Set it to any hex color string.

• (media/main.js) Add a new variable currentState. It should equal vscode.getState() if it exists, {color : initialColor } if not.

• (media/main.js) Add a new function updateSelectedColor. It should:

• Accept a message to send. (Will be a dict with format: {type:'updateSelectedColor', value:'#000000'})

• Use vscode.postMessage() to report the new selection to the extension.

• (media/main.js) Add a new function saveState. It should:

• Accept a state,

• Save it with vscode.setState(). This is for persistence across sessions.

• Update the currentState instance.

• Report the new color to the extension using the new updateSelectedColor function.

• (media/main.js) Change colorWheel so that it initializes with currentState's color.

• (media/main.js) Add to colorWheel.onChange: Use new saveState function to store and report the selection.

Write into Theme-specific settings instead of global ones

1. Try to lighten Activity Bar background
2. Switch theme
3. 🐛 The color stayed

So, to iterate, instead of:

"workbench.colorCustomizations": {
    "activityBar.background": "#2f363c"
}

You do

"workbench.colorCustomizations": {
    "[Github]": {
        "activityBar.background": "#2f363c"
    }
}

Where Github is active theme that was modified by the extension.

'Clear' command doesn't result in an updated swatch icon

Open VSX Listing: Signing the Publisher Agreement

Thank you for being part of the Open VSX community by adding your extensions to the Open VSX Registry. Please note that the service was recently transferred to the Eclipse Foundation and urgent action on your part is needed so we can continue to list your extensions. To ensure uninterrupted service, please sign the Eclipse Publisher Agreement on or before January 8, 2021. If not signed by that date, your extensions will be delisted and will no longer appear on the site nor be available via the API. If you sign at a later date, your extensions will then be re-activated. The signing process is explained in the Wiki (steps 1 and 2).

Please also note that all extensions MUST have a license in order to be listed.

More details are in these recent blog posts:
https://blogs.eclipse.org/post/brian-king/open-vsx-registry-under-new-management
https://blogs.eclipse.org/post/brian-king/new-era-open-vsx-registry

Today, there’s growing momentum around open source tools and technologies that support Visual Studio (VS) Code extensions. Leading global organizations are adopting these tools and technologies. This momentum has spurred demand for a marketplace without restrictions and limitations. Thanks for joining us on this journey as we continue to build the Open VSX community. We look forward to continued innovation from you in 2021!

[color-picker] [3/3] Create a command that copies the selection to clipboard

(3/3)

On the color-picker branch (see #24), a new view called Colors was added. Right now, there is no way to access or apply the selection.

To make it useful, step three is to...

Create a command that copies the selection to clipboard

• (package.json) Add a new "command" copySelectedColor with fitting icon

• (package.json) Add a new "view/title" copySelectedColor, when view == codeui.views.color

• (src/extension.ts) Register command copySelectedColor --> colorProvider.copySelectedColor()

USAGE.md: Two getting started questions

Hello

thank you very much for sharing your great work!

I am trying to start with CodeUI but stumble with three questions:

#1: It is not clear what exactly CodeUI can do

You sum it up like this: "Customize your color theme for VS Code."
But: What does it mean?

• Does CodeUI create a copy of a theme and then one can customize that copy?
• Or, what I suspect much more, can we customize a theme ad hoc and the customized values are stored in the (selectable) user or workspace settings? That would be awesome.

Suggestion: Please add one or two more sentences to README.md

It would be great if the README.md: features chapter explains with one or two sentences what CodeUI does.

#2: Can we adjust language syntax colors, too?

If we change the theme, the color in the displayed source code is changed, too.

Is it possible to e.g. change the color of a variable, too:

I was not able to find a Syntax / Variable element in CodeUI.

Thanks a lot, kind regards,
Thomas

[Feature] 🎨 Color Picker 🎨

Using an external color picker is annoying and VS Code's built-in picker is restricted to text editing:

Priorities:

• Implement a color picker view
• Make every attempt to mirror VS Code's overall design and style.
• Respond to user activity (ex: color-picker updates to reflect the color of a selected element).
• Add CodeUI extension settings/commands where appropriate

Additional context

Use color-picker branch for work on this feature.

Updates

• (12/1/21): The color picker now updates to reflect selection in the Elements view. Thinking about a reversed, toggle-able, "paint" mode where you can apply the picker's colour to elements just by clicking on them.

• (12/10/2020) : New approach. Added a statusBarItem that updates according to the hex and hue of the selection. Triggers copy-to-clipboard command on click. Removes any need to clutter the view with more widgets. Also, looks pretty cool.

• (12/09/2020): Simple copy-to-clipboard functionality added. Not the minimum-viable-product we need, but a start. Very interested in help/feedback. Two rules, though! 1) no frumpy webview abuse and 2) keep it simple :)

• (11/27/2020) : A new view 'Color' with a picker has been added. No way to access the selection yet.

'Refresh' command in customizations view is broken

Customizations not working

Without a pre-existing entry for "workbench.colorCustomizations" in the user's settings.json file (VS Code settings), all customization functionality breaks:

This is a pretty serious bug, I'm not sure when it was introduced.

A temporary workaround is to add the empty entry ("workbench.colorCustomizations" : {}) manually, as pictured above.

However, keep in mind the different versions of settings.json. CodeUI has features for workspace-specific customization, and in that scenario you would have to add the entry to that particular settings.json file (.vscode/settings.json).

An option to always use `Global` user settings

Probably > 95% of the time people will use the Global settings file, so I would like a setting to skip the scope choosing Quick Pick. (An just write to the Global).

Tree View icons in light theme have low contrast

1. Use light theme
2. Un-focus Tree View (or on hover)

Draft readme

Batch editing with natural language

Below is a proof-of-concept using ChatGPT 3.5 Turbo:

### Me
  
  Use this as reference:
  
  contrastActiveBorder: An extra border around active elements to separate them from others for greater contrast
  contrastBorder: An extra border around elements to separate them from others for greater contrast
  focusBorder: Overall border color for focused elements. This color is only used if not overridden by a component
  foreground: Overall foreground color. This color is only used if not overridden by a component
  descriptionForeground: Foreground color for description text providing additional information, for example for a label
  errorForeground: Overall foreground color for error messages (this color is only used if not overridden by a component)
  widget.shadow: Shadow color of widgets such as Find/Replace inside the editor
  selection.background: Background color of text
  textBlockQuote.background: Background color for block quotes in text
  textBlockQuote.border: Border color for block quotes in text
  textCodeBlock.background: Background color for code blocks in text
  textLink.activeForeground: Foreground color for links in text when clicked on and on mouse hover
  textLink.foreground: Foreground color for links in text
  textPreformat.foreground: Foreground color for preformatted text segments
  textSeparator.foreground: Color for text separators
  button.background: Button background color
  button.foreground: Button foreground color
  button.hoverBackground: Button background color when hovering
  dropdown.background: Dropdown background
  dropdown.listBackground: Dropdown list background
  dropdown.border: Dropdown border
  ...
  [LIST TRIMMED FOR SPACE]
  
  I will describe elements in natural language. You will print them with no formatting. Okay?

### ChatGPT

  Sure, I understand. Just describe the elements, and I'll provide them without any formatting. Go ahead!

### Me

  All borders

### ChatGPT

  contrastActiveBorder
  contrastBorder
  focusBorder
  list.activeSelectionBorder
  list.inactiveSelectionBorder
  list.focusBorder
  list.hoverBorder
  list.dropBorder
  scrollbar.shadow
  scrollbarSlider.activeBackground
  scrollbarSlider.background
  scrollbarSlider.hoverBackground
  editorGroup.border
  editorGroupHeader.tabsBorder
  tab.border
  tab.activeBorder
  tab.unfocusedActiveBorder
  tab.hoverBorder
  tab.unfocusedHoverBorder
  tab.activeModifiedBorder
  tab.inactiveModifiedBorder
  titleBar.border
  panel.border
  statusBar.border
  statusBar.debuggingBorder
  statusBar.noFolderBorder
  statusBarItem.activeBackground
  statusBarItem.hoverBackground
  peekView.border
  peekViewEditorGutter.background
  peekViewEditor.matchHighlightBorder
  notificationCenter.border
  debugExceptionWidget.border
  debugToolBar.border
  activityBar.border
  activityBar.dropBorder
  sideBar.border
  sideBarTitle.foreground
  sideBarSectionHeader.border
  sideBarSectionHeader.border
  pickerGroup.border
  settings.dropdownBorder
  settings.dropdownListBorder
  settings.checkboxBorder
  settings.textInputBorder
  settings.numberInputBorder
  breadcrumb.border
  breadcrumbPicker.border 

Element list: data/vscodeElementsArray.json

Quick python for parsing:

import json

with open('./data/vscodeElementsArray.json', 'r') as file:
    data = json.load(file)

for item in data:
    print(f"{item['fullName']}: {item['info']}")

Grunt

• Add grunt to the project
• Create a task that updates the extension version

Commit lock file

It's usually a good idea to commit a lock file

https://stackoverflow.com/questions/44552348/should-i-commit-yarn-lock-and-package-lock-json-files

Granular lighten/darken

Darken/Lighten with hard-coded 10% is not going to be enough for everyone.

Ideally having an input that you can put any value: 0.333333 or 50.

---

I mean, shortcuts are great and should stay:

• Darken (10%)
• Lighten (10%)
• Darken (Custom value)
• Lighten (Custom value)

Where picking custom value would bring another Quick Pick inviting to enter the number value.

[Feature] 'What's New'

Generally, a great 'What's New' page would:

• Appear once on version updates.
• Provide useful information.
• Include an option to disable or throttle (major, minor, patch) to avoid being annoying.

Being early in development, and especially with the color picker update around the corner, priority is even higher!

We really want existing users who maybe haven't opened CodeUI in a while to notice :)

(Big thank you to @alefragnani! His beautiful 'What's New' page for the Bookmarks extension inspired the idea, and his extra work made this easy for all of us!)

[Fix] Tweak multiple word Element titles

Probably could be improved by deleting more from the start:

Expected	Actual
Activity Bar => Badge Background	Activity Bar => Barbadge Background
Peek View => Border	Peek View => View Border
Welcome Page => Button Background	Welcome Page => Page Button Background
...	...

1-word titles are all looking great though.

[Fix] Slow activation

Activation time is almost the same as all of my installed extensions combined:

Improve README

I'd really appreciate a fresh take on the README.

The format hasn't changed much since release, and I think I'm too 'involved' to do it justice. Its a pretty extension, and it could really shine here... but I don't think it is right now.

Help!

The latest changes can be found on the color-picker branch. That incoming update is the main motivator for this. Thanks!

[color-picker] [2/3] Listen for and store updates from the color picker

(2/3)

On the color-picker branch (see #24), a new view called Colors was added. Right now, there is no way to access or apply the selection.

To make it useful, step two is to...

Listen for and store updates from the color picker

• (src/color.ts) Add private property ColorProvider.selectedColor

• (src/color.ts) Add to colorProvider.onDidRecieveMessage: If message.type=="updateSelectedColor", set self.selectedColor to message.value.

• (src/color.ts) Add public function ColorProvider.copySelectedColor(). It should:

• Copy self.selectedColor to clipboard. See ElementProvider.copy() in src/elements.ts for reference.

• Use public function showNotification from src/extension.ts to show a popup, notifying the user.

[FIX] Elements not showing 'full' names in Palette View

In CodeUI, each element's info comes from from a data file: data/vscodeElementsArray.json.

Here is the data for "activityBar.foreground":

In Standard View, we use the groupedName to avoid redundancy. In Palette View, there isn't much context, so elements need their full name, or titleName.

As shown below, elements are currently showing their shorter, groupedName in Palette View. This is 👎. Without hovering over them, it's hard to tell what they are:

Useful Groups

• Add ability to save custom element groups (codeui.customGroups) using the interface
• Add presets like 'Borders (Workbench)'

Soooo Comlicated, I just want to change the variable color

Very good extension, but Soooo Comlicated, I just want to change the variable color,

I Just wanna change the color before the opeartor, which part should I goto?

[Feature] Responsive Color Picker

Responsive Color Picker

The color picker in the Color view should automatically resize to fit the view.

Relevant Code

The 'Color' view in CodeUI is a Webview, which is no different than an ordinary webpage.

The HTML comes from a template literal:

codeui/src/color.ts

Lines 65 to 87 in fff58bb

	return `<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<!--
	Use a content security policy to only allow loading images from https or from our extension directory,
	and only allow scripts that have a specific nonce.
	-->
	<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; script-src 'nonce-${nonce}';">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="${styleColorWheel}" rel="stylesheet">
	</head>
	<body>
	<div id="color-wheel-container"></div>
	<script nonce="${nonce}" src="${colorWheel}"></script>
	<script nonce="${nonce}" src="${main}"></script>
	</body>
	</html>`;

This is the JavaScript behind the view:

codeui/media/main.js

Lines 5 to 49 in fff58bb

	(function () {
	const vscode = acquireVsCodeApi();
	const initialColor = '#3fdaa4';
	document.addEventListener('contextmenu', function(ev) {
	ev.preventDefault();
	}, false);
	var currentState = vscode.getState() || { color: initialColor };
	function updateSelectedColor(color) {
	vscode.postMessage({ type: 'updateSelectedColor', value: color });
	}
	function saveState(state) {
	vscode.setState({ color: state.color });
	currentState = state;
	updateSelectedColor(state.color);
	}
	window.addEventListener('message', (event) => {
	const message = event.data;
	switch (message.type) {
	case 'setSelectedColor': {
	colorWheel.hex = message.value;
	break;
	}
	}
	});
	var colorWheel = new ReinventedColorWheel({
	appendTo: document.getElementById('color-wheel-container'),
	hex: currentState.selectedColor,
	wheelDiameter: 200,
	wheelThickness: 20,
	handleDiameter: 16,
	wheelReflectsSaturation: true,
	onChange: function (color) {
	saveState({ color: color.hex });
	},
	});
	saveState({ color: colorWheel.hex });
	})();

Currently, there is no CSS other than the stylesheet included with the color picker package:

codeui/media/lib/reinvented-color-wheel.css

Lines 1 to 42 in 2325927

	.reinvented-color-wheel, .reinvented-color-wheel--hue-handle, .reinvented-color-wheel--hue-wheel, .reinvented-color-wheel--sv-handle, .reinvented-color-wheel--sv-space {
	touch-action: manipulation;
	touch-action: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
	}
	.reinvented-color-wheel {
	position: relative;
	display: inline-block;
	line-height: 0;
	border-radius: 50%;
	}
	.reinvented-color-wheel--hue-wheel {
	border-radius: 50%
	}
	.reinvented-color-wheel--sv-space {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto
	}
	.reinvented-color-wheel--hue-handle, .reinvented-color-wheel--sv-handle {
	position: absolute;
	box-sizing: border-box;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px #000 inset
	}
	.reinvented-color-wheel--hue-handle {
	pointer-events: none
	}

Note: the package, reinvented-color-picker, is located in codeui/media alongside main.js (above). It is stored locally (not via npm) in the lib folder:

media
    └main.js
    └───lib
        └ reinvented-color-wheel.min.css
        └ reinvented-color-wheel.min.js

Solution

The solve for this issue could involve:

• CSS (./media/lib/reinvented-color-wheel.css or a new file, ex: ./media/style.css)
• Manipulation of the ReinventedColorWheel object and it's properties. See ./media/main.js:

codeui/media/main.js

Lines 36 to 47 in fff58bb

	var colorWheel = new ReinventedColorWheel({
	appendTo: document.getElementById('color-wheel-container'),
	hex: currentState.selectedColor,
	wheelDiameter: 200,
	wheelThickness: 20,
	handleDiameter: 16,
	wheelReflectsSaturation: true,
	onChange: function (color) {
	saveState({ color: color.hex });
	},
	});

• The VS Code Extension API. I can help with this side of things if you are only comfortable with the 'traditional web' stuff.

  An example is the onDidChangeVisibility event of the WebviewView. For the most part, we can work within the webview--but if we want to detect open/close/collapse events for the view container itself, we need to 'ask' VS Code.