Change layout depending on available space

src/devtools/App.vue

@@ -67,6 +67,7 @@ export default {
   computed: mapState({
     message: state => state.message,
     tab: state => state.tab,
+    view: state => state.view,
     newEventCount: state => state.events.newEventCount
   }),
   methods: {
@@ -86,6 +87,12 @@ export default {
         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')
@@ -94,11 +101,16 @@ export default {
     }
   },
   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 () {
     window.removeEventListener('resize', this.updateActiveBar)
+    this.mediaQuery.removeListener(this.switchView)
   },
   watch: {
     tab () {
@@ -141,6 +153,10 @@ export default {
 .message-container
   height 1em
   cursor default
+  display none
+  @media (min-width: $wide - 300px)
+    display block
+
 
 .message
   color $active-color

src/devtools/components/SplitPane.vue

@@ -3,37 +3,77 @@
     @mousemove="dragMove"
     @mouseup="dragEnd"
     @mouseleave="dragEnd"
-    :class="{ dragging: dragging }">
-    <div class="left" :style="{ width: split + '%' }">
+    :class="classes">
+    <div class="left top" :style="leftStyles">
       <slot name="left"></slot>
-      <div class="dragger" @mousedown.prevent="dragStart">
-      </div>
+      <div class="dragger" @mousedown.prevent="dragStart"></div>
     </div>
-    <div class="right" :style="{ width: (100 - split) + '%' }">
+    <div class="right bottom" :style="rightStyles">
       <slot name="right"></slot>
     </div>
   </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
   data () {
     return {
       split: 50,
       dragging: false
     }
   },
+  computed: {
+    ...mapState([
+      'view'
+    ]),
+    leftStyles () {
+      return {
+        [this.view === 'vertical' ? 'width' : 'height']: `${this.boundSplit}%`
+      }
+    },
+    rightStyles () {
+      return {
+        [this.view === 'vertical' ? 'width' : 'height']: `${100 - this.boundSplit}%`
+      }
+    },
+    classes () {
+      return [
+        { dragging: this.dragging },
+        this.view
+      ]
+    },
+    boundSplit () {
+      const split = this.split
+      if (split < 20) {
+        return 20
+      } else if (split > 80) {
+        return 80
+      } else {
+        return split
+      }
+    }
+  },
   methods: {
     dragStart (e) {
       this.dragging = true
-      this.startX = e.pageX
-      this.startSplit = this.split
+      this.startPosition = this.view === 'vertical' ? e.pageX : e.pageY
+      this.startSplit = this.boundSplit
     },
     dragMove (e) {
       if (this.dragging) {
-        const dx = e.pageX - this.startX
-        const totalWidth = this.$el.offsetWidth
-        this.split = this.startSplit + ~~(dx / totalWidth * 100)
+        let position
+        let totalSize
+        if (this.view === 'vertical') {
+          position = e.pageX
+          totalSize = this.$el.offsetWidth
+        } else {
+          position = e.pageY
+          totalSize = this.$el.offsetHeight
+        }
+        const dPosition = position - this.startPosition
+        this.split = this.startSplit + ~~(dPosition / totalSize * 100)
       }
     },
     dragEnd () {
@@ -49,23 +89,51 @@ export default {
 .split-pane
   display flex
   height 100%
+  &.horizontal
+    flex-direction column
+
   &.dragging
-    cursor ew-resize
+    .left,
+    .right
+      pointer-events none
+    &.vertical
+      cursor ew-resize
+    &.horizontal
+      cursor ns-resize
 
-.left, .right
+.left,
+.right
   position relative
 
-.left
-  border-right 1px solid $border-color
-  .app.dark &
-    border-right 1px solid $dark-border-color
+.horizontal
+  .bottom
+    box-shadow 0 -2px 10px rgba(0, 0, 0, 0.1)
+    border-top 1px solid $border-color
+    .app.dark &
+      border-top 1px solid $dark-border-color
+
+.vertical
+  .left
+    border-right 1px solid $border-color
+    .app.dark &
+      border-right 1px solid $dark-border-color
 
 .dragger
   position absolute
   z-index 99
-  top 0
-  bottom 0
-  right -5px
-  width 10px
-  cursor ew-resize
+
+  .vertical &
+    top 0
+    bottom 0
+    right -5px
+    width 10px
+    cursor ew-resize
+
+  .horizontal &
+    left 0
+    right 0
+    bottom -5px
+    height 10px
+    cursor ns-resize
+
 </style>

src/devtools/store/index.js

@@ -9,7 +9,8 @@ Vue.use(Vuex)
 const store = new Vuex.Store({
   state: {
     message: '',
-    tab: 'components'
+    tab: 'components',
+    view: 'vertical'
   },
   mutations: {
     SHOW_MESSAGE (state, message) {
@@ -18,6 +19,9 @@ const store = new Vuex.Store({
     SWITCH_TAB (state, tab) {
       state.tab = tab
     },
+    SWITCH_VIEW (state, view) {
+      state.view = view
+    },
     RECEIVE_INSTANCE_DETAILS (state, instance) {
       state.message = 'Instance selected: ' + instance.name
     }

src/devtools/views/components/ComponentInstance.vue

@@ -116,7 +116,6 @@ export default {
   position relative
   overflow hidden
   z-index 2
-  background-color $background-color
   transition background-color .1s ease
   border-radius 3px
   font-size 14px