From e76ca380f733b515c31297a285d8bea44e074a1b Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Fri, 10 May 2019 22:27:20 +0900 Subject: Make addon-enabled as a clean architecture --- src/content/components/top-content/index.ts | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) (limited to 'src/content/components/top-content') diff --git a/src/content/components/top-content/index.ts b/src/content/components/top-content/index.ts index ac95ea9..101edca 100644 --- a/src/content/components/top-content/index.ts +++ b/src/content/components/top-content/index.ts @@ -5,15 +5,15 @@ import * as consoleFrames from '../../console-frames'; import * as messages from '../../../shared/messages'; import MessageListener from '../../MessageListener'; import * as scrolls from '../../scrolls'; +import AddonEnabledUseCase from '../../usecases/AddonEnabledUseCase'; + +let addonEnabledUseCase = new AddonEnabledUseCase(); export default class TopContent { private win: Window; - private store: any; - constructor(win: Window, store: any) { this.win = win; - this.store = store; new CommonComponent(win, store); // eslint-disable-line no-new new FollowController(win, store); // eslint-disable-line no-new @@ -36,14 +36,11 @@ export default class TopContent { } onBackgroundMessage(message: messages.Message) { - let addonState = this.store.getState().addon; + let addonEnabled = addonEnabledUseCase.getEnabled(); switch (message.type) { case messages.ADDON_ENABLED_QUERY: - return Promise.resolve({ - type: messages.ADDON_ENABLED_RESPONSE, - enabled: addonState.enabled, - }); + return Promise.resolve(addonEnabled); case messages.TAB_SCROLL_TO: return scrolls.scrollTo(message.x, message.y, false); } -- cgit v1.2.3 From bacf83a32083c5a4c4a45c061288081423bbf18a Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sat, 11 May 2019 08:04:01 +0900 Subject: Make settings as a clean architecture --- src/content/actions/index.ts | 11 ---- src/content/actions/operation.ts | 7 ++- src/content/actions/setting.ts | 28 --------- src/content/client/SettingClient.ts | 17 ++++++ src/content/components/common/index.ts | 36 +++++------ src/content/components/common/keymapper.ts | 39 ++++++++---- src/content/components/common/mark.ts | 8 ++- .../components/top-content/follow-controller.ts | 8 ++- src/content/reducers/index.ts | 4 +- src/content/reducers/setting.ts | 40 ------------ src/content/repositories/SettingRepository.ts | 22 +++++++ src/content/usecases/SettingUseCase.ts | 24 ++++++++ test/content/actions/setting.test.ts | 43 ------------- test/content/reducers/setting.test.ts | 31 ---------- .../content/repositories/SettingRepository.test.ts | 30 +++++++++ test/content/usecases/SettingUseCaase.test.ts | 71 ++++++++++++++++++++++ 16 files changed, 223 insertions(+), 196 deletions(-) delete mode 100644 src/content/actions/setting.ts create mode 100644 src/content/client/SettingClient.ts delete mode 100644 src/content/reducers/setting.ts create mode 100644 src/content/repositories/SettingRepository.ts create mode 100644 src/content/usecases/SettingUseCase.ts delete mode 100644 test/content/actions/setting.test.ts delete mode 100644 test/content/reducers/setting.test.ts create mode 100644 test/content/repositories/SettingRepository.test.ts create mode 100644 test/content/usecases/SettingUseCaase.test.ts (limited to 'src/content/components/top-content') diff --git a/src/content/actions/index.ts b/src/content/actions/index.ts index 74353fb..4e395c5 100644 --- a/src/content/actions/index.ts +++ b/src/content/actions/index.ts @@ -1,13 +1,9 @@ import Redux from 'redux'; -import Settings from '../../shared/Settings'; import * as keyUtils from '../../shared/utils/keys'; // Find export const FIND_SET_KEYWORD = 'find.set.keyword'; -// Settings -export const SETTING_SET = 'setting.set'; - // User input export const INPUT_KEY_PRESS = 'input.key.press'; export const INPUT_CLEAR_KEYS = 'input.clear.keys'; @@ -37,11 +33,6 @@ export interface FindSetKeywordAction extends Redux.Action { found: boolean; } -export interface SettingSetAction extends Redux.Action { - type: typeof SETTING_SET; - settings: Settings, -} - export interface InputKeyPressAction extends Redux.Action { type: typeof INPUT_KEY_PRESS; key: keyUtils.Key; @@ -94,7 +85,6 @@ export interface NoopAction extends Redux.Action { } export type FindAction = FindSetKeywordAction | NoopAction; -export type SettingAction = SettingSetAction; export type InputAction = InputKeyPressAction | InputClearKeysAction; export type FollowAction = FollowControllerEnableAction | FollowControllerDisableAction | @@ -105,7 +95,6 @@ export type MarkAction = export type Action = FindAction | - SettingAction | InputAction | FollowAction | MarkAction | diff --git a/src/content/actions/operation.ts b/src/content/actions/operation.ts index 949f69f..f65d0bd 100644 --- a/src/content/actions/operation.ts +++ b/src/content/actions/operation.ts @@ -9,14 +9,16 @@ import * as consoleFrames from '../console-frames'; import * as markActions from './mark'; import AddonEnabledUseCase from '../usecases/AddonEnabledUseCase'; +import { SettingRepositoryImpl } from '../repositories/SettingRepository'; let addonEnabledUseCase = new AddonEnabledUseCase(); +let settingRepository = new SettingRepositoryImpl(); // eslint-disable-next-line complexity, max-lines-per-function const exec = async( operation: operations.Operation, - settings: any, ): Promise => { + let settings = settingRepository.get(); let smoothscroll = settings.properties.smoothscroll; switch (operation.type) { case operations.ADDON_ENABLE: @@ -97,7 +99,8 @@ const exec = async( break; case operations.URLS_PASTE: urls.paste( - window, operation.newTab ? operation.newTab : false, settings.search + window, operation.newTab ? operation.newTab : false, + settings.search, ); break; default: diff --git a/src/content/actions/setting.ts b/src/content/actions/setting.ts deleted file mode 100644 index 92f8559..0000000 --- a/src/content/actions/setting.ts +++ /dev/null @@ -1,28 +0,0 @@ -import * as actions from './index'; -import * as operations from '../../shared/operations'; -import * as messages from '../../shared/messages'; -import Settings, { Keymaps } from '../../shared/Settings'; - -const reservedKeymaps: Keymaps = { - '': { type: operations.CANCEL }, - '': { type: operations.CANCEL }, -}; - -const set = (settings: Settings): actions.SettingAction => { - return { - type: actions.SETTING_SET, - settings: { - ...settings, - keymaps: { ...settings.keymaps, ...reservedKeymaps }, - } - }; -}; - -const load = async(): Promise => { - let settings = await browser.runtime.sendMessage({ - type: messages.SETTINGS_QUERY, - }); - return set(settings); -}; - -export { set, load }; diff --git a/src/content/client/SettingClient.ts b/src/content/client/SettingClient.ts new file mode 100644 index 0000000..c67f544 --- /dev/null +++ b/src/content/client/SettingClient.ts @@ -0,0 +1,17 @@ +import Settings from '../../shared/Settings'; +import * as messages from '../../shared/messages'; + +export default interface SettingClient { + load(): Promise; + + // eslint-disable-next-line semi +} + +export class SettingClientImpl { + async load(): Promise { + let settings = await browser.runtime.sendMessage({ + type: messages.SETTINGS_QUERY, + }); + return settings as Settings; + } +} diff --git a/src/content/components/common/index.ts b/src/content/components/common/index.ts index be77812..899953d 100644 --- a/src/content/components/common/index.ts +++ b/src/content/components/common/index.ts @@ -2,22 +2,18 @@ import InputComponent from './input'; import FollowComponent from './follow'; import MarkComponent from './mark'; import KeymapperComponent from './keymapper'; -import * as settingActions from '../../actions/setting'; import * as messages from '../../../shared/messages'; import MessageListener from '../../MessageListener'; import * as blacklists from '../../../shared/blacklists'; import * as keys from '../../../shared/utils/keys'; -import * as actions from '../../actions'; import AddonEnabledUseCase from '../../usecases/AddonEnabledUseCase'; +import SettingUseCase from '../../usecases/SettingUseCase'; let addonEnabledUseCase = new AddonEnabledUseCase(); +let settingUseCase = new SettingUseCase(); export default class Common { - private win: Window; - - private store: any; - constructor(win: Window, store: any) { const input = new InputComponent(win.document.body); const follow = new FollowComponent(win); @@ -28,9 +24,6 @@ export default class Common { input.onKey((key: keys.Key) => mark.key(key)); input.onKey((key: keys.Key) => keymapper.key(key)); - this.win = win; - this.store = store; - this.reloadSettings(); new MessageListener().onBackgroundMessage(this.onMessage.bind(this)); @@ -41,23 +34,22 @@ export default class Common { case messages.SETTINGS_CHANGED: return this.reloadSettings(); case messages.ADDON_TOGGLE_ENABLED: - addonEnabledUseCase.toggle(); + return addonEnabledUseCase.toggle(); } + return undefined; } - reloadSettings() { + async reloadSettings() { try { - this.store.dispatch(settingActions.load()) - .then((action: actions.SettingAction) => { - let enabled = !blacklists.includes( - action.settings.blacklist, this.win.location.href - ); - if (enabled) { - addonEnabledUseCase.enable(); - } else { - addonEnabledUseCase.disable(); - } - }); + let current = await settingUseCase.reload(); + let disabled = blacklists.includes( + current.blacklist, window.location.href, + ); + if (disabled) { + addonEnabledUseCase.disable(); + } else { + addonEnabledUseCase.enable(); + } } catch (e) { // Sometime sendMessage fails when background script is not ready. console.warn(e); diff --git a/src/content/components/common/keymapper.ts b/src/content/components/common/keymapper.ts index 02579ec..c901ffe 100644 --- a/src/content/components/common/keymapper.ts +++ b/src/content/components/common/keymapper.ts @@ -4,8 +4,18 @@ import * as operations from '../../../shared/operations'; import * as keyUtils from '../../../shared/utils/keys'; import AddonEnabledUseCase from '../../usecases/AddonEnabledUseCase'; +import { SettingRepositoryImpl } from '../../repositories/SettingRepository'; +import { Keymaps } from '../../../shared/Settings'; + +type KeymapEntityMap = Map; let addonEnabledUseCase = new AddonEnabledUseCase(); +let settingRepository = new SettingRepositoryImpl(); + +const reservedKeymaps: Keymaps = { + '': { type: operations.CANCEL }, + '': { type: operations.CANCEL }, +}; const mapStartsWith = ( mapping: keyUtils.Key[], @@ -29,18 +39,11 @@ export default class KeymapperComponent { this.store = store; } - // eslint-disable-next-line max-statements key(key: keyUtils.Key): boolean { this.store.dispatch(inputActions.keyPress(key)); - let state = this.store.getState(); - let input = state.input; - let keymaps = new Map( - state.setting.keymaps.map( - (e: {key: keyUtils.Key[], op: operations.Operation}) => [e.key, e.op], - ) - ); - + let input = this.store.getState().input; + let keymaps = this.keymapEntityMap(); let matched = Array.from(keymaps.keys()).filter( (mapping: keyUtils.Key[]) => { return mapStartsWith(mapping, input.keys); @@ -62,11 +65,23 @@ export default class KeymapperComponent { return true; } let operation = keymaps.get(matched[0]) as operations.Operation; - let act = operationActions.exec( - operation, state.setting, - ); + let act = operationActions.exec(operation); this.store.dispatch(act); this.store.dispatch(inputActions.clearKeys()); return true; } + + private keymapEntityMap(): KeymapEntityMap { + let keymaps = { + ...settingRepository.get().keymaps, + ...reservedKeymaps, + }; + let entries = Object.entries(keymaps).map((entry) => { + return [ + keyUtils.fromMapKeys(entry[0]), + entry[1], + ]; + }) as [keyUtils.Key[], operations.Operation][]; + return new Map(entries); + } } diff --git a/src/content/components/common/mark.ts b/src/content/components/common/mark.ts index 1237385..77aa15d 100644 --- a/src/content/components/common/mark.ts +++ b/src/content/components/common/mark.ts @@ -4,6 +4,10 @@ import * as consoleFrames from '../..//console-frames'; import * as keyUtils from '../../../shared/utils/keys'; import Mark from '../../Mark'; +import { SettingRepositoryImpl } from '../../repositories/SettingRepository'; + +let settingRepository = new SettingRepositoryImpl(); + const cancelKey = (key: keyUtils.Key): boolean => { return key.key === 'Esc' || key.key === '[' && Boolean(key.ctrlKey); }; @@ -21,8 +25,8 @@ export default class MarkComponent { // eslint-disable-next-line max-statements key(key: keyUtils.Key) { - let { mark: markState, setting } = this.store.getState(); - let smoothscroll = setting.properties.smoothscroll; + let smoothscroll = settingRepository.get().properties.smoothscroll; + let { mark: markState } = this.store.getState(); if (!markState.setMode && !markState.jumpMode) { return false; diff --git a/src/content/components/top-content/follow-controller.ts b/src/content/components/top-content/follow-controller.ts index d49b22a..2fcf365 100644 --- a/src/content/components/top-content/follow-controller.ts +++ b/src/content/components/top-content/follow-controller.ts @@ -3,6 +3,10 @@ import * as messages from '../../../shared/messages'; import MessageListener, { WebMessageSender } from '../../MessageListener'; import HintKeyProducer from '../../hint-key-producer'; +import { SettingRepositoryImpl } from '../../repositories/SettingRepository'; + +let settingRepository = new SettingRepositoryImpl(); + const broadcastMessage = (win: Window, message: messages.Message): void => { let json = JSON.stringify(message); let frames = [win.self].concat(Array.from(win.frames as any)); @@ -160,7 +164,7 @@ export default class FollowController { }); } - hintchars() { - return this.store.getState().setting.properties.hintchars; + private hintchars() { + return settingRepository.get().properties.hintchars; } } diff --git a/src/content/reducers/index.ts b/src/content/reducers/index.ts index 6f11512..21e8918 100644 --- a/src/content/reducers/index.ts +++ b/src/content/reducers/index.ts @@ -1,6 +1,5 @@ import { combineReducers } from 'redux'; import find, { State as FindState } from './find'; -import setting, { State as SettingState } from './setting'; import input, { State as InputState } from './input'; import followController, { State as FollowControllerState } from './follow-controller'; @@ -8,12 +7,11 @@ import mark, { State as MarkState } from './mark'; export interface State { find: FindState; - setting: SettingState; input: InputState; followController: FollowControllerState; mark: MarkState; } export default combineReducers({ - find, setting, input, followController, mark, + find, input, followController, mark, }); diff --git a/src/content/reducers/setting.ts b/src/content/reducers/setting.ts deleted file mode 100644 index 9ca1380..0000000 --- a/src/content/reducers/setting.ts +++ /dev/null @@ -1,40 +0,0 @@ -import * as actions from '../actions'; -import * as keyUtils from '../../shared/utils/keys'; -import * as operations from '../../shared/operations'; -import { Search, Properties, DefaultSetting } from '../../shared/Settings'; - -export interface State { - keymaps: { key: keyUtils.Key[], op: operations.Operation }[]; - search: Search; - properties: Properties; -} - -// defaultState does not refer due to the state is load from -// background on load. -const defaultState: State = { - keymaps: [], - search: DefaultSetting.search, - properties: DefaultSetting.properties, -}; - -export default function reducer( - state: State = defaultState, - action: actions.SettingAction, -): State { - switch (action.type) { - case actions.SETTING_SET: - return { - keymaps: Object.entries(action.settings.keymaps).map((entry) => { - return { - key: keyUtils.fromMapKeys(entry[0]), - op: entry[1], - }; - }), - properties: action.settings.properties, - search: action.settings.search, - }; - default: - return state; - } -} - diff --git a/src/content/repositories/SettingRepository.ts b/src/content/repositories/SettingRepository.ts new file mode 100644 index 0000000..ce13c25 --- /dev/null +++ b/src/content/repositories/SettingRepository.ts @@ -0,0 +1,22 @@ +import Settings, { DefaultSetting } from '../../shared/Settings'; + +let current: Settings = DefaultSetting; + +export default interface SettingRepository { + set(setting: Settings): void; + + get(): Settings; + + // eslint-disable-next-line semi +} + +export class SettingRepositoryImpl implements SettingRepository { + set(setting: Settings): void { + current = setting; + } + + get(): Settings { + return current; + } + +} diff --git a/src/content/usecases/SettingUseCase.ts b/src/content/usecases/SettingUseCase.ts new file mode 100644 index 0000000..765cb45 --- /dev/null +++ b/src/content/usecases/SettingUseCase.ts @@ -0,0 +1,24 @@ +import SettingRepository, { SettingRepositoryImpl } + from '../repositories/SettingRepository'; +import SettingClient, { SettingClientImpl } from '../client/SettingClient'; +import Settings from '../../shared/Settings'; + +export default class SettingUseCase { + private repository: SettingRepository; + + private client: SettingClient; + + constructor({ + repository = new SettingRepositoryImpl(), + client = new SettingClientImpl(), + } = {}) { + this.repository = repository; + this.client = client; + } + + async reload(): Promise { + let settings = await this.client.load(); + this.repository.set(settings); + return settings; + } +} diff --git a/test/content/actions/setting.test.ts b/test/content/actions/setting.test.ts deleted file mode 100644 index c831433..0000000 --- a/test/content/actions/setting.test.ts +++ /dev/null @@ -1,43 +0,0 @@ -import * as actions from 'content/actions'; -import * as settingActions from 'content/actions/setting'; - -describe("setting actions", () => { - describe("set", () => { - it('create SETTING_SET action', () => { - let action = settingActions.set({ - keymaps: { - 'dd': 'remove current tab', - 'z': 'increment', - }, - search: { - default: "google", - engines: { - google: 'https://google.com/search?q={}', - } - }, - properties: { - hintchars: 'abcd1234', - }, - blacklist: [], - }); - expect(action.type).to.equal(actions.SETTING_SET); - expect(action.settings.properties.hintchars).to.equal('abcd1234'); - }); - - it('overrides cancel keys', () => { - let action = settingActions.set({ - keymaps: { - "k": { "type": "scroll.vertically", "count": -1 }, - "j": { "type": "scroll.vertically", "count": 1 }, - } - }); - let keymaps = action.settings.keymaps; - expect(action.settings.keymaps).to.deep.equals({ - "k": { type: "scroll.vertically", count: -1 }, - "j": { type: "scroll.vertically", count: 1 }, - '': { type: 'cancel' }, - '': { type: 'cancel' }, - }); - }); - }); -}); diff --git a/test/content/reducers/setting.test.ts b/test/content/reducers/setting.test.ts deleted file mode 100644 index 9b332aa..0000000 --- a/test/content/reducers/setting.test.ts +++ /dev/null @@ -1,31 +0,0 @@ -import * as actions from 'content/actions'; -import settingReducer from 'content/reducers/setting'; - -describe("content setting reducer", () => { - it('return the initial state', () => { - let state = settingReducer(undefined, {}); - expect(state.keymaps).to.be.empty; - }); - - it('return next state for SETTING_SET', () => { - let newSettings = { red: 'apple', yellow: 'banana' }; - let action = { - type: actions.SETTING_SET, - settings: { - keymaps: { - "zz": { type: "zoom.neutral" }, - "": { "type": "addon.toggle.enabled" } - }, - "blacklist": [] - } - } - let state = settingReducer(undefined, action); - expect(state.keymaps).to.have.deep.all.members([ - { key: [{ key: 'z', shiftKey: false, ctrlKey: false, altKey: false, metaKey: false }, - { key: 'z', shiftKey: false, ctrlKey: false, altKey: false, metaKey: false }], - op: { type: 'zoom.neutral' }}, - { key: [{ key: 'Esc', shiftKey: true, ctrlKey: false, altKey: false, metaKey: false }], - op: { type: 'addon.toggle.enabled' }}, - ]); - }); -}); diff --git a/test/content/repositories/SettingRepository.test.ts b/test/content/repositories/SettingRepository.test.ts new file mode 100644 index 0000000..fea70b7 --- /dev/null +++ b/test/content/repositories/SettingRepository.test.ts @@ -0,0 +1,30 @@ +import { SettingRepositoryImpl } from '../../../src/content/repositories/SettingRepository'; +import { expect } from 'chai'; + +describe('SettingRepositoryImpl', () => { + it('updates and gets current value', () => { + let sut = new SettingRepositoryImpl(); + + let settings = { + keymaps: {}, + search: { + default: 'google', + engines: { + google: 'https://google.com/?q={}', + } + }, + properties: { + hintchars: 'abcd1234', + smoothscroll: false, + complete: 'sbh', + }, + blacklist: [], + } + + sut.set(settings); + + let actual = sut.get(); + expect(actual.properties.hintchars).to.equal('abcd1234'); + }); +}); + diff --git a/test/content/usecases/SettingUseCaase.test.ts b/test/content/usecases/SettingUseCaase.test.ts new file mode 100644 index 0000000..02cef78 --- /dev/null +++ b/test/content/usecases/SettingUseCaase.test.ts @@ -0,0 +1,71 @@ +import SettingRepository from '../../../src/content/repositories/SettingRepository'; +import SettingClient from '../../../src/content/client/SettingClient'; +import SettingUseCase from '../../../src/content/usecases/SettingUseCase'; +import Settings, { DefaultSetting } from '../../../src/shared/Settings'; +import { expect } from 'chai'; + +class MockSettingRepository implements SettingRepository { + private current: Settings; + + constructor() { + this.current = DefaultSetting; + } + + set(settings: Settings): void { + this.current= settings; + } + + get(): Settings { + return this.current; + } +} + +class MockSettingClient implements SettingClient { + private data: Settings; + + constructor(data: Settings) { + this.data = data; + } + + load(): Promise { + return Promise.resolve(this.data); + } +} + +describe('AddonEnabledUseCase', () => { + let repository: MockSettingRepository; + let client: MockSettingClient; + let sut: SettingUseCase; + + beforeEach(() => { + let testSettings = { + keymaps: {}, + search: { + default: 'google', + engines: { + google: 'https://google.com/?q={}', + } + }, + properties: { + hintchars: 'abcd1234', + smoothscroll: false, + complete: 'sbh', + }, + blacklist: [], + }; + + repository = new MockSettingRepository(); + client = new MockSettingClient(testSettings); + sut = new SettingUseCase({ repository, client }); + }); + + describe('#reload', () => { + it('loads settings and store to repository', async() => { + let settings = await sut.reload(); + expect(settings.properties.hintchars).to.equal('abcd1234'); + + let saved = repository.get(); + expect(saved.properties.hintchars).to.equal('abcd1234'); + }); + }); +}); -- cgit v1.2.3 From 1ba1660269b24446e9df7df0016de8c3e5596c8f Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sat, 11 May 2019 11:37:18 +0900 Subject: Make find as a clean architecture --- src/content/actions/find.ts | 100 ------------ src/content/actions/index.ts | 11 -- src/content/client/ConsoleClient.ts | 30 ++++ src/content/client/FindClient.ts | 25 +++ src/content/components/top-content/find.ts | 26 +--- src/content/components/top-content/index.ts | 2 +- src/content/presenters/FindPresenter.ts | 59 ++++++++ src/content/reducers/find.ts | 25 --- src/content/reducers/index.ts | 4 +- src/content/repositories/FindRepository.ts | 19 +++ src/content/repositories/SettingRepository.ts | 1 - src/content/usecases/FindUseCase.ts | 81 ++++++++++ test/content/reducers/find.test.ts | 22 --- test/content/repositories/FindRepository.test.ts | 15 ++ test/content/usecases/FindUseCase.test.ts | 184 +++++++++++++++++++++++ 15 files changed, 423 insertions(+), 181 deletions(-) delete mode 100644 src/content/actions/find.ts create mode 100644 src/content/client/ConsoleClient.ts create mode 100644 src/content/client/FindClient.ts create mode 100644 src/content/presenters/FindPresenter.ts delete mode 100644 src/content/reducers/find.ts create mode 100644 src/content/repositories/FindRepository.ts create mode 100644 src/content/usecases/FindUseCase.ts delete mode 100644 test/content/reducers/find.test.ts create mode 100644 test/content/repositories/FindRepository.test.ts create mode 100644 test/content/usecases/FindUseCase.test.ts (limited to 'src/content/components/top-content') diff --git a/src/content/actions/find.ts b/src/content/actions/find.ts deleted file mode 100644 index 53e03ae..0000000 --- a/src/content/actions/find.ts +++ /dev/null @@ -1,100 +0,0 @@ -// -// window.find(aString, aCaseSensitive, aBackwards, aWrapAround, -// aWholeWord, aSearchInFrames); -// -// NOTE: window.find is not standard API -// https://developer.mozilla.org/en-US/docs/Web/API/Window/find - -import * as messages from '../../shared/messages'; -import * as actions from './index'; -import * as consoleFrames from '../console-frames'; - -interface MyWindow extends Window { - find( - aString: string, - aCaseSensitive?: boolean, - aBackwards?: boolean, - aWrapAround?: boolean, - aWholeWord?: boolean, - aSearchInFrames?: boolean, - aShowDialog?: boolean): boolean; -} - -// eslint-disable-next-line no-var, vars-on-top, init-declarations -declare var window: MyWindow; - -const find = (str: string, backwards: boolean): boolean => { - let caseSensitive = false; - let wrapScan = true; - - - // NOTE: aWholeWord dows not implemented, and aSearchInFrames does not work - // because of same origin policy - - // eslint-disable-next-line no-extra-parens - let found = window.find(str, caseSensitive, backwards, wrapScan); - if (found) { - return found; - } - let sel = window.getSelection(); - if (sel) { - sel.removeAllRanges(); - } - - // eslint-disable-next-line no-extra-parens - return window.find(str, caseSensitive, backwards, wrapScan); -}; - -// eslint-disable-next-line max-statements -const findNext = async( - currentKeyword: string, reset: boolean, backwards: boolean, -): Promise => { - if (reset) { - let sel = window.getSelection(); - if (sel) { - sel.removeAllRanges(); - } - } - - let keyword = currentKeyword; - if (currentKeyword) { - browser.runtime.sendMessage({ - type: messages.FIND_SET_KEYWORD, - keyword: currentKeyword, - }); - } else { - keyword = await browser.runtime.sendMessage({ - type: messages.FIND_GET_KEYWORD, - }); - } - if (!keyword) { - await consoleFrames.postError('No previous search keywords'); - return { type: actions.NOOP }; - } - let found = find(keyword, backwards); - if (found) { - consoleFrames.postInfo('Pattern found: ' + keyword); - } else { - consoleFrames.postError('Pattern not found: ' + keyword); - } - - return { - type: actions.FIND_SET_KEYWORD, - keyword, - found, - }; -}; - -const next = ( - currentKeyword: string, reset: boolean, -): Promise => { - return findNext(currentKeyword, reset, false); -}; - -const prev = ( - currentKeyword: string, reset: boolean, -): Promise => { - return findNext(currentKeyword, reset, true); -}; - -export { next, prev }; diff --git a/src/content/actions/index.ts b/src/content/actions/index.ts index 4e395c5..f6d19aa 100644 --- a/src/content/actions/index.ts +++ b/src/content/actions/index.ts @@ -1,9 +1,6 @@ import Redux from 'redux'; import * as keyUtils from '../../shared/utils/keys'; -// Find -export const FIND_SET_KEYWORD = 'find.set.keyword'; - // User input export const INPUT_KEY_PRESS = 'input.key.press'; export const INPUT_CLEAR_KEYS = 'input.clear.keys'; @@ -27,12 +24,6 @@ export const MARK_SET_LOCAL = 'mark.set.local'; export const NOOP = 'noop'; -export interface FindSetKeywordAction extends Redux.Action { - type: typeof FIND_SET_KEYWORD; - keyword: string; - found: boolean; -} - export interface InputKeyPressAction extends Redux.Action { type: typeof INPUT_KEY_PRESS; key: keyUtils.Key; @@ -84,7 +75,6 @@ export interface NoopAction extends Redux.Action { type: typeof NOOP; } -export type FindAction = FindSetKeywordAction | NoopAction; export type InputAction = InputKeyPressAction | InputClearKeysAction; export type FollowAction = FollowControllerEnableAction | FollowControllerDisableAction | @@ -94,7 +84,6 @@ export type MarkAction = MarkCancelAction | MarkSetLocalAction | NoopAction; export type Action = - FindAction | InputAction | FollowAction | MarkAction | diff --git a/src/content/client/ConsoleClient.ts b/src/content/client/ConsoleClient.ts new file mode 100644 index 0000000..e7046e5 --- /dev/null +++ b/src/content/client/ConsoleClient.ts @@ -0,0 +1,30 @@ +import * as messages from '../../shared/messages'; + +export default interface ConsoleClient { + info(text: string): Promise; + error(text: string): Promise; + + // eslint-disable-next-line semi +} + +export class ConsoleClientImpl implements ConsoleClient { + async info(text: string): Promise { + await browser.runtime.sendMessage({ + type: messages.CONSOLE_FRAME_MESSAGE, + message: { + type: messages.CONSOLE_SHOW_INFO, + text, + }, + }); + } + + async error(text: string): Promise { + await browser.runtime.sendMessage({ + type: messages.CONSOLE_FRAME_MESSAGE, + message: { + type: messages.CONSOLE_SHOW_ERROR, + text, + }, + }); + } +} diff --git a/src/content/client/FindClient.ts b/src/content/client/FindClient.ts new file mode 100644 index 0000000..22cd3cb --- /dev/null +++ b/src/content/client/FindClient.ts @@ -0,0 +1,25 @@ +import * as messages from '../../shared/messages'; + +export default interface FindClient { + getGlobalLastKeyword(): Promise; + + setGlobalLastKeyword(keyword: string): Promise; + + // eslint-disable-next-line semi +} + +export class FindClientImpl implements FindClient { + async getGlobalLastKeyword(): Promise { + let keyword = await browser.runtime.sendMessage({ + type: messages.FIND_GET_KEYWORD, + }); + return keyword as string; + } + + async setGlobalLastKeyword(keyword: string): Promise { + await browser.runtime.sendMessage({ + type: messages.FIND_SET_KEYWORD, + keyword: keyword, + }); + } +} diff --git a/src/content/components/top-content/find.ts b/src/content/components/top-content/find.ts index 74b95bc..c25cbeb 100644 --- a/src/content/components/top-content/find.ts +++ b/src/content/components/top-content/find.ts @@ -1,13 +1,12 @@ -import * as findActions from '../../actions/find'; import * as messages from '../../../shared/messages'; import MessageListener from '../../MessageListener'; -export default class FindComponent { - private store: any; +import FindUseCase from '../../usecases/FindUseCase'; - constructor(store: any) { - this.store = store; +let findUseCase = new FindUseCase(); +export default class FindComponent { + constructor() { new MessageListener().onWebMessage(this.onMessage.bind(this)); } @@ -20,27 +19,18 @@ export default class FindComponent { case messages.FIND_PREV: return this.prev(); } + return Promise.resolve(); } start(text: string) { - let state = this.store.getState().find; - - if (text.length === 0) { - return this.store.dispatch( - findActions.next(state.keyword as string, true)); - } - return this.store.dispatch(findActions.next(text, true)); + return findUseCase.startFind(text.length === 0 ? null : text); } next() { - let state = this.store.getState().find; - return this.store.dispatch( - findActions.next(state.keyword as string, false)); + return findUseCase.findNext(); } prev() { - let state = this.store.getState().find; - return this.store.dispatch( - findActions.prev(state.keyword as string, false)); + return findUseCase.findPrev(); } } diff --git a/src/content/components/top-content/index.ts b/src/content/components/top-content/index.ts index 101edca..b9ef2dd 100644 --- a/src/content/components/top-content/index.ts +++ b/src/content/components/top-content/index.ts @@ -17,7 +17,7 @@ export default class TopContent { new CommonComponent(win, store); // eslint-disable-line no-new new FollowController(win, store); // eslint-disable-line no-new - new FindComponent(store); // eslint-disable-line no-new + new FindComponent(); // eslint-disable-line no-new // TODO make component consoleFrames.initialize(this.win.document); diff --git a/src/content/presenters/FindPresenter.ts b/src/content/presenters/FindPresenter.ts new file mode 100644 index 0000000..6dd03f8 --- /dev/null +++ b/src/content/presenters/FindPresenter.ts @@ -0,0 +1,59 @@ +import ConsoleClient, { ConsoleClientImpl } from '../client/ConsoleClient'; + +export default interface FindPresenter { + find(keyword: string, backwards: boolean): boolean; + + clearSelection(): void; + + // eslint-disable-next-line semi +} + +// window.find(aString, aCaseSensitive, aBackwards, aWrapAround, +// aWholeWord, aSearchInFrames); +// +// NOTE: window.find is not standard API +// https://developer.mozilla.org/en-US/docs/Web/API/Window/find +interface MyWindow extends Window { + find( + aString: string, + aCaseSensitive?: boolean, + aBackwards?: boolean, + aWrapAround?: boolean, + aWholeWord?: boolean, + aSearchInFrames?: boolean, + aShowDialog?: boolean): boolean; +} + +// eslint-disable-next-line no-var, vars-on-top, init-declarations +declare var window: MyWindow; + +export class FindPresenterImpl implements FindPresenter { + private consoleClient: ConsoleClient; + + constructor({ consoleClient = new ConsoleClientImpl() } = {}) { + this.consoleClient = consoleClient; + } + + find(keyword: string, backwards: boolean): boolean { + let caseSensitive = false; + let wrapScan = true; + + + // NOTE: aWholeWord dows not implemented, and aSearchInFrames does not work + // because of same origin policy + let found = window.find(keyword, caseSensitive, backwards, wrapScan); + if (found) { + return found; + } + this.clearSelection(); + + return window.find(keyword, caseSensitive, backwards, wrapScan); + } + + clearSelection(): void { + let sel = window.getSelection(); + if (sel) { + sel.removeAllRanges(); + } + } +} diff --git a/src/content/reducers/find.ts b/src/content/reducers/find.ts deleted file mode 100644 index 8c3e637..0000000 --- a/src/content/reducers/find.ts +++ /dev/null @@ -1,25 +0,0 @@ -import * as actions from '../actions'; - -export interface State { - keyword: string | null; - found: boolean; -} - -const defaultState: State = { - keyword: null, - found: false, -}; - -export default function reducer( - state: State = defaultState, - action: actions.FindAction, -): State { - switch (action.type) { - case actions.FIND_SET_KEYWORD: - return { ...state, - keyword: action.keyword, - found: action.found, }; - default: - return state; - } -} diff --git a/src/content/reducers/index.ts b/src/content/reducers/index.ts index 21e8918..812a404 100644 --- a/src/content/reducers/index.ts +++ b/src/content/reducers/index.ts @@ -1,17 +1,15 @@ import { combineReducers } from 'redux'; -import find, { State as FindState } from './find'; import input, { State as InputState } from './input'; import followController, { State as FollowControllerState } from './follow-controller'; import mark, { State as MarkState } from './mark'; export interface State { - find: FindState; input: InputState; followController: FollowControllerState; mark: MarkState; } export default combineReducers({ - find, input, followController, mark, + input, followController, mark, }); diff --git a/src/content/repositories/FindRepository.ts b/src/content/repositories/FindRepository.ts new file mode 100644 index 0000000..85eca40 --- /dev/null +++ b/src/content/repositories/FindRepository.ts @@ -0,0 +1,19 @@ +export default interface FindRepository { + getLastKeyword(): string | null; + + setLastKeyword(keyword: string): void; + + // eslint-disable-next-line semi +} + +let current: string | null = null; + +export class FindRepositoryImpl implements FindRepository { + getLastKeyword(): string | null { + return current; + } + + setLastKeyword(keyword: string): void { + current = keyword; + } +} diff --git a/src/content/repositories/SettingRepository.ts b/src/content/repositories/SettingRepository.ts index ce13c25..711b2a2 100644 --- a/src/content/repositories/SettingRepository.ts +++ b/src/content/repositories/SettingRepository.ts @@ -18,5 +18,4 @@ export class SettingRepositoryImpl implements SettingRepository { get(): Settings { return current; } - } diff --git a/src/content/usecases/FindUseCase.ts b/src/content/usecases/FindUseCase.ts new file mode 100644 index 0000000..4fda323 --- /dev/null +++ b/src/content/usecases/FindUseCase.ts @@ -0,0 +1,81 @@ +import FindPresenter, { FindPresenterImpl } from '../presenters/FindPresenter'; +import FindRepository, { FindRepositoryImpl } + from '../repositories/FindRepository'; +import FindClient, { FindClientImpl } from '../client/FindClient'; +import ConsoleClient, { ConsoleClientImpl } from '../client/ConsoleClient'; + +export default class FindUseCase { + private presenter: FindPresenter; + + private repository: FindRepository; + + private client: FindClient; + + private consoleClient: ConsoleClient; + + constructor({ + presenter = new FindPresenterImpl() as FindPresenter, + repository = new FindRepositoryImpl(), + client = new FindClientImpl(), + consoleClient = new ConsoleClientImpl(), + } = {}) { + this.presenter = presenter; + this.repository = repository; + this.client = client; + this.consoleClient = consoleClient; + } + + async startFind(keyword: string | null): Promise { + this.presenter.clearSelection(); + if (keyword) { + this.saveKeyword(keyword); + } else { + let lastKeyword = await this.getKeyword(); + if (!lastKeyword) { + return this.showNoLastKeywordError(); + } + this.saveKeyword(lastKeyword); + } + return this.findNext(); + } + + findNext(): Promise { + return this.findNextPrev(false); + } + + findPrev(): Promise { + return this.findNextPrev(true); + } + + private async findNextPrev( + backwards: boolean, + ): Promise { + let keyword = await this.getKeyword(); + if (!keyword) { + return this.showNoLastKeywordError(); + } + let found = this.presenter.find(keyword, backwards); + if (found) { + this.consoleClient.info('Pattern found: ' + keyword); + } else { + this.consoleClient.error('Pattern not found: ' + keyword); + } + } + + private async getKeyword(): Promise { + let keyword = this.repository.getLastKeyword(); + if (!keyword) { + keyword = await this.client.getGlobalLastKeyword(); + } + return keyword; + } + + private async saveKeyword(keyword: string): Promise { + this.repository.setLastKeyword(keyword); + await this.client.setGlobalLastKeyword(keyword); + } + + private async showNoLastKeywordError(): Promise { + await this.consoleClient.error('No previous search keywords'); + } +} diff --git a/test/content/reducers/find.test.ts b/test/content/reducers/find.test.ts deleted file mode 100644 index 66a2c67..0000000 --- a/test/content/reducers/find.test.ts +++ /dev/null @@ -1,22 +0,0 @@ -import * as actions from 'content/actions'; -import findReducer from 'content/reducers/find'; - -describe("find reducer", () => { - it('return the initial state', () => { - let state = findReducer(undefined, {}); - expect(state).to.have.property('keyword', null); - expect(state).to.have.property('found', false); - }); - - it('return next state for FIND_SET_KEYWORD', () => { - let action = { - type: actions.FIND_SET_KEYWORD, - keyword: 'xyz', - found: true, - }; - let state = findReducer({}, action); - - expect(state.keyword).is.equal('xyz'); - expect(state.found).to.be.true; - }); -}); diff --git a/test/content/repositories/FindRepository.test.ts b/test/content/repositories/FindRepository.test.ts new file mode 100644 index 0000000..dcb2dff --- /dev/null +++ b/test/content/repositories/FindRepository.test.ts @@ -0,0 +1,15 @@ +import { FindRepositoryImpl } from '../../../src/content/repositories/FindRepository'; +import { expect } from 'chai'; + +describe('FindRepositoryImpl', () => { + it('updates and gets last keyword', () => { + let sut = new FindRepositoryImpl(); + + expect(sut.getLastKeyword()).to.be.null; + + sut.setLastKeyword('monkey'); + + expect(sut.getLastKeyword()).to.equal('monkey'); + }); +}); + diff --git a/test/content/usecases/FindUseCase.test.ts b/test/content/usecases/FindUseCase.test.ts new file mode 100644 index 0000000..347b817 --- /dev/null +++ b/test/content/usecases/FindUseCase.test.ts @@ -0,0 +1,184 @@ +import FindRepository from '../../../src/content/repositories/FindRepository'; +import FindPresenter from '../../../src/content/presenters/FindPresenter'; +import ConsoleClient from '../../../src/content/client/ConsoleClient'; +import FindClient from '../../../src/content/client/FindClient'; +import FindUseCase from '../../../src/content/usecases/FindUseCase'; +import { expect } from 'chai'; + +class MockFindRepository implements FindRepository { + public keyword: string | null; + + constructor() { + this.keyword = null; + } + + getLastKeyword(): string | null { + return this.keyword; + } + + setLastKeyword(keyword: string): void { + this.keyword = keyword; + } +} + +class MockFindPresenter implements FindPresenter { + public document: string; + + public highlighted: boolean; + + constructor() { + this.document = ''; + this.highlighted = false; + } + + find(keyword: string, _backward: boolean): boolean { + let found = this.document.includes(keyword); + this.highlighted = found; + return found; + } + + clearSelection(): void { + this.highlighted = false; + } +} + +class MockFindClient implements FindClient { + public keyword: string | null; + + constructor() { + this.keyword = null; + } + + getGlobalLastKeyword(): Promise { + return Promise.resolve(this.keyword); + } + + setGlobalLastKeyword(keyword: string): Promise { + this.keyword = keyword; + return Promise.resolve(); + } +} + +class MockConsoleClient implements ConsoleClient { + public isError: boolean; + + public text: string; + + constructor() { + this.isError = false; + this.text = ''; + } + + info(text: string): Promise { + this.isError = false; + this.text = text; + return Promise.resolve(); + } + + error(text: string): Promise { + this.isError = true; + this.text = text; + return Promise.resolve(); + } +} + +describe('FindUseCase', () => { + let repository: MockFindRepository; + let presenter: MockFindPresenter; + let client: MockFindClient; + let consoleClient: MockConsoleClient; + let sut: FindUseCase; + + beforeEach(() => { + repository = new MockFindRepository(); + presenter = new MockFindPresenter(); + client = new MockFindClient(); + consoleClient = new MockConsoleClient(); + sut = new FindUseCase({ repository, presenter, client, consoleClient }); + }); + + describe('#startFind', () => { + it('find next by ketword', async() => { + presenter.document = 'monkey punch'; + + await sut.startFind('monkey'); + + expect(await presenter.highlighted).to.be.true; + expect(await consoleClient.text).to.equal('Pattern found: monkey'); + expect(await repository.getLastKeyword()).to.equal('monkey'); + expect(await client.getGlobalLastKeyword()).to.equal('monkey'); + }); + + it('find next by last keyword', async() => { + presenter.document = 'gorilla kick'; + repository.keyword = 'gorilla'; + + await sut.startFind(null); + + expect(await presenter.highlighted).to.be.true; + expect(await consoleClient.text).to.equal('Pattern found: gorilla'); + expect(await repository.getLastKeyword()).to.equal('gorilla'); + expect(await client.getGlobalLastKeyword()).to.equal('gorilla'); + }); + + it('find next by global last keyword', async() => { + presenter.document = 'chimpanzee typing'; + + repository.keyword = null; + client.keyword = 'chimpanzee'; + + await sut.startFind(null); + + expect(await presenter.highlighted).to.be.true; + expect(await consoleClient.text).to.equal('Pattern found: chimpanzee'); + expect(await repository.getLastKeyword()).to.equal('chimpanzee'); + expect(await client.getGlobalLastKeyword()).to.equal('chimpanzee'); + }); + + it('find not found error', async() => { + presenter.document = 'zoo'; + + await sut.startFind('giraffe'); + + expect(await presenter.highlighted).to.be.false; + expect(await consoleClient.text).to.equal('Pattern not found: giraffe'); + expect(await repository.getLastKeyword()).to.equal('giraffe'); + expect(await client.getGlobalLastKeyword()).to.equal('giraffe'); + }); + + it('show errors when no last keywords', async() => { + repository.keyword = null; + client.keyword = null; + + await sut.startFind(null); + + expect(await consoleClient.text).to.equal('No previous search keywords'); + expect(await consoleClient.isError).to.be.true; + }); + }); + + describe('#findNext', () => { + it('finds by last keyword', async() => { + presenter.document = 'monkey punch'; + repository.keyword = 'monkey'; + + await sut.findNext(); + + expect(await presenter.highlighted).to.be.true; + expect(await consoleClient.text).to.equal('Pattern found: monkey'); + }); + + it('show errors when no last keywords', async() => { + repository.keyword = null; + client.keyword = null; + + await sut.findNext(); + + expect(await consoleClient.text).to.equal('No previous search keywords'); + expect(await consoleClient.isError).to.be.true; + }); + }); + + describe('#findPrev', () => { + }); +}); -- cgit v1.2.3 From ad1f3c07fbb90c4e69cc2374d74a7373e4da70f2 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sat, 11 May 2019 11:51:29 +0900 Subject: Make scroller as a presenter --- src/content/actions/operation.ts | 17 +-- src/content/components/common/mark.ts | 9 +- src/content/components/top-content/index.ts | 5 +- src/content/presenters/FindPresenter.ts | 7 -- src/content/presenters/ScrollPresenter.ts | 179 ++++++++++++++++++++++++++++ src/content/scrolls.ts | 168 -------------------------- 6 files changed, 196 insertions(+), 189 deletions(-) create mode 100644 src/content/presenters/ScrollPresenter.ts delete mode 100644 src/content/scrolls.ts (limited to 'src/content/components/top-content') diff --git a/src/content/actions/operation.ts b/src/content/actions/operation.ts index f65d0bd..b264e36 100644 --- a/src/content/actions/operation.ts +++ b/src/content/actions/operation.ts @@ -1,7 +1,6 @@ import * as operations from '../../shared/operations'; import * as actions from './index'; import * as messages from '../../shared/messages'; -import * as scrolls from '../scrolls'; import * as navigates from '../navigates'; import * as focuses from '../focuses'; import * as urls from '../urls'; @@ -10,9 +9,11 @@ import * as markActions from './mark'; import AddonEnabledUseCase from '../usecases/AddonEnabledUseCase'; import { SettingRepositoryImpl } from '../repositories/SettingRepository'; +import { ScrollPresenterImpl } from '../presenters/ScrollPresenter'; let addonEnabledUseCase = new AddonEnabledUseCase(); let settingRepository = new SettingRepositoryImpl(); +let scrollPresenter = new ScrollPresenterImpl(); // eslint-disable-next-line complexity, max-lines-per-function const exec = async( @@ -41,25 +42,25 @@ const exec = async( }), '*'); break; case operations.SCROLL_VERTICALLY: - scrolls.scrollVertically(operation.count, smoothscroll); + scrollPresenter.scrollVertically(operation.count, smoothscroll); break; case operations.SCROLL_HORIZONALLY: - scrolls.scrollHorizonally(operation.count, smoothscroll); + scrollPresenter.scrollHorizonally(operation.count, smoothscroll); break; case operations.SCROLL_PAGES: - scrolls.scrollPages(operation.count, smoothscroll); + scrollPresenter.scrollPages(operation.count, smoothscroll); break; case operations.SCROLL_TOP: - scrolls.scrollToTop(smoothscroll); + scrollPresenter.scrollToTop(smoothscroll); break; case operations.SCROLL_BOTTOM: - scrolls.scrollToBottom(smoothscroll); + scrollPresenter.scrollToBottom(smoothscroll); break; case operations.SCROLL_HOME: - scrolls.scrollToHome(smoothscroll); + scrollPresenter.scrollToHome(smoothscroll); break; case operations.SCROLL_END: - scrolls.scrollToEnd(smoothscroll); + scrollPresenter.scrollToEnd(smoothscroll); break; case operations.FOLLOW_START: window.top.postMessage(JSON.stringify({ diff --git a/src/content/components/common/mark.ts b/src/content/components/common/mark.ts index 77aa15d..ddd1a38 100644 --- a/src/content/components/common/mark.ts +++ b/src/content/components/common/mark.ts @@ -1,12 +1,13 @@ import * as markActions from '../../actions/mark'; -import * as scrolls from '../..//scrolls'; import * as consoleFrames from '../..//console-frames'; import * as keyUtils from '../../../shared/utils/keys'; import Mark from '../../Mark'; import { SettingRepositoryImpl } from '../../repositories/SettingRepository'; +import { ScrollPresenterImpl } from '../../presenters/ScrollPresenter'; let settingRepository = new SettingRepositoryImpl(); +let scrollPresenter = new ScrollPresenterImpl(); const cancelKey = (key: keyUtils.Key): boolean => { return key.key === 'Esc' || key.key === '[' && Boolean(key.ctrlKey); @@ -54,7 +55,7 @@ export default class MarkComponent { } doSet(key: keyUtils.Key) { - let { x, y } = scrolls.getScroll(); + let { x, y } = scrollPresenter.getScroll(); this.store.dispatch(markActions.setLocal(key.key, x, y)); } @@ -69,11 +70,11 @@ export default class MarkComponent { } let { x, y } = marks[key.key]; - scrolls.scrollTo(x, y, smoothscroll); + scrollPresenter.scrollTo(x, y, smoothscroll); } doSetGlobal(key: keyUtils.Key) { - let { x, y } = scrolls.getScroll(); + let { x, y } = scrollPresenter.getScroll(); this.store.dispatch(markActions.setGlobal(key.key, x, y)); } diff --git a/src/content/components/top-content/index.ts b/src/content/components/top-content/index.ts index b9ef2dd..de14b3f 100644 --- a/src/content/components/top-content/index.ts +++ b/src/content/components/top-content/index.ts @@ -4,10 +4,11 @@ import FindComponent from './find'; import * as consoleFrames from '../../console-frames'; import * as messages from '../../../shared/messages'; import MessageListener from '../../MessageListener'; -import * as scrolls from '../../scrolls'; import AddonEnabledUseCase from '../../usecases/AddonEnabledUseCase'; +import { ScrollPresenterImpl } from '../../presenters/ScrollPresenter'; let addonEnabledUseCase = new AddonEnabledUseCase(); +let scrollPresenter = new ScrollPresenterImpl(); export default class TopContent { private win: Window; @@ -42,7 +43,7 @@ export default class TopContent { case messages.ADDON_ENABLED_QUERY: return Promise.resolve(addonEnabled); case messages.TAB_SCROLL_TO: - return scrolls.scrollTo(message.x, message.y, false); + return scrollPresenter.scrollTo(message.x, message.y, false); } } } diff --git a/src/content/presenters/FindPresenter.ts b/src/content/presenters/FindPresenter.ts index 6dd03f8..d9bc835 100644 --- a/src/content/presenters/FindPresenter.ts +++ b/src/content/presenters/FindPresenter.ts @@ -1,4 +1,3 @@ -import ConsoleClient, { ConsoleClientImpl } from '../client/ConsoleClient'; export default interface FindPresenter { find(keyword: string, backwards: boolean): boolean; @@ -28,12 +27,6 @@ interface MyWindow extends Window { declare var window: MyWindow; export class FindPresenterImpl implements FindPresenter { - private consoleClient: ConsoleClient; - - constructor({ consoleClient = new ConsoleClientImpl() } = {}) { - this.consoleClient = consoleClient; - } - find(keyword: string, backwards: boolean): boolean { let caseSensitive = false; let wrapScan = true; diff --git a/src/content/presenters/ScrollPresenter.ts b/src/content/presenters/ScrollPresenter.ts new file mode 100644 index 0000000..9f47394 --- /dev/null +++ b/src/content/presenters/ScrollPresenter.ts @@ -0,0 +1,179 @@ +import * as doms from '../../shared/utils/dom'; + +const SCROLL_DELTA_X = 64; +const SCROLL_DELTA_Y = 64; + +// dirty way to store scrolling state on globally +let scrolling = false; +let lastTimeoutId: number | null = null; + +const isScrollableStyle = (element: Element): boolean => { + let { overflowX, overflowY } = window.getComputedStyle(element); + return !(overflowX !== 'scroll' && overflowX !== 'auto' && + overflowY !== 'scroll' && overflowY !== 'auto'); +}; + +const isOverflowed = (element: Element): boolean => { + return element.scrollWidth > element.clientWidth || + element.scrollHeight > element.clientHeight; +}; + +// Find a visiable and scrollable element by depth-first search. Currently +// this method is called by each scrolling, and the returned value of this +// method is not cached. That does not cause performance issue because in the +// most pages, the window is root element i,e, documentElement. +const findScrollable = (element: Element): Element | null => { + if (isScrollableStyle(element) && isOverflowed(element)) { + return element; + } + + let children = Array.from(element.children).filter(doms.isVisible); + for (let child of children) { + let scrollable = findScrollable(child); + if (scrollable) { + return scrollable; + } + } + return null; +}; + +const scrollTarget = () => { + if (isOverflowed(window.document.documentElement)) { + return window.document.documentElement; + } + if (isOverflowed(window.document.body)) { + return window.document.body; + } + let target = findScrollable(window.document.documentElement); + if (target) { + return target; + } + return window.document.documentElement; +}; + +const resetScrolling = () => { + scrolling = false; +}; + +class Scroller { + private element: Element; + + private smooth: boolean; + + constructor(element: Element, smooth: boolean) { + this.element = element; + this.smooth = smooth; + } + + scrollTo(x: number, y: number): void { + if (!this.smooth) { + this.element.scrollTo(x, y); + return; + } + this.element.scrollTo({ + left: x, + top: y, + behavior: 'smooth', + }); + this.prepareReset(); + } + + scrollBy(x: number, y: number): void { + let left = this.element.scrollLeft + x; + let top = this.element.scrollTop + y; + this.scrollTo(left, top); + } + + prepareReset(): void { + scrolling = true; + if (lastTimeoutId) { + clearTimeout(lastTimeoutId); + lastTimeoutId = null; + } + lastTimeoutId = setTimeout(resetScrolling, 100); + } +} + +type Point = { x: number, y: number }; + +export default interface ScrollPresenter { + getScroll(): Point; + scrollVertically(amount: number, smooth: boolean): void; + scrollHorizonally(amount: number, smooth: boolean): void; + scrollPages(amount: number, smooth: boolean): void; + scrollTo(x: number, y: number, smooth: boolean): void; + scrollToTop(smooth: boolean): void; + scrollToBottom(smooth: boolean): void; + scrollToHome(smooth: boolean): void; + scrollToEnd(smooth: boolean): void; + + // eslint-disable-next-line semi +} + +export class ScrollPresenterImpl { + getScroll(): Point { + let target = scrollTarget(); + return { x: target.scrollLeft, y: target.scrollTop }; + } + + scrollVertically(count: number, smooth: boolean): void { + let target = scrollTarget(); + let delta = SCROLL_DELTA_Y * count; + if (scrolling) { + delta = SCROLL_DELTA_Y * count * 4; + } + new Scroller(target, smooth).scrollBy(0, delta); + } + + scrollHorizonally(count: number, smooth: boolean): void { + let target = scrollTarget(); + let delta = SCROLL_DELTA_X * count; + if (scrolling) { + delta = SCROLL_DELTA_X * count * 4; + } + new Scroller(target, smooth).scrollBy(delta, 0); + } + + scrollPages(count: number, smooth: boolean): void { + let target = scrollTarget(); + let height = target.clientHeight; + let delta = height * count; + if (scrolling) { + delta = height * count; + } + new Scroller(target, smooth).scrollBy(0, delta); + } + + scrollTo(x: number, y: number, smooth: boolean): void { + let target = scrollTarget(); + new Scroller(target, smooth).scrollTo(x, y); + } + + scrollToTop(smooth: boolean): void { + let target = scrollTarget(); + let x = target.scrollLeft; + let y = 0; + new Scroller(target, smooth).scrollTo(x, y); + } + + scrollToBottom(smooth: boolean): void { + let target = scrollTarget(); + let x = target.scrollLeft; + let y = target.scrollHeight; + new Scroller(target, smooth).scrollTo(x, y); + } + + scrollToHome(smooth: boolean): void { + let target = scrollTarget(); + let x = 0; + let y = target.scrollTop; + new Scroller(target, smooth).scrollTo(x, y); + } + + scrollToEnd(smooth: boolean): void { + let target = scrollTarget(); + let x = target.scrollWidth; + let y = target.scrollTop; + new Scroller(target, smooth).scrollTo(x, y); + } +} diff --git a/src/content/scrolls.ts b/src/content/scrolls.ts deleted file mode 100644 index 6a35315..0000000 --- a/src/content/scrolls.ts +++ /dev/null @@ -1,168 +0,0 @@ -import * as doms from '../shared/utils/dom'; - -const SCROLL_DELTA_X = 64; -const SCROLL_DELTA_Y = 64; - -// dirty way to store scrolling state on globally -let scrolling = false; -let lastTimeoutId: number | null = null; - -const isScrollableStyle = (element: Element): boolean => { - let { overflowX, overflowY } = window.getComputedStyle(element); - return !(overflowX !== 'scroll' && overflowX !== 'auto' && - overflowY !== 'scroll' && overflowY !== 'auto'); -}; - -const isOverflowed = (element: Element): boolean => { - return element.scrollWidth > element.clientWidth || - element.scrollHeight > element.clientHeight; -}; - -// Find a visiable and scrollable element by depth-first search. Currently -// this method is called by each scrolling, and the returned value of this -// method is not cached. That does not cause performance issue because in the -// most pages, the window is root element i,e, documentElement. -const findScrollable = (element: Element): Element | null => { - if (isScrollableStyle(element) && isOverflowed(element)) { - return element; - } - - let children = Array.from(element.children).filter(doms.isVisible); - for (let child of children) { - let scrollable = findScrollable(child); - if (scrollable) { - return scrollable; - } - } - return null; -}; - -const scrollTarget = () => { - if (isOverflowed(window.document.documentElement)) { - return window.document.documentElement; - } - if (isOverflowed(window.document.body)) { - return window.document.body; - } - let target = findScrollable(window.document.documentElement); - if (target) { - return target; - } - return window.document.documentElement; -}; - -const resetScrolling = () => { - scrolling = false; -}; - -class Scroller { - private element: Element; - - private smooth: boolean; - - constructor(element: Element, smooth: boolean) { - this.element = element; - this.smooth = smooth; - } - - scrollTo(x: number, y: number): void { - if (!this.smooth) { - this.element.scrollTo(x, y); - return; - } - this.element.scrollTo({ - left: x, - top: y, - behavior: 'smooth', - }); - this.prepareReset(); - } - - scrollBy(x: number, y: number): void { - let left = this.element.scrollLeft + x; - let top = this.element.scrollTop + y; - this.scrollTo(left, top); - } - - prepareReset(): void { - scrolling = true; - if (lastTimeoutId) { - clearTimeout(lastTimeoutId); - lastTimeoutId = null; - } - lastTimeoutId = setTimeout(resetScrolling, 100); - } -} - -const getScroll = () => { - let target = scrollTarget(); - return { x: target.scrollLeft, y: target.scrollTop }; -}; - -const scrollVertically = (count: number, smooth: boolean): void => { - let target = scrollTarget(); - let delta = SCROLL_DELTA_Y * count; - if (scrolling) { - delta = SCROLL_DELTA_Y * count * 4; - } - new Scroller(target, smooth).scrollBy(0, delta); -}; - -const scrollHorizonally = (count: number, smooth: boolean): void => { - let target = scrollTarget(); - let delta = SCROLL_DELTA_X * count; - if (scrolling) { - delta = SCROLL_DELTA_X * count * 4; - } - new Scroller(target, smooth).scrollBy(delta, 0); -}; - -const scrollPages = (count: number, smooth: boolean): void => { - let target = scrollTarget(); - let height = target.clientHeight; - let delta = height * count; - if (scrolling) { - delta = height * count; - } - new Scroller(target, smooth).scrollBy(0, delta); -}; - -const scrollTo = (x: number, y: number, smooth: boolean): void => { - let target = scrollTarget(); - new Scroller(target, smooth).scrollTo(x, y); -}; - -const scrollToTop = (smooth: boolean): void => { - let target = scrollTarget(); - let x = target.scrollLeft; - let y = 0; - new Scroller(target, smooth).scrollTo(x, y); -}; - -const scrollToBottom = (smooth: boolean): void => { - let target = scrollTarget(); - let x = target.scrollLeft; - let y = target.scrollHeight; - new Scroller(target, smooth).scrollTo(x, y); -}; - -const scrollToHome = (smooth: boolean): void => { - let target = scrollTarget(); - let x = 0; - let y = target.scrollTop; - new Scroller(target, smooth).scrollTo(x, y); -}; - -const scrollToEnd = (smooth: boolean): void => { - let target = scrollTarget(); - let x = target.scrollWidth; - let y = target.scrollTop; - new Scroller(target, smooth).scrollTo(x, y); -}; - -export { - getScroll, - scrollVertically, scrollHorizonally, scrollPages, - scrollTo, - scrollToTop, scrollToBottom, scrollToHome, scrollToEnd -}; -- cgit v1.2.3 From fcd15f4f09e412cb66f29649572b9d8ae6d50363 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sat, 11 May 2019 13:55:25 +0900 Subject: Find as a controller --- .eslintrc | 2 +- src/console/actions/console.ts | 2 +- src/console/components/Console.tsx | 3 +- src/content/components/top-content/find.ts | 36 ---------------- src/content/components/top-content/index.ts | 2 - src/content/controllers/FindController.ts | 24 +++++++++++ src/content/index.ts | 16 +++++++ src/content/usecases/FindUseCase.ts | 2 +- src/shared/messages.ts | 66 ++++++++++++++--------------- 9 files changed, 78 insertions(+), 75 deletions(-) delete mode 100644 src/content/components/top-content/find.ts create mode 100644 src/content/controllers/FindController.ts (limited to 'src/content/components/top-content') diff --git a/.eslintrc b/.eslintrc index 7845ca5..48826fa 100644 --- a/.eslintrc +++ b/.eslintrc @@ -79,6 +79,6 @@ "react/jsx-indent": ["error", 2], "react/prop-types": "off", "react/react-in-jsx-scope": "off", - "@typescript-eslint/no-unused-vars": "error" + "@typescript-eslint/no-unused-vars": ["error", { args: "none" }], } } diff --git a/src/console/actions/console.ts b/src/console/actions/console.ts index b1494b0..d03f52c 100644 --- a/src/console/actions/console.ts +++ b/src/console/actions/console.ts @@ -53,7 +53,7 @@ const enterCommand = async( return hideCommand(); }; -const enterFind = (text: string): actions.ConsoleAction => { +const enterFind = (text?: string): actions.ConsoleAction => { window.top.postMessage(JSON.stringify({ type: messages.CONSOLE_ENTER_FIND, text, diff --git a/src/console/components/Console.tsx b/src/console/components/Console.tsx index 3274047..68cc523 100644 --- a/src/console/components/Console.tsx +++ b/src/console/components/Console.tsx @@ -38,7 +38,8 @@ class Console extends React.Component { if (this.props.mode === 'command') { return this.props.dispatch(consoleActions.enterCommand(value)); } else if (this.props.mode === 'find') { - return this.props.dispatch(consoleActions.enterFind(value)); + return this.props.dispatch(consoleActions.enterFind( + value === '' ? undefined : value)); } } diff --git a/src/content/components/top-content/find.ts b/src/content/components/top-content/find.ts deleted file mode 100644 index c25cbeb..0000000 --- a/src/content/components/top-content/find.ts +++ /dev/null @@ -1,36 +0,0 @@ -import * as messages from '../../../shared/messages'; -import MessageListener from '../../MessageListener'; - -import FindUseCase from '../../usecases/FindUseCase'; - -let findUseCase = new FindUseCase(); - -export default class FindComponent { - constructor() { - new MessageListener().onWebMessage(this.onMessage.bind(this)); - } - - onMessage(message: messages.Message) { - switch (message.type) { - case messages.CONSOLE_ENTER_FIND: - return this.start(message.text); - case messages.FIND_NEXT: - return this.next(); - case messages.FIND_PREV: - return this.prev(); - } - return Promise.resolve(); - } - - start(text: string) { - return findUseCase.startFind(text.length === 0 ? null : text); - } - - next() { - return findUseCase.findNext(); - } - - prev() { - return findUseCase.findPrev(); - } -} diff --git a/src/content/components/top-content/index.ts b/src/content/components/top-content/index.ts index de14b3f..0f07653 100644 --- a/src/content/components/top-content/index.ts +++ b/src/content/components/top-content/index.ts @@ -1,6 +1,5 @@ import CommonComponent from '../common'; import FollowController from './follow-controller'; -import FindComponent from './find'; import * as consoleFrames from '../../console-frames'; import * as messages from '../../../shared/messages'; import MessageListener from '../../MessageListener'; @@ -18,7 +17,6 @@ export default class TopContent { new CommonComponent(win, store); // eslint-disable-line no-new new FollowController(win, store); // eslint-disable-line no-new - new FindComponent(); // eslint-disable-line no-new // TODO make component consoleFrames.initialize(this.win.document); diff --git a/src/content/controllers/FindController.ts b/src/content/controllers/FindController.ts new file mode 100644 index 0000000..cf27a8d --- /dev/null +++ b/src/content/controllers/FindController.ts @@ -0,0 +1,24 @@ +import * as messages from '../../shared/messages'; +import FindUseCase from '../usecases/FindUseCase'; + +export default class FindController { + private findUseCase: FindUseCase; + + constructor({ + findUseCase = new FindUseCase(), + } = {}) { + this.findUseCase = findUseCase; + } + + async start(m: messages.ConsoleEnterFindMessage): Promise { + await this.findUseCase.startFind(m.text); + } + + async next(_: messages.FindNextMessage): Promise { + await this.findUseCase.findNext(); + } + + async prev(_: messages.FindPrevMessage): Promise { + await this.findUseCase.findPrev(); + } +} diff --git a/src/content/index.ts b/src/content/index.ts index 9d791fc..4024b98 100644 --- a/src/content/index.ts +++ b/src/content/index.ts @@ -2,11 +2,27 @@ import TopContentComponent from './components/top-content'; import FrameContentComponent from './components/frame-content'; import consoleFrameStyle from './site-style'; import { newStore } from './store'; +import MessageListener from './MessageListener'; +import FindController from './controllers/FindController'; +import * as messages from '../shared/messages'; const store = newStore(); if (window.self === window.top) { new TopContentComponent(window, store); // eslint-disable-line no-new + + let findController = new FindController(); + new MessageListener().onWebMessage((message: messages.Message) => { + switch (message.type) { + case messages.CONSOLE_ENTER_FIND: + return findController.start(message); + case messages.FIND_NEXT: + return findController.next(message); + case messages.FIND_PREV: + return findController.prev(message); + } + return undefined; + }); } else { new FrameContentComponent(window, store); // eslint-disable-line no-new } diff --git a/src/content/usecases/FindUseCase.ts b/src/content/usecases/FindUseCase.ts index 4fda323..74cbc97 100644 --- a/src/content/usecases/FindUseCase.ts +++ b/src/content/usecases/FindUseCase.ts @@ -25,7 +25,7 @@ export default class FindUseCase { this.consoleClient = consoleClient; } - async startFind(keyword: string | null): Promise { + async startFind(keyword?: string): Promise { this.presenter.clearSelection(); if (keyword) { this.saveKeyword(keyword); diff --git a/src/shared/messages.ts b/src/shared/messages.ts index 41b0f0b..75df798 100644 --- a/src/shared/messages.ts +++ b/src/shared/messages.ts @@ -42,162 +42,162 @@ export const SETTINGS_QUERY = 'settings.query'; export const CONSOLE_FRAME_MESSAGE = 'console.frame.message'; -interface BackgroundOperationMessage { +export interface BackgroundOperationMessage { type: typeof BACKGROUND_OPERATION; operation: operations.Operation; } -interface ConsoleUnfocusMessage { +export interface ConsoleUnfocusMessage { type: typeof CONSOLE_UNFOCUS; } -interface ConsoleEnterCommandMessage { +export interface ConsoleEnterCommandMessage { type: typeof CONSOLE_ENTER_COMMAND; text: string; } -interface ConsoleEnterFindMessage { +export interface ConsoleEnterFindMessage { type: typeof CONSOLE_ENTER_FIND; - text: string; + text?: string; } -interface ConsoleQueryCompletionsMessage { +export interface ConsoleQueryCompletionsMessage { type: typeof CONSOLE_QUERY_COMPLETIONS; text: string; } -interface ConsoleShowCommandMessage { +export interface ConsoleShowCommandMessage { type: typeof CONSOLE_SHOW_COMMAND; command: string; } -interface ConsoleShowErrorMessage { +export interface ConsoleShowErrorMessage { type: typeof CONSOLE_SHOW_ERROR; text: string; } -interface ConsoleShowInfoMessage { +export interface ConsoleShowInfoMessage { type: typeof CONSOLE_SHOW_INFO; text: string; } -interface ConsoleShowFindMessage { +export interface ConsoleShowFindMessage { type: typeof CONSOLE_SHOW_FIND; } -interface ConsoleHideMessage { +export interface ConsoleHideMessage { type: typeof CONSOLE_HIDE; } -interface FollowStartMessage { +export interface FollowStartMessage { type: typeof FOLLOW_START; newTab: boolean; background: boolean; } -interface FollowRequestCountTargetsMessage { +export interface FollowRequestCountTargetsMessage { type: typeof FOLLOW_REQUEST_COUNT_TARGETS; viewSize: { width: number, height: number }; framePosition: { x: number, y: number }; } -interface FollowResponseCountTargetsMessage { +export interface FollowResponseCountTargetsMessage { type: typeof FOLLOW_RESPONSE_COUNT_TARGETS; count: number; } -interface FollowCreateHintsMessage { +export interface FollowCreateHintsMessage { type: typeof FOLLOW_CREATE_HINTS; keysArray: string[]; newTab: boolean; background: boolean; } -interface FollowShowHintsMessage { +export interface FollowShowHintsMessage { type: typeof FOLLOW_SHOW_HINTS; keys: string; } -interface FollowRemoveHintsMessage { +export interface FollowRemoveHintsMessage { type: typeof FOLLOW_REMOVE_HINTS; } -interface FollowActivateMessage { +export interface FollowActivateMessage { type: typeof FOLLOW_ACTIVATE; keys: string; } -interface FollowKeyPressMessage { +export interface FollowKeyPressMessage { type: typeof FOLLOW_KEY_PRESS; key: string; ctrlKey: boolean; } -interface MarkSetGlobalMessage { +export interface MarkSetGlobalMessage { type: typeof MARK_SET_GLOBAL; key: string; x: number; y: number; } -interface MarkJumpGlobalMessage { +export interface MarkJumpGlobalMessage { type: typeof MARK_JUMP_GLOBAL; key: string; } -interface TabScrollToMessage { +export interface TabScrollToMessage { type: typeof TAB_SCROLL_TO; x: number; y: number; } -interface FindNextMessage { +export interface FindNextMessage { type: typeof FIND_NEXT; } -interface FindPrevMessage { +export interface FindPrevMessage { type: typeof FIND_PREV; } -interface FindGetKeywordMessage { +export interface FindGetKeywordMessage { type: typeof FIND_GET_KEYWORD; } -interface FindSetKeywordMessage { +export interface FindSetKeywordMessage { type: typeof FIND_SET_KEYWORD; keyword: string; found: boolean; } -interface AddonEnabledQueryMessage { +export interface AddonEnabledQueryMessage { type: typeof ADDON_ENABLED_QUERY; } -interface AddonEnabledResponseMessage { +export interface AddonEnabledResponseMessage { type: typeof ADDON_ENABLED_RESPONSE; enabled: boolean; } -interface AddonToggleEnabledMessage { +export interface AddonToggleEnabledMessage { type: typeof ADDON_TOGGLE_ENABLED; } -interface OpenUrlMessage { +export interface OpenUrlMessage { type: typeof OPEN_URL; url: string; newTab: boolean; background: boolean; } -interface SettingsChangedMessage { +export interface SettingsChangedMessage { type: typeof SETTINGS_CHANGED; } -interface SettingsQueryMessage { +export interface SettingsQueryMessage { type: typeof SETTINGS_QUERY; } -interface ConsoleFrameMessageMessage { +export interface ConsoleFrameMessageMessage { type: typeof CONSOLE_FRAME_MESSAGE; message: any; } -- cgit v1.2.3 From 17dc2bb5ec6a53c67e1b6df2b82410239eee95fc Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Fri, 17 May 2019 23:12:34 +0900 Subject: Send properties on activate --- src/content/components/common/follow.ts | 21 ++++++--------------- .../components/top-content/follow-controller.ts | 2 ++ src/shared/messages.ts | 4 ++-- 3 files changed, 10 insertions(+), 17 deletions(-) (limited to 'src/content/components/top-content') diff --git a/src/content/components/common/follow.ts b/src/content/components/common/follow.ts index a30a3d5..9a62613 100644 --- a/src/content/components/common/follow.ts +++ b/src/content/components/common/follow.ts @@ -68,18 +68,12 @@ const isAriaHiddenOrAriaDisabled = (win: Window, element: Element): boolean => { export default class Follow { private win: Window; - private newTab: boolean; - - private background: boolean; - private hints: {[key: string]: Hint }; private targets: HTMLElement[] = []; constructor(win: Window) { this.win = win; - this.newTab = false; - this.background = false; this.hints = {}; this.targets = []; @@ -106,13 +100,11 @@ export default class Follow { }), '*'); } - createHints(keysArray: string[], newTab: boolean, background: boolean) { + createHints(keysArray: string[]) { if (keysArray.length !== this.targets.length) { throw new Error('illegal hint count'); } - this.newTab = newTab; - this.background = background; this.hints = {}; for (let i = 0; i < keysArray.length; ++i) { let keys = keysArray[i]; @@ -141,7 +133,7 @@ export default class Follow { this.targets = []; } - async activateHints(keys: string): Promise { + async activateHints(keys: string, newTab: boolean, background: boolean): Promise { let hint = this.hints[keys]; if (!hint) { return; @@ -150,7 +142,7 @@ export default class Follow { if (hint instanceof LinkHint) { let url = hint.getLink(); // ignore taget='_blank' - if (!this.newTab && hint.getLinkTarget() !== '_blank') { + if (!newTab && hint.getLinkTarget() !== '_blank') { hint.click(); return; } @@ -158,7 +150,7 @@ export default class Follow { if (!url || url === '#' || url.toLowerCase().startsWith('javascript:')) { return; } - await tabsClient.openUrl(url, this.newTab, this.background); + await tabsClient.openUrl(url, newTab, background); } else if (hint instanceof InputHint) { hint.activate(); } @@ -169,12 +161,11 @@ export default class Follow { case messages.FOLLOW_REQUEST_COUNT_TARGETS: return this.countHints(sender, message.viewSize, message.framePosition); case messages.FOLLOW_CREATE_HINTS: - return this.createHints( - message.keysArray, message.newTab, message.background); + return this.createHints(message.keysArray); case messages.FOLLOW_SHOW_HINTS: return this.showHints(message.keys); case messages.FOLLOW_ACTIVATE: - return this.activateHints(message.keys); + return this.activateHints(message.keys, message.newTab, message.background); case messages.FOLLOW_REMOVE_HINTS: return this.removeHints(); } diff --git a/src/content/components/top-content/follow-controller.ts b/src/content/components/top-content/follow-controller.ts index 2fcf365..2a242c2 100644 --- a/src/content/components/top-content/follow-controller.ts +++ b/src/content/components/top-content/follow-controller.ts @@ -87,6 +87,8 @@ export default class FollowController { broadcastMessage(this.win, { type: messages.FOLLOW_ACTIVATE, keys: this.state.keys as string, + newTab: this.state.newTab!!, + background: this.state.background!!, }); } diff --git a/src/shared/messages.ts b/src/shared/messages.ts index 75df798..816eba2 100644 --- a/src/shared/messages.ts +++ b/src/shared/messages.ts @@ -109,8 +109,6 @@ export interface FollowResponseCountTargetsMessage { export interface FollowCreateHintsMessage { type: typeof FOLLOW_CREATE_HINTS; keysArray: string[]; - newTab: boolean; - background: boolean; } export interface FollowShowHintsMessage { @@ -125,6 +123,8 @@ export interface FollowRemoveHintsMessage { export interface FollowActivateMessage { type: typeof FOLLOW_ACTIVATE; keys: string; + newTab: boolean; + background: boolean; } export interface FollowKeyPressMessage { -- cgit v1.2.3 From a88324acd9fe626b59637541975abe1ee6041aa7 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sat, 18 May 2019 13:06:37 +0900 Subject: Define client and presenter for follow --- src/content/MessageListener.ts | 6 +- src/content/actions/operation.ts | 8 +- src/content/client/FollowMasterClient.ts | 47 ++++++ src/content/client/FollowSlaveClient.ts | 76 ++++++++++ src/content/components/common/follow.ts | 163 +++++---------------- src/content/components/common/index.ts | 2 +- .../components/top-content/follow-controller.ts | 95 ++++++------ src/content/presenters/FollowPresenter.ts | 134 +++++++++++++++++ src/shared/messages.ts | 8 +- 9 files changed, 359 insertions(+), 180 deletions(-) create mode 100644 src/content/client/FollowMasterClient.ts create mode 100644 src/content/client/FollowSlaveClient.ts create mode 100644 src/content/presenters/FollowPresenter.ts (limited to 'src/content/components/top-content') diff --git a/src/content/MessageListener.ts b/src/content/MessageListener.ts index 1d7a479..e545cab 100644 --- a/src/content/MessageListener.ts +++ b/src/content/MessageListener.ts @@ -1,14 +1,16 @@ import { Message, valueOf } from '../shared/messages'; -export type WebMessageSender = Window | MessagePort | ServiceWorker | null; export type WebExtMessageSender = browser.runtime.MessageSender; export default class MessageListener { onWebMessage( - listener: (msg: Message, sender: WebMessageSender) => void, + listener: (msg: Message, sender: Window) => void, ) { window.addEventListener('message', (event: MessageEvent) => { let sender = event.source; + if (!(sender instanceof Window)) { + return; + } let message = null; try { message = JSON.parse(event.data); diff --git a/src/content/actions/operation.ts b/src/content/actions/operation.ts index 28192d7..657cf47 100644 --- a/src/content/actions/operation.ts +++ b/src/content/actions/operation.ts @@ -9,11 +9,13 @@ import AddonEnabledUseCase from '../usecases/AddonEnabledUseCase'; import ClipboardUseCase from '../usecases/ClipboardUseCase'; import { SettingRepositoryImpl } from '../repositories/SettingRepository'; import { ScrollPresenterImpl } from '../presenters/ScrollPresenter'; +import { FollowMasterClientImpl } from '../client/FollowMasterClient'; let addonEnabledUseCase = new AddonEnabledUseCase(); let clipbaordUseCase = new ClipboardUseCase(); let settingRepository = new SettingRepositoryImpl(); let scrollPresenter = new ScrollPresenterImpl(); +let followMasterClient = new FollowMasterClientImpl(window.top); // eslint-disable-next-line complexity, max-lines-per-function const exec = async( @@ -63,11 +65,7 @@ const exec = async( scrollPresenter.scrollToEnd(smoothscroll); break; case operations.FOLLOW_START: - window.top.postMessage(JSON.stringify({ - type: messages.FOLLOW_START, - newTab: operation.newTab, - background: operation.background, - }), '*'); + followMasterClient.startFollow(operation.newTab, operation.background); break; case operations.MARK_SET_PREFIX: return markActions.startSet(); diff --git a/src/content/client/FollowMasterClient.ts b/src/content/client/FollowMasterClient.ts new file mode 100644 index 0000000..464b52f --- /dev/null +++ b/src/content/client/FollowMasterClient.ts @@ -0,0 +1,47 @@ +import * as messages from '../../shared/messages'; +import { Key } from '../../shared/utils/keys'; + +export default interface FollowMasterClient { + startFollow(newTab: boolean, background: boolean): void; + + responseHintCount(count: number): void; + + sendKey(key: Key): void; + + // eslint-disable-next-line semi +} + +export class FollowMasterClientImpl implements FollowMasterClient { + private window: Window; + + constructor(window: Window) { + this.window = window; + } + + startFollow(newTab: boolean, background: boolean): void { + this.postMessage({ + type: messages.FOLLOW_START, + newTab, + background, + }); + } + + responseHintCount(count: number): void { + this.postMessage({ + type: messages.FOLLOW_RESPONSE_COUNT_TARGETS, + count, + }); + } + + sendKey(key: Key): void { + this.postMessage({ + type: messages.FOLLOW_KEY_PRESS, + key: key.key, + ctrlKey: key.ctrlKey || false, + }); + } + + private postMessage(msg: messages.Message): void { + this.window.postMessage(JSON.stringify(msg), '*'); + } +} diff --git a/src/content/client/FollowSlaveClient.ts b/src/content/client/FollowSlaveClient.ts new file mode 100644 index 0000000..0905cd9 --- /dev/null +++ b/src/content/client/FollowSlaveClient.ts @@ -0,0 +1,76 @@ +import * as messages from '../../shared/messages'; + +interface Size { + width: number; + height: number; +} + +interface Point { + x: number; + y: number; +} + +export default interface FollowSlaveClient { + filterHints(prefix: string): void; + + requestHintCount(viewSize: Size, framePosition: Point): void; + + createHints(viewSize: Size, framePosition: Point, tags: string[]): void; + + clearHints(): void; + + activateIfExists(tag: string, newTab: boolean, background: boolean): void; + + // eslint-disable-next-line semi +} + +export class FollowSlaveClientImpl implements FollowSlaveClient { + private target: Window; + + constructor(target: Window) { + this.target = target; + } + + filterHints(prefix: string): void { + this.postMessage({ + type: messages.FOLLOW_SHOW_HINTS, + prefix, + }); + } + + requestHintCount(viewSize: Size, framePosition: Point): void { + this.postMessage({ + type: messages.FOLLOW_REQUEST_COUNT_TARGETS, + viewSize, + framePosition, + }); + } + + createHints(viewSize: Size, framePosition: Point, tags: string[]): void { + this.postMessage({ + type: messages.FOLLOW_CREATE_HINTS, + viewSize, + framePosition, + tags, + }); + } + + clearHints(): void { + this.postMessage({ + type: messages.FOLLOW_REMOVE_HINTS, + }); + } + + activateIfExists(tag: string, newTab: boolean, background: boolean): void { + this.postMessage({ + type: messages.FOLLOW_ACTIVATE, + tag, + newTab, + background, + }); + } + + private postMessage(msg: messages.Message): void { + this.target.postMessage(JSON.stringify(msg), '*'); + } +} diff --git a/src/content/components/common/follow.ts b/src/content/components/common/follow.ts index 9a62613..e0003e3 100644 --- a/src/content/components/common/follow.ts +++ b/src/content/components/common/follow.ts @@ -1,17 +1,18 @@ import MessageListener from '../../MessageListener'; -import Hint, { LinkHint, InputHint } from '../../presenters/Hint'; -import * as dom from '../../../shared/utils/dom'; +import { LinkHint, InputHint } from '../../presenters/Hint'; import * as messages from '../../../shared/messages'; -import * as keyUtils from '../../../shared/utils/keys'; +import { Key } from '../../../shared/utils/keys'; import TabsClient, { TabsClientImpl } from '../../client/TabsClient'; +import FollowMasterClient, { FollowMasterClientImpl } + from '../../client/FollowMasterClient'; +import FollowPresenter, { FollowPresenterImpl } + from '../../presenters/FollowPresenter'; let tabsClient: TabsClient = new TabsClientImpl(); - -const TARGET_SELECTOR = [ - 'a', 'button', 'input', 'textarea', 'area', - '[contenteditable=true]', '[contenteditable=""]', '[tabindex]', - '[role="button"]', 'summary' -].join(','); +let followMasterClient: FollowMasterClient = + new FollowMasterClientImpl(window.top); +let followPresenter: FollowPresenter = + new FollowPresenterImpl(); interface Size { width: number; @@ -23,118 +24,46 @@ interface Point { y: number; } -const inViewport = ( - win: Window, - element: Element, - viewSize: Size, - framePosition: Point, -): boolean => { - let { - top, left, bottom, right - } = dom.viewportRect(element); - let doc = win.document; - let frameWidth = doc.documentElement.clientWidth; - let frameHeight = doc.documentElement.clientHeight; - - if (right < 0 || bottom < 0 || top > frameHeight || left > frameWidth) { - // out of frame - return false; - } - if (right + framePosition.x < 0 || bottom + framePosition.y < 0 || - left + framePosition.x > viewSize.width || - top + framePosition.y > viewSize.height) { - // out of viewport - return false; - } - return true; -}; - -const isAriaHiddenOrAriaDisabled = (win: Window, element: Element): boolean => { - if (!element || win.document.documentElement === element) { - return false; - } - for (let attr of ['aria-hidden', 'aria-disabled']) { - let value = element.getAttribute(attr); - if (value !== null) { - let hidden = value.toLowerCase(); - if (hidden === '' || hidden === 'true') { - return true; - } - } - } - return isAriaHiddenOrAriaDisabled(win, element.parentElement as Element); -}; - export default class Follow { - private win: Window; + private enabled: boolean; - private hints: {[key: string]: Hint }; - - private targets: HTMLElement[] = []; - - constructor(win: Window) { - this.win = win; - this.hints = {}; - this.targets = []; + constructor() { + this.enabled = false; new MessageListener().onWebMessage(this.onMessage.bind(this)); } - key(key: keyUtils.Key): boolean { - if (Object.keys(this.hints).length === 0) { + key(key: Key): boolean { + if (!this.enabled) { return false; } - this.win.parent.postMessage(JSON.stringify({ - type: messages.FOLLOW_KEY_PRESS, - key: key.key, - ctrlKey: key.ctrlKey, - }), '*'); + followMasterClient.sendKey(key); return true; } - countHints(sender: any, viewSize: Size, framePosition: Point) { - this.targets = Follow.getTargetElements(this.win, viewSize, framePosition); - sender.postMessage(JSON.stringify({ - type: messages.FOLLOW_RESPONSE_COUNT_TARGETS, - count: this.targets.length, - }), '*'); + countHints(viewSize: Size, framePosition: Point) { + let count = followPresenter.getTargetCount(viewSize, framePosition); + followMasterClient.responseHintCount(count); } - createHints(keysArray: string[]) { - if (keysArray.length !== this.targets.length) { - throw new Error('illegal hint count'); - } - - this.hints = {}; - for (let i = 0; i < keysArray.length; ++i) { - let keys = keysArray[i]; - let target = this.targets[i]; - if (target instanceof HTMLAnchorElement || - target instanceof HTMLAreaElement) { - this.hints[keys] = new LinkHint(target, keys); - } else { - this.hints[keys] = new InputHint(target, keys); - } - } + createHints(viewSize: Size, framePosition: Point, tags: string[]) { + this.enabled = true; + followPresenter.createHints(viewSize, framePosition, tags); } - showHints(keys: string) { - Object.keys(this.hints).filter(key => key.startsWith(keys)) - .forEach(key => this.hints[key].show()); - Object.keys(this.hints).filter(key => !key.startsWith(keys)) - .forEach(key => this.hints[key].hide()); + showHints(prefix: string) { + followPresenter.filterHints(prefix); } removeHints() { - Object.keys(this.hints).forEach((key) => { - this.hints[key].remove(); - }); - this.hints = {}; - this.targets = []; + followPresenter.clearHints(); + this.enabled = false; } - async activateHints(keys: string, newTab: boolean, background: boolean): Promise { - let hint = this.hints[keys]; + async activateHints( + tag: string, newTab: boolean, background: boolean, + ): Promise { + let hint = followPresenter.getHint(tag); if (!hint) { return; } @@ -156,38 +85,20 @@ export default class Follow { } } - onMessage(message: messages.Message, sender: any) { + onMessage(message: messages.Message, _sender: Window) { switch (message.type) { case messages.FOLLOW_REQUEST_COUNT_TARGETS: - return this.countHints(sender, message.viewSize, message.framePosition); + return this.countHints(message.viewSize, message.framePosition); case messages.FOLLOW_CREATE_HINTS: - return this.createHints(message.keysArray); + return this.createHints( + message.viewSize, message.framePosition, message.tags); case messages.FOLLOW_SHOW_HINTS: - return this.showHints(message.keys); + return this.showHints(message.prefix); case messages.FOLLOW_ACTIVATE: - return this.activateHints(message.keys, message.newTab, message.background); + return this.activateHints( + message.tag, message.newTab, message.background); case messages.FOLLOW_REMOVE_HINTS: return this.removeHints(); } } - - static getTargetElements( - win: Window, - viewSize: - Size, framePosition: Point, - ): HTMLElement[] { - let all = win.document.querySelectorAll(TARGET_SELECTOR); - let filtered = Array.prototype.filter.call(all, (element: HTMLElement) => { - let style = win.getComputedStyle(element); - - // AREA's 'display' in Browser style is 'none' - return (element.tagName === 'AREA' || style.display !== 'none') && - style.visibility !== 'hidden' && - (element as HTMLInputElement).type !== 'hidden' && - element.offsetHeight > 0 && - !isAriaHiddenOrAriaDisabled(win, element) && - inViewport(win, element, viewSize, framePosition); - }); - return filtered; - } } diff --git a/src/content/components/common/index.ts b/src/content/components/common/index.ts index 899953d..b2f48a3 100644 --- a/src/content/components/common/index.ts +++ b/src/content/components/common/index.ts @@ -16,7 +16,7 @@ let settingUseCase = new SettingUseCase(); export default class Common { constructor(win: Window, store: any) { const input = new InputComponent(win.document.body); - const follow = new FollowComponent(win); + const follow = new FollowComponent(); const mark = new MarkComponent(store); const keymapper = new KeymapperComponent(store); diff --git a/src/content/components/top-content/follow-controller.ts b/src/content/components/top-content/follow-controller.ts index 2a242c2..43c917e 100644 --- a/src/content/components/top-content/follow-controller.ts +++ b/src/content/components/top-content/follow-controller.ts @@ -1,18 +1,14 @@ import * as followControllerActions from '../../actions/follow-controller'; import * as messages from '../../../shared/messages'; -import MessageListener, { WebMessageSender } from '../../MessageListener'; +import MessageListener from '../../MessageListener'; import HintKeyProducer from '../../hint-key-producer'; import { SettingRepositoryImpl } from '../../repositories/SettingRepository'; +import FollowSlaveClient, { FollowSlaveClientImpl } + from '../../client/FollowSlaveClient'; let settingRepository = new SettingRepositoryImpl(); -const broadcastMessage = (win: Window, message: messages.Message): void => { - let json = JSON.stringify(message); - let frames = [win.self].concat(Array.from(win.frames as any)); - frames.forEach(frame => frame.postMessage(json, '*')); -}; - export default class FollowController { private win: Window; @@ -43,7 +39,7 @@ export default class FollowController { }); } - onMessage(message: messages.Message, sender: WebMessageSender) { + onMessage(message: messages.Message, sender: Window) { switch (message.type) { case messages.FOLLOW_START: return this.store.dispatch( @@ -77,18 +73,17 @@ export default class FollowController { this.store.dispatch(followControllerActions.disable()); } - broadcastMessage(this.win, { - type: messages.FOLLOW_SHOW_HINTS, - keys: this.state.keys as string, + this.broadcastMessage((c: FollowSlaveClient) => { + c.filterHints(this.state.keys!!); }); } activate(): void { - broadcastMessage(this.win, { - type: messages.FOLLOW_ACTIVATE, - keys: this.state.keys as string, - newTab: this.state.newTab!!, - background: this.state.background!!, + this.broadcastMessage((c: FollowSlaveClient) => { + c.activateIfExists( + this.state.keys!!, + this.state.newTab!!, + this.state.background!!); }); } @@ -123,50 +118,64 @@ export default class FollowController { let doc = this.win.document; let viewWidth = this.win.innerWidth || doc.documentElement.clientWidth; let viewHeight = this.win.innerHeight || doc.documentElement.clientHeight; - let frameElements = this.win.document.querySelectorAll('frame,iframe'); - - this.win.postMessage(JSON.stringify({ - type: messages.FOLLOW_REQUEST_COUNT_TARGETS, - viewSize: { width: viewWidth, height: viewHeight }, - framePosition: { x: 0, y: 0 }, - }), '*'); - frameElements.forEach((ele) => { + let frameElements = this.win.document.querySelectorAll('iframe'); + + new FollowSlaveClientImpl(this.win).requestHintCount( + { width: viewWidth, height: viewHeight }, + { x: 0, y: 0 }); + + for (let ele of Array.from(frameElements)) { let { left: frameX, top: frameY } = ele.getBoundingClientRect(); - let message = JSON.stringify({ - type: messages.FOLLOW_REQUEST_COUNT_TARGETS, - viewSize: { width: viewWidth, height: viewHeight }, - framePosition: { x: frameX, y: frameY }, - }); - if (ele instanceof HTMLFrameElement && ele.contentWindow || - ele instanceof HTMLIFrameElement && ele.contentWindow) { - ele.contentWindow.postMessage(message, '*'); - } - }); + new FollowSlaveClientImpl(ele.contentWindow!!).requestHintCount( + { width: viewWidth, height: viewHeight }, + { x: frameX, y: frameY }, + ); + } } - create(count: number, sender: WebMessageSender) { + create(count: number, sender: Window) { let produced = []; for (let i = 0; i < count; ++i) { produced.push((this.producer as HintKeyProducer).produce()); } this.keys = this.keys.concat(produced); - (sender as Window).postMessage(JSON.stringify({ - type: messages.FOLLOW_CREATE_HINTS, - keysArray: produced, - newTab: this.state.newTab, - background: this.state.background, - }), '*'); + let doc = this.win.document; + let viewWidth = this.win.innerWidth || doc.documentElement.clientWidth; + let viewHeight = this.win.innerHeight || doc.documentElement.clientHeight; + let pos = { x: 0, y: 0 }; + if (sender !== window) { + let frameElements = this.win.document.querySelectorAll('iframe'); + let ele = Array.from(frameElements).find(e => e.contentWindow === sender); + if (!ele) { + // elements of the sender is gone + return; + } + let { left: frameX, top: frameY } = ele.getBoundingClientRect(); + pos = { x: frameX, y: frameY }; + } + new FollowSlaveClientImpl(sender).createHints( + { width: viewWidth, height: viewHeight }, + pos, + produced, + ); } remove() { this.keys = []; - broadcastMessage(this.win, { - type: messages.FOLLOW_REMOVE_HINTS, + this.broadcastMessage((c: FollowSlaveClient) => { + c.clearHints(); }); } private hintchars() { return settingRepository.get().properties.hintchars; } + + private broadcastMessage(f: (clinet: FollowSlaveClient) => void) { + let windows = [window.self].concat(Array.from(window.frames as any)); + windows + .map(w => new FollowSlaveClientImpl(w)) + .forEach(c => f(c)); + } } diff --git a/src/content/presenters/FollowPresenter.ts b/src/content/presenters/FollowPresenter.ts new file mode 100644 index 0000000..f0d115c --- /dev/null +++ b/src/content/presenters/FollowPresenter.ts @@ -0,0 +1,134 @@ +import Hint, { InputHint, LinkHint } from './Hint'; +import * as doms from '../../shared/utils/dom'; + +const TARGET_SELECTOR = [ + 'a', 'button', 'input', 'textarea', 'area', + '[contenteditable=true]', '[contenteditable=""]', '[tabindex]', + '[role="button"]', 'summary' +].join(','); + +interface Size { + width: number; + height: number; +} + +interface Point { + x: number; + y: number; +} + +const inViewport = ( + win: Window, + element: Element, + viewSize: Size, + framePosition: Point, +): boolean => { + let { + top, left, bottom, right + } = doms.viewportRect(element); + let doc = win.document; + let frameWidth = doc.documentElement.clientWidth; + let frameHeight = doc.documentElement.clientHeight; + + if (right < 0 || bottom < 0 || top > frameHeight || left > frameWidth) { + // out of frame + return false; + } + if (right + framePosition.x < 0 || bottom + framePosition.y < 0 || + left + framePosition.x > viewSize.width || + top + framePosition.y > viewSize.height) { + // out of viewport + return false; + } + return true; +}; + +const isAriaHiddenOrAriaDisabled = (win: Window, element: Element): boolean => { + if (!element || win.document.documentElement === element) { + return false; + } + for (let attr of ['aria-hidden', 'aria-disabled']) { + let value = element.getAttribute(attr); + if (value !== null) { + let hidden = value.toLowerCase(); + if (hidden === '' || hidden === 'true') { + return true; + } + } + } + return isAriaHiddenOrAriaDisabled(win, element.parentElement as Element); +}; + +export default interface FollowPresenter { + getTargetCount(viewSize: Size, framePosition: Point): number; + + createHints(viewSize: Size, framePosition: Point, tags: string[]): void; + + filterHints(prefix: string): void; + + clearHints(): void; + + getHint(tag: string): Hint | undefined; + + // eslint-disable-next-line semi +} + +export class FollowPresenterImpl implements FollowPresenter { + private hints: Hint[] + + constructor() { + this.hints = []; + } + + getTargetCount(viewSize: Size, framePosition: Point): number { + let targets = this.getTargets(viewSize, framePosition); + return targets.length; + } + + createHints(viewSize: Size, framePosition: Point, tags: string[]): void { + let targets = this.getTargets(viewSize, framePosition); + let min = Math.min(targets.length, tags.length); + for (let i = 0; i < min; ++i) { + let target = targets[i]; + if (target instanceof HTMLAnchorElement || + target instanceof HTMLAreaElement) { + this.hints.push(new LinkHint(target, tags[i])); + } else { + this.hints.push(new InputHint(target, tags[i])); + } + } + } + + filterHints(prefix: string): void { + let shown = this.hints.filter(h => h.getTag().startsWith(prefix)); + let hidden = this.hints.filter(h => !h.getTag().startsWith(prefix)); + + shown.forEach(h => h.show()); + hidden.forEach(h => h.hide()); + } + + clearHints(): void { + this.hints.forEach(h => h.remove()); + this.hints = []; + } + + getHint(tag: string): Hint | undefined { + return this.hints.find(h => h.getTag() === tag); + } + + private getTargets(viewSize: Size, framePosition: Point): HTMLElement[] { + let all = window.document.querySelectorAll(TARGET_SELECTOR); + let filtered = Array.prototype.filter.call(all, (element: HTMLElement) => { + let style = window.getComputedStyle(element); + + // AREA's 'display' in Browser style is 'none' + return (element.tagName === 'AREA' || style.display !== 'none') && + style.visibility !== 'hidden' && + (element as HTMLInputElement).type !== 'hidden' && + element.offsetHeight > 0 && + !isAriaHiddenOrAriaDisabled(window, element) && + inViewport(window, element, viewSize, framePosition); + }); + return filtered; + } +} diff --git a/src/shared/messages.ts b/src/shared/messages.ts index 816eba2..fbd3478 100644 --- a/src/shared/messages.ts +++ b/src/shared/messages.ts @@ -108,12 +108,14 @@ export interface FollowResponseCountTargetsMessage { export interface FollowCreateHintsMessage { type: typeof FOLLOW_CREATE_HINTS; - keysArray: string[]; + tags: string[]; + viewSize: { width: number, height: number }; + framePosition: { x: number, y: number }; } export interface FollowShowHintsMessage { type: typeof FOLLOW_SHOW_HINTS; - keys: string; + prefix: string; } export interface FollowRemoveHintsMessage { @@ -122,7 +124,7 @@ export interface FollowRemoveHintsMessage { export interface FollowActivateMessage { type: typeof FOLLOW_ACTIVATE; - keys: string; + tag: string; newTab: boolean; background: boolean; } -- cgit v1.2.3 From 4be04628e19392d8da9688d538cc3374e91005d8 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sun, 19 May 2019 09:34:40 +0900 Subject: Remove unused components --- src/content/actions/follow-controller.ts | 32 ---- src/content/actions/index.ts | 81 --------- src/content/actions/input.ts | 17 -- src/content/actions/mark.ts | 17 -- src/content/actions/operation.ts | 112 ------------- src/content/components/common/follow.ts | 104 ------------ src/content/components/common/index.ts | 59 ------- src/content/components/common/mark.ts | 44 ----- src/content/components/frame-content.ts | 3 - .../components/top-content/follow-controller.ts | 181 --------------------- src/content/components/top-content/index.ts | 47 ------ src/content/console-frames.ts | 24 +-- src/content/focuses.ts | 15 -- src/content/index.ts | 9 - src/content/reducers/follow-controller.ts | 40 ----- src/content/reducers/index.ts | 15 -- src/content/reducers/input.ts | 26 --- src/content/reducers/mark.ts | 27 --- src/content/store/index.ts | 8 - test/content/actions/follow-controller.test.ts | 34 ---- test/content/actions/input.test.ts | 19 --- test/content/actions/mark.test.ts | 25 --- test/content/components/common/follow.html | 17 -- test/content/components/common/follow.test.ts | 25 --- test/content/reducers/follow-controller.test.ts | 47 ------ test/content/reducers/input.test.ts | 25 --- test/content/reducers/mark.test.ts | 31 ---- 27 files changed, 1 insertion(+), 1083 deletions(-) delete mode 100644 src/content/actions/follow-controller.ts delete mode 100644 src/content/actions/index.ts delete mode 100644 src/content/actions/input.ts delete mode 100644 src/content/actions/mark.ts delete mode 100644 src/content/actions/operation.ts delete mode 100644 src/content/components/common/follow.ts delete mode 100644 src/content/components/common/index.ts delete mode 100644 src/content/components/common/mark.ts delete mode 100644 src/content/components/frame-content.ts delete mode 100644 src/content/components/top-content/follow-controller.ts delete mode 100644 src/content/components/top-content/index.ts delete mode 100644 src/content/focuses.ts delete mode 100644 src/content/reducers/follow-controller.ts delete mode 100644 src/content/reducers/index.ts delete mode 100644 src/content/reducers/input.ts delete mode 100644 src/content/reducers/mark.ts delete mode 100644 src/content/store/index.ts delete mode 100644 test/content/actions/follow-controller.test.ts delete mode 100644 test/content/actions/input.test.ts delete mode 100644 test/content/actions/mark.test.ts delete mode 100644 test/content/components/common/follow.html delete mode 100644 test/content/components/common/follow.test.ts delete mode 100644 test/content/reducers/follow-controller.test.ts delete mode 100644 test/content/reducers/input.test.ts delete mode 100644 test/content/reducers/mark.test.ts (limited to 'src/content/components/top-content') diff --git a/src/content/actions/follow-controller.ts b/src/content/actions/follow-controller.ts deleted file mode 100644 index 115b3b6..0000000 --- a/src/content/actions/follow-controller.ts +++ /dev/null @@ -1,32 +0,0 @@ -import * as actions from './index'; - -const enable = ( - newTab: boolean, background: boolean, -): actions.FollowAction => { - return { - type: actions.FOLLOW_CONTROLLER_ENABLE, - newTab, - background, - }; -}; - -const disable = (): actions.FollowAction => { - return { - type: actions.FOLLOW_CONTROLLER_DISABLE, - }; -}; - -const keyPress = (key: string): actions.FollowAction => { - return { - type: actions.FOLLOW_CONTROLLER_KEY_PRESS, - key: key - }; -}; - -const backspace = (): actions.FollowAction => { - return { - type: actions.FOLLOW_CONTROLLER_BACKSPACE, - }; -}; - -export { enable, disable, keyPress, backspace }; diff --git a/src/content/actions/index.ts b/src/content/actions/index.ts deleted file mode 100644 index 49f6484..0000000 --- a/src/content/actions/index.ts +++ /dev/null @@ -1,81 +0,0 @@ -import Redux from 'redux'; -import Key from '../domains/Key'; - -// User input -export const INPUT_KEY_PRESS = 'input.key.press'; -export const INPUT_CLEAR_KEYS = 'input.clear.keys'; - -// Completion -export const COMPLETION_SET_ITEMS = 'completion.set.items'; -export const COMPLETION_SELECT_NEXT = 'completions.select.next'; -export const COMPLETION_SELECT_PREV = 'completions.select.prev'; - -// Follow -export const FOLLOW_CONTROLLER_ENABLE = 'follow.controller.enable'; -export const FOLLOW_CONTROLLER_DISABLE = 'follow.controller.disable'; -export const FOLLOW_CONTROLLER_KEY_PRESS = 'follow.controller.key.press'; -export const FOLLOW_CONTROLLER_BACKSPACE = 'follow.controller.backspace'; - -// Mark -export const MARK_START_SET = 'mark.start.set'; -export const MARK_START_JUMP = 'mark.start.jump'; -export const MARK_CANCEL = 'mark.cancel'; - -export const NOOP = 'noop'; - -export interface InputKeyPressAction extends Redux.Action { - type: typeof INPUT_KEY_PRESS; - key: Key; -} - -export interface InputClearKeysAction extends Redux.Action { - type: typeof INPUT_CLEAR_KEYS; -} - -export interface FollowControllerEnableAction extends Redux.Action { - type: typeof FOLLOW_CONTROLLER_ENABLE; - newTab: boolean; - background: boolean; -} - -export interface FollowControllerDisableAction extends Redux.Action { - type: typeof FOLLOW_CONTROLLER_DISABLE; -} - -export interface FollowControllerKeyPressAction extends Redux.Action { - type: typeof FOLLOW_CONTROLLER_KEY_PRESS; - key: string; -} - -export interface FollowControllerBackspaceAction extends Redux.Action { - type: typeof FOLLOW_CONTROLLER_BACKSPACE; -} - -export interface MarkStartSetAction extends Redux.Action { - type: typeof MARK_START_SET; -} - -export interface MarkStartJumpAction extends Redux.Action { - type: typeof MARK_START_JUMP; -} - -export interface MarkCancelAction extends Redux.Action { - type: typeof MARK_CANCEL; -} - -export interface NoopAction extends Redux.Action { - type: typeof NOOP; -} - -export type InputAction = InputKeyPressAction | InputClearKeysAction; -export type FollowAction = - FollowControllerEnableAction | FollowControllerDisableAction | - FollowControllerKeyPressAction | FollowControllerBackspaceAction; -export type MarkAction = - MarkStartSetAction | MarkStartJumpAction | MarkCancelAction | NoopAction; - -export type Action = - InputAction | - FollowAction | - MarkAction | - NoopAction; diff --git a/src/content/actions/input.ts b/src/content/actions/input.ts deleted file mode 100644 index 24dbb99..0000000 --- a/src/content/actions/input.ts +++ /dev/null @@ -1,17 +0,0 @@ -import * as actions from './index'; -import Key from '../domains/Key'; - -const keyPress = (key: Key): actions.InputAction => { - return { - type: actions.INPUT_KEY_PRESS, - key, - }; -}; - -const clearKeys = (): actions.InputAction => { - return { - type: actions.INPUT_CLEAR_KEYS - }; -}; - -export { keyPress, clearKeys }; diff --git a/src/content/actions/mark.ts b/src/content/actions/mark.ts deleted file mode 100644 index 1068507..0000000 --- a/src/content/actions/mark.ts +++ /dev/null @@ -1,17 +0,0 @@ -import * as actions from './index'; - -const startSet = (): actions.MarkAction => { - return { type: actions.MARK_START_SET }; -}; - -const startJump = (): actions.MarkAction => { - return { type: actions.MARK_START_JUMP }; -}; - -const cancel = (): actions.MarkAction => { - return { type: actions.MARK_CANCEL }; -}; - -export { - startSet, startJump, cancel, -}; diff --git a/src/content/actions/operation.ts b/src/content/actions/operation.ts deleted file mode 100644 index 657cf47..0000000 --- a/src/content/actions/operation.ts +++ /dev/null @@ -1,112 +0,0 @@ -import * as operations from '../../shared/operations'; -import * as actions from './index'; -import * as messages from '../../shared/messages'; -import * as navigates from '../navigates'; -import * as focuses from '../focuses'; -import * as markActions from './mark'; - -import AddonEnabledUseCase from '../usecases/AddonEnabledUseCase'; -import ClipboardUseCase from '../usecases/ClipboardUseCase'; -import { SettingRepositoryImpl } from '../repositories/SettingRepository'; -import { ScrollPresenterImpl } from '../presenters/ScrollPresenter'; -import { FollowMasterClientImpl } from '../client/FollowMasterClient'; - -let addonEnabledUseCase = new AddonEnabledUseCase(); -let clipbaordUseCase = new ClipboardUseCase(); -let settingRepository = new SettingRepositoryImpl(); -let scrollPresenter = new ScrollPresenterImpl(); -let followMasterClient = new FollowMasterClientImpl(window.top); - -// eslint-disable-next-line complexity, max-lines-per-function -const exec = async( - operation: operations.Operation, -): Promise => { - let settings = settingRepository.get(); - let smoothscroll = settings.properties.smoothscroll; - switch (operation.type) { - case operations.ADDON_ENABLE: - await addonEnabledUseCase.enable(); - return { type: actions.NOOP }; - case operations.ADDON_DISABLE: - await addonEnabledUseCase.disable(); - return { type: actions.NOOP }; - case operations.ADDON_TOGGLE_ENABLED: - await addonEnabledUseCase.toggle(); - return { type: actions.NOOP }; - case operations.FIND_NEXT: - window.top.postMessage(JSON.stringify({ - type: messages.FIND_NEXT, - }), '*'); - break; - case operations.FIND_PREV: - window.top.postMessage(JSON.stringify({ - type: messages.FIND_PREV, - }), '*'); - break; - case operations.SCROLL_VERTICALLY: - scrollPresenter.scrollVertically(operation.count, smoothscroll); - break; - case operations.SCROLL_HORIZONALLY: - scrollPresenter.scrollHorizonally(operation.count, smoothscroll); - break; - case operations.SCROLL_PAGES: - scrollPresenter.scrollPages(operation.count, smoothscroll); - break; - case operations.SCROLL_TOP: - scrollPresenter.scrollToTop(smoothscroll); - break; - case operations.SCROLL_BOTTOM: - scrollPresenter.scrollToBottom(smoothscroll); - break; - case operations.SCROLL_HOME: - scrollPresenter.scrollToHome(smoothscroll); - break; - case operations.SCROLL_END: - scrollPresenter.scrollToEnd(smoothscroll); - break; - case operations.FOLLOW_START: - followMasterClient.startFollow(operation.newTab, operation.background); - break; - case operations.MARK_SET_PREFIX: - return markActions.startSet(); - case operations.MARK_JUMP_PREFIX: - return markActions.startJump(); - case operations.NAVIGATE_HISTORY_PREV: - navigates.historyPrev(window); - break; - case operations.NAVIGATE_HISTORY_NEXT: - navigates.historyNext(window); - break; - case operations.NAVIGATE_LINK_PREV: - navigates.linkPrev(window); - break; - case operations.NAVIGATE_LINK_NEXT: - navigates.linkNext(window); - break; - case operations.NAVIGATE_PARENT: - navigates.parent(window); - break; - case operations.NAVIGATE_ROOT: - navigates.root(window); - break; - case operations.FOCUS_INPUT: - focuses.focusInput(); - break; - case operations.URLS_YANK: - await clipbaordUseCase.yankCurrentURL(); - break; - case operations.URLS_PASTE: - await clipbaordUseCase.openOrSearch( - operation.newTab ? operation.newTab : false, - ); - break; - default: - browser.runtime.sendMessage({ - type: messages.BACKGROUND_OPERATION, - operation, - }); - } - return { type: actions.NOOP }; -}; - -export { exec }; diff --git a/src/content/components/common/follow.ts b/src/content/components/common/follow.ts deleted file mode 100644 index 413244e..0000000 --- a/src/content/components/common/follow.ts +++ /dev/null @@ -1,104 +0,0 @@ -import MessageListener from '../../MessageListener'; -import { LinkHint, InputHint } from '../../presenters/Hint'; -import * as messages from '../../../shared/messages'; -import Key from '../../domains/Key'; -import TabsClient, { TabsClientImpl } from '../../client/TabsClient'; -import FollowMasterClient, { FollowMasterClientImpl } - from '../../client/FollowMasterClient'; -import FollowPresenter, { FollowPresenterImpl } - from '../../presenters/FollowPresenter'; - -let tabsClient: TabsClient = new TabsClientImpl(); -let followMasterClient: FollowMasterClient = - new FollowMasterClientImpl(window.top); -let followPresenter: FollowPresenter = - new FollowPresenterImpl(); - -interface Size { - width: number; - height: number; -} - -interface Point { - x: number; - y: number; -} - -export default class Follow { - private enabled: boolean; - - constructor() { - this.enabled = false; - - new MessageListener().onWebMessage(this.onMessage.bind(this)); - } - - key(key: Key): boolean { - if (!this.enabled) { - return false; - } - followMasterClient.sendKey(key); - return true; - } - - countHints(viewSize: Size, framePosition: Point) { - let count = followPresenter.getTargetCount(viewSize, framePosition); - followMasterClient.responseHintCount(count); - } - - createHints(viewSize: Size, framePosition: Point, tags: string[]) { - this.enabled = true; - followPresenter.createHints(viewSize, framePosition, tags); - } - - showHints(prefix: string) { - followPresenter.filterHints(prefix); - } - - removeHints() { - followPresenter.clearHints(); - this.enabled = false; - } - - async activateHints( - tag: string, newTab: boolean, background: boolean, - ): Promise { - let hint = followPresenter.getHint(tag); - if (!hint) { - return; - } - - if (hint instanceof LinkHint) { - let url = hint.getLink(); - // ignore taget='_blank' - if (!newTab && hint.getLinkTarget() !== '_blank') { - hint.click(); - return; - } - // eslint-disable-next-line no-script-url - if (!url || url === '#' || url.toLowerCase().startsWith('javascript:')) { - return; - } - await tabsClient.openUrl(url, newTab, background); - } else if (hint instanceof InputHint) { - hint.activate(); - } - } - - onMessage(message: messages.Message, _sender: Window) { - switch (message.type) { - case messages.FOLLOW_REQUEST_COUNT_TARGETS: - return this.countHints(message.viewSize, message.framePosition); - case messages.FOLLOW_CREATE_HINTS: - return this.createHints( - message.viewSize, message.framePosition, message.tags); - case messages.FOLLOW_SHOW_HINTS: - return this.showHints(message.prefix); - case messages.FOLLOW_ACTIVATE: - return this.activateHints( - message.tag, message.newTab, message.background); - case messages.FOLLOW_REMOVE_HINTS: - return this.removeHints(); - } - } -} diff --git a/src/content/components/common/index.ts b/src/content/components/common/index.ts deleted file mode 100644 index 1aacf51..0000000 --- a/src/content/components/common/index.ts +++ /dev/null @@ -1,59 +0,0 @@ -import InputDriver from './../../InputDriver'; -import FollowComponent from './follow'; -import MarkComponent from './mark'; -// import KeymapperComponent from './keymapper'; -import * as messages from '../../../shared/messages'; -import MessageListener from '../../MessageListener'; -import * as blacklists from '../../../shared/blacklists'; -import Key from '../../domains/Key'; - -import AddonEnabledUseCase from '../../usecases/AddonEnabledUseCase'; -import SettingUseCase from '../../usecases/SettingUseCase'; - -let addonEnabledUseCase = new AddonEnabledUseCase(); -let settingUseCase = new SettingUseCase(); - -export default class Common { - constructor(win: Window, store: any) { - const input = new InputDriver(win.document.body); - const follow = new FollowComponent(); - const mark = new MarkComponent(store); - // const keymapper = new KeymapperComponent(store); - - input.onKey((key: Key) => follow.key(key)); - input.onKey((key: Key) => mark.key(key)); - // input.onKey((key: Key) => keymapper.key(key)); - - this.reloadSettings(); - - new MessageListener().onBackgroundMessage(this.onMessage.bind(this)); - } - - onMessage(message: messages.Message) { - switch (message.type) { - case messages.SETTINGS_CHANGED: - return this.reloadSettings(); - case messages.ADDON_TOGGLE_ENABLED: - return addonEnabledUseCase.toggle(); - } - return undefined; - } - - async reloadSettings() { - try { - let current = await settingUseCase.reload(); - let disabled = blacklists.includes( - current.blacklist, window.location.href, - ); - if (disabled) { - addonEnabledUseCase.disable(); - } else { - addonEnabledUseCase.enable(); - } - } catch (e) { - // Sometime sendMessage fails when background script is not ready. - console.warn(e); - setTimeout(() => this.reloadSettings(), 500); - } - } -} diff --git a/src/content/components/common/mark.ts b/src/content/components/common/mark.ts deleted file mode 100644 index 058b873..0000000 --- a/src/content/components/common/mark.ts +++ /dev/null @@ -1,44 +0,0 @@ -import * as markActions from '../../actions/mark'; -import * as consoleFrames from '../..//console-frames'; -import Key from '../../domains/Key'; - -import MarkUseCase from '../../usecases/MarkUseCase'; - -let markUseCase = new MarkUseCase(); - -const cancelKey = (key: Key): boolean => { - return key.key === 'Esc' || key.key === '[' && Boolean(key.ctrlKey); -}; - -export default class MarkComponent { - private store: any; - - constructor(store: any) { - this.store = store; - } - - // eslint-disable-next-line max-statements - key(key: Key) { - let { mark: markState } = this.store.getState(); - - if (!markState.setMode && !markState.jumpMode) { - return false; - } - - if (cancelKey(key)) { - this.store.dispatch(markActions.cancel()); - return true; - } - - if (key.ctrlKey || key.metaKey || key.altKey) { - consoleFrames.postError('Unknown mark'); - } else if (markState.setMode) { - markUseCase.set(key.key); - } else if (markState.jumpMode) { - markUseCase.jump(key.key); - } - - this.store.dispatch(markActions.cancel()); - return true; - } -} diff --git a/src/content/components/frame-content.ts b/src/content/components/frame-content.ts deleted file mode 100644 index ca999ba..0000000 --- a/src/content/components/frame-content.ts +++ /dev/null @@ -1,3 +0,0 @@ -import CommonComponent from './common'; - -export default CommonComponent; diff --git a/src/content/components/top-content/follow-controller.ts b/src/content/components/top-content/follow-controller.ts deleted file mode 100644 index 43c917e..0000000 --- a/src/content/components/top-content/follow-controller.ts +++ /dev/null @@ -1,181 +0,0 @@ -import * as followControllerActions from '../../actions/follow-controller'; -import * as messages from '../../../shared/messages'; -import MessageListener from '../../MessageListener'; -import HintKeyProducer from '../../hint-key-producer'; - -import { SettingRepositoryImpl } from '../../repositories/SettingRepository'; -import FollowSlaveClient, { FollowSlaveClientImpl } - from '../../client/FollowSlaveClient'; - -let settingRepository = new SettingRepositoryImpl(); - -export default class FollowController { - private win: Window; - - private store: any; - - private state: { - enabled?: boolean; - newTab?: boolean; - background?: boolean; - keys?: string, - }; - - private keys: string[]; - - private producer: HintKeyProducer | null; - - constructor(win: Window, store: any) { - this.win = win; - this.store = store; - this.state = {}; - this.keys = []; - this.producer = null; - - new MessageListener().onWebMessage(this.onMessage.bind(this)); - - store.subscribe(() => { - this.update(); - }); - } - - onMessage(message: messages.Message, sender: Window) { - switch (message.type) { - case messages.FOLLOW_START: - return this.store.dispatch( - followControllerActions.enable(message.newTab, message.background)); - case messages.FOLLOW_RESPONSE_COUNT_TARGETS: - return this.create(message.count, sender); - case messages.FOLLOW_KEY_PRESS: - return this.keyPress(message.key, message.ctrlKey); - } - } - - update(): void { - let prevState = this.state; - this.state = this.store.getState().followController; - - if (!prevState.enabled && this.state.enabled) { - this.count(); - } else if (prevState.enabled && !this.state.enabled) { - this.remove(); - } else if (prevState.keys !== this.state.keys) { - this.updateHints(); - } - } - - updateHints(): void { - let shown = this.keys.filter((key) => { - return key.startsWith(this.state.keys as string); - }); - if (shown.length === 1) { - this.activate(); - this.store.dispatch(followControllerActions.disable()); - } - - this.broadcastMessage((c: FollowSlaveClient) => { - c.filterHints(this.state.keys!!); - }); - } - - activate(): void { - this.broadcastMessage((c: FollowSlaveClient) => { - c.activateIfExists( - this.state.keys!!, - this.state.newTab!!, - this.state.background!!); - }); - } - - keyPress(key: string, ctrlKey: boolean): boolean { - if (key === '[' && ctrlKey) { - this.store.dispatch(followControllerActions.disable()); - return true; - } - switch (key) { - case 'Enter': - this.activate(); - this.store.dispatch(followControllerActions.disable()); - break; - case 'Esc': - this.store.dispatch(followControllerActions.disable()); - break; - case 'Backspace': - case 'Delete': - this.store.dispatch(followControllerActions.backspace()); - break; - default: - if (this.hintchars().includes(key)) { - this.store.dispatch(followControllerActions.keyPress(key)); - } - break; - } - return true; - } - - count() { - this.producer = new HintKeyProducer(this.hintchars()); - let doc = this.win.document; - let viewWidth = this.win.innerWidth || doc.documentElement.clientWidth; - let viewHeight = this.win.innerHeight || doc.documentElement.clientHeight; - let frameElements = this.win.document.querySelectorAll('iframe'); - - new FollowSlaveClientImpl(this.win).requestHintCount( - { width: viewWidth, height: viewHeight }, - { x: 0, y: 0 }); - - for (let ele of Array.from(frameElements)) { - let { left: frameX, top: frameY } = ele.getBoundingClientRect(); - new FollowSlaveClientImpl(ele.contentWindow!!).requestHintCount( - { width: viewWidth, height: viewHeight }, - { x: frameX, y: frameY }, - ); - } - } - - create(count: number, sender: Window) { - let produced = []; - for (let i = 0; i < count; ++i) { - produced.push((this.producer as HintKeyProducer).produce()); - } - this.keys = this.keys.concat(produced); - - let doc = this.win.document; - let viewWidth = this.win.innerWidth || doc.documentElement.clientWidth; - let viewHeight = this.win.innerHeight || doc.documentElement.clientHeight; - let pos = { x: 0, y: 0 }; - if (sender !== window) { - let frameElements = this.win.document.querySelectorAll('iframe'); - let ele = Array.from(frameElements).find(e => e.contentWindow === sender); - if (!ele) { - // elements of the sender is gone - return; - } - let { left: frameX, top: frameY } = ele.getBoundingClientRect(); - pos = { x: frameX, y: frameY }; - } - new FollowSlaveClientImpl(sender).createHints( - { width: viewWidth, height: viewHeight }, - pos, - produced, - ); - } - - remove() { - this.keys = []; - this.broadcastMessage((c: FollowSlaveClient) => { - c.clearHints(); - }); - } - - private hintchars() { - return settingRepository.get().properties.hintchars; - } - - private broadcastMessage(f: (clinet: FollowSlaveClient) => void) { - let windows = [window.self].concat(Array.from(window.frames as any)); - windows - .map(w => new FollowSlaveClientImpl(w)) - .forEach(c => f(c)); - } -} diff --git a/src/content/components/top-content/index.ts b/src/content/components/top-content/index.ts deleted file mode 100644 index 0f07653..0000000 --- a/src/content/components/top-content/index.ts +++ /dev/null @@ -1,47 +0,0 @@ -import CommonComponent from '../common'; -import FollowController from './follow-controller'; -import * as consoleFrames from '../../console-frames'; -import * as messages from '../../../shared/messages'; -import MessageListener from '../../MessageListener'; -import AddonEnabledUseCase from '../../usecases/AddonEnabledUseCase'; -import { ScrollPresenterImpl } from '../../presenters/ScrollPresenter'; - -let addonEnabledUseCase = new AddonEnabledUseCase(); -let scrollPresenter = new ScrollPresenterImpl(); - -export default class TopContent { - private win: Window; - - constructor(win: Window, store: any) { - this.win = win; - - new CommonComponent(win, store); // eslint-disable-line no-new - new FollowController(win, store); // eslint-disable-line no-new - - // TODO make component - consoleFrames.initialize(this.win.document); - - new MessageListener().onWebMessage(this.onWebMessage.bind(this)); - new MessageListener().onBackgroundMessage( - this.onBackgroundMessage.bind(this)); - } - - onWebMessage(message: messages.Message) { - switch (message.type) { - case messages.CONSOLE_UNFOCUS: - this.win.focus(); - consoleFrames.blur(window.document); - } - } - - onBackgroundMessage(message: messages.Message) { - let addonEnabled = addonEnabledUseCase.getEnabled(); - - switch (message.type) { - case messages.ADDON_ENABLED_QUERY: - return Promise.resolve(addonEnabled); - case messages.TAB_SCROLL_TO: - return scrollPresenter.scrollTo(message.x, message.y, false); - } - } -} diff --git a/src/content/console-frames.ts b/src/content/console-frames.ts index bd6b835..b1b9bf6 100644 --- a/src/content/console-frames.ts +++ b/src/content/console-frames.ts @@ -1,5 +1,3 @@ -import * as messages from '../shared/messages'; - const initialize = (doc: Document): HTMLIFrameElement => { let iframe = doc.createElement('iframe'); iframe.src = browser.runtime.getURL('build/console.html'); @@ -15,24 +13,4 @@ const blur = (doc: Document) => { ele.blur(); }; -const postError = (text: string): Promise => { - return browser.runtime.sendMessage({ - type: messages.CONSOLE_FRAME_MESSAGE, - message: { - type: messages.CONSOLE_SHOW_ERROR, - text, - }, - }); -}; - -const postInfo = (text: string): Promise => { - return browser.runtime.sendMessage({ - type: messages.CONSOLE_FRAME_MESSAGE, - message: { - type: messages.CONSOLE_SHOW_INFO, - text, - }, - }); -}; - -export { initialize, blur, postError, postInfo }; +export { initialize, blur }; diff --git a/src/content/focuses.ts b/src/content/focuses.ts deleted file mode 100644 index 8f53881..0000000 --- a/src/content/focuses.ts +++ /dev/null @@ -1,15 +0,0 @@ -import * as doms from '../shared/utils/dom'; - -const focusInput = (): void => { - let inputTypes = ['email', 'number', 'search', 'tel', 'text', 'url']; - let inputSelector = inputTypes.map(type => `input[type=${type}]`).join(','); - let targets = window.document.querySelectorAll(inputSelector + ',textarea'); - let target = Array.from(targets).find(doms.isVisible); - if (target instanceof HTMLInputElement) { - target.focus(); - } else if (target instanceof HTMLTextAreaElement) { - target.focus(); - } -}; - -export { focusInput }; diff --git a/src/content/index.ts b/src/content/index.ts index 08bdf6b..06bb34f 100644 --- a/src/content/index.ts +++ b/src/content/index.ts @@ -1,8 +1,5 @@ -// import TopContentComponent from './components/top-content'; -// import FrameContentComponent from './components/frame-content'; import * as consoleFrames from './console-frames'; import consoleFrameStyle from './site-style'; -// import { newStore } from './store'; import MessageListener from './MessageListener'; import FindController from './controllers/FindController'; import MarkController from './controllers/MarkController'; @@ -18,12 +15,8 @@ import * as blacklists from '../shared/blacklists'; import MarkKeyController from './controllers/MarkKeyController'; import AddonEnabledController from './controllers/AddonEnabledController'; -// const store = newStore(); - let listener = new MessageListener(); if (window.self === window.top) { - // new TopContentComponent(window, store); // eslint-disable-line no-new - let findController = new FindController(); let followMasterController = new FollowMasterController(); @@ -63,8 +56,6 @@ if (window.self === window.top) { }); consoleFrames.initialize(window.document); -} else { - // new FrameContentComponent(window, store); // eslint-disable-line no-new } let followSlaveController = new FollowSlaveController(); diff --git a/src/content/reducers/follow-controller.ts b/src/content/reducers/follow-controller.ts deleted file mode 100644 index 6965704..0000000 --- a/src/content/reducers/follow-controller.ts +++ /dev/null @@ -1,40 +0,0 @@ -import * as actions from '../actions'; - -export interface State { - enabled: boolean; - newTab: boolean; - background: boolean; - keys: string, -} - -const defaultState: State = { - enabled: false, - newTab: false, - background: false, - keys: '', -}; - -export default function reducer( - state: State = defaultState, - action: actions.FollowAction, -): State { - switch (action.type) { - case actions.FOLLOW_CONTROLLER_ENABLE: - return { ...state, - enabled: true, - newTab: action.newTab, - background: action.background, - keys: '', }; - case actions.FOLLOW_CONTROLLER_DISABLE: - return { ...state, - enabled: false, }; - case actions.FOLLOW_CONTROLLER_KEY_PRESS: - return { ...state, - keys: state.keys + action.key, }; - case actions.FOLLOW_CONTROLLER_BACKSPACE: - return { ...state, - keys: state.keys.slice(0, -1), }; - default: - return state; - } -} diff --git a/src/content/reducers/index.ts b/src/content/reducers/index.ts deleted file mode 100644 index 812a404..0000000 --- a/src/content/reducers/index.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { combineReducers } from 'redux'; -import input, { State as InputState } from './input'; -import followController, { State as FollowControllerState } - from './follow-controller'; -import mark, { State as MarkState } from './mark'; - -export interface State { - input: InputState; - followController: FollowControllerState; - mark: MarkState; -} - -export default combineReducers({ - input, followController, mark, -}); diff --git a/src/content/reducers/input.ts b/src/content/reducers/input.ts deleted file mode 100644 index 800a8f0..0000000 --- a/src/content/reducers/input.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as actions from '../actions'; -import Key from '../domains/Key'; - -export interface State { - keys: Key[], -} - -const defaultState: State = { - keys: [] -}; - -export default function reducer( - state: State = defaultState, - action: actions.InputAction, -): State { - switch (action.type) { - case actions.INPUT_KEY_PRESS: - return { ...state, - keys: state.keys.concat([action.key]), }; - case actions.INPUT_CLEAR_KEYS: - return { ...state, - keys: [], }; - default: - return state; - } -} diff --git a/src/content/reducers/mark.ts b/src/content/reducers/mark.ts deleted file mode 100644 index a8f2f1b..0000000 --- a/src/content/reducers/mark.ts +++ /dev/null @@ -1,27 +0,0 @@ -import * as actions from '../actions'; - -export interface State { - setMode: boolean; - jumpMode: boolean; -} - -const defaultState: State = { - setMode: false, - jumpMode: false, -}; - -export default function reducer( - state: State = defaultState, - action: actions.MarkAction, -): State { - switch (action.type) { - case actions.MARK_START_SET: - return { ...state, setMode: true }; - case actions.MARK_START_JUMP: - return { ...state, jumpMode: true }; - case actions.MARK_CANCEL: - return { ...state, setMode: false, jumpMode: false }; - default: - return state; - } -} diff --git a/src/content/store/index.ts b/src/content/store/index.ts deleted file mode 100644 index 5c41744..0000000 --- a/src/content/store/index.ts +++ /dev/null @@ -1,8 +0,0 @@ -import promise from 'redux-promise'; -import reducers from '../reducers'; -import { createStore, applyMiddleware } from 'redux'; - -export const newStore = () => createStore( - reducers, - applyMiddleware(promise), -); diff --git a/test/content/actions/follow-controller.test.ts b/test/content/actions/follow-controller.test.ts deleted file mode 100644 index a4b1710..0000000 --- a/test/content/actions/follow-controller.test.ts +++ /dev/null @@ -1,34 +0,0 @@ -import * as actions from 'content/actions'; -import * as followControllerActions from 'content/actions/follow-controller'; - -describe('follow-controller actions', () => { - describe('enable', () => { - it('creates FOLLOW_CONTROLLER_ENABLE action', () => { - let action = followControllerActions.enable(true); - expect(action.type).to.equal(actions.FOLLOW_CONTROLLER_ENABLE); - expect(action.newTab).to.equal(true); - }); - }); - - describe('disable', () => { - it('creates FOLLOW_CONTROLLER_DISABLE action', () => { - let action = followControllerActions.disable(true); - expect(action.type).to.equal(actions.FOLLOW_CONTROLLER_DISABLE); - }); - }); - - describe('keyPress', () => { - it('creates FOLLOW_CONTROLLER_KEY_PRESS action', () => { - let action = followControllerActions.keyPress(100); - expect(action.type).to.equal(actions.FOLLOW_CONTROLLER_KEY_PRESS); - expect(action.key).to.equal(100); - }); - }); - - describe('backspace', () => { - it('creates FOLLOW_CONTROLLER_BACKSPACE action', () => { - let action = followControllerActions.backspace(100); - expect(action.type).to.equal(actions.FOLLOW_CONTROLLER_BACKSPACE); - }); - }); -}); diff --git a/test/content/actions/input.test.ts b/test/content/actions/input.test.ts deleted file mode 100644 index 33238a5..0000000 --- a/test/content/actions/input.test.ts +++ /dev/null @@ -1,19 +0,0 @@ -import * as actions from 'content/actions'; -import * as inputActions from 'content/actions/input'; - -describe("input actions", () => { - describe("keyPress", () => { - it('create INPUT_KEY_PRESS action', () => { - let action = inputActions.keyPress('a'); - expect(action.type).to.equal(actions.INPUT_KEY_PRESS); - expect(action.key).to.equal('a'); - }); - }); - - describe("clearKeys", () => { - it('create INPUT_CLEAR_KEYSaction', () => { - let action = inputActions.clearKeys(); - expect(action.type).to.equal(actions.INPUT_CLEAR_KEYS); - }); - }); -}); diff --git a/test/content/actions/mark.test.ts b/test/content/actions/mark.test.ts deleted file mode 100644 index f2df367..0000000 --- a/test/content/actions/mark.test.ts +++ /dev/null @@ -1,25 +0,0 @@ -import * as actions from 'content/actions'; -import * as markActions from 'content/actions/mark'; - -describe('mark actions', () => { - describe('startSet', () => { - it('create MARK_START_SET action', () => { - let action = markActions.startSet(); - expect(action.type).to.equal(actions.MARK_START_SET); - }); - }); - - describe('startJump', () => { - it('create MARK_START_JUMP action', () => { - let action = markActions.startJump(); - expect(action.type).to.equal(actions.MARK_START_JUMP); - }); - }); - - describe('cancel', () => { - it('create MARK_CANCEL action', () => { - let action = markActions.cancel(); - expect(action.type).to.equal(actions.MARK_CANCEL); - }); - }); -}); diff --git a/test/content/components/common/follow.html b/test/content/components/common/follow.html deleted file mode 100644 index b2a2d74..0000000 --- a/test/content/components/common/follow.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - link - invisible 1 - invisible 2 - not link -
link
-
link
-
link
-
- summary link - Some details - not visible -
- - diff --git a/test/content/components/common/follow.test.ts b/test/content/components/common/follow.test.ts deleted file mode 100644 index 90d6cf5..0000000 --- a/test/content/components/common/follow.test.ts +++ /dev/null @@ -1,25 +0,0 @@ -import FollowComponent from 'content/components/common/follow'; - -describe('FollowComponent', () => { - describe('#getTargetElements', () => { - beforeEach(() => { - document.body.innerHTML = __html__['test/content/components/common/follow.html']; - }); - - it('returns visible links', () => { - let targets = FollowComponent.getTargetElements( - window, - { width: window.innerWidth, height: window.innerHeight }, - { x: 0, y: 0 }); - expect(targets).to.have.lengthOf(4); - - let ids = Array.prototype.map.call(targets, (e) => e.id); - expect(ids).to.include.members([ - 'visible_a', - 'editable_div_1', - 'editable_div_2', - 'summary_1', - ]); - }); - }); -}); diff --git a/test/content/reducers/follow-controller.test.ts b/test/content/reducers/follow-controller.test.ts deleted file mode 100644 index 39f326c..0000000 --- a/test/content/reducers/follow-controller.test.ts +++ /dev/null @@ -1,47 +0,0 @@ -import * as actions from 'content/actions'; -import followControllerReducer from 'content/reducers/follow-controller'; - -describe('follow-controller reducer', () => { - it ('returns the initial state', () => { - let state = followControllerReducer(undefined, {}); - expect(state).to.have.property('enabled', false); - expect(state).to.have.property('newTab'); - expect(state).to.have.deep.property('keys', ''); - }); - - it ('returns next state for FOLLOW_CONTROLLER_ENABLE', () => { - let action = { type: actions.FOLLOW_CONTROLLER_ENABLE, newTab: true }; - let state = followControllerReducer({ enabled: false, newTab: false }, action); - expect(state).to.have.property('enabled', true); - expect(state).to.have.property('newTab', true); - expect(state).to.have.property('keys', ''); - }); - - it ('returns next state for FOLLOW_CONTROLLER_DISABLE', () => { - let action = { type: actions.FOLLOW_CONTROLLER_DISABLE }; - let state = followControllerReducer({ enabled: true }, action); - expect(state).to.have.property('enabled', false); - }); - - it ('returns next state for FOLLOW_CONTROLLER_KEY_PRESS', () => { - let action = { type: actions.FOLLOW_CONTROLLER_KEY_PRESS, key: 'a'}; - let state = followControllerReducer({ keys: '' }, action); - expect(state).to.have.deep.property('keys', 'a'); - - action = { type: actions.FOLLOW_CONTROLLER_KEY_PRESS, key: 'b'}; - state = followControllerReducer(state, action); - expect(state).to.have.deep.property('keys', 'ab'); - }); - - it ('returns next state for FOLLOW_CONTROLLER_BACKSPACE', () => { - let action = { type: actions.FOLLOW_CONTROLLER_BACKSPACE }; - let state = followControllerReducer({ keys: 'ab' }, action); - expect(state).to.have.deep.property('keys', 'a'); - - state = followControllerReducer(state, action); - expect(state).to.have.deep.property('keys', ''); - - state = followControllerReducer(state, action); - expect(state).to.have.deep.property('keys', ''); - }); -}); diff --git a/test/content/reducers/input.test.ts b/test/content/reducers/input.test.ts deleted file mode 100644 index f892201..0000000 --- a/test/content/reducers/input.test.ts +++ /dev/null @@ -1,25 +0,0 @@ -import * as actions from 'content/actions'; -import inputReducer from 'content/reducers/input'; - -describe("input reducer", () => { - it('return the initial state', () => { - let state = inputReducer(undefined, {}); - expect(state).to.have.deep.property('keys', []); - }); - - it('return next state for INPUT_KEY_PRESS', () => { - let action = { type: actions.INPUT_KEY_PRESS, key: 'a' }; - let state = inputReducer(undefined, action); - expect(state).to.have.deep.property('keys', ['a']); - - action = { type: actions.INPUT_KEY_PRESS, key: 'b' }; - state = inputReducer(state, action); - expect(state).to.have.deep.property('keys', ['a', 'b']); - }); - - it('return next state for INPUT_CLEAR_KEYS', () => { - let action = { type: actions.INPUT_CLEAR_KEYS }; - let state = inputReducer({ keys: [1, 2, 3] }, action); - expect(state).to.have.deep.property('keys', []); - }); -}); diff --git a/test/content/reducers/mark.test.ts b/test/content/reducers/mark.test.ts deleted file mode 100644 index 918a560..0000000 --- a/test/content/reducers/mark.test.ts +++ /dev/null @@ -1,31 +0,0 @@ -import * as actions from 'content/actions'; -import reducer from 'content/reducers/mark'; - -describe("mark reducer", () => { - it('return the initial state', () => { - let state = reducer(undefined, {}); - expect(state.setMode).to.be.false; - expect(state.jumpMode).to.be.false; - }); - - it('starts set mode', () => { - let action = { type: actions.MARK_START_SET }; - let state = reducer(undefined, action); - expect(state.setMode).to.be.true; - }); - - it('starts jump mode', () => { - let action = { type: actions.MARK_START_JUMP }; - let state = reducer(undefined, action); - expect(state.jumpMode).to.be.true; - }); - - it('cancels set and jump mode', () => { - let action = { type: actions.MARK_CANCEL }; - let state = reducer({ setMode: true }, action); - expect(state.setMode).to.be.false; - - state = reducer({ jumpMode: true }, action); - expect(state.jumpMode).to.be.false; - }); -}); -- cgit v1.2.3