// ==UserScript==
// @name         ShowCssStyle
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  show css style
// @author       Roastwind
// @match        *://*/*
// @grant        none
// @downloadURL none
// ==/UserScript==

(function() {
'use strict';
// 创意来源: https://juejin.im/pin/5d80b839e51d456cecc4a8e4
// 按钮id
var _id = 'show-css-style'
// style id
var _style_id = 'add-style'
var _outline_css = `html * { outline: 1px solid red }#${_id}{outline: none;}#${_id} * {outline: none;}`

var init = function() {
    // 容器
    var btnWrap = document.createElement('div')
    btnWrap.style.position = 'fixed'
    btnWrap.style.zIndex = '99999'
    btnWrap.style.width = '42px'
    // btnWrap.style.height = '60px'
    btnWrap.style.left = '0'
    btnWrap.style.top = '200px'
    btnWrap.style.display = 'flex'
    btnWrap.style.flexDirection = 'column'
    btnWrap.setAttribute('id', _id)

    // 展示按钮
    var showBtn = document.createElement('btn')
    showBtn.style.width = '40px'
    showBtn.style.height = '20px'
    showBtn.style.lineHeight = '20px'
    showBtn.style.border = '1px solid gray'
    showBtn.style.marginBottom = '10px'
    showBtn.style.borderRadius = '5px'
    showBtn.style.textAlign = 'center'
    showBtn.style.cursor = 'pointer'
    showBtn.innerText = 'show'
    showBtn.addEventListener('click', function() {
        addCssLine()
    })

    // 隐藏按钮
    var hideBtn = document.createElement('btn')
    hideBtn.style.width = '40px'
    hideBtn.style.height = '20px'
    hideBtn.style.lineHeight = '20px'
    hideBtn.style.border = '1px solid gray'
    hideBtn.style.marginBottom = '10px'
    hideBtn.style.borderRadius = '5px'
    hideBtn.style.textAlign = 'center'
    hideBtn.style.cursor = 'pointer'
    hideBtn.innerText = 'hide'
    hideBtn.addEventListener('click', function() {
        removeCssLine()
    })

    btnWrap.appendChild(showBtn)
    btnWrap.appendChild(hideBtn)
    document.body.appendChild(btnWrap)
}
var addCssLine = function() {
    var hasAddStyle = document.querySelector(`#${_style_id}`)
    if (hasAddStyle) { return }

    var style = document.createElement('style')
    style.textContent = _outline_css
    style.setAttribute('id', _style_id)
    document.body.appendChild(style)
}
var removeCssLine = function() {
    var addStyle = document.querySelector(`#${_style_id}`)
    if (addStyle) {
        addStyle.remove()
    }
}
init()
})();