From 0635303bffe3fcaf9853a51fa67236ecce2a5682 Mon Sep 17 00:00:00 2001 From: saikat Date: Mon, 12 Oct 2020 23:54:16 +0530 Subject: [PATCH 1/5] add support for detecting restricted browser page and show appropriate popup - extract common css into seperate files - copy disabled icons for restricted case also. maybe in future can have seperate icons --- .../icons/128-restricted.png | Bin 0 -> 4792 bytes .../icons/16-restricted.png | Bin 0 -> 494 bytes .../icons/32-restricted.png | Bin 0 -> 1092 bytes .../icons/48-restricted.png | Bin 0 -> 1564 bytes .../icons/restricted.svg | 1 + .../popups/deadcode.html | 6 +-- .../popups/development.html | 6 +-- .../popups/disabled.html | 6 +-- .../popups/outdated.html | 6 +-- .../popups/production.html | 5 --- .../popups/restricted.html | 14 +++++++ .../popups/shared.css | 7 ++++ .../src/background.js | 36 ++++++++++++++---- 13 files changed, 54 insertions(+), 33 deletions(-) create mode 100644 packages/react-devtools-extensions/icons/128-restricted.png create mode 100644 packages/react-devtools-extensions/icons/16-restricted.png create mode 100644 packages/react-devtools-extensions/icons/32-restricted.png create mode 100644 packages/react-devtools-extensions/icons/48-restricted.png create mode 100644 packages/react-devtools-extensions/icons/restricted.svg create mode 100644 packages/react-devtools-extensions/popups/restricted.html create mode 100644 packages/react-devtools-extensions/popups/shared.css diff --git a/packages/react-devtools-extensions/icons/128-restricted.png b/packages/react-devtools-extensions/icons/128-restricted.png new file mode 100644 index 0000000000000000000000000000000000000000..67b1c9a31a6dfe22567ce26e385b0be06022e3c2 GIT binary patch literal 4792 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 Sp@}{K0000Q9n z-goZ3=iI!SBuOXCkEFj@Dp$d->$WD7$#u8eRVij!*4cDAy+f{2fMZX|*@dg!Zuc5R zk)5XL8!L3rfc-qrSM&M&0bj>)3=wls0G9y5nRUHD5jdOXyqYJMtE3b~;iDUd(JG2! z4e#}Omz0m=cwNQtO6YuFh($ literal 0 HcmV?d00001 diff --git a/packages/react-devtools-extensions/icons/32-restricted.png b/packages/react-devtools-extensions/icons/32-restricted.png new file mode 100644 index 0000000000000000000000000000000000000000..7c750453238885d1cba45da238abc82ae0fcfa06 GIT binary patch literal 1092 zcmV-K1iSl*P)({HVg{3dAJt$@ z#3X9$`B{(LT;F@q28zzC44$pwO_=FdH71k~AWD^z$SK%5RKNa;O|+ zRx)u+O-(&LI5-%O#bPtt+uL3Euf@BvveE$F)6>&=JiEKQOYUNYO>2;{=NA_je=ms= ziNw##Ya-!Z67CTBNa;7MfuDKL&d!1&pT^K$gdzx9TwHvC{}9G=P=a~#`ZbhdP=v;K z@8;&_JMiI|wE^%7L!K9vvN4E)%!df<@>-9z{{Ea=f;- z=I-t74at1x=jY+Fva$v}`56t!&(FVANECXf-EJRDCX>HXsnl^}W8F** zxY#NFhoaWj))~C}e7?6!OH1vD#N_1U?5!R%o1K)xu%3KVrtp`Smv?P!Y_wEVR5&db z%d>)l0;kDjx@yIqo}TZ_TUc1wK;C{qM6fR!jfP+to_ad+xDsVAM@L6HY&KgLD+56| zgvR4>zg!zutMwH;W}X|UqclY#kvbHT+0xLkM61fkJL82;g?Y8l~e6=JCWDc+r-a0}g!Zu%TD~(9GEp=JD=RApR##WstE#G;gmk4M;sNCt^F@RN{O;}Tg_@e0 z=7YhYySlpCm(`63p;v1sP7OlMm;hciKB?gDcONhsjitz=Jm1&X*NzCZwYAOH)zwWP z68%InA9&=`^xnrY<@#8j^Lo99i>EJ6m71>06ef z?tK~c)XoeMKV;<88%FxEXj!(tzMk0K-JK(k|4=vlpo_)w@bGYdXJ_YEnb+g-_{oU( z4u>N^M*jxy$jFErGVXmNdQ4KTzfyBWNu(ft{ef!C#pn4y0R{m73@I68j+emz0000< KMNUMnLSTXgoDP}* literal 0 HcmV?d00001 diff --git a/packages/react-devtools-extensions/icons/48-restricted.png b/packages/react-devtools-extensions/icons/48-restricted.png new file mode 100644 index 0000000000000000000000000000000000000000..372b6e00e88a85c08ccfa020e8db75b31b429a5b GIT binary patch literal 1564 zcmV+%2IKjOP)X|Jd>e?ZEK3(Fq>>IDf=r&l24$Pz0Ohy##{rBE=7 zFpKTHpX(RBOlH2t#%bM=MtsaS^S-yg-y6vD{4?@t`e_z>a$`hkMrg+JQp|r%)9cBt z5vTbVnE#4qfhYF{l<)KAklW}+vDcI1!?gf?eSPJ-ySqQ#+}ylLBocpKU0wZgczF0? zW@e_T9j5PLget!NLm^wK*nc{WQYJ@cWgFHu8djR2h4}<_Mvf8(p@;rXe zngFbQFt5IY<|UJ0ir1ypbZ0RyFE3xGX$9w-nF(mriIu=OEW(zt(k?8CeGtSAPmY6_ zgY^3PIy^o;ernp+*w{F+u(0r5JRUzSEG%sGdcEa1)8F6!sJpv6Y&y5NxR`wB^ZD*) zB@0znR+cBrA2DXPcXf63y}D*4G{(Tdz)nhlKvvVJlQbI)1}CBU+uPeDQ?LZZ#E2t& z;6OoX3DDWuxs)t@#l;;~`$lMhVK6c`H}`yFV`C8Oe!stm;v;A}M;WbyT{Pq4Gk}tQFWA+mHE>JME9I-rVQ~LEU>b&^1Qvh zJ%qrfpbga4*0vTD6qHw0RR!4%ph*tmXf(RSmczT_Epl6ln)RF}bISj~H_EGPwL zPxwp#X<9p9R%1hIPHM~w?@P^FDU2u1vgNe`NP>2LECW|HYr;C4^O#VE^l@3Z zq`+#1!M9{br^!J2LM9KgAXt;yU<W6s zO3%*DLex)8a}#xEaGEhY&>}bOcLAf(J3s-T=N3-;+tt7+YaQGKAG<;iuy3o|r z^th&`Cdifm%>LvSHU*o(EVR#GMryAqW6%heDx2-SrA-K1>39Rv7Qpg>Vs@Jd~IBjcE`1Vv3g^@yrcC&N%J^1-?|Q68MMcFR_A&Dp7Z)Kr z=D*nA2b^Rc-2cn|nbPNDijSxNx&Vwct^SyS7+{~L#(Wyt2$n!_TU~6ifNn3gT-{D{ zvm!e%iPyQxs#RIVS2|emMXuK+c!LlCS19$e3p0T(tVvjcGk_zQQgE9ah|C1A!~1w= z1?ce3>bxE9Nec^^f;12ae8e;d2M3|q+1Xc4E}{6ctgEZ*3Bi&MO38jgn>$XiPeyg% zfAMG5|DpiV9Ogd?0q|cR@f>6xJV)@)9=K<@Od(TWu4ta--!x+%1Q-Bvr`E+MSw)!u O0000disabled \ No newline at end of file diff --git a/packages/react-devtools-extensions/popups/deadcode.html b/packages/react-devtools-extensions/popups/deadcode.html index 4073f80bde204..5b458981e006b 100644 --- a/packages/react-devtools-extensions/popups/deadcode.html +++ b/packages/react-devtools-extensions/popups/deadcode.html @@ -1,15 +1,11 @@ + +

+ This is a restricted browser page. +
+ React devtools cannot access this page. +

diff --git a/packages/react-devtools-extensions/popups/shared.css b/packages/react-devtools-extensions/popups/shared.css new file mode 100644 index 0000000000000..cd3d35d005897 --- /dev/null +++ b/packages/react-devtools-extensions/popups/shared.css @@ -0,0 +1,7 @@ +html, body { + font-size: 14px; +} + +body { + margin: 8px; +} \ No newline at end of file diff --git a/packages/react-devtools-extensions/src/background.js b/packages/react-devtools-extensions/src/background.js index 1a8302c2b1dfd..4637b9f031fb9 100644 --- a/packages/react-devtools-extensions/src/background.js +++ b/packages/react-devtools-extensions/src/background.js @@ -78,17 +78,37 @@ function setIconAndPopup(reactBuildType, tabId) { }); } -// Listen to URL changes on the active tab and reset the DevTools icon. -// This prevents non-disabled icons from sticking in Firefox. -// Don't listen to this event in Chrome though. -// It fires more frequently, often after onMessage() has been called. -if (IS_FIREFOX) { - chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => { +function isRestrictedBrowserPage(url) { + return !url || url.indexOf('chrome://') === 0; +} + +function checkAndHandleRestrictedPageIfSo(tab) { + if (tab && isRestrictedBrowserPage(tab.url)) { + setIconAndPopup('restricted',tab.id) + } +} + +// update popup page of any existing open tabs, if they are restricted browser pages. +// we can't update for any other types (prod,dev,outdated etc) +// as the content script needs to be injected at document_start itself for those kinds of detection +// TODO: Show a different popup page(to reload current page probably) for old tabs, opened before the extension is installed +chrome.tabs.query({}, (tabs)=>tabs.forEach(checkAndHandleRestrictedPageIfSo)); + +chrome.tabs.onCreated.addListener((tabId, changeInfo, tab) => checkAndHandleRestrictedPageIfSo(tab)); + +chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => { + checkAndHandleRestrictedPageIfSo(tab); + // Listen to URL changes on the active tab and reset the DevTools icon. + // This prevents non-disabled icons from sticking in Firefox. + // Don't do this in Chrome or Edge though. + // It fires more frequently, often after onMessage() has been called. + if (IS_FIREFOX) { if (tab.active && changeInfo.status === 'loading') { setIconAndPopup('disabled', tabId); } - }); -} + } +}); + chrome.runtime.onMessage.addListener((request, sender) => { if (sender.tab) { From 68b4c4e6b0c21b329003afec48df10227261786a Mon Sep 17 00:00:00 2001 From: saikat Date: Tue, 13 Oct 2020 00:02:22 +0530 Subject: [PATCH 2/5] import shared css in production.html also --- packages/react-devtools-extensions/popups/production.html | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-devtools-extensions/popups/production.html b/packages/react-devtools-extensions/popups/production.html index 84b0bb50ef8a5..44ae17939e266 100644 --- a/packages/react-devtools-extensions/popups/production.html +++ b/packages/react-devtools-extensions/popups/production.html @@ -1,4 +1,5 @@ +