From 1f756abf03f98e18ecac7bc2d4e6d58682a47076 Mon Sep 17 00:00:00 2001 From: Robert Kaiser Date: Mon, 21 Sep 2015 00:47:29 +0200 Subject: [PATCH] make newTab and inspector tool work well from 40 up to 43 nightly --- LCARStrek/browser/devtools/add.svg | 18 + LCARStrek/browser/devtools/dark-theme.css | 6 + LCARStrek/browser/devtools/layoutview.css | 310 +++++++++++++++++- LCARStrek/browser/devtools/pseudo-class.svg | 29 ++ LCARStrek/browser/devtools/ruleview.css | 22 ++ LCARStrek/browser/magnifier-hover.png | Bin 0 -> 229 bytes LCARStrek/browser/magnifier-hover@2x.png | Bin 0 -> 307 bytes LCARStrek/browser/magnifier.png | Bin 371 -> 229 bytes LCARStrek/browser/magnifier@2x.png | Bin 689 -> 307 bytes LCARStrek/browser/newtab/newTab.css | 98 +++++- .../search-indicator-magnifying-glass.svg | 7 + LCARStrek/global/in-content/info-pages.css | 3 +- 12 files changed, 476 insertions(+), 17 deletions(-) create mode 100644 LCARStrek/browser/devtools/add.svg create mode 100644 LCARStrek/browser/devtools/pseudo-class.svg create mode 100644 LCARStrek/browser/magnifier-hover.png create mode 100644 LCARStrek/browser/magnifier-hover@2x.png create mode 100644 LCARStrek/browser/search-indicator-magnifying-glass.svg diff --git a/LCARStrek/browser/devtools/add.svg b/LCARStrek/browser/devtools/add.svg new file mode 100644 index 00000000..a9c169ce --- /dev/null +++ b/LCARStrek/browser/devtools/add.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/LCARStrek/browser/devtools/dark-theme.css b/LCARStrek/browser/devtools/dark-theme.css index 8c0f9a5a..a6f7eabc 100644 --- a/LCARStrek/browser/devtools/dark-theme.css +++ b/LCARStrek/browser/devtools/dark-theme.css @@ -419,6 +419,12 @@ div.CodeMirror span.eval-text { .devtools-searchinput { background-color: #000000; color: #E7ADE7; + border: 1px solid #9C9CFF; +} + +.devtools-textinput:focus, +.devtools-searchinput:focus { + border-color: #008484; } .CodeMirror-Tern-fname { diff --git a/LCARStrek/browser/devtools/layoutview.css b/LCARStrek/browser/devtools/layoutview.css index ed74d93c..0c295a3a 100644 --- a/LCARStrek/browser/devtools/layoutview.css +++ b/LCARStrek/browser/devtools/layoutview.css @@ -6,43 +6,313 @@ box-sizing: border-box; } +body { + /* The view will grow bigger as the window gets resized, until 400px */ + max-width: 400px; + margin: 0px auto; + padding: 0; + /* "Contain" the absolutely positioned #main element */ + position: relative; +} + +/* Header: contains the position and size of the element */ + +#header { + box-sizing: border-box; + width: 100%; + padding: 4px 14px; + display: -moz-box; + vertical-align: top; +} + +#header:-moz-dir(rtl) { + -moz-box-direction: reverse; +} + +#header > span { + display: -moz-box; +} + +#element-size { + -moz-box-flex: 1; +} + +#element-size:-moz-dir(rtl) { + -moz-box-pack: end; +} + +@media (max-height: 228px) { + #header { + padding-top: 0; + padding-bottom: 0; + margin-top: 10px; + margin-bottom: 8px; + } +} + +/* Main: contains the box-model regions */ + #main { + position: absolute; + box-sizing: border-box; + /* The regions are semi-transparent, so the white background is partly + visible */ background-color: #FF9F00; - border-color: #A09090; - border-style: dotted; color: var(--theme-selection-color); + /* Make sure there is some space between the window's edges and the regions */ + margin: 0 14px 10px 14px; + width: calc(100% - 2 * 14px); } .margin, .size { - color: var(--theme-selection-color); +/* color: var(--theme-highlight-blue); */ } +/* Regions are 3 nested elements with wide borders and outlines */ + #content { - background-color: #008484; + height: 25px; +} + +#margins, +#borders, +#padding { + border-color: var(-theme-splitter-color); + border-width: 25px; + border-style: solid; + outline: dotted 1px var(-theme-splitter-color); } -#padding, #margins { + /* This opacity applies to all of the regions, since they are nested */ + opacity: .8; } -#padding { - background-color: #9C9CFF; - border-color: #9C9CFF; +/* Respond to window size change by changing the size of the regions */ + +@media (max-height: 228px) { + #content { + height: 18px; + } + + #margins, + #borders, + #padding { + border-width: 18px; + } } -#borders { - background-color: #FFCF00; +/* Regions colors */ + +#margins { border-color: #FFCF00; } -#margins { - background-color: #A09090; +#borders { border-color: #A09090; } +#padding { + border-color: #8050B0; +} + +#content { + background-color: #008484; +} + +/* Editable region sizes are contained in absolutely positioned

*/ + +#main > p { + position: absolute; + pointer-events: none; +} + +#main > p { + margin: 0; + text-align: center; +} + +#main > p > span { + vertical-align: middle; + pointer-events: auto; +} + +/* Coordinates for the region sizes */ + +.top, +.bottom { + width: calc(100% - 2px); + text-align: center; +} + +.padding.top { + top: 55px; +} + +.padding.bottom { + bottom: 57px; +} + +.border.top { + top: 30px; +} + +.border.bottom { + bottom: 31px; +} + +.margin.top { + top: 5px; +} + +.margin.bottom { + bottom: 6px; +} + +.size, +.margin.left, +.margin.right, +.border.left, +.border.right, +.padding.left, +.padding.right { + top: 22px; + line-height: 132px; +} + +.size { + width: calc(100% - 2px); +} + +.margin.right, +.margin.left, +.border.left, +.border.right, +.padding.right, +.padding.left { + width: 25px; +} + +.padding.left { + left: 52px; +} + +.padding.right { + right: 51px; +} + +.border.left { + left: 26px; +} + +.border.right { + right: 26px; +} + +.margin.right { + right: 0; +} + +.margin.left { + left: 0; +} + +.rotate.left:not(.editing) { + transform: rotate(-90deg); +} + +.rotate.right:not(.editing) { + transform: rotate(90deg); +} + +/* Coordinates should be different when the window is small, because we make + the regions smaller then */ + +@media (max-height: 228px) { + .padding.top { + top: 37px; + } + + .padding.bottom { + bottom: 38px; + } + + .border.top { + top: 19px; + } + + .border.bottom { + bottom: 20px; + } + + .margin.top { + top: 1px; + } + + .margin.bottom { + bottom: 2px; + } + + .size, + .margin.left, + .margin.right, + .border.left, + .border.right, + .padding.left, + .padding.right { + line-height: 80px; + } + + .margin.right, + .margin.left, + .border.left, + .border.right, + .padding.right, + .padding.left { + width: 21px; + } + + .padding.left { + left: 35px; + } + + .padding.right { + right: 35px; + } + + .border.left { + left: 16px; + } + + .border.right { + right: 17px; + } +} + +/* Legend, displayed inside regions */ + +.legend { + position: absolute; + margin: 5px 6px; + z-index: 1; +} + +.legend[data-box="margin"] { + color: #000000; +} + +@media (max-height: 228px) { + .legend { + margin: 2px 6px; + } +} + +/* Editable fields */ + .editable { border: 1px dashed transparent; + -moz-user-select: text; } .editable:hover { @@ -52,4 +322,18 @@ .styleinspector-propertyeditor { border: 1px solid #008484; padding: 0; -} \ No newline at end of file +} + +/* Make sure the content size doesn't appear as editable like the other sizes */ + +.size > span { + cursor: default; +} + +/* Hide all values when the view is inactive */ + +body.inactive > #header > #element-position, +body.inactive > #header > #element-size, +body.inactive > #main > p { + visibility: hidden; +} diff --git a/LCARStrek/browser/devtools/pseudo-class.svg b/LCARStrek/browser/devtools/pseudo-class.svg new file mode 100644 index 00000000..5c41473d --- /dev/null +++ b/LCARStrek/browser/devtools/pseudo-class.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/LCARStrek/browser/devtools/ruleview.css b/LCARStrek/browser/devtools/ruleview.css index 00ee6f91..182a97ac 100644 --- a/LCARStrek/browser/devtools/ruleview.css +++ b/LCARStrek/browser/devtools/ruleview.css @@ -245,3 +245,25 @@ .ruleview-selectorhighlighter.highlighted { background-position: -16px 0; } + +#pseudo-class-panel:not([hidden]) { + border-bottom: 1px solid var(--theme-splitter-color); +} + +#ruleview-add-rule-button::before { + background-image: url("chrome://browser/skin/devtools/add.svg#add"); + background-size: cover; +} +#ruleview-add-rule-button:hover::before { + background-image: url("chrome://browser/skin/devtools/add.svg#add-checked"); +} + +#pseudo-class-panel-toggle::before { + background-image: url("chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class"); + background-size: cover; +} +#pseudo-class-panel-toggle:hover::before, +#pseudo-class-panel-toggle[checked]::before { + background-image: url("chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class-checked"); + filter: none !important; +} diff --git a/LCARStrek/browser/magnifier-hover.png b/LCARStrek/browser/magnifier-hover.png new file mode 100644 index 0000000000000000000000000000000000000000..c011e8b227344b498020decfd8cfd6dc1b523614 GIT binary patch literal 229 zcmeAS@N?(olHy`uVBq!ia0vp^QXtI83?wJF-0KBWYymzYu0R?HmZtAK52P4Ng8YIR z9G=}s196hP-CY{ZB>K9{8U3vA{VyCDA7CDix!q;;QCFR?G%YIxq=i&>X O9SokXelF{r5}E)>>PgA~ literal 0 HcmV?d00001 diff --git a/LCARStrek/browser/magnifier-hover@2x.png b/LCARStrek/browser/magnifier-hover@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..68172a97863f4f1e77515415750679f2d64b12f1 GIT binary patch literal 307 zcmeAS@N?(olHy`uVBq!ia0vp^CLqkn3?%<=>s$e(*aCb)T!AzYEKT2e9!N2k1o;Is zI6S+N2I3@nySp%Su*!M>Ih+L^k;M!Q+`=Ht$S`Y;1W=H@#M9T6{XVCNh`yTIOM&}9 zp=F*fjv*44YbWgHWmXh$5s!E9;GE)=ZfDe<_wo*>s)D7WgWP8OmpR^U3)GLi+hFYS z&~=j#U!tQp(_}#g%^M5`%6Thd>^!B4mS39D`#sBEW23`Lk(s}k zIq-SO-2B@A*PnmbS>rcvcXz*a+s|3Af_o43h}m4#kV`6g+OjP0?JR+*3(s6u+M=O6 sWj4o#ZEnA{6TauXUpcFxN$(3A*S7RM>(sRSfG%e6boFyt=akR{0A0Ij#sB~S literal 0 HcmV?d00001 diff --git a/LCARStrek/browser/magnifier.png b/LCARStrek/browser/magnifier.png index bcce4ad2b1c9fa5c6e4c85dd2e6461cbba46aef3..35009601c92c5a5c4e890f9beae83e6ccc25d2b2 100644 GIT binary patch delta 213 zcmey&^ptUeL_H%j0|Ue4mV3QGiY>q=#1%*{m@wgQ;NOox7Gp_}UoeBivm0q3PLj8~ z3quF1tOt<8S>O>_%)r1c48n{Iv*t(u1=&kHeO=k_bBc(VG2}n7u>uN3c)B=-a9j^P zvrx3bfT!i5J%8gHj+-s(T3kX5qTFBlaZJ@XrONkt@1B^V8!V@^YdT+D00BBlL_t(|0iDyoN&`U<$MLlZL4r}x!ie_< zVyl?SVCSFrF-E>3u`#An5iHft7f5AH&_W+VG$5yfMM46pPFMy^#@XV$DGuhhAC|e@ zbH5J}6`FJy@F9#H@`nJb%cNcMe!*nG#iE>9xpM zs3!3_lOs`%E9qDNqDW@B&=C{d_@vK*M*BW^HAkM}%cr{kG*M0000g lgzvIB?^n)hXwv(_#H%Xs>K1-beJMn#Jv7x}U%s8#KZpchRi6>3wPUPvthoyrO`=E+6D z&BM$&_cOyBua$D&{P3A`hDR#@&`rcFD{S$VFKn{HO(y9=s((o+*AdRMfvZq~h+OSZ zh6z6568gv(nOdNBp5cr=p}ksYkRmRiT?VRwM%c#%w$D%~bh->vqQFJ+3?CM8g_mWi z{t&1G|ImIgO(){j!*ve4$sO9PP?lwH`2ia7u~l#SF&P___ZBaaMPh1V-rG25fpXq^ za}`OffjOLNi+@})^gmAZkSt=T+57I8NQTzc_)j_zW4-)Vo9jtXH%>K;*z-QAj(8~2 z?+u+nP@jevi-%^_=o%8(d$m0i53PnDoN7UT$;Lza(H;+mrquSkc<8$t9S(*j^>=wZ zw5LW#f}u!5_M^)OLl^8vx1vTb2Sc~?!(e~BUj#A@Y=7Gy?@65Mco1|7ry7lix^Sv% zLC_tXsy!YO*3|GXdd$p!l+@;PBngVV>tUmbIm#=`!D%SRHcmB1Ln712J)CNjresJM z$LUz0IpM##?`@n#EKr6eZ*ha(n9t_5H@!!z4HAyA<1HUB&q=c0femt(QrU}tiwzR` z%idEzvwy%8c_QF8yErd1rGFXHlr1|Y=myxW7v=wVtuRFM-x{V2sCLj5Sk)Cp2lksdyzPLQG&|1roP(~)SO`(MEl00000 LNkvXXu0mjf)1Ey| diff --git a/LCARStrek/browser/newtab/newTab.css b/LCARStrek/browser/newtab/newTab.css index 37cbe79d..f1455c73 100644 --- a/LCARStrek/browser/newtab/newTab.css +++ b/LCARStrek/browser/newtab/newTab.css @@ -252,6 +252,30 @@ body { } /* SEARCH */ +#newtab-search-logo:hover { + background-color: #FFCF00; + border: none; +} +#newtab-search-logo[active] { + background-color: #FF9F00; + border: none; +} +#newtab-search-logo { + background-image: url("chrome://browser/skin/magnifier.png"); +} +#newtab-search-logo.magnifier[active], +#newtab-search-logo.magnifier:hover { + background-image: url("chrome://browser/skin/magnifier-hover.png"); +} +/* Newer versions only */ +#newtab-search-icon { + background-image: url("chrome://browser/skin/search-indicator-magnifying-glass.svg#magnifying-glass"); +} +#newtab-search-logo.magnifier[active], +#newtab-search-logo.magnifier:hover { + background-image: url("chrome://browser/skin/magnifier-hover.png"); +} + #newtab-search-text { border: 1px solid #9C9CFF; background-color: #000000; @@ -266,20 +290,88 @@ body { } #newtab-search-submit { - background: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go") no-repeat scroll center center; + background-image: none; background-color: #C09070; + color: #000000; + box-shadow: none; border-radius: 0 300px 300px 0; border: none; -moz-margin-start: 3px; } #newtab-search-text:focus + #newtab-search-submit, #newtab-search-text[autofocus] + #newtab-search-submit { - background: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go") no-repeat scroll center center; + background-image: none; background-color: #008484; + color: #000000; box-shadow: none; } #newtab-search-text + #newtab-search-submit:hover { - background: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go") no-repeat scroll center center; + background-image: none; background-color: #FFCF00; + color: #000000; box-shadow: none; } +/* Newer versions only */ +#newtab-search-submit[value=""], +#newtab-search-text:focus + #newtab-search-submit[value=""], +#newtab-search-text[autofocus] + #newtab-search-submit[value=""], +#newtab-search-text + #newtab-search-submit[value=""]:hover { + background-image: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go"); +} + +/* CUSTOMIZE */ +#newtab-customize-overlay { + background: #A09090; +} + +#newtab-customize-panel, +#newtab-customize-panel-anchor, +#newtab-customize-panel-inner-wrapper, +.newtab-customize-panel-item, +.newtab-customize-complex-option { + background-color: #000000; +} + +#newtab-customize-title { + color: #9C9CFF; + background-color: #000000; +} + +.newtab-customize-panel-item[selected], +.newtab-customize-panel-subitem[selected] { + color: #FF9F00; +} + +.newtab-customize-panel-item:not([selected]), +.newtab-customize-panel-subitem:not([selected]) { + color: #A09090; +} + +.newtab-customize-panel-subitem > .checkbox { + background-color: #000000; + border-color: #A09090; +} + +.newtab-customize-panel-subitem[selected] > .checkbox { + background-color: #000000; + background-image: url("chrome://global/skin/menu/shared-menu-check-active.svg"); + color: #FF9F00; +} + +.newtab-customize-panel-item:not(:first-child), +.newtab-search-panel-engine { + border-top: 1px solid #A09090; +} + +.newtab-customize-complex-option:hover > .selectable:not([selected]), +.selectable:hover:not([selected]), +.newtab-customize-complex-option:hover > .selectable:not([selected]) + .newtab-customize-panel-subitem, +.newtab-customize-panel-item:hover:not([selected]) { + background-color: #FFCF00; + color: #000000; +} + +.newtab-customize-complex-option:hover > .selectable:not([selected]), +.selectable:hover:not([selected]) { + background-image: url("chrome://global/skin/menu/shared-menu-check-black.svg"); +} diff --git a/LCARStrek/browser/search-indicator-magnifying-glass.svg b/LCARStrek/browser/search-indicator-magnifying-glass.svg new file mode 100644 index 00000000..a34e82b5 --- /dev/null +++ b/LCARStrek/browser/search-indicator-magnifying-glass.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/LCARStrek/global/in-content/info-pages.css b/LCARStrek/global/in-content/info-pages.css index 3ad5e539..9bcb30ab 100644 --- a/LCARStrek/global/in-content/info-pages.css +++ b/LCARStrek/global/in-content/info-pages.css @@ -18,7 +18,8 @@ body { max-width: 52em; } -.container.flex { +.container.flex, +.container.restore-chosen { display: flex; flex-direction: column; flex-grow: 1; -- 2.43.0