Made pausing TL updating configurable. Added styles for disabled checkboxes.

Shuffled settings a bit b/c all the settings are in "Attachments" section
depsite the fact not all of them are attachments-related.

src/App.scss

@@ -142,6 +142,14 @@ input, textarea, .select {
       color: $fallback--fg;
       color: var(--fg, $fallback--fg);
     }
+    &:disabled,
+    {
+      &,
+      & + label,
+      & + label::before {
+        opacity: .5;
+      }
+    }
     + label::before {
       display: inline-block;
       content: '✔';

src/components/settings/settings.js

@@ -10,6 +10,7 @@ const settings = {
       muteWordsString: this.$store.state.config.muteWords.join('\n'),
       autoLoadLocal: this.$store.state.config.autoLoad,
       streamingLocal: this.$store.state.config.streaming,
+      pauseOnUnfocused: this.$store.state.config.pauseOnUnfocused,
       hoverPreviewLocal: this.$store.state.config.hoverPreview,
       stopGifs: this.$store.state.config.stopGifs
     }
@@ -38,6 +39,9 @@ const settings = {
     streamingLocal (value) {
       this.$store.dispatch('setOption', { name: 'streaming', value })
     },
+    pauseOnUnfocusedLocal (value) {
+      this.$store.dispatch('setOption', { name: 'pauseOnUnfocused', value })
+    },
     hoverPreviewLocal (value) {
       this.$store.dispatch('setOption', { name: 'hoverPreview', value })
     },

src/components/settings/settings.vue

@@ -1,53 +1,64 @@
 <template>
-  <div class="settings panel panel-default">
-    <div class="panel-heading">
-      {{$t('settings.settings')}}
+<div class="settings panel panel-default">
+  <div class="panel-heading">
+    {{$t('settings.settings')}}
+  </div>
+  <div class="panel-body">
+    <div class="setting-item">
+      <h2>{{$t('settings.theme')}}</h2>
+      <style-switcher></style-switcher>
     </div>
-    <div class="panel-body">
-      <div class="setting-item">
-        <h2>{{$t('settings.theme')}}</h2>
-        <style-switcher></style-switcher>
-      </div>
-      <div class="setting-item">
-        <h2>{{$t('settings.filtering')}}</h2>
-        <p>{{$t('settings.filtering_explanation')}}</p>
-        <textarea id="muteWords" v-model="muteWordsString"></textarea>
-      </div>
-      <div class="setting-item">
-        <h2>{{$t('settings.attachments')}}</h2>
-        <ul class="setting-list">
+    <div class="setting-item">
+      <h2>{{$t('settings.filtering')}}</h2>
+      <p>{{$t('settings.filtering_explanation')}}</p>
+      <textarea id="muteWords" v-model="muteWordsString"></textarea>
+    </div>
+    <div class="setting-item">
+      <h2>{{$t('nav.timeline')}}</h2>
+      <ul class="setting-list">
+        <li>
+          <input type="checkbox" id="streaming" v-model="streamingLocal">
+          <label for="streaming">{{$t('settings.streaming')}}</label>
+          <ul class="setting-list suboptions" :class="[{disabled: !streamingLocal}]">
             <li>
-                <input type="checkbox" id="hideAttachments" v-model="hideAttachmentsLocal">
-                <label for="hideAttachments">{{$t('settings.hide_attachments_in_tl')}}</label>
+              <input :disabled="!streamingLocal" type="checkbox" id="pauseOnUnfocused" v-model="pauseOnUnfocusedLocal">
+              <label for="pauseOnUnfocused">{{$t('settings.pauseOnUnfocused')}}</label>
             </li>
-            <li>
-                <input type="checkbox" id="hideAttachmentsInConv" v-model="hideAttachmentsInConvLocal">
-                <label for="hideAttachmentsInConv">{{$t('settings.hide_attachments_in_convo')}}</label>
-            </li>
-            <li>
-                <input type="checkbox" id="hideNsfw" v-model="hideNsfwLocal">
-                <label for="hideNsfw">{{$t('settings.nsfw_clickthrough')}}</label>
-            </li>
-            <li>
-                <input type="checkbox" id="autoload" v-model="autoLoadLocal">
-                <label for="autoload">{{$t('settings.autoload')}}</label>
-            </li>
-            <li>
-                <input type="checkbox" id="streaming" v-model="streamingLocal">
-                <label for="streaming">{{$t('settings.streaming')}}</label>
-            </li>
-            <li>
-                <input type="checkbox" id="hoverPreview" v-model="hoverPreviewLocal">
-                <label for="hoverPreview">{{$t('settings.reply_link_preview')}}</label>
-            </li>
-            <li>
-                <input type="checkbox" id="stopGifs" v-model="stopGifs">
-                <label for="stopGifs">{{$t('settings.stop_gifs')}}</label>
-            </li>
-        </ul>
-      </div>
+          </ul>
+        </li>
+        <li>
+          <input type="checkbox" id="autoload" v-model="autoLoadLocal">
+          <label for="autoload">{{$t('settings.autoload')}}</label>
+        </li>
+        <li>
+          <input type="checkbox" id="hoverPreview" v-model="hoverPreviewLocal">
+          <label for="hoverPreview">{{$t('settings.reply_link_preview')}}</label>
+        </li>
+      </ul>
+    </div>
+    <div class="setting-item">
+      <h2>{{$t('settings.attachments')}}</h2>
+      <ul class="setting-list">
+        <li>
+          <input type="checkbox" id="hideAttachments" v-model="hideAttachmentsLocal">
+          <label for="hideAttachments">{{$t('settings.hide_attachments_in_tl')}}</label>
+        </li>
+        <li>
+          <input type="checkbox" id="hideAttachmentsInConv" v-model="hideAttachmentsInConvLocal">
+          <label for="hideAttachmentsInConv">{{$t('settings.hide_attachments_in_convo')}}</label>
+        </li>
+        <li>
+          <input type="checkbox" id="hideNsfw" v-model="hideNsfwLocal">
+          <label for="hideNsfw">{{$t('settings.nsfw_clickthrough')}}</label>
+        </li>
+        <li>
+          <input type="checkbox" id="stopGifs" v-model="stopGifs">
+          <label for="stopGifs">{{$t('settings.stop_gifs')}}</label>
+        </li>
+      </ul>
     </div>
   </div>
+</div>
 </template>
 
 <script src="./settings.js">
@@ -89,8 +100,12 @@
 }
 .setting-list {
   list-style-type: none;
+  padding-left: 2em;
   li {
     margin-bottom: 0.5em;
   }
+  .suboptions {
+    margin-top: 0.3em
+  }
 }
 </style>

src/components/timeline/timeline.js

@@ -133,7 +133,10 @@ const Timeline = {
       }
       if (count > 0) {
         // only 'stream' them when you're scrolled to the top
-        if (window.pageYOffset < 15 && !this.paused && !this.unfocused) {
+        if (window.pageYOffset < 15 &&
+            !this.paused &&
+            !(this.unfocused && this.$store.state.config.pauseOnUnfocused)
+           ) {
           this.showNewStatuses()
         } else {
           this.paused = true

src/i18n/messages.js

@@ -314,6 +314,7 @@ const en = {
     stop_gifs: 'Play-on-hover GIFs',
     autoload: 'Enable automatic loading when scrolled to the bottom',
     streaming: 'Enable automatic streaming of new posts when scrolled to the top',
+    pauseOnUnfocused: 'Pause streaming when tab is not focused',
     reply_link_preview: 'Enable reply-link preview on mouse hover',
     follow_import: 'Follow import',
     import_followers_from_a_csv_file: 'Import follows from a csv file',