The stylish-chrome from stylish-userstyles

And "Preview" shouldn't be affected by "Turn all styles off".
https://forum.userstyles.org/discussion/21615/turn-all-styles-off

Diff view

I'd like to add a diff view mode using CodeMirror merge addon, which would display changes to the style originally opened in the tab (that is saving it won't reset the internally stored original).

Don't show styles with two namespaces as global

https://forum.userstyles.org/discussion/43793/bug-svg-namespace-creates-globally-applied-section-in-style-in-chrome#latest

Suggestion: edit style in a panel

Chrome has a yet experimental API to open windows as panels, enabled via chrome://flags/#enable-panels flag.

Enable Panel windows that open outside of the browser frame.
Attempts to open a Panel will open a popup instead if not enabled.
Panels are always enabled on the dev and canary channels.

It looks nice and so far I like it much more than a new tab or a new window. Of course, using this by default for everyone would be wrong as the API may be removed even though it's been present for several years iirc.

So... maybe an option "Open in panel" with a link to that flag and a prompt to enable it?

P.S. The diff:

--- a/popup.js
+++ b/popup.js
@@ -123,7 +123,7 @@ function getId(event) {
 function openLinkInTabOrWindow(event) {
    event.preventDefault();
    if (localStorage['openEditInWindow'] == 'true') {
-       chrome.windows.create({url: event.target.href});
+       chrome.windows.create({url: event.target.href, type: 'panel', focused: true});
    } else {
        chrome.tabs.create({url: event.target.href});
    }

So should I implement it and submit a PR?

Make icon act like Firefox

White icon when there's no styles.

https://developer.chrome.com/extensions/browserAction#method-setIcon

Apply to file: protocol

https://developer.chrome.com/extensions/match_patterns

CSS lint

This isn't a huge deal, but in the style editor, there are some CodeMirror css lint errors for svg's fill & stroke:

And maybe keep an eye out for position:sticky which is still experimental and currently only works in Firefox & Safari.

Missing "write new style" menu item in Opera

In the Firefox version, the toolbar button's menu includes a "write new style" submenu. In Opera (currently using version 24 developer preview) there is no such menu item. I don't have Chrome installed, but I guess it's probably not there either. Would it be possible to add it? It's very handy for quickly adding new styles to the current site.

Sync styles

From stylish-userstyles/stylish#94

http://forum.userstyles.org/discussion/33477/sync-userstyles-between-chrome-instances#Item_4

Create build script

Make a build script so stuff like .git gets left out. See https://code.google.com/p/chromium/issues/detail?id=314360

Link to Userstyles from the Stylish editor

Like this, but in Chrome.

Add a `keyMap` for Windows defaults

And some means to apply it. Most of your users (80% - 90%) probably use Windows, so this should be the default keyMap if a platform-specific assignment can't be made.

Stylish does not affect dynamically generated iframes

From stylish-userstyles/stylish#103

http://forum.userstyles.org/discussion/15032/how-to-apply-css-to-content-within-an-iframe
https://code.google.com/p/chromium/issues/detail?id=76429

Code simplification of localization

What about I make localization automatically run on html nodes that have:

i18n-text="stringID" attribute for textContent
i18n-html="stringID" attribute for innerHTML
any-attribute="i18n:stringID" for localization of the attribute's value

<html>
    <head>
        <script src="localization.js"></script>
..................................
            <input id="name" class="style-contributor" placeholder="i18n:styleMissingName">
            <button id="cancel-button" i18n-text="styleCancelEditLabel"></button>
            <p id="manage-text" i18n-html="manageText"></p>

Is it ok?

Add an editor preference for the 'scroll into view' behavior

Scrolling the window so that the cursor is visible is great. Scrolling the window when the cursor is already visible is really, really annoying. That latter behavior should be attached to a preference, and disabled by default.

Pop-up is not immediately affected by enabling/disabling style that affects it

e.g. https://userstyles.org/styles/1/stylish-test-style, you have to close and re-open the pop-up for the change to take effect.

Update CodeMirror to 4.13+

"Make the CSS mode understand some modern CSS extensions." (Including @document.)
https://github.com/codemirror/CodeMirror/blob/4.13.0/mode/css/css.js#L160

'Save as' functionality

There are several elements in this.

Remember if a style has been edited. Set a 'dirty' flag on the style and/or sections when changes are Saved. Filter styles on this flag in 'Manage'. Probably best to add this information to a new table and JOIN it to the existing table(s).
Duplicate an existing style in 'Edit Style'. If the 'Name' hasn't been changed, replace it with a new name ("copy of ...", i.e.). If the 'Code' has been changed, clear updateUrl and md5Url (but not url - that's its ultimate origin). Optionally, copy the original's styles.id into a new field in the new style (that's its immediate origin). Insert all fields (including 'Enabled') into new records, then clear 'Enabled' on the original style and clear the 'dirty' flag in the editor.
Save a copy of a modified style on update or install. Before overwriting a dirty style, make a disabled copy of it with a new name and no updateUrl or md5Url. It wouldn't hurt to ask first.
Save a copy of an unmodified style with style settings on install. Before overwriting a style with style settings, make a disabled copy of it with a new name, retaining updateUrl and md5Url. Ask first - sometimes you want two styles with different options, other times you just want to change the options.
Give a new style its own styles.url styles.id would suffice.

(1) helps me find styles I've been editing. (2) lets me create an editorial copy while keeping the original. If I haven't made an editorial copy, (3) lets me choose whether to keep my changes or overwrite them. (4) lets me install more than one version of a style with style settings. (5) lets me retrieve versions of styles I've written de novo.

(2) also allows me to save successive revisions of a style. Even without recording a copy's provenance you can retrieve all revisions of a style you've installed with

SELECT * FROM styles JOIN ... WHERE styles.url = <url> ORDER BY styles.id DESC

However, that won't work with de novo styles, so either the immediate source of a copy should be recorded or new styles should be given a unique styles.url value.

TODO: code editor enhancements

Match `url-prefix()`, not `url()`, on "this URL"

Yeah, I know, the label won't be strictly correct but url-prefix() is usually what you want. The change is functionally indistinguishable for most true url() match expressions. When you do want url-prefix (which is almost always) the SELECT dropdown is already correct, sparing you a small but continually irritating step.

Were it practical I'd display the whole URL path and let a click determine the end of the url-prefix(). (Maybe with a really wide menu on a really wide display.)

'Lazy load' style updates

Provide a way to mark a style for update which persists across extension restarts, but wait to update it until the next time it's applied to a page.

Three use cases: (1) Automatic updates. Disabled styles and styles for seldom-visited sites could be "updated" without creating a burst of network activity. (2) Sync styles. All style IDs could be shared among clients without requiring new clients to download any but the styles it can currently use. (3) "Subscription" services. Userstyles could suggest styles for sites without installed styles, or display new styles as an opt-in service in addition to styles already installed. The former would allow new users to quickly and easily assemble a portfolio of styles.

Use MVC js framework for Edit Styles and Manage styles

What about migrating spaghetti code with direct DOM access in edit.js and manage.js to some MVC framework like Angular or Backbone or something?

'From Mozilla format' button doesn't work

Ditto for the help icon. There's no listener on the button [figure] or the 'help' image. It's supposed to address #31, yes?

Stylish on Opera extensions directory?

Stylish is available in the directory of current extensions for Opera,
https://chrome.google.com/webstore/detail/fjnbnpbmkenffdnngjfgmeleoegfcffe
Understandably, current versions of Opera use Chromium so it is not a huge hassle of uploading it, but seeing no mentions of the Opera version on userstyles, my question is - is the extension authentic? Or not actually uploaded by an associated party / not to be trusted?

Ability to paste full style, unprefixed @document

One thing that bothers me quite a bit about developing for Stylish on non-Firefox is that you have to unwrap the @-moz-document rules after pasting in a Style from an external editor.

I'd envision unprefixed @document rules which could be recognized by engines other than Firefox. It would make using an external editor and updating an stylesheet much more bearable for Chrome. While unprefixed @document isn't a standard yet, it probably will be at some time in the future, so the keyword would be pretty safe to use I think.

https://developer.mozilla.org/en-US/docs/Web/CSS/@document

"Update all styles" button

I think there should be a button for updating all styles (it would appear after checking all styles for updates).
When you check all styles for updates now, you still need to manually click the "Install update" button for each style.

Make the branding less obtrusive

We already know it's Stylish; we clicked the Stylish icon and navigated the Stylish popup to get here, and the Stylish icon is in the tab to remind us if we become confused. Something like the editor page would be better.

Migrate Options to v2

Documentation

In a future version of Chrome, any extension which specifies options_page will change to match the options_ui behavior - most importantly, they will always be embedded in chrome://extensions - so migrate as soon as possible.

Currently the options page forced to v2 format looks like this:

The filters should be moved below the options, because uhm, the filters aren't the options that alter the extension's behavior.
There should be probably a link to open a new window/tab with the options, shown only for this @media-width.

What about this:

Or just force the options to open in a tab like uBlock does:

manifest.json:

    "options_page": "dashboard.html",
    "options_ui": {
        "page": "options_ui.html"
    },

options_ui.html:

<!DOCTYPE html>
<head>
<script src="js/vapi-client.js"></script>
<script src="js/options_ui.js"></script>
<title></title>
</head>
<body>
</body>
</html>

options_ui.js:

var messager = vAPI.messaging.channel('_open');
messager.send({
    what: 'gotoURL',
    details: {
        url: 'dashboard.html',
        index: -1
    }
});
window.close();

The small options window won't even be shown.

Missing strings on Crowding

I found out that there are two missing strings on Crowdin that no one can translate:

"(Disabled)" - Style management screen, after each disabled style's name
"Show number of styles active for the current site on the toolbar button" - This one seems to be in the english messages.json labeled as "prefShowBadge", but isn't present in other language mutations.

Stylish does not affect all SVG

Current behaviour is:
-SVG embedded in HTML - affected
-SVG document - unaffected
-SVG referenced with img - unaffected

http://forum.userstyles.org/discussion/35952/feature-request-style-svg-documents-in-chrome

Styles are applied, but not listed in the menu.

Example is 'Google Graphite 2K14' applied to a new tab.

Cut-Off code when pasting a large minified style

When pasting 80k of minified code with no line breaks into the CodeMirror editor, the content of the code box gets cut off at around 15k characters. I suspect this might be caused by the old CodeMirror version in use.

Problem in Opera 20

In Opera 20 Stylish often don`t changes the appearance of sites completely. Color of some elements does not affected by themes. This happens primarily on Google services (like google search, translate, youtube) while in Chrome it works perfectly.
Here is the example:
http://sta.sh/0195lntbxefh

List of installed styles not sorted in Opera

On the "manage installed styles" page, the list of styles is sorted by name in Firefox, but sorted by install date in Opera (currently using version 24 developer preview). Ideally they would be sorted by name in both browsers, since managing lots of styles when they're listed in what amounts to a random order is not so much fun. 😄

Suppress Chrome's 'Find' in the editor

Chrome's Find searches CodeMirror's edit buffer independently of CodeMirror and highlights matches it finds there. Worse, its highlighting is close to that of CodeMirror, so it's more difficult to sort out which is which than it was in FIrefox.

"Edit" and "Enable/Disable" links in the popup should be swapped

Whenever I want to enable or disable a style, I always click on "Edit" since it's the first link in the popup. Shouldn't those be swapped since Enable/Disable is probably used more frequently?

[Bug] Editor boxes are highlighted differently than other inputs

They should be blue-rimmed when focused, grey rimmed when not like other Chrome inputs.

"URLs on the domain" doesn't apply if port number isn't specified

If you have a section applied to "URLs on the domain example.com", it doesn't apply to example.com:83

Not sure if it's supposed to work like that.

Resize code editor to fit

Copied from stylish-userstyles/stylish#93

http://forum.userstyles.org/discussion/34496/stylish-chrome-1.1-update-suggestion#Item_11

http://codemirror.net/demo/resize.html

This looks like it would do it, but setting viewportMargin = Infinity makes things noticeably slow even for stylsheets a few hundred lines long.

Content Security Policy blocks images loaded through url()

Images loaded through an userstyle are subject to the CSP of the styled domain in Chrome. In contrast, Stylish for Firefox loads violating images just fine. I wonder if you could change the way the content is loaded in Chrome, or if this an issue I should bring up to the Chromium team.

In our case, we're loading images from github.io on github.com. Here' the CSP errror:

Refused to load the image 'https://stylishthemes.github.io/GitHub-Dark/images/octocat-spinner-smil.min.svg' because it violates the following Content Security Policy directive: "img-src 'self' data: assets-cdn.github.com identicons.github.com www.google-analytics.com collector.githubapp.com *.githubusercontent.com *.gravatar.com *.wp.com".

Add option to hide number of enabled styles in active tab from toolbar icon

From stylish-userstyles/stylish#114

http://forum.userstyles.org/discussion/36730/remove-the-notification/p1

"Specify" should not stretch to full page width

Remember position of edit window

Open the edit window in a new tab by default. If the user detaches it, remember that and open it detached in the future.

Responsive design for editor

https://forum.userstyles.org/discussion/45114/feature-request-a-responsive-design-for-the-chrome-editor-please#latest

Enabled should be checked on new styles

lint warnings are still showing

lint warnings are useless. I tried to get rid of them but I still see the yellow squiggles.

'Disable all styles' button

Like the one in Firefox.

No install button on userstyles.org HTTPS server

http://forum.userstyles.org/discussion/41146/no-install-button/p1

Original content is flickering before stylish applies the user style

Styles that fully change the appearance of websites (light -> dark, stuff repositioning, etc) are unusable in webkit based browsers because there is a noticeable delay before the user style is applied after the original unstyled page is shown (1/4 - 1/2s on a complex page).

I don't know if it's possible at all, but maybe AdBlock's implementation could be helpful? Or Chrome's Content Scripts mechanism? chrome.webNavigation API where maybe a DOM observer/on-the-fly-content-modifier could be injected?

stylish-userstyles / stylish-chrome Goto Github PK

stylish-chrome's People

Contributors

Stargazers

Watchers

Forkers

stylish-chrome's Issues

Recommend Projects

Recommend Topics

Recommend Org