Add option to inject custom CSS #1193

ramlmn · 2018-03-20T15:20:20Z

Still a WIP, need to change some wording and layout.

Most important: need some opinions!

Closes #1186.

fregante · 2018-03-20T15:34:47Z

source/options.html

+		<textarea name="disabledFeatures" rows="3" placeholder="For example: &#10;mark-unread hide-own-stars"></textarea>
+		<div class="small">
+			<strong>Notice:</strong> Mostly untested; only JavaScript-based features can be disabled.
+		</div>


This doesn't seem necessary. Also p>div isn't valid HTML

Having class .small for p is of no use as textarea gets an exclusive font-size of 12px, but mostly a WIP.

fregante · 2018-03-20T15:35:57Z

source/options.html

 	</p>
 	<p>
 		<label>
 			<input type="checkbox" name="logging">
-			Enable logging
+			<span>Enable logging</span>


Nor does this. If you want to add spacing you can add margin-right to input[type='checkbox']

fregante · 2018-03-20T15:37:09Z

source/options.css

+label {
+	display: flex;
+	align-items: center;
+}


Before After

Just some vertical alignment!

vertical-alignment: ---px on the checkbox

fregante · 2018-03-20T15:39:58Z

source/options.css

 }
 .small {
 	font-size: 0.9em;
 }

+p {
+	margin: 0 0 1em;
+}


margin-bottom already seems to be 1em and I think margin-top looks better at 1em (default)

As you know vertical margins do collapse, and margin-top of 0 makes h2 elements and p to be closer, making more content fit in view.

Then we only need margin-top: 0

fregante · 2018-03-20T17:00:05Z

source/options.html

@@ -10,7 +10,7 @@ <h2>Disable features</h2>
 		List the features to disable, by <a href="https://github.com/sindresorhus/refined-github/tree/master/source/features" target="_blank">filename</a>. Enable logging to show in the console what features are enabled on each page.
 	</p>
 	<p class="small">
-		<textarea name="disabledFeatures" rows="3" placeholder="For example: &#10;mark-unread hide-own-stars"></textarea> <br>
+		<textarea name="disabledFeatures" rows="3" placeholder="For example: &#10;mark-unread hide-own-stars"></textarea>


fregante · 2018-03-20T17:01:30Z

source/libs/utils.js

+
+export const injectCustomCSS = async () => {
+	const {customCSS = ''} = await options;
+


if customCSS === '', return

ramlmn · 2018-03-20T17:15:55Z

source/options.css

+	resize: vertical;
+}
+label {
+	vertical-align: -0.16em;


@bfred-it Can you verify this value of -0.16em? Gives me 2px for 12px font size (2 / 12 ~= 0.16).

fregante · 2018-03-20T20:42:43Z

Can you post a screenshot so others can see without checking out?

hkdobrev · 2018-03-21T00:14:54Z

I'm reposting @ramlmn's screenshot from the issue:

ramlmn · 2018-03-21T03:38:30Z

Thanks @hkdobrev!

fregante · 2018-03-23T15:24:04Z

Thanks @ramlmn! :)

sindresorhus · 2018-03-24T12:25:28Z

I've noticed that if I write some CSS in the textarea and then reload the extension on the Extensions page, the CSS is gone.

fregante · 2018-03-24T12:30:08Z

Look in the console, you should see the logging from webext-options-sync. It worked for me every time I reloaded

sindresorhus · 2018-03-24T12:36:26Z

@bfred-it I write the CSS, close options, click reload, and this is logged:

background.js:212 Appling definitions
background.js:213 Current options: {disabledFeatures: "", logging: false, customCSS: "foo"}
background.js:215 Running 2 migrations

Then I click the reload button again and this is logged:

Appling definitions
background.js:213 Current options: {disabledFeatures: "", logging: false}
background.js:215 Running 2 migrations

fregante · 2018-03-24T12:53:32Z

Oh, darn, true. It’s missing a default in background.js so the migration drops it. Edit: fixed

Fixes #1193 (comment)

Fixes refined-github/refined-github#1193 (comment)

Ram Lmn added 2 commits March 20, 2018 19:01

Initial feature commit

49a3aa2

minor fix to pass test

bcbaa25

fregante reviewed Mar 20, 2018

View reviewed changes

work on suggestions

021629d

fregante reviewed Mar 20, 2018

View reviewed changes

work on suggestions again

14ab72a

ramlmn commented Mar 20, 2018

View reviewed changes

Use GitHub's font stack for textareas

0ba851d

Remove quotes around font name to pass Travis CI test

52d3054

fregante mentioned this pull request Mar 22, 2018

Allow keeping the "Repositories you contribute to" dashboard sidebar box #1205

Closed

fregante added 5 commits March 23, 2018 23:08

Shorten; use DOM4

07ab057

Align checkbox correctly

74efd0f

Allow more text in the textareas

85fcf6c

Improve/shorten copy

781a907

Indent with tab in the CSS box

d681461

fregante merged commit fcab0b3 into refined-github:master Mar 23, 2018

fregante mentioned this pull request Mar 23, 2018

Mark :visited issues #1206

Closed

ramlmn deleted the add-custom-css-option branch March 24, 2018 09:17

fregante added a commit that referenced this pull request Mar 24, 2018

Preserve custom CSS across restarts

8d94f5f

Fixes #1193 (comment)

This was referenced Mar 24, 2018

Doesn't show list of repositories contributed to #524

Closed

There is no command line instruction in Pull request page. #610

Closed

This was referenced Mar 24, 2018

Allow labels to be placed the original way #849

Closed

Cannot disable feature show-recently-pushed-branches #1091

Closed

Hiding issue renaming #1023

Closed

Customizable monospace font? #1094

Closed

Refined GitHub updates #1137

Closed

ewjoachim mentioned this pull request May 9, 2018

Escape key canceling comments is conflicting with closing the emoji menu #1252

Closed

adminstratorss mentioned this pull request Sep 18, 2018

Cập nhật GitHub tinh tế sindresorhus/atom-focus-dark#4

Closed

mybluprint pushed a commit to mybluprint/refined-github that referenced this pull request Sep 26, 2018

Preserve custom CSS across restarts

4f3a404

Fixes refined-github/refined-github#1193 (comment)

dz0ny pushed a commit to dz0ny/scrum-github that referenced this pull request Oct 15, 2018

Add option to inject custom CSS (refined-github#1193)

8568e66

kidonng mentioned this pull request Jul 3, 2020

Options page in Edge Chromium has fixed width #3312

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add option to inject custom CSS #1193

Add option to inject custom CSS #1193

ramlmn commented Mar 20, 2018 •

edited by fregante

Loading

fregante Mar 20, 2018

ramlmn Mar 20, 2018

fregante Mar 20, 2018

fregante Mar 20, 2018

ramlmn Mar 20, 2018

fregante Mar 20, 2018

fregante Mar 20, 2018

ramlmn Mar 20, 2018

fregante Mar 20, 2018

fregante Mar 20, 2018

fregante Mar 20, 2018

ramlmn Mar 20, 2018

fregante commented Mar 20, 2018

hkdobrev commented Mar 21, 2018

ramlmn commented Mar 21, 2018

fregante commented Mar 23, 2018

sindresorhus commented Mar 24, 2018

fregante commented Mar 24, 2018

sindresorhus commented Mar 24, 2018

fregante commented Mar 24, 2018 •

edited

Loading


		export const injectCustomCSS = async () => {
		const {customCSS = ''} = await options;

Add option to inject custom CSS #1193

Add option to inject custom CSS #1193

Conversation

ramlmn commented Mar 20, 2018 • edited by fregante Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fregante commented Mar 20, 2018

hkdobrev commented Mar 21, 2018

ramlmn commented Mar 21, 2018

fregante commented Mar 23, 2018

sindresorhus commented Mar 24, 2018

fregante commented Mar 24, 2018

sindresorhus commented Mar 24, 2018

fregante commented Mar 24, 2018 • edited Loading

ramlmn commented Mar 20, 2018 •

edited by fregante

Loading

fregante commented Mar 24, 2018 •

edited

Loading