apply to new TweetDeck

__tests__/Constants.test.js

@@ -16,6 +16,7 @@ import {
   initialOptions,
   isTwitter,
   isTweetdeck,
+  isReactView,
   isImageTab,
   isNativeChromeExtension,
 } from '../src/constants';
@@ -109,6 +110,14 @@ describe('定数', () => {
     });
   });
 
+  describe('Reactビューかどうかのフラグ', () => {
+    it('isReactView', () => {
+      expect(isReactView()).toBeFalsy();
+      document.querySelector('body').insertAdjacentHTML('beforeend', '<div id="react-root"></div>');
+      expect(isReactView()).toBeTruthy();
+    });
+  });
+
   describe('Chrome拡張機能かのフラグ', () => {
     const originalChrome = window.chrome;
     beforeAll(() => {

__tests__/Utils.test.js

@@ -405,13 +405,22 @@ describe('Utils', () => {
       window.location = originalLocation;
     });
 
+    it('古いTweetDeckではButtonSetterTweetDeck', () => {
+      window.location = new URL('https://tweetdeck.twitter.com');
+      expect(getButtonSetter()).toBeInstanceOf(ButtonSetterTweetDeck);
+    });
     it('公式WebではButtonSetter', () => {
       window.location = new URL('https://twitter.com');
       expect(getButtonSetter()).toBeInstanceOf(ButtonSetter);
     });
-    it('TweetDeckではButtonSetterTweetDeck', () => {
+    it('公式Web(モバイル版)ではButtonSetter', () => {
+      window.location = new URL('https://mobile.twitter.com');
+      expect(getButtonSetter()).toBeInstanceOf(ButtonSetter);
+    });
+    it('新しいTweetDeckではButtonSetter', () => {
       window.location = new URL('https://tweetdeck.twitter.com');
-      expect(getButtonSetter()).toBeInstanceOf(ButtonSetterTweetDeck);
+      document.querySelector('body').insertAdjacentHTML('beforeend', '<div id="react-root"></div>');
+      expect(getButtonSetter()).toBeInstanceOf(ButtonSetter);
     });
     it('どちらでもなかったらButtonSetter', () => {
       window.location = new URL('https://hoge.test');

__tests__/__snapshots__/ButtonSetter.test.js.snap

@@ -2,4 +2,4 @@
 
 exports[`ButtonSetter setButton ボタン設置される 1`] = `"<div class="ProfileTweet-action hogeclass"><input class="tooi-button" style="width: 70px; font-size: 13px; color: rgb(105, 123, 140);" type="button" value="Original"></div>"`;
 
-exports[`ButtonSetter setReactLayoutButton ボタン設置される 1`] = `"<div class="hogeclass" style="display: flex; margin-left: 20px; flex-flow: column; justify-content: center;"><input type="button" value="Original" style="font-size: 13px; padding: 4px 8px; color: rgb(105, 123, 140); background-color: rgba(0, 0, 0, 0); border: 1px solid #697b8c; border-radius: 3px; cursor: pointer;"></div>"`;
+exports[`ButtonSetter setReactLayoutButton ボタン設置される 1`] = `"<div class="hogeclass" style="display: flex; flex-flow: column; justify-content: center;"><input type="button" value="Original" style="font-size: 13px; padding: 4px 8px; color: rgb(105, 123, 140); background-color: rgba(0, 0, 0, 0); border: 1px solid #697b8c; border-radius: 3px; cursor: pointer;"></div>"`;

src/ButtonSetter.ts

@@ -107,11 +107,14 @@ export class ButtonSetter implements ButtonSetterType {
     container.classList.add(className);
     setStyle(container, {
       display: 'flex',
-      'margin-left': '20px',
       'flex-flow': 'column',
       'justify-content': 'center',
     });
 
+    // 新しいTweetDeckで, カラムの幅によってはボタンがはみ出るので,
+    // 折り返してボタンを表示する
+    setStyle(target, { 'flex-wrap': 'wrap' });
+
     target.appendChild(container);
     container.appendChild(button);
   }

src/constants.ts

@@ -76,6 +76,9 @@ export const isTweetdeck = (): boolean => window.location.hostname === HOST_TWEE
 /** 画像ページかどうか */
 export const isImageTab = (): boolean => window.location.hostname === HOST_PBS_TWIMG_COM;
 
+/** Reactビューかどうか */
+export const isReactView = (): boolean => !!document.getElementById('react-root');
+
 /** これ自体がChrome拡張機能かどうか */
 export const isNativeChromeExtension = (): boolean => chrome?.runtime?.id !== undefined;
 

src/utils.ts

@@ -8,6 +8,7 @@ import {
   STRIP_IMAGE_SUFFIX,
   OptionsBool,
   initialOptionsBool,
+  isReactView,
 } from './constants';
 
 /** chrome.runtime.sendMessage で送るメッセージ */
@@ -172,8 +173,14 @@ export const downloadImage = (e: KeyboardEvent): void => {
   }
 };
 
-export const getButtonSetter = (): ButtonSetterType =>
-  isTweetdeck() ? new ButtonSetterTweetDeck() : new ButtonSetter();
+export const getButtonSetter = (): ButtonSetterType => {
+  // 新しいTweetDeckは公式Webと同じReactビュー
+  // 古いTweetDeckのときだけ専用クラスを使う
+  if (isTweetdeck() && !isReactView()) {
+    return new ButtonSetterTweetDeck();
+  }
+  return new ButtonSetter();
+};
 
 /**
  * 設定項目更新