From b8a302ca7fac1aab4e3915fb37775a4730f7146f Mon Sep 17 00:00:00 2001 From: fgkolf Date: Thu, 20 Oct 2022 20:17:46 +0300 Subject: [PATCH 1/4] Add loading for smoother startup --- popup/index.html | 5 ++++- popup/styles.css | 43 +++++++++++++++++++++++++++++++------ scripts/main.js | 55 ++++++++++++++++++++++++------------------------ 3 files changed, 68 insertions(+), 35 deletions(-) diff --git a/popup/index.html b/popup/index.html index 0765c22..9d0b86d 100644 --- a/popup/index.html +++ b/popup/index.html @@ -9,7 +9,10 @@ -
+ +
+ +
{ document.getElementById('search').addEventListener('input', onInputChange); @@ -96,6 +97,7 @@ const createOverlay = ({ url, id, title, windowId }) => { // Image related const createImage = (imageUri) => { const image = document.createElement('img'); + image.setAttribute('loading', 'lazy'); image.setAttribute('src', imageUri); return image; }; @@ -107,30 +109,29 @@ const onCaptured = (imageUri, tab) => { return fragment; }; +const handleLoading = () => { + setTimeout(() => { + container.classList.remove('hidden'); + loading.remove(); + }, 1500); +}; + const urlRegEx = /[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&/=]*)/; const isValidURLFormat = (url) => urlRegEx.test(url); -function* yieldMyTabs(tabs) { - // eslint-disable-next-line no-restricted-syntax - for (const tab of tabs) { - yield tab; - } -} - -const createLazyTabItems = async (tabs) => { - const tabsIterator = yieldMyTabs(tabs); - let nextIteration = tabsIterator.next(); - while (!nextIteration.done) { - const tab = nextIteration.value; - const gridItem = document.createElement('div'); - gridItem.setAttribute('class', 'grid-item'); - gridItem.setAttribute('id', tab.id); - // eslint-disable-next-line no-await-in-loop - const uri = await browser.tabs.captureTab(tab.id); - gridItem.appendChild(onCaptured(uri, tab)); - container.appendChild(gridItem); - nextIteration = tabsIterator.next(); +const createTabItems = (tabs) => { + while (tabs.length) { + const fragment = document.createDocumentFragment(); + tabs.splice(0, 4).forEach(async (tab) => { + const gridItem = document.createElement('div'); + fragment.appendChild(gridItem); + gridItem.setAttribute('class', 'grid-item'); + gridItem.setAttribute('id', tab.id); + const uri = await browser.tabs.captureTab(tab.id); + gridItem.appendChild(onCaptured(uri, tab)); + }); + container.appendChild(fragment); } }; @@ -138,19 +139,19 @@ const getTabs = async () => { const tabs = await browser.tabs.query({ pinned: false }); const validTabs = tabs.filter((tab) => isValidURLFormat(tab.url)); if (validTabs.length > 0) { - createLazyTabItems(validTabs); + handleLoading(); + createTabItems(validTabs); addGridContainerListeners(); } else { - const emptyContainer = document.createElement('div'); - emptyContainer.setAttribute('class', 'grid-item empty'); - emptyContainer.innerText = 'Start browsing and come back!'; - container.appendChild(emptyContainer); + loading.innerText = 'Start browsing and come back!'; } }; const setPopupProperties = (windowInfo) => { if (windowInfo.width < 800) { - document.getElementById('container').setAttribute('class', 'grid-list'); + document + .getElementById('container') + .setAttribute('class', 'grid-list hidden'); document.getElementById('curtain').style.gridTemplateColumns = 'auto'; document.getElementById('search').style.gridArea = '2 / 1'; document.getElementById('search').style.left = '35px'; @@ -165,8 +166,8 @@ const adjustPopup = async () => { }; const loadContent = () => { - adjustPopup(); getTabs(); + adjustPopup(); addCloseBtnListener(); addMenuButtonsListeners(); addSearchInputChangeListener(); From 6bc8b61a57f4cdbbf77dbb38c301c295901a17e3 Mon Sep 17 00:00:00 2001 From: fgkolf Date: Thu, 20 Oct 2022 21:12:22 +0300 Subject: [PATCH 2/4] Replace pngs with svgs --- images/checkwhite.png | Bin 196 -> 0 bytes images/close.png | Bin 309 -> 0 bytes images/close.svg | 13 +++++++++++++ images/closeorange.png | Bin 322 -> 0 bytes images/file.png | Bin 344 -> 0 bytes images/file.svg | 14 ++++++++++++++ images/menuclose.png | Bin 322 -> 0 bytes images/menufile.png | Bin 346 -> 0 bytes images/menustar.png | Bin 774 -> 0 bytes images/star-full.png | Bin 780 -> 0 bytes images/star.png | Bin 750 -> 0 bytes images/star.svg | 17 +++++++++++++++++ popup/styles.css | 28 +++++++++++++++++++++------- scripts/eventListeners.js | 10 ++++------ 14 files changed, 69 insertions(+), 13 deletions(-) delete mode 100644 images/checkwhite.png delete mode 100644 images/close.png create mode 100644 images/close.svg delete mode 100644 images/closeorange.png delete mode 100644 images/file.png create mode 100644 images/file.svg delete mode 100644 images/menuclose.png delete mode 100644 images/menufile.png delete mode 100644 images/menustar.png delete mode 100644 images/star-full.png delete mode 100644 images/star.png create mode 100644 images/star.svg diff --git a/images/checkwhite.png b/images/checkwhite.png deleted file mode 100644 index 6eb37e787123c68b6351317a8aa508137bc7e08f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 196 zcmeAS@N?(olHy`uVBq!ia0vp^k|4~%1|*NXY)uAnN?apKg7ec#$`gxH85~pclTsBt za}(23gHjVyDhp4h+5i=$dAc};RNP8RkYH`*HCV*`=l}nD`>AL49XN3!qT}?W{|>7r zI&nW~j9|>@R1S+=p(?_-K#=c*;vtuQ3(2i1S0)8|Z)jq7*dq|1_t#!3ruqD&|5q6K r3_eF}xbe_qtylIIUk5P;4g-es50d64ZI~ktw2{Hn)z4*}Q$iB}P8>$F diff --git a/images/close.png b/images/close.png deleted file mode 100644 index a16beae347633bd95609aaffedb7bed58e7db968..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 309 zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTC$r9IylHmNblJdl&R0hYC{G?O` z&)mfH)S%SFl*+=BsWw1G*F9YvLn>~)nR%19*@4GJu(x3fn?`2{o2)9Yf+Opc2^N#~ zTORr)VW|9*`^cV$5tY87fg-MfVO1t?y|XyJ$k*{iKfhvqy~6vepyHLy;cchOA3l~` zv}1WXhp~RYz%#jNY + + + diff --git a/images/closeorange.png b/images/closeorange.png deleted file mode 100644 index 9ce56bdee5de63e70aa0d57f7afe4402e962a5f1..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 322 zcmV-I0lof-P)aEJu$lKtAqavXtZ={V2dO@gzn?VB-P0^Q<0{of zn5djx)v$RN9-b!DIXz97ae0_9=ddJjd&?F??*Ex4VZ2D+t$Zt9`OD$s*1=+Pqda5wU-{*-$u3$;^zsX4|KFWIRr1VIpl6`leN0EMoi U(FfN5b^rhX07*qoM6N<$f^klWssI20 diff --git a/images/file.png b/images/file.png deleted file mode 100644 index 6c1293ad7e38d5d5152d65295720862fe47d363d..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 344 zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTC$r9IylHmNblJdl&R0hYC{G?O` z&)mfH)S%SFl*+=BsWw1GzdT(WLn>~)nemXf$w0tOJCT3(jt0MkyA8ZO(i95mlf zUG%@`%)~_tZ>UaWI>*q;xntiX!_tGj3!qM;hzScfH!d_-n=pFd?QL<6dy*e4`&XbY}oNh)aOOG(EeXkwzuBFZ`Sot@P0|S#lgToZrmFFy(_vl~JP~-rMFt8{vG};S%_}{v1 mi|g5_1%V6<0?peQm>CYKnf;#;X1)sO0|rl5KbLh*2~7YO!-QV| diff --git a/images/file.svg b/images/file.svg new file mode 100644 index 0000000..0bab034 --- /dev/null +++ b/images/file.svg @@ -0,0 +1,14 @@ + + + + diff --git a/images/menuclose.png b/images/menuclose.png deleted file mode 100644 index 0ead943e58e94d15141135dc76a5b36daaa1cca4..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 322 zcmV-I0lof-P)`bf605k%f^bS8P(0>aEJu$lKtAqavXtZ={V2dO@gzn?VB-P0^Q<0{of zn5djx)v$RN9-b!DIXz97ae0_9=ddJjd&?F??*Ex4VZ2D+t$Zt9`OD$s*1=+Pqda5wU-{*-$u3$;^zsX4|KFWIRr1VIpl6`leN0K{FQ UEhVbsG5`Po07*qoM6N<$f>ULOcK`qY diff --git a/images/menufile.png b/images/menufile.png deleted file mode 100644 index 2037fd93e35c355cf9349d421a12430977331266..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 346 zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTC$r9IylHmNblJdl&R0hYC{G?O` z&)mfH)S%SFl*+=BsWw1Ge>`0rLn>~)nQ@WxkbywkVv+U_OZy&hykzrJSoeVC7-tFd zLDyM=G7J6fe!ubF+su8%E@aXQ&jT3F2bw(m}?Mj%&{0!P<{Ha5uEKTM$kX?ZK4W};b8_MDIYMu~clmVlGf%je&S86} zQ~v#)X?iPFLv~B>7y38032mOIpL?=U`fif&l6>>|w`#IFoR5ay__MO~&4Sh&R)+r- z{c0XaoV-u% jjPm6Q98C-IU#K2nc>g@$*6UE`W{@gRS3j3^P6`Fc3vShn$^jPNoCs z09RnsKu9V`QbC*wJg&fY8UR;-J1`xXQ?BtjmqeTSWHbb9kXQ^e*31sJK)cfFt+WEm zx|VC{Z~1z^8AeTJ|f07!5orblqcCy6QaH+QYVY%6WE8g~Z2T#K8FpbT~SlH%cWC$SGz)w@};EWKl59g=QMNwOTf&xsfmkJQwW72KK4# z7`i&2fe_Q58DN+J!|)OVFvX`8jKl@;X$2$Q8Sty{p^lV&6Tr6u_XI|MmjejP&b_jO z&sf{XC2goK!82v&<*<_hz`L%>KP6#OA|!mv{Ipc?G}SHX8G5$xl8bb?I$v{yX7FZt z`hcV89)t4A4jsxM=19?9r0Bkqx@S7UEHv?nmApNvlebr#GZN*T5$j-NYv4mEFTFN@ zYLd6tIA<(z7I2#EEkXky3mN1HUf0gs(bj{mRlx?!0P-nbOXHr&F03x2qzi9Btfm;* z4e{Bl?_?MbOZmI0+RkY@0}fZ`m8I6PuH{;~D?b7Z04zj1mM}auAOHXW07*qoM6N<$ Ef++i25C8xG diff --git a/images/star-full.png b/images/star-full.png deleted file mode 100644 index 0ec84aad6c2e0a53cb6614d18442b6a22984e64d..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 780 zcmV+n1M~ceP)-X{j3{MuHiiTG%iWO!z2ouZ^o~eU17?zXB(GYGK4k41fHtWbz3&bJM{Tir+ZjCKVGpQe0I*LufDFa+@WO8>g=K>lGYe~cZ|HPw|j`WDjG zUkCk1y~F3}_Wx3X^7IP9R>-#OtUOQmH{v9;a8e>$ia45?i24_d%;o1BJobyL6mGdG zE`Z&;9LKzUF-M+S;n(b@XZs&~EBlv&m>!5^Q{OwR%20!!Ynx;{y5>B;r9#Eu2NcfO zkUGVn^8Tx|Q}mNYNzpTc@6h*VWNd;5*m!O;cw0jsIt{At5$N%F?wq5)OeEg5A== zeyMekuEAFz!SYuQ7*@bA`Hl&=;?oO8;v4bl1tZ%Ph%e%!2GaDO0R2}GUco3Haso-? zxi>3*Bezc)o|))Ax~J*9oD4Go@^1Kre^rEK#R>&qUZ0lEJiXO@>K=9P*Oy#Nt<&P) z9AO!})o1xYN6{T76*V0?j7iK;!_%R`=(9Ze&L+4G0qvK4Mx5N zJ_nCpn`d3>_7>-i9A|-`%iba^@bOSVKEdnubvr#9LD%BU2FnEMB`&1#$Y~cg)2Px# zZ$Z4S82KIX*_rQT7!FJIyQ$XB>AC^|+u%>BHt-(ukm2N?00RKMfd*K$Z2|fK0000< KMNUMnLSTYaBX5=f diff --git a/images/star.png b/images/star.png deleted file mode 100644 index 6d48f97babb22b9a695c5f3d3d85109259f1a13d..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 750 zcmVJG=Lpo z1(6C!DoD}+9XM8?Rv=b@9bf|)Nd?+L@|RgMKju;R=MZMNnH%+iyZ`&WzddoBQAX*n zJUx0IDW?y?yoNb+unTyGvWd$GpNaf9;pfBWS8*QN4iI$C(D@J{M9@j0&x3-H0-p#& zTP_$0PWZ?Pr=*-P63p-^g$+i62|g6ZkigGh7ULLBrph4EcFF>6y2mG(n%uqTk4jh_%tbsm;=ov zX+-7_sV#m+w<60h`C9%flNb+7rP60!6#=Hnldl}Ur`Lk#)-*`?Tfkt%)m@*UeQMoJMp!pE%6~Ed$2haY`M_fpjxZ4vE@d>BJl!XH?{Cj&w8-c`3}U` z{=x!=1z;H8V*$4CX$3~&j__#(My5LuR>6lRqI)NRcLl)}7=>LfAlCK0a)R$T+da)Q zG?w8WUB4W6vH(OkQ1M^#b`ZX0*)3f}n#PuNkEYKcTY<^j9ATKeMM)pfiso1pQQzds zsgr=B2cYPoLfs3KWEO_-Nfq9n)#2?GeMYAA8L0`3Tm$$J<)y#P- + + + diff --git a/popup/styles.css b/popup/styles.css index d4529cf..b9c7b59 100644 --- a/popup/styles.css +++ b/popup/styles.css @@ -84,27 +84,39 @@ body { } .star { - background: url("../images/star.png") no-repeat center; + background-color: black; + -webkit-mask-image: url("../images/star.svg"); + mask-image: url("../images/star.svg"); +} + +.star.full { + background-color: royalblue; } .file { - background: url("../images/file.png") no-repeat center; + background: url("../images/file.svg") no-repeat center; } .x { - background: url("../images/close.png") no-repeat center; + background: url("../images/close.svg") no-repeat center; } .menustar { - background: url("../images/menustar.png") no-repeat center; + background-color: var(--color-orange); + -webkit-mask-image: url("../images/star.svg"); + mask-image: url("../images/star.svg"); } .menufile { - background: url("../images/menufile.png") no-repeat center; + background-color: var(--color-orange); + -webkit-mask-image: url("../images/file.svg"); + mask-image: url("../images/file.svg"); } .menux { - background: url("../images/menuclose.png") no-repeat center; + background-color: var(--color-orange); + -webkit-mask-image: url("../images/close.svg"); + mask-image: url("../images/close.svg"); } .plus { @@ -116,7 +128,9 @@ body { position: absolute; top:1%; right: 1%; - background: url("../images/closeorange.png") no-repeat center; + background-color: var(--color-orange); + -webkit-mask-image: url("../images/close.svg"); + mask-image: url("../images/close.svg"); } .curtain { diff --git a/scripts/eventListeners.js b/scripts/eventListeners.js index b258244..645203f 100644 --- a/scripts/eventListeners.js +++ b/scripts/eventListeners.js @@ -1,7 +1,5 @@ /* eslint-disable no-unused-vars */ /* eslint-disable no-param-reassign */ -const starBtnFullUri = 'url("../images/star-full.png")'; -const starBtnUri = 'url("../images/star.png")'; const results = document.getElementById('results'); let checkedIds = []; let checkedUrls = []; @@ -169,10 +167,10 @@ const onStarClicked = async ({ target }) => { const { url } = target.dataset; const bkmNode = await browser.bookmarks.search({ url }); if (bkmNode && bkmNode.length > 0) { - target.style.backgroundImage = starBtnUri; + target.classList.remove('full'); browser.bookmarks.remove(bkmNode[0].id); } else { - target.style.backgroundImage = starBtnFullUri; + target.classList.add('full'); browser.bookmarks.create({ url, title: url, @@ -211,9 +209,9 @@ const onImageEnter = async (e) => { const starButton = document.getElementById(`star_${id}`); const bkmNode = await browser.bookmarks.search({ url }); if (bkmNode && bkmNode.length > 0) { - starButton.style.backgroundImage = starBtnFullUri; + starButton.classList.add('full'); } else { - starButton.style.backgroundImage = starBtnUri; + starButton.classList.remove('full'); } } // if only one tab don't show checkbox From c95b254bab3316b76cc429a9b3fc8d18a64d3604 Mon Sep 17 00:00:00 2001 From: fgkolf Date: Wed, 2 Nov 2022 21:16:12 +0200 Subject: [PATCH 3/4] Change checkboxes to input type checkbox --- images/checkbox.png | Bin 192 -> 0 bytes images/checkedbox.png | Bin 385 -> 0 bytes popup/index.html | 4 ++- popup/styles.css | 69 +++++++++++++++++++++++++++++++++----- scripts/eventListeners.js | 46 +++++++++++-------------- scripts/main.js | 12 ++++--- 6 files changed, 91 insertions(+), 40 deletions(-) delete mode 100644 images/checkbox.png delete mode 100644 images/checkedbox.png diff --git a/images/checkbox.png b/images/checkbox.png deleted file mode 100644 index 0ea9e844bc47eaadb9fd092a8eef88461566ea30..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 192 zcmeAS@N?(olHy`uVBq!ia0vp^k|4~%1|*NXY)uAnN?apKg7ec#$`gxH85~pclTsBt za}(23gHjVyDhp4h+5ixI&w|JLL+EvQDm0T|BKP%1A`_U=)}CT%)N< l&im{C+eHQQ7cmGVFeo((PRkQG;svyg!PC{xWt~$(696UcJ=*{P diff --git a/images/checkedbox.png b/images/checkedbox.png deleted file mode 100644 index a354faf167aa5770ab361cc05d59670e7ec102a0..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 385 zcmV-{0e=38P)P000>X1^@s6#OZ}&0000PbVXQnQ*UN; zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUzBS}O-RCwBAU>F614KSh$L_|a-04W73 zn0;Wyie(2t3>GYs@!2`q4wRVw^yyQE4eK|6Ey869gNlj@RfCI(S_bi6C}Lpwe3N#T z@LZ{9V0*Qnf&X{}1Jn0s)VBm=0sFH}VD=ZCMuvZ!Qq;ACTnp9!OhMc?AU^oR zt4`1Yyq5eHG65R`G8AUnUm&0FbSeYmpU+^qPo}dO{qsT378-@kt! ft*Hk&00=Mu`$cn~)WFcc00000NkvXXu0mjfPhyol diff --git a/popup/index.html b/popup/index.html index 9d0b86d..4de2d8e 100644 --- a/popup/index.html +++ b/popup/index.html @@ -4,7 +4,9 @@