Skip to content

Change GUI, and add hotkey, fix alignment of some tag #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Change GUI, and add hotkey, fix alignment of some tag #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6bb91d0
Change extension GUI and align position of some tags. And add space t…
Kireet7852 Jun 4, 2022
aaa2740
Add img of New GUI
Kireet7852 Jun 4, 2022
4eb6f38
Add img of New GUI
Kireet7852 Jun 4, 2022
88649e6
Add image in Readme
Kireet7852 Jun 4, 2022
8bee1fc
Add Img in Readme
Kireet7852 Jun 4, 2022
1881e68
Revert "Add Img in Readme"
Kireet7852 Jun 4, 2022
4e4db43
Change Readme GUI to viewable
Kireet7852 Jun 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,12 @@ CSSViewer Chrome Extension 1.7
Download
--------

## New GUI

![alt text](https://raw.githubusercontent.com/Kireet7852/cssviewer/master/img/new-gui.png)



**CSSViewer** is available at Google Chrome Webstore: https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce

How to use
Expand Down
61 changes: 42 additions & 19 deletions css/cssviewer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,9 @@ span.CSSViewer_property,
#CSSViewer_block li,
#CSSViewer_block span
{
font-family:"Lucida sans", helvetica, sans-serif !important;
font-size:10px !important;
/* font-family:"Lucida sans", helvetica, sans-serif !important; */
font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
font-size:11px !important;
z-index:9999 !important;
padding:0 !important;
margin:0 !important;
Expand All @@ -42,75 +43,97 @@ span.CSSViewer_property,
{
display:none;
min-width:332px !important;
font-size:10px !important;
color:#555 !important;
/* font-size:10px !important; */
font-size: 14px !important;
color:#bd93f9 !important;
position:absolute !important;
box-shadow: 0px 10px 20px 5px rgba(0, 0, 0, 0.5) !important;
}

#CSSViewer_block h1
{
color:#fff !important;
font-size:12px !important;
/* color:#fff !important; */
/* color:rgb(42 43 55) !important; */
color:#4adc71 !important;
font-size:16px !important;
text-transform:none !important;
text-align:center !important;
width:322px !important;
display:block !important;
background:url("chrome-extension://__MSG_@@extension_id__/img/header.png") !important;
padding:30px 10px 5px 10px !important;
/* background:url("chrome-extension://__MSG_@@extension_id__/img/header.png") !important; */
background:rgb(42 43 55) !important;
padding:20px 10px 20px 10px !important;
margin:5% auto;
line-height: 10px;
border-top-left-radius: 14px;
border-top-right-radius: 14px;
font-weight: bold;
}

#CSSViewer_center
{
padding:10px 32px 0 32px !important;
/* padding:10px 32px 0 32px !important; */
overflow:hidden !important;
background:url("chrome-extension://__MSG_@@extension_id__/img/body.png") repeat-y !important;
/* background:url("chrome-extension://__MSG_@@extension_id__/img/body.png") repeat-y !important; */
background:rgb(42 43 55) !important;
text-align: center !important;
}

#CSSViewer_footer
{
padding-top:5px;
color:#555 !important;
/* color:#555 !important; */
color: #4adc71 !important;
text-align:center !important;
width:332px !important;
width:auto !important;
height:30px !important;
display:block !important;
background:url("chrome-extension://__MSG_@@extension_id__/img/footer.png") !important;
/* background:url("chrome-extension://__MSG_@@extension_id__/img/footer.png") !important; */
background:rgb(42 43 55) !important;
border-bottom-left-radius: 14px;
border-bottom-right-radius: 14px;
font-size: 12px !important;
}

.CSSViewer_category
{
background:url("chrome-extension://__MSG_@@extension_id__/img/list.png") no-repeat top left !important;
/* background:url("chrome-extension://__MSG_@@extension_id__/img/list.png") no-repeat top left !important; */
background:rgb(42 43 55) top left !important;
padding:0 5px !important;
}

#CSSViewer_block h2
{
padding-top:6px !important;
color:#6a8e46 !important;
font-size:12px !important;
/* color:#6a8e46 !important; */
color: #4adc71 !important;
font-size:14px !important;
text-align:left !important;
letter-spacing:-0.5px !important;
padding-left: 20px !important;
border-top: 3px solid #bbb !important;
}

#CSSViewer_block ul
{
padding:5px 5px 10px 5px !important;
/* border-top: 3px solid #bbb !important; */
padding:5px 5px 10px 20px !important;
list-style:none !important;
/* width:282px !important; */
width:282px !important;
}

#CSSViewer_block li
{
background:url("chrome-extension://__MSG_@@extension_id__/img/bullet.png") no-repeat left center !important;
padding-left:10px !important;
padding-left:20px !important;
}


#CSSViewer_block span.CSSViewer_property
{
color:#888 !important;
/* color:#888 !important; */
color: #61cbe0 !important;
float:left !important;
width:100px !important;
display:block !important;
Expand Down
Binary file modified img/bullet.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/new-gui.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 20 additions & 5 deletions js/cssviewer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ var CSSViewer_pColorBg = new Array(
'background-attachment',
'background-color',
'background-image',
'background-position',
'bg-position', //background-position
'background-repeat',
'color'
);
Expand Down Expand Up @@ -375,7 +375,7 @@ function UpdateColorBg(element)
SetCSSPropertyValueIf(element, 'background-color', RGBToHex(GetCSSProperty(element, 'background-color')), GetCSSProperty(element, 'background-color') != 'transparent');
SetCSSPropertyIf(element, 'background-attachment', GetCSSProperty(element, 'background-attachment') != 'scroll');
SetCSSPropertyValueIf(element, 'background-image', GetFileName(GetCSSProperty(element, 'background-image')), GetCSSProperty(element, 'background-image') != 'none');
SetCSSPropertyIf(element, 'background-position' , GetCSSProperty(element, 'background-position') != '');
SetCSSPropertyIf(element, 'bg-position' , GetCSSProperty(element, 'background-position') != '');
SetCSSPropertyIf(element, 'background-repeat' , GetCSSProperty(element, 'background-repeat') != 'repeat');
}

Expand Down Expand Up @@ -746,7 +746,7 @@ function CSSViewer()
footer.id = 'CSSViewer_footer';

//<
footer.appendChild( document.createTextNode('CSSViewer 1.7. keys: [f] Un/Freeze. [c] Css. [Esc] Close.') );
footer.appendChild( document.createTextNode('CSSViewer keys: [f/space] Un/Freeze. [c] Css. [Esc] Close.') );
block.appendChild(footer);
}

Expand Down Expand Up @@ -991,6 +991,9 @@ function cssViewerCopyCssToConsole(type)
if( 'simpleCssDefinition' == type ) return console.log( CSSViewer_element_cssDefinition );
}




/*
* Close css viewer on clicking 'esc' key
* Freeze css viewer on clicking 'f' key
Expand All @@ -1010,7 +1013,7 @@ function CssViewerKeyMap(e) {
return;

// f: Freeze or Unfreeze the css viewer if the cssViewer is enabled
if ( e.keyCode === 70 ){
if ( e.keyCode === 70 || e.keyCode === 32 ){ // 32 for space bar
if ( cssViewer.haveEventListeners ){
cssViewer.Freeze();
}
Expand All @@ -1022,10 +1025,22 @@ function CssViewerKeyMap(e) {
// c: Show code css for selected element.
// window.prompt should suffice for now.
if ( e.keyCode === 67 ){
window.prompt("Simple Css Definition :\n\nYou may copy the code below then hit escape to continue.", CSSViewer_element_cssDefinition);
let confirm = window.prompt("Simple Css Definition :\n\nYou may copy the code below then hit escape to continue.", CSSViewer_element_cssDefinition);
if(confirm != null){
console.log(confirm);
navigator.clipboard.writeText(confirm);

}
}
}

function createElement(){
let el = document.createElement('div');
let child = document.createElement('input');
el.appendChild(child);
return el;
}


/*
* CSSViewer entry-point
Expand Down
2 changes: 1 addition & 1 deletion option.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ <h4 style="font-size: 0.9em;font-family: Arial,sans-serif;padding: 0;margin:0;">
<li>CSSViewer shows the css parameters of any element in a web page. To enable/disable CSSViewer, simply click the toolbar icon and then hover any element on you want to inspect in current page.<br /><br /></li>
<li>For quick usage you may use the available keyboard shortcuts:
<br />
<br /> &nbsp; [<b>f</b>] Freeze/Unfreeze the widget in place,
<br /> &nbsp; [<b>f/space</b>] Freeze/Unfreeze the widget in place,
<br /> &nbsp; [<b>c</b>] Shows selected element simpleCssDefinition on a modal, and
<br /> &nbsp; [<b>esc</b>] Disable the viewer.
<br />
Expand Down