I want to create my own color picker extention like color picker tool of chrome dev tool. Chrome's color picker tool is very nice. So my question is: how can i get chrome's color picker tool source code? Thanks a lot.
The color picker used in the devtool is a module listed here: https://cs.chromium.org/chromium/src/third_party/WebKit/Source/devtools/front_end/color_picker/
It is a relatively large module so I will not link it here nor recommend you to use it in your future extensions. However if you do have the patience, you can definitely pick out the parts that you need and use it under the licenses described in the files.
While Google Chrome is not an open source application, Chromioum is. You can download its entire open source here and try to extract the color pallet mechanisms.
Besides diving into this massive and complex code, you have plenty of other Javascript based color picker tools you can implement very easily. Take a look at
JColor, which I'm using myself and very satisfied.
Using this Javascript library will be much more easier than extracting and implementing the dev tools color pallete, it's a 2 line implementation, which will give you pretty much the same functionality:
<script src="jscolor.js"></script>
Color: <input class="jscolor" value="ab2567">
Besides that, You can search for more Javascript libraries out in the vastness of the internet.
Eye Dropper Tool:
I believe the color picker you are refering to is Google Chrome Eye Dropper tool. After looking into it, I think I found a GitHub page with a verified source code of this type of tool, if this is what you were refering to.
Source Code:
Below are two links. The first link is to the Google Chrome Webstore page, where you will find the Eye Dropper Tool. If this is the tool you were refering to, then the second link will be the source code for it.
Here is the Tool: https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka?hl=en
Here is the Source Code: https://github.com/kepi/chromeEyeDropper
Hopefully this helps you out!
Related
Hi i found this page:
https://crossme.jp/
and I wonder if it's using fullpage javascript for the images. I know that is using three JavaScript for the effect of the cursor, but for the effect of background images I don't know.
I use google inspect for all my projects and I don't how to debug the java-scripts in the page.
Please help as I want to replicate this page.
In chrome you can check source tab in developer tools and find it out.
Or you can simply check the page source of the webpage and search for jquery.
But to answer your question, this page is using jQuery v1.10.2
And for the cursor as well as 3D effects for images, this page is using mrdoob's 3D library : https://github.com/mrdoob/three.js/
Chrome/Chromium has a syntax highlighter in the inspector that shows black text while scrolling, and highlights after awhile - unlike Firefox Web Developer Toolbar's, which highlights everything and may take a long time. Since the inspector is written in js/html, is there a way to use this technology elsewhere?
Chrome's Devtools uses CodeMirror for the sources panel where you can edit code. http://codemirror.net
Yes, you can find the source code here:
https://developers.google.com/chrome-developer-tools/
Here are some instructions to get you started.
Also, check out Ace it's very easy to embed and use and does a decent job. Cloud9 uses it.
I used tumblr's javascript embed code to embed my posts into an external website. Now I want to style the posts. Where can I find the full list of tags, classes, and all of that in order to do this? I see people posting some of the tags, for exampe ol.tumblr_posts, but no one has said how or where they actually found out that's the tag tumblr is using for that particular element.
Someone mentioned using the web developer extension in Firefox to pull out the HTML associated with the javascript file but I can't use Firefox so I need another suggestion? I did go to tumblr's docs but the tags and everything used for customizing themes WITHIN tumblr seem to be different from the ones used to display posts outside of tumblr.
I also looked around in the api section and didn't see anything that lists all of the tags. Thanks!
UPDATE: Here's a post that discusses what I'm talking about but none of the people giving answers that show what tags to use to format the script's output say how or where they got the tags.
tumblr javascript embed with css skin
This website is the one that said to use the FF add on but again, the person who figures out how to find the tags using it doesn't say HOW, they just say it worked. I'm finally in a place where I can use Firefox so I installed this web developer thing and I still don't see where I would go to see the info that shows the actual html with all the styles instead of just showing the link to the js code.
http://forums.macrumors.com/showthread.php?t=745299
Chrome and Opera's developer console is CTRL + SHIFT + I... try looking in the source there
IE's dev tools is f12 if you can't use Chrome
Also: I'm not sure if this is what you're talking about but I'll throw in this link for good measure:
http://www.tumblr.com/docs/en/custom_themes
I figured it out! Unfortunately, the only way I could do this was to use the Firefox Web Developer Toolbar Add-On. Once you have that installed, you go to the webpage where you've embedded your blog's javascript code.
Then, in the Firefox toolbar, there should be a tab that says "Miscellaneous". Click on that, then click on "Edit HTML". A new pane opens up towards the bottom of the browser. Inside, it will show the source of the webpage INCLUDING the information that the javascript code generates, which shows the classes, html, and all of that.
It's still not a ton that you can customize compared to using the api (which I don't know how to do) but it's a start. Thanks everyone!
cssdesk, jsbin and such do a wonderful job of showing a live preview side by side with your code. I wonder if there is a way to just get the live preview.
Ideally, I would open my text editor or ide on one monitor, and a browser on another monitor, and while I adjust the code in my ide, and save my document, the browser would sense the change, and update the page.
Would this need to built as a browser extension, maybe it can be built in javascript and offered for free to any developer who would like to use it.
I feel like this would be a great feature for firebug or something.
There is LiveJS, which does exactly this:
http://livejs.com/
I'm writing a page with examples that demonstrate the use of my js library. I'd like these examples to be editable and runnable, so I thought I have these options :
Use prettify to display code on the tutorial page, have a button that opens a new window with the editor where you can run the code (currently implemented solution). Alternatively, I can make the editor a modal dialog of some sort.
Use multiple CodeMirror editors for each example on the page (could be up to 30 on a single page). I'm not sure how "heavy" those editors are, so I'm not sure if that's a good idea.
Have an edit button that "swaps" prettyfied code with a CodeMirror editor when editing is needed, so that the user can edit and run the examples without bothering with new windows. I'm not sure if I can make prettify and CodeMIrror's syntax highlighting to look the same.
Any ideas on how I should do this and why? I'm also open to suggestions about different code editors or syntax highlighters too, so if anybody has experience with this kind of thing, please tell me how you did it.
You could use the same technique that Marijn Haverbeke (the creator of CodeMirror) uses for the online version of his javascript book. It shows code snippets, and provides an edit-button that opens a javascript console at the bottom of the screen.
Look at this chapter for an example.