<commit_before><style lang="stylus" src="./global.styl"></style>

<template>
<div id="app" :class="{ app: true, dark: isDark }">
  <div class="header">
    <img class="logo" src="./assets/logo.png" alt="Vue">
    <span class="message-container">
      <transition name="slide-up">
        <span class="message" :key="message">{{ message }}</span>
      </transition>
    </span>
    <a class="button components"
      :class="{ active: tab === 'components'}"
      @click="switchTab('components')"
      title="Switch to Components">
      <i class="material-icons">device_hub</i>
      <span class="pane-name">Components</span>
    </a>
    <a class="button vuex"
      :class="{ active: tab === 'vuex'}"
      @click="switchTab('vuex')"
      title="Switch to Vuex">
      <i class="material-icons">restore</i>
      <span class="pane-name">Vuex</span>
    </a>
    <a class="button events"
      :class="{ active: tab === 'events' }"
      @click="switchTab('events')"
      title="Switch to Events">
      <i class="material-icons">grain</i>
      <span class="pane-name">Events</span>
      <span class="event-count" v-if="newEventCount > 0">{{ newEventCount }}</span>
    </a>
    <a class="button refresh icon-only"
      @click="refresh"
      title="Force Refresh">
      <i class="material-icons" ref="refresh">refresh</i>
    </a>
    <span class="active-bar"></span>
  </div>
  <component :is="tab" class="container"></component>
</div>
</template>

<script>
import ComponentsTab from './views/components/ComponentsTab.vue'
import EventsTab from './views/events/EventsTab.vue'
import VuexTab from './views/vuex/VuexTab.vue'

import { mapState } from 'vuex'

export default {
  name: 'app',
  data () {
    return {
      isDark: typeof chrome !== 'undefined' &&
        typeof chrome.devtools !== 'undefined' &&
        chrome.devtools.panels.themeName === 'dark'
    }
  },
  components: {
    components: ComponentsTab,
    vuex: VuexTab,
    events: EventsTab
  },
  computed: mapState({
    message: state => state.message,
    tab: state => state.tab,
    view: state => state.view,
    newEventCount: state => state.events.newEventCount
  }),
  methods: {
    switchTab (tab) {
      bridge.send('switch-tab', tab)
      this.$store.commit('SWITCH_TAB', tab)
      if (tab === 'events') {
        this.$store.commit('events/RESET_NEW_EVENT_COUNT')
      }
    },
    refresh () {
      const refreshIcon = this.$refs.refresh
      refreshIcon.style.animation = 'none'

      bridge.send('refresh')
      bridge.once('flush', () => {
        refreshIcon.style.animation = 'rotate 1s'
      })
    },
    switchView (mediaQueryEvent) {
      this.$store.commit(
        'SWITCH_VIEW',
        mediaQueryEvent.matches ? 'vertical' : 'horizontal'
      )
    },
    updateActiveBar () {
      const activeButton = this.$el.querySelector('.button.active')
      const activeBar = this.$el.querySelector('.active-bar')
      activeBar.style.left = activeButton.offsetLeft + 'px'
      activeBar.style.width = activeButton.offsetWidth + 'px'
    },
  },
  mounted () {
    this.mediaQuery = window.matchMedia('(min-width: 685px)')
    this.switchView(this.mediaQuery)
    this.mediaQuery.addListener(this.switchView)

    this.updateActiveBar()
    window.addEventListener('resize', this.updateActiveBar)
  },
  destroyed () {<commit_msg>remove dangling comma<commit_after><style lang="stylus" src="./global.styl"></style>

<template>
<div id="app" :class="{ app: true, dark: isDark }">
  <div class="header">
    <img class="logo" src="./assets/logo.png" alt="Vue">
    <span class="message-container">
      <transition name="slide-up">
        <span class="message" :key="message">{{ message }}</span>
      </transition>
    </span>
    <a class="button components"
      :class="{ active: tab === 'components'}"
      @click="switchTab('components')"
      title="Switch to Components">
      <i class="material-icons">device_hub</i>
      <span class="pane-name">Components</span>
    </a>
    <a class="button vuex"
      :class="{ active: tab === 'vuex'}"
      @click="switchTab('vuex')"
      title="Switch to Vuex">
      <i class="material-icons">restore</i>
      <span class="pane-name">Vuex</span>
    </a>
    <a class="button events"
      :class="{ active: tab === 'events' }"
      @click="switchTab('events')"
      title="Switch to Events">
      <i class="material-icons">grain</i>
      <span class="pane-name">Events</span>
      <span class="event-count" v-if="newEventCount > 0">{{ newEventCount }}</span>
    </a>
    <a class="button refresh icon-only"
      @click="refresh"
      title="Force Refresh">
      <i class="material-icons" ref="refresh">refresh</i>
    </a>
    <span class="active-bar"></span>
  </div>
  <component :is="tab" class="container"></component>
</div>
</template>

<script>
import ComponentsTab from './views/components/ComponentsTab.vue'
import EventsTab from './views/events/EventsTab.vue'
import VuexTab from './views/vuex/VuexTab.vue'

import { mapState } from 'vuex'

export default {
  name: 'app',
  data () {
    return {
      isDark: typeof chrome !== 'undefined' &&
        typeof chrome.devtools !== 'undefined' &&
        chrome.devtools.panels.themeName === 'dark'
    }
  },
  components: {
    components: ComponentsTab,
    vuex: VuexTab,
    events: EventsTab
  },
  computed: mapState({
    message: state => state.message,
    tab: state => state.tab,
    view: state => state.view,
    newEventCount: state => state.events.newEventCount
  }),
  methods: {
    switchTab (tab) {
      bridge.send('switch-tab', tab)
      this.$store.commit('SWITCH_TAB', tab)
      if (tab === 'events') {
        this.$store.commit('events/RESET_NEW_EVENT_COUNT')
      }
    },
    refresh () {
      const refreshIcon = this.$refs.refresh
      refreshIcon.style.animation = 'none'

      bridge.send('refresh')
      bridge.once('flush', () => {
        refreshIcon.style.animation = 'rotate 1s'
      })
    },
    switchView (mediaQueryEvent) {
      this.$store.commit(
        'SWITCH_VIEW',
        mediaQueryEvent.matches ? 'vertical' : 'horizontal'
      )
    },
    updateActiveBar () {
      const activeButton = this.$el.querySelector('.button.active')
      const activeBar = this.$el.querySelector('.active-bar')
      activeBar.style.left = activeButton.offsetLeft + 'px'
      activeBar.style.width = activeButton.offsetWidth + 'px'
    }
  },
  mounted () {
    this.mediaQuery = window.matchMedia('(min-width: 685px)')
    this.switchView(this.mediaQuery)
    this.mediaQuery.addListener(this.switchView)

    this.updateActiveBar()
    window.addEventListener('resize', this.updateActiveBar)
  },
  destroyed () {
{'fraction_non_alphanumeric': 0.17345264727815063, 'fraction_numerical': 0.0014914243102162564, 'mean_word_length': 3.051963746223565, 'pattern_counts': {'":': 0, '<': 91, '<?xml version=': 0, '>': 103, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6233750', 'n_tokens_mistral': 2162, 'n_tokens_neox': 2131, 'n_words': 414}