If you write #keyframes in a css file in IntelliJ IDEA it suggests you animation names like blink, dance, fadein, fadeout etc.
Is it just a name suggestion function? Can I get the implementations behind these names somehow from IDEA? I guess you have the same functionality in Webstorm too.
WebStorm and IDEA are collecting all #keyframe names in the project during indexing. All these names are suggested in completion when you write #keyframes or animation-name:.
Showing an implementation behind a suggested name is not implemented yet (WebStorm 2016.3.3). I've filed a feature request about it, you may want to vote for it to get updates on its progress: https://youtrack.jetbrains.com/issue/WEB-25641
Related
I'm coding some colorschemes (in Sass), where one super-duper-parent-class, controls all the children. And I keep finding myself on screens such as this:
... thinking to myself: 'Now, which colorscheme am I in now?'.
I'm currently fixing it, by splitting the code into several files, which kinda solves it, but not in an ideal way. It means a lot of file-switching. And also if I have a .open- / .closed-class or a .missing- / .present-class, then I have to find that and 'climb down the tree' to ensure that I make the change in the correct spot. Quite tedious!
I was hoping that I could find a plugin, that could (at all times, regardless of where the cursor is), could display the nesting-levels in a fixed status-bar at the top of the screen ( kind of like that I can position my cursor on a bracket to see the matching one ).
An example of what I'm trying to find is, if I put the cursor inside ul.menu-main__current-menu-item__missing li a {, that it then would show a status-bar in the top:
#header >> &.green-colorscheme >> ul.menu-main__current-menu-item__missing li a
Can I achieve this, somehow? If not, - then how do I stop getting lost in my code?
Attempts
Looked into bookmarks.
Looked into code folding.
I'm trying Rainbow Brackets at the moment.
None of which solves the issue as well as my suggestion.
IDE can already do this for Sass/SCSS (since 2018.1 or so, I do not remember exact version number; could do that for HTML/PHP for a long time).
Make sure that you enabled Breadcrumbs for Sass language at Settings (Preferences on macOS) | Editor | General | Breadcrumbs
I just created a new static web project using the Bootstrap template. In my html files it is marking the names of Bootstrap css classes as typos. Surely the worlds smartest IDE is better than that? How do I make it aware of Bootstrap classes? I know I can disable spell checking but that seems like an awful solution.
Please follow WI-4762 for updates to be notified on any progress with it. For now, I can only suggest to either disable the spell checker or add the words shown as typos to dictionary
We are working on a React application (using Create React App without ejecting it) and we decided to use Ant as our base component library.
Now that we are near the end of the project, we discover that the application will be integrated into a corporate portal (WebSphere) as a "portlet", so we inherit all the CSS files from the main page.
Both frameworks seem to have their own reset styles, but they use different values.
So far, I have not been able to find a LESS variable in Ant that can be used for prefix all Ant's CSS rules.
Has anyone ever tried to make them live together?
We don't own the parent development, we can only make change on the React part, so only things related to Ant.
We finally go with a specific CSS patch file, and we add rules when needed.
Not really perfect, but none of the suggested path did the job we expected.
Here you can see some of the default antd variables.
One of them is #ant-prefix: ant;. I think you can change it and apply different styles.
That is a tough one, and at the end of development no less!
As #froston mentions, and which you seem to have tried the #ant-prefix: ant; in addition to this you will need to se prefixCls as a prop on every component instance you create, which will definitely be an exercise in self-flagellation.
Even if you set a global CONSTANT and import and use this with your components, you still have to thread it through to all the places, and will need to be appended with the component name.
By way of example, the defaultProps for an anchor is prefixCls: 'ant-anchor'.
Hope this helps and good luck!
I use the Dojo framework, which I load from an url.
How should I deal with the 'dojo' was used before it was defined errors, and the alike?
Yes, my feeling really get hurt, when running code through JSlint.
Perhaps you can put something like
/* globals dojo */
in the beggining of your file to tell JSLint that dojo exists?
I personaly use JSHint (a fork of JSLint that is less nitpicky) instead and one of the preconfigured options is support for Dojo.
Sounds like you need to put Dojo first in your JavaScript. The message suggests that you have an ordering problem.
Don't take it personally. You are not your code. Just make it better, learn something, and don't do it again.
If you scroll all the way down to the bottom there is a "predefined" textbox. Simply put in any of the variables you need into there (comma separated).
Thanks to everyone in advance -
So I have been banging on this issue for quite a while now and have burned through all my options. My current approach to canceling css requests is with nsIRequest.cancel inside of nsIWebProgressListener.onStateChange. This works most of the time, except when things are a little laggy a few will slip through and jump out of the loadgroup before I can get to them. This is obviously a dirty solution.
I have read through the following links to try and get a better idea of how to disable css before a nsIRequest is created...no dice.
https://developer.mozilla.org/en/Document_Loading_-_From_Load_Start_to_Finding_a_Handler
https://developer.mozilla.org/en/The_life_of_an_HTML_HTTP_request
https://developer.mozilla.org/en/Bird's_Eye_View_of_the_Mozilla_Framework
How do I disable css via presentation objects/interfaces? Is this possible? Inside of nsIDocShell there are a few attributes that kind of imply you can disable css via the browsers docshell - allowPlugins, allowJavascript, allowMetaRedirects, allowSubframes, allowImages.
Any suggestions?
Thanks,
Sam
The menu option that disables style sheets uses a function
setStyleDisabled(true)
so you probably can just call this function whenever new browser tab is created. Style sheets are still requested from server, but not applied. This function is not very sophisticated and doesn't mess with nsIRequest, source:
function setStyleDisabled(disabled) {
getMarkupDocumentViewer().authorStyleDisabled = disabled;
}
Digging in Web Developer Toolbar source code I have noticed that their "disable stylesheets" function loops trough all document.styleSheets and sets the disabled property to true, like:
/* if DOM content is loaded */
var sheets = document.styleSheets;
for(var i in sheets){ sheets[i].disabled = true; }
So if the key is to not apply CSS to pages, one of the above solutions should work. But if you really need to stop style sheets from being downloaded from servers, I'm affraid nsIRequest interception is your only option.
Set permissions.default.stylesheet to 2 and voilà!
You can actually use the permissions manager to block or allow stylesheets on a host-by-host basis.
Unfortunately there doesn't seem to be a simple flag like allowImages. The bugzilla adding for that is https://bugzilla.mozilla.org/show_bug.cgi?id=340746. You can now vote for it using the new bugzilla voting functionality. You can also add yourself to the CC list to be notified if anyone ever works on it.
A related request is to just give us basic HTML parsing support, which may be what you are trying to do. Unfortunately that isn't supported yet either, but you can vote/track the bugzilla for that at https://bugzilla.mozilla.org/show_bug.cgi?id=102699.
So the only workable solution seems to be some sort of interception as #pawal suggests. Here is a link that talks about the basics of interception to at least get you/us started https://developer.mozilla.org/en/XUL_School/Intercepting_Page_Loads. It lists several options that I list below.
These first few seem to just be at the page/document level so I don't think they help:
Load Events (addEventListener load)
Web Progress Listeners (nsIWebProgressListener) - I tried this approach, it only seems to be called for the page itself, not for content within the page.
Document Loader Service - A global version of nsIWebProgressListener so I think it has the same problem (page level only)
That leaves two others I have not tried yet. They work globally so you would need to filter them to just the browser/pages you care about.
HTTP Observers - Seems like it might work, need to verify it calls back for CSS
Content Policy - Seems like the best option to me since it explicitly is called for CSS, someday I hope to try it :)