Initial styles

.editorconfig

@@ -0,0 +1,11 @@
+# EditorConfig - http://EditorConfig.org
+
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[**.js]
+indent_style = space
+indent_size = 4

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+npm-debug.log
+chrome/css
+chrome/js

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Dan Bovey
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,5 @@
+# Messenger Discord skin
+
+> 💬 A Discord skin for messenger.com
+
+## Coming soon on the Chrome Webstore

chrome/manifest.json

@@ -0,0 +1,25 @@
+{
+  "manifest_version": 2,
+
+  "name": "MessengerDiscord",
+  "description": "Discord styling for messenger.com",
+  "author": "Dan Bovey",
+  "version": "1.0.0",
+  "minimum_chrome_version": "36",
+
+  "permissions": [
+    "storage",
+    "*://*.messenger.com/*",
+    "*://fonts.gstatic.com/*"
+  ],
+
+  "content_scripts": [ {
+    "js": [ "js/content.js" ],
+    "css": [ "css/style.css" ],
+    "matches": [ "*://*.messenger.com/*"]
+  }],
+
+  "web_accessible_resources": [
+      "font/*.ttf"
+  ]
+}

gulpfile.js

@@ -0,0 +1,66 @@
+var gulp = require('gulp');
+var util = require('gulp-util');
+var watch = require('gulp-watch');
+var notify = require('gulp-notify');
+var sass = require('gulp-sass');
+var sourcemaps = require('gulp-sourcemaps');
+
+var browserify = require('browserify');
+var babelify = require('babelify');
+var uglify = require('gulp-uglify');
+var source = require('vinyl-source-stream');
+var buffer = require('vinyl-buffer');
+var es = require('event-stream');
+var runSequence = require('run-sequence');
+
+var dev = false;
+
+gulp.task('scss', function() {
+    return gulp.src('scss/style.scss')
+        .pipe(sass({outputStyle: 'compressed'}))
+        .pipe(gulp.dest('chrome/css'))
+        .pipe(notify("Compiled SCSS"));
+});
+
+gulp.task('js', function() {
+    var files = [
+        'js/content.js'
+    ];
+
+    var tasks = files.map(function(entry) {
+        return browserify({
+                entries: [entry]
+            })
+            .transform(babelify.configure({
+                presets: ["es2015"]
+            }))
+            .bundle()
+            .on('error', function (e) {
+                console.log(e);
+            })
+            .pipe(source(entry))
+            .pipe(buffer())
+            .pipe(dev ? sourcemaps.init({loadMaps: true}) : util.noop())
+            .pipe(uglify().on('error', function(e) {
+                console.log(e);
+            }))
+            .pipe(dev ? sourcemaps.write() : util.noop())
+            .pipe(gulp.dest('chrome'))
+            .pipe(notify("Compiled JS"));
+    });
+
+    return es.merge.apply(null, tasks);
+});
+
+gulp.task('default', function() {
+    runSequence('scss', 'js');
+});
+
+gulp.task('dev', function() {
+    dev = true;
+
+    runSequence('scss', 'js');
+
+    gulp.watch('scss/**/*.scss', ['scss']);
+    gulp.watch('js/**/*.js', ['js']);
+});

js/content.js

@@ -0,0 +1,15 @@
+window.onload = () => {
+    console.log('Messenger Discord Skin v1.0.0');
+
+    const conversationsWidth = 57;
+
+    // Move the settings icon from the right sidebar to the conversation title
+    const title = document.querySelector('._5742 ._5743');
+    const settingIcon = document.querySelector('._4_j5 ._3-ne');
+
+    if(title != null && settingIcon != null) {
+        const leftOffset = title.offsetWidth;
+        settingIcon.style.left = `${leftOffset + 32 + conversationsWidth}px`;
+        settingIcon.style.display = 'block';
+    }
+};

package.json

@@ -0,0 +1,35 @@
+{
+  "name": "messengerdiscord",
+  "version": "1.0.0",
+  "description": "",
+  "main": "gulpfile.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/danbovey/MessengerDiscord.git"
+  },
+  "author": "Dan Bovey <[email protected]>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/danbovey/MessengerDiscord/issues"
+  },
+  "homepage": "https://github.com/danbovey/MessengerDiscord#readme",
+  "devDependencies": {
+    "babel-preset-es2015": "^6.24.1",
+    "babelify": "^7.3.0",
+    "browserify": "^14.3.0",
+    "event-stream": "^3.3.4",
+    "gulp": "^3.9.1",
+    "gulp-notify": "^3.0.0",
+    "gulp-sass": "^3.1.0",
+    "gulp-sourcemaps": "^2.6.0",
+    "gulp-uglify": "^2.1.2",
+    "gulp-util": "^3.0.8",
+    "gulp-watch": "^4.3.11",
+    "run-sequence": "^1.2.2",
+    "vinyl-buffer": "^1.0.0",
+    "vinyl-source-stream": "^1.1.0"
+  }
+}

scss/components/conversations.scss

@@ -0,0 +1,97 @@
+$guild-icon-width: 50px;
+
+// Conversations
+._1enh {
+    flex: initial !important;
+    width: $friend-list-width;
+    min-width: initial !important;
+    background: $color-friend-list;
+
+    // Messenger title
+    ._1tqi {
+        display: none;
+    }
+
+    // Actions
+    ._36ic {
+        display: block;
+        height: initial;
+        padding: 0 !important;
+
+        // Settings
+        ._4kzu {
+            box-sizing: border-box;
+            display: block !important;
+            opacity: 0.7;
+            height: $header-height;
+            margin: 0 auto;
+            padding: 10px 0;
+        }
+
+        // New message
+        ._2oc8 {
+            display: block;
+            width: $guild-icon-width;
+            height: $guild-icon-width;
+            margin: 4px auto;
+            border: 1px dashed #535559;
+            border-radius: 50%;
+            background: $color-friend-list;
+            text-align: center;
+            text-decoration: none;
+            color: #535559;
+            transition: border-color 0.25s ease, color 0.25s ease;
+
+            &:hover {
+                border-color: rgba(#FFF, 0.75);
+                color: rgba(#FFF, 0.75);
+            }
+
+            &:after {
+                display: block;
+                position: relative;
+                top: -1px;
+                font-size: 40px;
+                font-weight: 200;
+                content: '+';
+            }
+        }
+    }
+
+    // Search
+    ._5iwm {
+        display: none;
+    }
+
+    // Friend item
+    ._1ht1 {
+        height: 58px;
+
+        // Friend settings
+        ._5blh {
+            display: none;
+
+            ._4ld- {
+                border-radius: 25px;
+                transition: border 0.2s ease-in-out;
+            }
+        }
+
+        // Active conversation
+        &._1ht2 {
+            ._4ld- {
+                border-radius: 15px;
+            }
+        }
+    }
+
+    // New message item
+    div[aria-label="Conversations"] > ._1ht1 {
+        display: none;
+    }
+
+    // Friend name and status
+    ._1qt4 {
+        display: none;
+    }
+}

scss/components/dropdowns.scss

@@ -0,0 +1,4 @@
+// Force dropdown font
+._54nh {
+    font-family: $font-family !important;
+}

scss/components/header.scss

@@ -0,0 +1,60 @@
+$action-color: #4F545C;
+
+// Header
+._5742 {
+    display: flex;
+    align-items: center;
+    height: $header-height !important;
+    box-shadow: $header-box-shadow;
+    background: #FFF;
+    text-align: left !important;
+
+    // Conversation title
+    ._5743 {
+        margin-left: 0 !important;
+
+        ._3oh- {
+            margin-left: 12px;
+            font-weight: bold;
+            color: $action-color;
+        }
+
+        // Subtitle "active x minutes ago"
+        ._2v6o {
+            margin-left: 12px;
+        }
+    }
+
+    // Chat actions
+    ._fl2 {
+        bottom: initial;
+        padding: 0 15px 0 0;
+
+        li {
+            margin-right: 15px;
+        }
+
+        // Button (a)
+        ._30yy {
+            opacity: 0.6;
+            transition: opacity 0.2s;
+
+            &:hover, &:focus {
+                opacity: 0.8;
+            }
+        }
+        svg, svg path {
+            stroke: $action-color !important;
+            stroke-width: 3px !important;
+        }
+        svg polygon, svg circle {
+            fill: $action-color !important;
+            stroke-width: 2px !important;
+        }
+        // Right sidebar is active
+        li:last-child svg g g path {
+            fill: #000 !important;
+            stroke-width: 0 !important;
+        }
+    }
+}

scss/components/new-conversation.scss

@@ -0,0 +1,7 @@
+// New conversation "To:" header
+._2y8y {
+    display: flex;
+    align-items: center;
+    height: $header-height;
+    box-shadow: $header-box-shadow;
+}