Merge pull request #2 from LeoVS09/feature/base-ui-improvements

Base UI improvements

Makefile

@@ -22,7 +22,7 @@ clean:
 # DEVELOPMENT
 # ---------------------------------------------------------------------------------------------------------------------
 
-dev: docker-build docker-console
+dev: docker-build docker-start
 
 production:
 	npm run build
@@ -40,3 +40,9 @@ docker-console:
 	docker run -it --rm -v ${PWD}:/work -w /work --name mind-history-extension -p 3000:3000 $(DOCKER_IMAGE_TAG) bash
 
 console: docker-console
+
+docker-start:
+	docker run -it --rm -v ${PWD}:/work -w /work --name mind-history-extension -p 3000:3000 $(DOCKER_IMAGE_TAG) yarn start
+
+attach-console:
+	docker exec -it mind-history-extension /bin/bash

build/dev-server.js

@@ -41,6 +41,11 @@ var server = new WebpackDevServer(compiler, {
     'Access-Control-Allow-Origin': '*',
   },
   disableHostCheck: true,
+  stats: config.stats,
+  overlay: {
+    warnings: false,
+    errors: true,
+  },
 })
 
 server.listen(env.PORT)

package.json

@@ -10,6 +10,7 @@
   "scripts": {
     "build": "node build/production.js",
     "start": "node build/dev-server.js",
+    "dev": "DEBUG=true NODE_ENV=development npm run start",
     "lint": "yarn lintonly --fix",
     "lintonly": "eslint src/**/*.{ts,tsx}",
     "test": "jest",
@@ -27,6 +28,7 @@
     "react": "^17.0.1",
     "react-cytoscapejs": "^1.2.1",
     "react-dom": "^17.0.1",
+    "react-helmet": "^6.1.0",
     "react-hot-loader": "^4.13.0",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
@@ -52,6 +54,7 @@
     "@types/jest": "^26.0.19",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@types/react-helmet": "^6.1.0",
     "@types/react-redux": "^7.1.14",
     "@types/react-router-dom": "^5.1.7",
     "@typescript-eslint/eslint-plugin": "^4.11.1",
@@ -97,4 +100,4 @@
       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
     }
   }
-}
+}

src/browser/index.ts

@@ -0,0 +1,5 @@
+import * as tabs from './tabs'
+
+export {
+    tabs
+}

src/browser/tabs.ts

@@ -0,0 +1,27 @@
+
+/** Get tab which user currently see */
+export const getActive = (): Promise<chrome.tabs.Tab> => new Promise((resolve, reject) => {
+    chrome.tabs.query({ active: true, windowId: chrome.windows.WINDOW_ID_CURRENT }, tabs => {
+        if (!tabs.length) {
+            reject(new Error("Cannot retrive active tab"))
+            return
+        }
+
+        const [tab] = tabs
+        console.log('Active tab is', tab.url || tab.pendingUrl, 'and title', tab.title, 'with status', tab.status, tab)
+        resolve(tab)
+    })
+})
+
+/** Gets the tab that this script call is being made from. On background will throw exception */
+export const getScriptTab = (): Promise<chrome.tabs.Tab> => new Promise((resolve, reject) => {
+    chrome.tabs.getCurrent(tab => {
+        if (!tab) {
+            reject(new Error("Current script not have tab"))
+            return
+        }
+
+        console.log('Current tab is', tab)
+        resolve(tab)
+    })
+})

src/manifest.json

@@ -22,6 +22,9 @@
   "permissions": [
     "tabs",
     "history",
-    "webNavigation"
+    "webNavigation",
+    "<all_urls>",
+    "webRequest",
+    "webRequestBlocking"
   ]
 }

src/pages/Background/onOpenTab.ts

@@ -8,13 +8,16 @@ export function registerOnTabOpenHook() {
     chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
         store.dispatch(actions.tryCloseOldPages())
 
+        if (process.env.DEBUG)
+            console.debug("chrome.tabs.onUpdated", tabId, changeInfo, tab)
+
         if (changeInfo.url) {
             store.dispatch(actions.savePageData({
                 url: changeInfo.url,
                 page: { title: changeInfo.title, favIconUrl: changeInfo.favIconUrl }
             }))
         }
-        if (!isLoaded(changeInfo))
+        if (!isLoaded(tab))
             return
 
         const { url, title, favIconUrl } = getTabGrantedData(tab)
@@ -29,6 +32,9 @@ export function registerOnTabOpenHook() {
 
     chrome.tabs.onActivated.addListener(({ tabId, windowId }) => {
         chrome.tabs.get(tabId, tab => {
+            if (process.env.DEBUG)
+                console.debug("chrome.tabs.onActivated", tabId, tab)
+
             const url = tab.url || tab.pendingUrl
             console.log('onActivated Active page changed to', tab.title, 'with url', url, tab)
 

src/pages/Background/onVisitPage.ts

@@ -1,11 +1,11 @@
-import { getCurrentTab } from "./browser/tabs"
+import { tabs } from "../../browser"
 import { NotHavePermissionError } from "./errors"
 import { store, actions } from "./store"
 
 export function registerOnVisitPageHook() {
-    if (!chrome.history) 
+    if (!chrome.history)
         throw new NotHavePermissionError('history', 'access visited pages urls')
-    
+
 
     chrome.history.onVisited.addListener(async event => {
         console.log('onVisited', event.url)
@@ -41,13 +41,13 @@ export function registerOnVisitPageHook() {
         // On visited called allways, on new page loads
         // instead of onActivated, which not called when we load new page on same tab
         // so need change current tab
-        const tab = await getCurrentTab()
+        const tab = await tabs.getActive()
         if (tab.status === 'loading') {
             console.log('onVisited Active tab is changed to loading page, with url', tab.pendingUrl, tab)
             const url = tab.url || tab.pendingUrl
-            if (url) 
+            if (url)
                 store.dispatch(actions.setCurrentPage(url))
-            
+
             return
         }
         console.log('onVisited Active page changed to', tab.title, 'with url', tab.url, tab)

src/pages/Background/store/reducer.ts

@@ -43,7 +43,7 @@ export const pagesReducer = createReducer<PagesState>(initialState, {
             lastAccessTime: getLastOrExistedTime(page.lastAccessTime, oldData.lastAccessTime)
         }
         if (process.env.DEBUG)
-            console.debug('Page data saved', JSON.stringify(state, null, 2))
+            console.debug('Page data saved', JSON.parse(JSON.stringify(state, null, 2)))
 
     },
 

src/pages/Background/types/guards.ts

@@ -2,8 +2,8 @@
 // changeInfo.status
 // Tab can be not loaded and not in loading state,
 // changeInfo.status can not exists in that case.
-export const isLoaded = (changeInfo: chrome.tabs.TabChangeInfo) => changeInfo.status === 'complete'
-export const isLoading = (changeInfo: chrome.tabs.TabChangeInfo) => changeInfo.status === 'loading'
+export const isLoaded = (tab: chrome.tabs.Tab) => tab.status === 'complete'
+export const isLoading = (tab: chrome.tabs.Tab) => tab.status === 'loading'
 
 // Can be fired on search in google, but also firse "link"
 export const isOnFormSubmit = (transition: string) =>

src/pages/Background/willOpenPage.ts

@@ -1,16 +1,16 @@
 import { NotHavePermissionError } from "./errors"
 import { isByLink } from "./types/guards"
 import { store, actions } from "./store"
-import { getCurrentTab } from "./browser/tabs"
+import { tabs } from "../../browser"
 
 export function registerOnWillOpenPageHook() {
-    if (!chrome.webNavigation) 
+    if (!chrome.webNavigation)
         throw new NotHavePermissionError('webNavigation', 'see user page transtions')
-    
+
 
     chrome.webNavigation.onBeforeNavigate.addListener(async event => {
         console.log('onBeforeNavigate to ' + event.url, 'in tab', event.tabId, 'at', new Date(event.timeStamp))
-        const tab = await getCurrentTab()
+        const tab = await tabs.getActive()
         console.log('Was start opening page', event.url, 'from tab with url', tab.url || tab.pendingUrl, 'and title', tab.title, 'at', new Date(event.timeStamp), tab)
     })
 

src/pages/Graph/App.scss

@@ -1,18 +1,3 @@
-$myColor: rgb(17, 0, 255);
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  color: $myColor;
-  text-align: center;
-}
-
-h1 {
-  margin-top: 3rem;
-}
 
 .App {
   background-color: #282c34;

src/pages/Graph/index.tsx

@@ -2,16 +2,28 @@ import React from 'react'
 import { render } from 'react-dom'
 import { Provider } from 'react-redux'
 
-import { store } from './store'
+import { getFaviconsUrls, store } from './store'
 import App from './App'
 import './index.css'
 import { connectToDataBus } from './data-bus'
+import { unblockResourcesLoading } from '../../resourcesLoading'
 
-render(
-    <Provider store={store}>
-        <App />
-    </Provider>,
-    window.document.querySelector('#app-container')
-)
+async function main() {
 
-connectToDataBus()
+    try {
+        await unblockResourcesLoading(getFaviconsUrls)
+    } catch (err) {
+        console.warn('Cannot set unblock for favicons', err)
+    }
+
+    render(
+        <Provider store={store}>
+            <App />
+        </Provider>,
+        window.document.querySelector('#app-container')
+    )
+
+    connectToDataBus()
+}
+
+main()

src/pages/Graph/store/index.ts

@@ -5,4 +5,11 @@ export * as actions from './actions'
 
 export const store = configureStore({
     reducer: pagesReducer
-})
+})
+
+export const getFaviconsUrls = (): Array<string> => {
+    const { pages } = store.getState()
+    return Object.keys(pages)
+        .map(pageUrl => pages[pageUrl].favIconUrl)
+        .filter(url => !!url) as Array<string>
+}