Merge remote-tracking branch 'upstream/master' into 36807-gc-unwanted-refs-after-import

* upstream/master: (225 commits)
  Add changelog entry
  Backports EE 2756 logic to CE.
  Make rubocop happy
  Make profile settings dropdown consistent
  Add filter by my reaction
  Update spec initialization with it being a shared component
  Update identicon path and selector
  Renamed to `identicon` and make shared component
  Merge branch 'master-i18n' into 'master'
  Fix broken Frontend JS guide
  Replace 'project/star.feature' spinach test with an rspec analog
  Adds position fixed to right sidebar
  Fixes the margin of the top buttons of the pipeline page
  Remove commented out code
  Better align fallback image emojis
  Decrease Metrics/CyclomaticComplexity threshold to 15
  Add changelog
  Respect the default visibility level when creating a group
  Further break with_repo_branch_commit into parts
  Make sure inspect doesn't generate crazy string
  ...

.gitlab-ci.yml

@@ -68,19 +68,6 @@ stages:
     - mysql:latest
     - redis:alpine
 
-.only-if-want-mysql: &only-if-want-mysql
-  only:
-    - /mysql/
-    - /-stable/
-    - master@gitlab-org/gitlab-ce
-    - master@gitlab-org/gitlab-ee
-    - master@gitlab/gitlabhq
-    - master@gitlab/gitlab-ee
-    - tags@gitlab-org/gitlab-ce
-    - tags@gitlab-org/gitlab-ee
-    - tags@gitlab/gitlabhq
-    - tags@gitlab/gitlab-ee
-
 # Skip all jobs except the ones that begin with 'docs/'.
 # Used for commits including ONLY documentation changes.
 # https://docs.gitlab.com/ce/development/writing_documentation.html#testing
@@ -124,7 +111,6 @@ stages:
 .rspec-metadata-mysql: &rspec-metadata-mysql
   <<: *rspec-metadata
   <<: *use-mysql
-  <<: *only-if-want-mysql
   <<: *except-docs
 
 .spinach-metadata: &spinach-metadata
@@ -156,7 +142,6 @@ stages:
 .spinach-metadata-mysql: &spinach-metadata-mysql
   <<: *spinach-metadata
   <<: *use-mysql
-  <<: *only-if-want-mysql
   <<: *except-docs
 
 .only-canonical-masters: &only-canonical-masters

.rubocop.yml

@@ -606,6 +606,18 @@ Style/YodaCondition:
 Style/Proc:
   Enabled: true
 
+# Use `spam?` instead of `is_spam?`
+# Configuration parameters: NamePrefix, NamePrefixBlacklist, NameWhitelist.
+# NamePrefix: is_, has_, have_
+# NamePrefixBlacklist: is_, has_, have_
+# NameWhitelist: is_a?
+Style/PredicateName:
+  Enabled: true
+  NamePrefixBlacklist: is_
+  Exclude:
+    - 'spec/**/*'
+    - 'features/**/*'
+
 # Metrics #####################################################################
 
 # A calculated magnitude based on number of assignments,
@@ -631,7 +643,7 @@ Metrics/ClassLength:
 # of test cases needed to validate a method.
 Metrics/CyclomaticComplexity:
   Enabled: true
-  Max: 16
+  Max: 15
 
 # Limit lines to 80 characters.
 Metrics/LineLength:
@@ -1181,6 +1193,10 @@ GitlabSecurity/DeepMunge:
     - 'lib/**/*.rake'
     - 'spec/**/*'
 
+# To be enabled by https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/13610
+GitlabSecurity/JsonSerialization:
+  Enabled: false
+
 GitlabSecurity/PublicSend:
   Enabled: true
   Exclude:

.rubocop_todo.yml

@@ -237,14 +237,6 @@ Style/PercentLiteralDelimiters:
 Style/PerlBackrefs:
   Enabled: false
 
-# Offense count: 105
-# Configuration parameters: NamePrefix, NamePrefixBlacklist, NameWhitelist.
-# NamePrefix: is_, has_, have_
-# NamePrefixBlacklist: is_, has_, have_
-# NameWhitelist: is_a?
-Style/PredicateName:
-  Enabled: false
-
 # Offense count: 58
 # Cop supports --auto-correct.
 # Configuration parameters: EnforcedStyle, SupportedStyles.

CHANGELOG.md

@@ -2,6 +2,23 @@
 documentation](doc/development/changelog.md) for instructions on adding your own
 entry.
 
+## 9.5.2 (2017-08-28)
+
+- [FIXED] Fix signing in using LDAP when attribute mapping uses simple strings instead of arrays.
+- [FIXED] Show un-highlighted text diffs when we do not have references to the correct blobs.
+- [FIXED] Fix display of push events for removed refs.
+- [FIXED] Testing of some integrations were broken due to missing ServiceHook record.
+- [FIXED] Fire system hooks when a user is created via LDAP.
+- [FIXED] Fix new project form not resetting the template value.
+
+## 9.5.1 (2017-08-23)
+
+- [FIXED] Fix merge request pipeline status when pipeline has errors. !13664
+- [FIXED] Commit rows would occasionally render with the wrong language.
+- [FIXED] Fix caching of future broadcast messages.
+- [FIXED] Only require Sidekiq throttling library when enabled, to reduce cache misses.
+- Raise Housekeeping timeout to 24 hours. !13719
+
 ## 9.5.0 (2017-08-22)
 
 - [FIXED] Fix timeouts when creating projects in groups with many members. !13508

CONTRIBUTING.md

@@ -164,7 +164,7 @@ Assigning a team label makes sure issues get the attention of the appropriate
 people.
 
 The current team labels are ~Build, ~CI, ~Discussion, ~Documentation, ~Edge,
-~Gitaly, ~Platform, ~Prometheus, ~Release, and ~"UX".
+~Geo, ~Gitaly, ~Platform, ~Prometheus, ~Release, and ~"UX".
 
 The descriptions on the [labels page][labels-page] explain what falls under the
 responsibility of each team.

Gemfile

@@ -207,9 +207,6 @@ gem 'kubeclient', '~> 2.2.0'
 # d3
 gem 'd3_rails', '~> 3.5.0'
 
-# underscore-rails
-gem 'underscore-rails', '~> 1.8.0'
-
 # Sanitize user input
 gem 'sanitize', '~> 2.0'
 gem 'babosa', '~> 1.0.2'
@@ -287,7 +284,7 @@ group :metrics do
   gem 'influxdb', '~> 0.2', require: false
 
   # Prometheus
-  gem 'prometheus-client-mmap', '~>0.7.0.beta12'
+  gem 'prometheus-client-mmap', '~>0.7.0.beta14'
   gem 'raindrops', '~> 0.18'
 end
 
@@ -340,7 +337,7 @@ group :development, :test do
 
   gem 'rubocop', '~> 0.49.1', require: false
   gem 'rubocop-rspec', '~> 1.15.1', require: false
-  gem 'rubocop-gitlab-security', '~> 0.0.6', require: false
+  gem 'rubocop-gitlab-security', '~> 0.1.0', require: false
   gem 'scss_lint', '~> 0.54.0', require: false
   gem 'haml_lint', '~> 0.26.0', require: false
   gem 'simplecov', '~> 0.14.0', require: false
@@ -396,12 +393,12 @@ gem 'net-ssh', '~> 4.1.0'
 # Required for ED25519 SSH host key support
 group :ed25519 do
   gem 'rbnacl-libsodium'
-  gem 'rbnacl', '~> 3.2'
+  gem 'rbnacl', '~> 4.0'
   gem 'bcrypt_pbkdf', '~> 1.0'
 end
 
 # Gitaly GRPC client
-gem 'gitaly', '~> 0.30.0'
+gem 'gitaly-proto', '~> 0.31.0', require: 'gitaly'
 
 gem 'toml-rb', '~> 0.3.15', require: false
 

Gemfile.lock

@@ -203,7 +203,7 @@ GEM
       multi_json
     fast_gettext (1.4.0)
     ffaker (2.4.0)
-    ffi (1.9.10)
+    ffi (1.9.18)
     flay (2.8.1)
       erubis (~> 2.7.0)
       path_expander (~> 1.0)
@@ -275,7 +275,7 @@ GEM
       po_to_json (>= 1.0.0)
       rails (>= 3.2.0)
     gherkin-ruby (0.3.2)
-    gitaly (0.30.0)
+    gitaly-proto (0.31.0)
       google-protobuf (~> 3.1)
       grpc (~> 1.0)
     github-linguist (4.7.6)
@@ -619,7 +619,7 @@ GEM
       parser
       unparser
     procto (0.0.3)
-    prometheus-client-mmap (0.7.0.beta12)
+    prometheus-client-mmap (0.7.0.beta14)
       mmap2 (~> 2.2, >= 2.2.7)
     pry (0.10.4)
       coderay (~> 1.1.0)
@@ -682,7 +682,7 @@ GEM
     rake (12.0.0)
     rblineprof (0.3.6)
       debugger-ruby_core_source (~> 1.3)
-    rbnacl (3.4.0)
+    rbnacl (4.0.2)
       ffi
     rbnacl-libsodium (1.0.11)
       rbnacl (>= 3.0.1)
@@ -769,7 +769,7 @@ GEM
       rainbow (>= 1.99.1, < 3.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (~> 1.0, >= 1.0.1)
-    rubocop-gitlab-security (0.0.6)
+    rubocop-gitlab-security (0.1.0)
       rubocop (>= 0.47.1)
     rubocop-rspec (1.15.1)
       rubocop (>= 0.42.0)
@@ -899,7 +899,6 @@ GEM
     uglifier (2.7.2)
       execjs (>= 0.3.0)
       json (>= 1.8.0)
-    underscore-rails (1.8.3)
     unf (0.1.4)
       unf_ext
     unf_ext (0.0.7.2)
@@ -1019,7 +1018,7 @@ DEPENDENCIES
   gettext (~> 3.2.2)
   gettext_i18n_rails (~> 1.8.0)
   gettext_i18n_rails_js (~> 1.2.0)
-  gitaly (~> 0.30.0)
+  gitaly-proto (~> 0.31.0)
   github-linguist (~> 4.7.0)
   gitlab-flowdock-git-hook (~> 1.0.1)
   gitlab-markup (~> 1.5.1)
@@ -1094,7 +1093,7 @@ DEPENDENCIES
   pg (~> 0.18.2)
   poltergeist (~> 1.9.0)
   premailer-rails (~> 1.9.7)
-  prometheus-client-mmap (~> 0.7.0.beta12)
+  prometheus-client-mmap (~> 0.7.0.beta14)
   pry-byebug (~> 3.4.1)
   pry-rails (~> 0.3.4)
   rack-attack (~> 4.4.1)
@@ -1107,7 +1106,7 @@ DEPENDENCIES
   rainbow (~> 2.2)
   raindrops (~> 0.18)
   rblineprof (~> 0.3.6)
-  rbnacl (~> 3.2)
+  rbnacl (~> 4.0)
   rbnacl-libsodium
   rdoc (~> 4.2)
   re2 (~> 1.1.1)
@@ -1126,7 +1125,7 @@ DEPENDENCIES
   rspec-set (~> 0.1.3)
   rspec_profiling (~> 0.0.5)
   rubocop (~> 0.49.1)
-  rubocop-gitlab-security (~> 0.0.6)
+  rubocop-gitlab-security (~> 0.1.0)
   rubocop-rspec (~> 1.15.1)
   ruby-fogbugz (~> 0.2.1)
   ruby-prof (~> 0.16.2)
@@ -1163,7 +1162,6 @@ DEPENDENCIES
   truncato (~> 0.7.8)
   u2f (~> 0.2.1)
   uglifier (~> 2.7.2)
-  underscore-rails (~> 1.8.0)
   unf (~> 0.1.4)
   unicorn (~> 5.1.0)
   unicorn-worker-killer (~> 0.4.4)
@@ -1176,4 +1174,4 @@ DEPENDENCIES
   wikicloth (= 0.8.1)
 
 BUNDLED WITH
-   1.15.3
+   1.15.4

app/assets/javascripts/api.js

@@ -55,13 +55,18 @@ const Api = {
   // Return projects list. Filtered by query
   projects(query, options, callback) {
     const url = Api.buildUrl(Api.projectsPath);
+    const defaults = {
+      search: query,
+      per_page: 20,
+    };
+
+    if (gon.current_user_id) {
+      defaults.membership = true;
+    }
+
     return $.ajax({
       url,
-      data: Object.assign({
-        search: query,
-        per_page: 20,
-        membership: true,
-      }, options),
+      data: Object.assign(defaults, options),
       dataType: 'json',
     })
       .done(projects => callback(projects));
@@ -96,18 +101,17 @@ const Api = {
       .done(projects => callback(projects));
   },
 
-  commitMultiple(id, data, callback) {
+  commitMultiple(id, data) {
+    // see https://docs.gitlab.com/ce/api/commits.html#create-a-commit-with-multiple-files-and-actions
     const url = Api.buildUrl(Api.commitPath)
       .replace(':id', id);
-    return $.ajax({
+    return this.wrapAjaxCall({
       url,
       type: 'POST',
       contentType: 'application/json; charset=utf-8',
       data: JSON.stringify(data),
       dataType: 'json',
-    })
-      .done(commitData => callback(commitData))
-      .fail(message => callback(message.responseJSON));
+    });
   },
 
   // Return text for a specific license

app/assets/javascripts/copy_to_clipboard.js

@@ -29,12 +29,14 @@ showTooltip = function(target, title) {
   var $target = $(target);
   var originalTitle = $target.data('original-title');
 
-  $target
-    .attr('title', 'Copied')
-    .tooltip('fixTitle')
-    .tooltip('show')
-    .attr('title', originalTitle)
-    .tooltip('fixTitle');
+  if (!$target.data('hideTooltip')) {
+    $target
+      .attr('title', 'Copied')
+      .tooltip('fixTitle')
+      .tooltip('show')
+      .attr('title', originalTitle)
+      .tooltip('fixTitle');
+  }
 };
 
 $(function() {

app/assets/javascripts/dispatcher.js

@@ -184,13 +184,13 @@ import initChangesDropdown from './init_changes_dropdown';
           break;
         case 'dashboard:issues':
         case 'dashboard:merge_requests':
-        case 'groups:merge_requests':
           new ProjectSelect();
           initLegacyFilters();
           break;
         case 'groups:issues':
+        case 'groups:merge_requests':
           if (filteredSearchEnabled) {
-            const filteredSearchManager = new gl.FilteredSearchManager('issues');
+            const filteredSearchManager = new gl.FilteredSearchManager(page === 'groups:issues' ? 'issues' : 'merge_requests');
             filteredSearchManager.setup();
           }
           new ProjectSelect();

app/assets/javascripts/droplab/drop_down.js

@@ -85,6 +85,13 @@ class DropDown {
     const renderableList = this.list.querySelector('ul[data-dynamic]') || this.list;
 
     renderableList.innerHTML = children.join('');
+
+    const listEvent = new CustomEvent('render.dl', {
+      detail: {
+        list: this,
+      },
+    });
+    this.list.dispatchEvent(listEvent);
   }
 
   renderChildren(data) {

app/assets/javascripts/filtered_search/dropdown_emoji.js

+/* global Flash */
+
+import Ajax from '~/droplab/plugins/ajax';
+import Filter from '~/droplab/plugins/filter';
+import './filtered_search_dropdown';
+
+class DropdownEmoji extends gl.FilteredSearchDropdown {
+  constructor(options = {}) {
+    super(options);
+    this.config = {
+      Ajax: {
+        endpoint: `${gon.relative_url_root || ''}/autocomplete/award_emojis`,
+        method: 'setData',
+        loadingTemplate: this.loadingTemplate,
+        onError() {
+          /* eslint-disable no-new */
+          new Flash('An error occured fetching the dropdown data.');
+          /* eslint-enable no-new */
+        },
+      },
+      Filter: {
+        template: 'name',
+      },
+    };
+
+    import(/* webpackChunkName: 'emoji' */ '~/emoji')
+      .then(({ glEmojiTag }) => { this.glEmojiTag = glEmojiTag; })
+      .catch(() => { /* ignore error and leave emoji name in the search bar */ });
+
+    this.unbindEvents();
+    this.bindEvents();
+  }
+
+  bindEvents() {
+    super.bindEvents();
+
+    this.listRenderedWrapper = this.listRendered.bind(this);
+    this.dropdown.addEventListener('render.dl', this.listRenderedWrapper);
+  }
+
+  unbindEvents() {
+    this.dropdown.removeEventListener('render.dl', this.listRenderedWrapper);
+    super.unbindEvents();
+  }
+
+  listRendered() {
+    this.replaceEmojiElement();
+  }
+
+  itemClicked(e) {
+    super.itemClicked(e, (selected) => {
+      const name = selected.querySelector('.js-data-value').innerText.trim();
+      return gl.DropdownUtils.getEscapedText(name);
+    });
+  }
+
+  renderContent(forceShowList = false) {
+    this.droplab.changeHookList(this.hookId, this.dropdown, [Ajax, Filter], this.config);
+    super.renderContent(forceShowList);
+  }
+
+  replaceEmojiElement() {
+    if (!this.glEmojiTag) return;
+
+    // Replace empty gl-emoji tag to real content
+    const dropdownItems = [...this.dropdown.querySelectorAll('.filter-dropdown-item')];
+    dropdownItems.forEach((dropdownItem) => {
+      const name = dropdownItem.querySelector('.js-data-value').innerText;
+      const emojiTag = this.glEmojiTag(name);
+      const emojiElement = dropdownItem.querySelector('gl-emoji');
+      emojiElement.outerHTML = emojiTag;
+    });
+  }
+
+  init() {
+    this.droplab
+      .addHook(this.input, this.dropdown, [Ajax, Filter], this.config).init();
+  }
+}
+
+window.gl = window.gl || {};
+gl.DropdownEmoji = DropdownEmoji;

app/assets/javascripts/filtered_search/dropdown_hint.js

@@ -61,7 +61,7 @@ class DropdownHint extends gl.FilteredSearchDropdown {
       .map(tokenKey => ({
         icon: `fa-${tokenKey.icon}`,
         hint: tokenKey.key,
-        tag: `<${tokenKey.symbol}${tokenKey.key}>`,
+        tag: `<${tokenKey.tag}>`,
         type: tokenKey.type,
       }));
 

app/assets/javascripts/filtered_search/filtered_search_bundle.js

+import './dropdown_emoji';
 import './dropdown_hint';
 import './dropdown_non_user';
 import './dropdown_user';

app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js

@@ -58,6 +58,11 @@ class FilteredSearchDropdownManager {
         },
         element: this.container.querySelector('#js-dropdown-label'),
       },
+      'my-reaction': {
+        reference: null,
+        gl: 'DropdownEmoji',
+        element: this.container.querySelector('#js-dropdown-my-reaction'),
+      },
       hint: {
         reference: null,
         gl: 'DropdownHint',

app/assets/javascripts/filtered_search/filtered_search_manager.js

@@ -439,8 +439,13 @@ class FilteredSearchManager {
         const match = this.filteredSearchTokenKeys.searchByKeyParam(keyParam);
 
         if (match) {
-          const indexOf = keyParam.indexOf('_');
-          const sanitizedKey = indexOf !== -1 ? keyParam.slice(0, keyParam.indexOf('_')) : keyParam;
+          // Use lastIndexOf because the token key is allowed to contain underscore
+          // e.g. 'my_reaction' is the token key of 'my_reaction_emoji'
+          const lastIndexOf = keyParam.lastIndexOf('_');
+          let sanitizedKey = lastIndexOf !== -1 ? keyParam.slice(0, lastIndexOf) : keyParam;
+          // Replace underscore with hyphen in the sanitizedkey.
+          // e.g. 'my_reaction' => 'my-reaction'
+          sanitizedKey = sanitizedKey.replace('_', '-');
           const symbol = match.symbol;
           let quotationsToUse = '';
 
@@ -515,7 +520,10 @@ class FilteredSearchManager {
       const condition = this.filteredSearchTokenKeys
         .searchByConditionKeyValue(token.key, token.value.toLowerCase());
       const { param } = this.filteredSearchTokenKeys.searchByKey(token.key) || {};
-      const keyParam = param ? `${token.key}_${param}` : token.key;
+      // Replace hyphen with underscore to use as request parameter
+      // e.g. 'my-reaction' => 'my_reaction'
+      const underscoredKey = token.key.replace('-', '_');
+      const keyParam = param ? `${underscoredKey}_${param}` : underscoredKey;
       let tokenPath = '';
 
       if (condition) {

app/assets/javascripts/filtered_search/filtered_search_token_keys.js

@@ -4,26 +4,42 @@ const tokenKeys = [{
   param: 'username',
   symbol: '@',
   icon: 'pencil',
+  tag: '@author',
 }, {
   key: 'assignee',
   type: 'string',
   param: 'username',
   symbol: '@',
   icon: 'user',
+  tag: '@assignee',
 }, {
   key: 'milestone',
   type: 'string',
   param: 'title',
   symbol: '%',
   icon: 'clock-o',
+  tag: '%milestone',
 }, {
   key: 'label',
   type: 'array',
   param: 'name[]',
   symbol: '~',
   icon: 'tag',
+  tag: '~label',
 }];
 
+if (gon.current_user_id) {
+  // Appending tokenkeys only logged-in
+  tokenKeys.push({
+    key: 'my-reaction',
+    type: 'string',
+    param: 'emoji',
+    symbol: '',
+    icon: 'thumbs-up',
+    tag: 'emoji',
+  });
+}
+
 const alternativeTokenKeys = [{
   key: 'label',
   type: 'string',
@@ -84,6 +100,10 @@ class FilteredSearchTokenKeys {
     return tokenKeysWithAlternative.find((tokenKey) => {
       let tokenKeyParam = tokenKey.key;
 
+      // Replace hyphen with underscore to compare keyParam with tokenKeyParam
+      // e.g. 'my-reaction' => 'my_reaction'
+      tokenKeyParam = tokenKeyParam.replace('-', '_');
+
       if (tokenKey.param) {
         tokenKeyParam += `_${tokenKey.param}`;
       }

app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js

@@ -132,6 +132,23 @@ class FilteredSearchVisualTokens {
       .catch(() => { });
   }
 
+  static updateEmojiTokenAppearance(tokenValueContainer, tokenValueElement, tokenValue) {
+    const container = tokenValueContainer;
+    const element = tokenValueElement;
+
+    return import(/* webpackChunkName: 'emoji' */ '../emoji')
+      .then((Emoji) => {
+        if (!Emoji.isEmojiNameValid(tokenValue)) {
+          return;
+        }
+
+        container.dataset.originalValue = tokenValue;
+        element.innerHTML = Emoji.glEmojiTag(tokenValue);
+      })
+      // ignore error and leave emoji name in the search bar
+      .catch(() => { });
+  }
+
   static renderVisualTokenValue(parentElement, tokenName, tokenValue) {
     const tokenValueContainer = parentElement.querySelector('.value-container');
     const tokenValueElement = tokenValueContainer.querySelector('.value');
@@ -144,6 +161,10 @@ class FilteredSearchVisualTokens {
       FilteredSearchVisualTokens.updateUserTokenAppearance(
         tokenValueContainer, tokenValueElement, tokenValue,
       );
+    } else if (tokenType === 'my-reaction') {
+      FilteredSearchVisualTokens.updateEmojiTokenAppearance(
+        tokenValueContainer, tokenValueElement, tokenValue,
+      );
     }
   }
 

app/assets/javascripts/groups/components/group_item.vue

 <script>
+import identicon from '../../vue_shared/components/identicon.vue';
 import eventHub from '../event_hub';
-import groupIdenticon from './group_identicon.vue';
 
 export default {
   components: {
-    groupIdenticon,
+    identicon,
   },
   props: {
     group: {
@@ -205,7 +205,7 @@ export default {
             class="avatar s40"
             :src="group.avatarUrl"
           />
-          <group-identicon
+          <identicon
             v-else
             :entity-id=group.id
             :entity-name="group.name"

app/assets/javascripts/lib/utils/sticky.js

 export const isSticky = (el, scrollY, stickyTop) => {
-  const top = el.offsetTop - scrollY;
+  const top = Math.floor(el.offsetTop - scrollY);
 
   if (top <= stickyTop) {
     el.classList.add('is-stuck');

app/assets/javascripts/merge_request_tabs.js

@@ -253,6 +253,7 @@ import bp from './breakpoints';
 
     loadDiff(source) {
       if (this.diffsLoaded) {
+        document.dispatchEvent(new CustomEvent('scroll'));
         return;
       }
 

app/assets/javascripts/monitoring/components/monitoring_column.vue

@@ -7,6 +7,7 @@
   import eventHub from '../event_hub';
   import measurements from '../utils/measurements';
   import { formatRelevantDigits } from '../../lib/utils/number_utils';
+  import { timeScaleFormat } from '../utils/date_time_formatters';
   import bp from '../../breakpoints';
 
   const bisectDate = d3.bisector(d => d.time).left;
@@ -159,6 +160,7 @@
         const xAxis = d3.svg.axis()
           .scale(axisXScale)
           .ticks(measurements.xTicks)
+          .tickFormat(timeScaleFormat)
           .orient('bottom');
 
         const yAxis = d3.svg.axis()
@@ -266,14 +268,6 @@
               stroke-width="2"
               transform="translate(-5, 20)">
             </path>
-            <rect
-              class="prometheus-graph-overlay"
-              :width="(graphWidth - 70)"
-              :height="(graphHeight - 100)"
-              transform="translate(-5, 20)"
-              ref="graphOverlay"
-              @mousemove="handleMouseOverGraph($event)">
-            </rect>
             <monitoring-deployment
               :show-deploy-info="showDeployInfo"
               :deployment-data="reducedDeploymentData"
@@ -289,6 +283,14 @@
               :graph-height="graphHeight"
               :graph-height-offset="graphHeightOffset"
             />
+            <rect
+              class="prometheus-graph-overlay"
+              :width="(graphWidth - 70)"
+              :height="(graphHeight - 100)"
+              transform="translate(-5, 20)"
+              ref="graphOverlay"
+              @mousemove="handleMouseOverGraph($event)">
+            </rect>
         </svg>
       </svg>
     </div>

app/assets/javascripts/monitoring/components/monitoring_deployment.vue

 <script>
-  import {
-      dateFormat,
-      timeFormat,
-    } from '../constants';
+  import { dateFormat, timeFormat } from '../utils/date_time_formatters';
 
   export default {
     props: {
@@ -58,7 +55,7 @@
     class="deploy-info"
     v-if="showDeployInfo">
     <g
-      v-for="(deployment, index) in deploymentData" 
+      v-for="(deployment, index) in deploymentData"
       :key="index"
       :class="nameDeploymentClass(deployment)"
       :transform="transformDeploymentGroup(deployment)">
@@ -92,7 +89,7 @@
           width="90"
           height="58">
         </rect>
-        <g 
+        <g
           transform="translate(5, 2)">
           <text
             class="deploy-info-text text-metric-bold">

app/assets/javascripts/monitoring/components/monitoring_flag.vue

 <script>
-  import {
-      dateFormat,
-      timeFormat,
-    } from '../constants';
+  import { dateFormat, timeFormat } from '../utils/date_time_formatters';
 
   export default {
     props: {
@@ -72,7 +69,7 @@
       r="5"
       transform="translate(-5, 20)">
     </circle>
-    <svg 
+    <svg
       class="rect-text-metric"
       :x="currentFlagPosition"
       y="0">

app/assets/javascripts/monitoring/constants.js

-import d3 from 'd3';
-
-export const dateFormat = d3.time.format('%b %d, %Y');
-export const timeFormat = d3.time.format('%H:%M%p');

app/assets/javascripts/monitoring/utils/date_time_formatters.js

+import d3 from 'd3';
+
+export const dateFormat = d3.time.format('%b %-d, %Y');
+export const timeFormat = d3.time.format('%-I:%M%p');
+
+export const timeScaleFormat = d3.time.format.multi([
+  ['.%L', d => d.getMilliseconds()],
+  [':%S', d => d.getSeconds()],
+  ['%-I:%M', d => d.getMinutes()],
+  ['%-I %p', d => d.getHours()],
+  ['%a %-d', d => d.getDay() && d.getDate() !== 1],
+  ['%b %-d', d => d.getDate() !== 1],
+  ['%B', d => d.getMonth()],
+  ['%Y', () => true],
+]);

app/assets/javascripts/new_sidebar.js

@@ -47,7 +47,6 @@ export default class NewNavSidebar {
 
     if (this.$sidebar.length) {
       this.$sidebar.toggleClass('sidebar-icons-only', collapsed);
-      this.$page.toggleClass('page-with-new-sidebar', !collapsed);
       this.$page.toggleClass('page-with-icon-sidebar', breakpoint === 'sm' ? true : collapsed);
     }
     NewNavSidebar.setCollapsedCookie(collapsed);

app/assets/javascripts/pipelines/components/navigation_tabs.vue

 <script>
-export default {
-  name: 'PipelineNavigationTabs',
-  props: {
-    scope: {
-      type: String,
-      required: true,
+  export default {
+    name: 'PipelineNavigationTabs',
+    props: {
+      scope: {
+        type: String,
+        required: true,
+      },
+      count: {
+        type: Object,
+        required: true,
+      },
+      paths: {
+        type: Object,
+        required: true,
+      },
     },
-    count: {
-      type: Object,
-      required: true,
+    mounted() {
+      $(document).trigger('init.scrolling-tabs');
     },
-    paths: {
-      type: Object,
-      required: true,
+    methods: {
+      shouldRenderBadge(count) {
+        // 0 is valid in a badge, but evaluates to false, we need to check for undefined
+        return count !== undefined;
+      },
     },
-  },
-  mounted() {
-    $(document).trigger('init.scrolling-tabs');
-  },
 };
 </script>
 <template>
@@ -27,7 +33,9 @@ export default {
       :class="{ active: scope === 'all'}">
       <a :href="paths.allPath">
         All
-        <span class="badge js-totalbuilds-count">
+        <span
+          v-if="shouldRenderBadge(count.all)"
+          class="badge js-totalbuilds-count">
           {{count.all}}
         </span>
       </a>
@@ -37,7 +45,9 @@ export default {
       :class="{ active: scope === 'pending'}">
       <a :href="paths.pendingPath">
         Pending
-        <span class="badge">
+        <span
+          v-if="shouldRenderBadge(count.pending)"
+          class="badge">
           {{count.pending}}
         </span>
       </a>
@@ -47,7 +57,9 @@ export default {
       :class="{ active: scope === 'running'}">
       <a :href="paths.runningPath">
         Running
-        <span class="badge">
+        <span
+          v-if="shouldRenderBadge(count.running)"
+          class="badge">
           {{count.running}}
         </span>
       </a>
@@ -57,7 +69,9 @@ export default {
       :class="{ active: scope === 'finished'}">
       <a :href="paths.finishedPath">
         Finished
-        <span class="badge">
+        <span
+          v-if="shouldRenderBadge(count.finished)"
+          class="badge">
           {{count.finished}}
         </span>
       </a>

app/assets/javascripts/pipelines/components/pipelines.vue

@@ -139,7 +139,9 @@
   };
 </script>
 <template>
-  <div :class="cssClass">
+  <div
+    class="pipelines-container"
+    :class="cssClass">
     <div
       class="top-area scrolling-tabs-container inner-page-scroll-tabs"
       v-if="!isLoading && !shouldRenderEmptyState">

app/assets/javascripts/repo/components/repo_commit_section.vue

@@ -42,7 +42,9 @@ export default {
         actions,
       };
       Store.submitCommitsLoading = true;
-      Service.commitFiles(payload, this.resetCommitState);
+      Service.commitFiles(payload)
+        .then(this.resetCommitState)
+        .catch(() => Flash('An error occured while committing your changes'));
     },
 
     resetCommitState() {

app/assets/javascripts/repo/services/repo_service.js

@@ -65,15 +65,17 @@ const RepoService = {
     return urlArray.join('/');
   },
 
-  commitFiles(payload, cb) {
-    Api.commitMultiple(Store.projectId, payload, (data) => {
-      if (data.short_id && data.stats) {
-        Flash(`Your changes have been committed. Commit ${data.short_id} with ${data.stats.additions} additions, ${data.stats.deletions} deletions.`, 'notice');
-      } else {
-        Flash(data.message);
-      }
-      cb();
-    });
+  commitFiles(payload) {
+    return Api.commitMultiple(Store.projectId, payload)
+      .then(this.commitFlash);
+  },
+
+  commitFlash(data) {
+    if (data.short_id && data.stats) {
+      window.Flash(`Your changes have been committed. Commit ${data.short_id} with ${data.stats.additions} additions, ${data.stats.deletions} deletions.`, 'notice');
+    } else {
+      window.Flash(data.message);
+    }
   },
 };
 

app/assets/javascripts/users_select.js

@@ -588,9 +588,10 @@ function UsersSelect(currentUser, els) {
             if (showEmailUser && data.results.length === 0 && query.term.match(/^[^@]+@[^@]+$/)) {
               var trimmed = query.term.trim();
               emailUser = {
-                name: "Invite \"" + query.term + "\"",
+                name: "Invite \"" + query.term + "\" by email",
                 username: trimmed,
-                id: trimmed
+                id: trimmed,
+                invite: true
               };
               data.results.unshift(emailUser);
             }
@@ -642,7 +643,7 @@ UsersSelect.prototype.formatResult = function(user) {
   } else {
     avatar = gon.default_avatar_url;
   }
-  return "<div class='user-result " + (!user.username ? 'no-username' : void 0) + "'> <div class='user-image'><img class='avatar avatar-inline s32' src='" + avatar + "'></div> <div class='user-name dropdown-menu-user-full-name'>" + user.name + "</div> <div class='user-username dropdown-menu-user-username'>" + ("@" + user.username || "") + "</div> </div>";
+  return "<div class='user-result " + (!user.username ? 'no-username' : void 0) + "'> <div class='user-image'><img class='avatar avatar-inline s32' src='" + avatar + "'></div> <div class='user-name dropdown-menu-user-full-name'>" + user.name + "</div> <div class='user-username dropdown-menu-user-username'>" + (!user.invite ? "@" + _.escape(user.username) : "") + "</div> </div>";
 };
 
 UsersSelect.prototype.formatSelection = function(user) {

app/assets/stylesheets/framework/avatar.scss

@@ -78,7 +78,7 @@
   &.s60 { font-size: 32px; line-height: 58px; }
   &.s70 { font-size: 34px; line-height: 70px; }
   &.s90 { font-size: 36px; line-height: 88px; }
-  &.s110 { font-size: 40px; line-height: 108px; font-weight: 300; }
+  &.s110 { font-size: 40px; line-height: 108px; font-weight: $gl-font-weight-normal; }
   &.s140 { font-size: 72px; line-height: 138px; }
   &.s160 { font-size: 96px; line-height: 158px; }
 }

app/assets/stylesheets/framework/badges.scss

 .badge {
-  font-weight: normal;
+  font-weight: $gl-font-weight-normal;
   background-color: $badge-bg;
   color: $badge-color;
   vertical-align: baseline;

app/assets/stylesheets/framework/blocks.scss

@@ -8,7 +8,7 @@
   text-align: center;
   padding: 20px;
   color: $gl-text-color;
-  font-weight: normal;
+  font-weight: $gl-font-weight-normal;
   font-size: 14px;
   line-height: 36px;
 
@@ -213,7 +213,7 @@
 
     h1 {
       display: inline;
-      font-weight: normal;
+      font-weight: $gl-font-weight-normal;
       font-size: 24px;
       color: $gl-text-color;
     }

app/assets/stylesheets/framework/buttons.scss

 @mixin btn-default {
   border-radius: 3px;
   font-size: $gl-font-size;
-  font-weight: 400;
+  font-weight: $gl-font-weight-normal;
   padding: $gl-vert-padding $gl-btn-padding;
 
   &:focus,

app/assets/stylesheets/framework/calendar.scss

@@ -52,13 +52,13 @@
   .pika-label {
     color: $gl-text-color-secondary;
     font-size: 14px;
-    font-weight: normal;
+    font-weight: $gl-font-weight-normal;
   }
 
   th {
     padding: 2px 0;
     color: $note-disabled-comment-color;
-    font-weight: normal;
+    font-weight: $gl-font-weight-normal;
     text-transform: lowercase;
     border-top: 1px solid $calendar-border-color;
   }
@@ -88,7 +88,7 @@
   .is-today {
     .pika-day {
       color: inherit;
-      font-weight: normal;
+      font-weight: $gl-font-weight-normal;
     }
   }
 

app/assets/stylesheets/framework/common.scss

@@ -36,12 +36,12 @@
   color: $common-gray;
   font-size: 14px;
   margin-bottom: 12px;
-  font-weight: normal;
+  font-weight: $gl-font-weight-normal;
   line-height: 24px;
 }
 
 .bold {
-  font-weight: 600;
+  font-weight: $gl-font-weight-bold;
 }
 
 .tab-content {
@@ -89,7 +89,7 @@ hr {
   }
 }
 
-.item-title { font-weight: 600; }
+.item-title { font-weight: $gl-font-weight-bold; }
 
 /** FLASH message **/
 .author_link,
@@ -118,18 +118,18 @@ table a code {
 span.update-author {
   display: block;
   color: $update-author-color;
-  font-weight: normal;
+  font-weight: $gl-font-weight-normal;
   font-style: italic;
 
   strong {
-    font-weight: bold;
+    font-weight: $gl-font-weight-bold;
     font-style: normal;
   }
 }
 
 .user-mention {
   color: $user-mention-color;
-  font-weight: bold;
+  font-weight: $gl-font-weight-bold;
 }
 
 .field_with_errors {
@@ -222,7 +222,7 @@ li.note {
   text-align: center;
   background: $error-bg;
   color: $white-light;
-  font-weight: bold;
+  font-weight: $gl-font-weight-bold;
 
   a {
     color: $white-light;
@@ -339,7 +339,7 @@ table {
 .header-with-avatar {
   h3 {
     margin: 0;
-    font-weight: bold;
+    font-weight: $gl-font-weight-bold;
   }
 
   .username {

app/assets/stylesheets/framework/dropdowns.scss

@@ -195,7 +195,7 @@
   margin-top: 2px;
   margin-bottom: 0;
   font-size: 14px;
-  font-weight: normal;
+  font-weight: $gl-font-weight-normal;
   padding: 8px 0;
   background-color: $white-light;
   border: 1px solid $dropdown-border-color;
@@ -268,7 +268,7 @@
   }
 
   .dropdown-bold-header {
-    font-weight: 600;
+    font-weight: $gl-font-weight-bold;
     line-height: 22px;
     padding: 0 16px;
   }
@@ -432,7 +432,7 @@
 
 .dropdown-menu-user-full-name {
   display: block;
-  font-weight: 500;
+  font-weight: $gl-font-weight-normal;
   line-height: 16px;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -468,7 +468,7 @@
 
     &.is-indeterminate,
     &.is-active {
-      font-weight: 600;
+      font-weight: $gl-font-weight-bold;
       color: $gl-text-color;
 
       &::before {
@@ -502,7 +502,7 @@
   position: relative;
   padding: 2px 25px 10px;
   margin: 0 10px 10px;
-  font-weight: 600;
+  font-weight: $gl-font-weight-bold;
   line-height: 1;
   text-align: center;
   text-overflow: ellipsis;
@@ -685,7 +685,7 @@
 .dropdown-menu-inner-title {
   display: block;
   color: $gl-text-color;
-  font-weight: 600;
+  font-weight: $gl-font-weight-bold;
 }
 
 .dropdown-menu-inner-content {
@@ -771,6 +771,11 @@
           &::before {
             top: 16px;
           }
+
+          &.dropdown-menu-user-link::before {
+            top: 50%;
+            transform: translateY(-50%);
+          }
         }
       }
     }

app/assets/stylesheets/framework/filters.scss

@@ -225,6 +225,18 @@
     color: $common-gray-dark;
   }
 
+  gl-emoji {
+    display: inline-block;
+    font-family: inherit;
+    font-size: inherit;
+    vertical-align: inherit;
+
+    img {
+      height: 18px;
+      width: 18px;
+    }
+  }
+
   .form-control {
     position: relative;
     min-width: 200px;
@@ -277,7 +289,7 @@
 }
 
 .filtered-search-input-dropdown-menu {
-  max-height: 225px;
+  max-height: 260px;
   max-width: 280px;
   overflow: auto;
 
@@ -371,7 +383,7 @@
   }
 
   > .value {
-    font-weight: 600;
+    font-weight: $gl-font-weight-bold;
   }
 }
 
@@ -452,7 +464,7 @@
 
   .dropdown-light-content {
     font-size: 14px;
-    font-weight: 400;
+    font-weight: $gl-font-weight-normal;
   }
 
   .dropdown-user {
@@ -478,3 +490,7 @@
   padding: 8px 16px;
   text-align: center;
 }
+
+.issues-details-filters {
+  @include new-style-dropdown;
+}

app/assets/stylesheets/framework/flash.scss

@@ -25,7 +25,7 @@
     a.flash-action {
       margin-left: 5px;
       text-decoration: none;
-      font-weight: normal;
+      font-weight: $gl-font-weight-normal;
       border-bottom: 1px solid;
 
       &:hover {

app/assets/stylesheets/framework/forms.scss

@@ -32,7 +32,7 @@ label {
   }
 
   &.label-light {
-    font-weight: 600;
+    font-weight: $gl-font-weight-bold;
   }
 }
 
@@ -73,7 +73,7 @@ label {
   margin-right: 0;
 
   .control-label {
-    font-weight: bold;
+    font-weight: $gl-font-weight-bold;
     padding-top: 4px;
   }
 
@@ -157,7 +157,7 @@ label {
 
 .form-group .control-label,
 .form-group .control-label-full-width {
-  font-weight: normal;
+  font-weight: $gl-font-weight-normal;
 }
 
 .form-control::-webkit-input-placeholder {

app/assets/stylesheets/framework/header.scss

@@ -160,7 +160,7 @@ header {
 
     li {
       &.active a {
-        font-weight: bold;
+        font-weight: $gl-font-weight-bold;
       }
     }
   }
@@ -250,7 +250,7 @@ header {
       font-size: 18px;
       line-height: 22px;
       display: inline-block;
-      font-weight: normal;
+      font-weight: $gl-font-weight-normal;
       color: $gl-text-color;
       vertical-align: top;
       white-space: nowrap;
@@ -326,7 +326,7 @@ header {
     .badge {
       position: inherit;
       top: -8px;
-      font-weight: normal;
+      font-weight: $gl-font-weight-normal;
       margin-left: -11px;
       font-size: 11px;
       color: $white-light;

app/assets/stylesheets/framework/lists.scss

@@ -113,7 +113,7 @@ ul.content-list {
     }
 
     .title {
-      font-weight: 600;
+      font-weight: $gl-font-weight-bold;
     }
 
     a {
@@ -212,7 +212,7 @@ ul.content-list {
   }
 
   .row-title {
-    font-weight: 600;
+    font-weight: $gl-font-weight-bold;
   }
 
   .row-second-line {

app/assets/stylesheets/framework/mixins.scss

@@ -43,7 +43,7 @@
       background: $gray-light;
 
       a {
-        font-weight: 600;
+        font-weight: $gl-font-weight-bold;
       }
     }
 

app/assets/stylesheets/framework/modal.scss

@@ -8,7 +8,7 @@
   }
 
   .text-danger {
-    font-weight: bold;
+    font-weight: $gl-font-weight-bold;
   }
 }
 
@@ -16,6 +16,14 @@ body.modal-open {
   overflow: hidden;
 }
 
+.modal-no-backdrop {
+  @extend .modal-dialog;
+
+  .modal-content {
+    box-shadow: none;
+  }
+}
+
 @media (min-width: $screen-md-min) {
   .modal-dialog {
     width: 860px;

app/assets/stylesheets/framework/nav.scss

@@ -70,7 +70,7 @@
     &.active a {
       border-bottom: 2px solid $link-underline-blue;
       color: $black;
-      font-weight: 600;
+      font-weight: $gl-font-weight-bold;
 
       .badge {
         color: $black;
@@ -352,7 +352,7 @@
       z-index: 300;
 
       li.active {
-        font-weight: bold;
+        font-weight: $gl-font-weight-bold;
       }
     }
   }

app/assets/stylesheets/framework/page-header.scss

@@ -43,7 +43,7 @@
   .commit-committer-link,
   .commit-author-link {
     color: $gl-text-color;
-    font-weight: bold;
+    font-weight: $gl-font-weight-bold;
   }
 
   .commit-info {

app/assets/stylesheets/framework/selects.scss

@@ -76,7 +76,7 @@
 }
 
 .select2-results li.select2-result-with-children > .select2-result-label {
-  font-weight: 600;
+  font-weight: $gl-font-weight-bold;
   color: $gl-text-color;
 }
 
@@ -227,7 +227,7 @@
   }
 
   .group-name {
-    font-weight: bold;
+    font-weight: $gl-font-weight-bold;
   }
 
   .group-path {
@@ -252,12 +252,12 @@
 .namespace-result {
   .namespace-kind {
     color: $namespace-kind-color;
-    font-weight: normal;
+    font-weight: $gl-font-weight-normal;
   }
 
   .namespace-path {
     margin-left: 10px;
-    font-weight: bolder;
+    font-weight: $gl-font-weight-bold;
   }
 }
 
@@ -266,7 +266,10 @@
 }
 
 // TODO: change global style
-.ajax-project-dropdown {
+.ajax-project-dropdown,
+body[data-page="projects:blob:new"] #select2-drop,
+body[data-page="profiles:show"] #select2-drop,
+body[data-page="projects:blob:edit"] #select2-drop {
   &.select2-drop {
     color: $gl-text-color;
   }
@@ -283,7 +286,7 @@
       padding: 0 1px;
 
       .select2-match {
-        font-weight: bold;
+        font-weight: $gl-font-weight-bold;
         text-decoration: none;
       }
 

app/assets/stylesheets/framework/snippets.scss

@@ -30,7 +30,7 @@
 
 .snippet-title {
   font-size: 24px;
-  font-weight: 600;
+  font-weight: $gl-font-weight-bold;
 }
 
 .snippet-edited-ago {

app/assets/stylesheets/framework/tables.scss

@@ -32,7 +32,7 @@ table {
 
       th {
         background-color: $gray-light;
-        font-weight: normal;
+        font-weight: $gl-font-weight-normal;
         border-bottom: none;
 
         &.wide {

app/assets/stylesheets/framework/tw_bootstrap.scss

@@ -103,7 +103,7 @@ summary {
   padding: 4px 5px;
   font-size: 12px;
   font-style: normal;
-  font-weight: normal;
+  font-weight: $gl-font-weight-normal;
   display: inline-block;
 
   &.label-gray {
@@ -165,7 +165,7 @@ summary {
     .panel-heading {
       padding: 6px 15px;
       font-size: 13px;
-      font-weight: normal;
+      font-weight: $gl-font-weight-normal;
 
       a {
         color: $panel-heading-link-color;

app/assets/stylesheets/framework/typography.scss

@@ -10,8 +10,7 @@
     color: $md-link-color;
   }
 
-  img {
-    /*max-width: 100%;*/
+  img:not(.emoji) {
     margin: 0 0 8px;
   }
 
@@ -74,7 +73,7 @@
 
   h1 {
     font-size: 1.75em;
-    font-weight: 600;
+    font-weight: $gl-font-weight-bold;
     margin: 24px 0 16px;
     padding-bottom: 0.3em;
     border-bottom: 1px solid $white-dark;
@@ -87,7 +86,7 @@
 
   h2 {
     font-size: 1.5em;
-    font-weight: 600;
+    font-weight: $gl-font-weight-bold;
     margin: 24px 0 16px;
     padding-bottom: 0.3em;
     border-bottom: 1px solid $white-dark;
@@ -280,7 +279,7 @@ body {
   margin-top: $gl-padding;
   line-height: 1.3;
   font-size: 1.25em;
-  font-weight: 600;
+  font-weight: $gl-font-weight-bold;
 
   &:last-child {
     margin-bottom: 0;
@@ -291,7 +290,7 @@ body {
   margin-top: 0;
   line-height: 1.3;
   font-size: 1.25em;
-  font-weight: 600;
+  font-weight: $gl-font-weight-bold;
   margin: 12px 7px;
 }
 
@@ -302,11 +301,11 @@ h4,
 h5,
 h6 {
   color: $gl-text-color;
-  font-weight: 600;
+  font-weight: $gl-font-weight-bold;
 }
 
 .light-header {
-  font-weight: 600;
+  font-weight: $gl-font-weight-bold;
 }
 
 /** CODE **/

app/assets/stylesheets/framework/variables.scss

@@ -111,6 +111,8 @@ $well-light-text-color: #5b6169;
  * Text
  */
 $gl-font-size: 14px;
+$gl-font-weight-normal: 400;
+$gl-font-weight-bold: 600;
 $gl-text-color: #2e2e2e;
 $gl-text-color-secondary: #707070;
 $gl-text-color-tertiary: #949494;
@@ -118,6 +120,7 @@ $gl-text-color-quaternary: #d6d6d6;
 $gl-text-color-inverted: rgba(255, 255, 255, 1.0);
 $gl-text-color-secondary-inverted: rgba(255, 255, 255, .85);
 $gl-text-green: $green-600;
+$gl-text-green-hover: $green-700;
 $gl-text-red: $red-500;
 $gl-text-orange: $orange-600;
 $gl-link-color: $blue-600;

app/assets/stylesheets/framework/wells.scss

@@ -69,7 +69,7 @@
 
 .well-centered {
   h1 {
-    font-weight: normal;
+    font-weight: $gl-font-weight-normal;
     text-align: center;
     font-size: 48px;
   }

app/assets/stylesheets/highlight/dark.scss

@@ -204,11 +204,11 @@ $dark-il: #de935f;
   .cs { color: $dark-cs; } /* Comment.Special */
   .gd { color: $dark-gd; } /* Generic.Deleted */
   .ge { font-style: italic; } /* Generic.Emph */
-  .gh { color: $dark-gh; font-weight: bold; } /* Generic.Heading */
+  .gh { color: $dark-gh; font-weight: $gl-font-weight-bold; } /* Generic.Heading */
   .gi { color: $dark-gi; } /* Generic.Inserted */
-  .gp { color: $dark-gp; font-weight: bold; } /* Generic.Prompt */
-  .gs { font-weight: bold; } /* Generic.Strong */
-  .gu { color: $dark-gu; font-weight: bold; } /* Generic.Subheading */
+  .gp { color: $dark-gp; font-weight: $gl-font-weight-bold; } /* Generic.Prompt */
+  .gs { font-weight: $gl-font-weight-bold; } /* Generic.Strong */
+  .gu { color: $dark-gu; font-weight: $gl-font-weight-bold; } /* Generic.Subheading */
   .kc { color: $dark-kc; } /* Keyword.Constant */
   .kd { color: $dark-kd; } /* Keyword.Declaration */
   .kn { color: $dark-kn; } /* Keyword.Namespace */

app/assets/stylesheets/highlight/monokai.scss

@@ -203,7 +203,7 @@ $monokai-gi: #a6e22e;
   .c1 { color: $monokai-c1; } /* Comment.Single */
   .cs { color: $monokai-cs; } /* Comment.Special */
   .ge { font-style: italic; } /* Generic.Emph */
-  .gs { font-weight: bold; } /* Generic.Strong */
+  .gs { font-weight: $gl-font-weight-bold; } /* Generic.Strong */
   .kc { color: $monokai-kc; } /* Keyword.Constant */
   .kd { color: $monokai-kd; } /* Keyword.Declaration */
   .kn { color: $monokai-kn; } /* Keyword.Namespace */

app/assets/stylesheets/highlight/solarized_dark.scss

@@ -231,7 +231,7 @@ $solarized-dark-il: #2aa198;
   .gi { color: $solarized-dark-gi; } /* Generic.Inserted */
   .go { color: $solarized-dark-go; } /* Generic.Output */
   .gp { color: $solarized-dark-gp; } /* Generic.Prompt */
-  .gs { color: $solarized-dark-gs; font-weight: bold; } /* Generic.Strong */
+  .gs { color: $solarized-dark-gs; font-weight: $gl-font-weight-bold; } /* Generic.Strong */
   .gu { color: $solarized-dark-gu; } /* Generic.Subheading */
   .gt { color: $solarized-dark-gt; } /* Generic.Traceback */
   .kc { color: $solarized-dark-kc; } /* Keyword.Constant */

app/assets/stylesheets/highlight/solarized_light.scss

@@ -239,7 +239,7 @@ $solarized-light-il: #2aa198;
   .gi { color: $solarized-light-gi; } /* Generic.Inserted */
   .go { color: $solarized-light-go; } /* Generic.Output */
   .gp { color: $solarized-light-gp; } /* Generic.Prompt */
-  .gs { color: $solarized-light-gs; font-weight: bold; } /* Generic.Strong */
+  .gs { color: $solarized-light-gs; font-weight: $gl-font-weight-bold; } /* Generic.Strong */
   .gu { color: $solarized-light-gu; } /* Generic.Subheading */
   .gt { color: $solarized-light-gt; } /* Generic.Traceback */
   .kc { color: $solarized-light-kc; } /* Keyword.Constant */

app/assets/stylesheets/highlight/white.scss

@@ -211,12 +211,12 @@ $white-gc-bg: #eaf2f5;
   .hll { background-color: $white-hll-bg; }
   .c { color: $white-c; font-style: italic; }
   .err { color: $white-err; background-color: $white-err-bg; }
-  .k { font-weight: bold; }
-  .o { font-weight: bold; }
+  .k { font-weight: $gl-font-weight-bold; }
+  .o { font-weight: $gl-font-weight-bold; }
   .cm { color: $white-cm; font-style: italic; }
-  .cp { color: $white-cp; font-weight: bold; }
+  .cp { color: $white-cp; font-weight: $gl-font-weight-bold; }
   .c1 { color: $white-c1; font-style: italic; }
-  .cs { color: $white-cs; font-weight: bold; font-style: italic; }
+  .cs { color: $white-cs; font-weight: $gl-font-weight-bold; font-style: italic; }
   .gd { color: $white-gd; background-color: $white-gd-bg; }
   .gd .x { color: $white-gd-x; background-color: $white-gd-x-bg; }
   .ge { font-style: italic; }
@@ -226,29 +226,29 @@ $white-gc-bg: #eaf2f5;
   .gi .x { color: $white-gi-x; background-color: $white-gi-x-bg; }
   .go { color: $white-go; }
   .gp { color: $white-gp; }
-  .gs { font-weight: bold; }
-  .gu { color: $white-gu; font-weight: bold; }
+  .gs { font-weight: $gl-font-weight-bold; }
+  .gu { color: $white-gu; font-weight: $gl-font-weight-bold; }
   .gt { color: $white-gt; }
-  .kc { font-weight: bold; }
-  .kd { font-weight: bold; }
-  .kn { font-weight: bold; }
-  .kp { font-weight: bold; }
-  .kr { font-weight: bold; }
-  .kt { color: $white-kt; font-weight: bold; }
+  .kc { font-weight: $gl-font-weight-bold; }
+  .kd { font-weight: $gl-font-weight-bold; }
+  .kn { font-weight: $gl-font-weight-bold; }
+  .kp { font-weight: $gl-font-weight-bold; }
+  .kr { font-weight: $gl-font-weight-bold; }
+  .kt { color: $white-kt; font-weight: $gl-font-weight-bold; }
   .m { color: $white-m; }
   .s { color: $white-s; }
   .n { color: $white-n; }
   .na { color: $white-na; }
   .nb { color: $white-nb; }
-  .nc { color: $white-nc; font-weight: bold; }
+  .nc { color: $white-nc; font-weight: $gl-font-weight-bold; }
   .no { color: $white-no; }
   .ni { color: $white-ni; }
-  .ne { color: $white-ne; font-weight: bold; }
-  .nf { color: $white-nf; font-weight: bold; }
+  .ne { color: $white-ne; font-weight: $gl-font-weight-bold; }
+  .nf { color: $white-nf; font-weight: $gl-font-weight-bold; }
   .nn { color: $white-nn; }
   .nt { color: $white-nt; }
   .nv { color: $white-nv; }
-  .ow { font-weight: bold; }
+  .ow { font-weight: $gl-font-weight-bold; }
   .w { color: $white-w; }
   .mf { color: $white-mf; }
   .mh { color: $white-mh; }

app/assets/stylesheets/mailers/highlighted_diff_email.scss

@@ -152,12 +152,12 @@ span.highlight_word {
 .hll { background-color: $highlighted-hll-bg; }
 .c { color: $highlighted-c; font-style: italic; }
 .err { color: $highlighted-err; background-color: $highlighted-err-bg; }
-.k { font-weight: bold; }
-.o { font-weight: bold; }
+.k { font-weight: $gl-font-weight-bold; }
+.o { font-weight: $gl-font-weight-bold; }
 .cm { color: $highlighted-cm; font-style: italic; }
-.cp { color: $highlighted-cp; font-weight: bold; }
+.cp { color: $highlighted-cp; font-weight: $gl-font-weight-bold; }
 .c1 { color: $highlighted-c1; font-style: italic; }
-.cs { color: $highlighted-cs; font-weight: bold; font-style: italic; }
+.cs { color: $highlighted-cs; font-weight: $gl-font-weight-bold; font-style: italic; }
 .gd { color: $highlighted-gd; background-color: $highlighted-gd-bg; }
 .gd .x { color: $highlighted-gd; background-color: $highlighted-gd-x-bg; }
 .ge { font-style: italic; }
@@ -167,29 +167,29 @@ span.highlight_word {
 .gi .x { color: $highlighted-gi; background-color: $highlighted-gi-x-bg; }
 .go { color: $highlighted-go; }
 .gp { color: $highlighted-gp; }
-.gs { font-weight: bold; }
-.gu { color: $highlighted-gu; font-weight: bold; }
+.gs { font-weight: $gl-font-weight-bold; }
+.gu { color: $highlighted-gu; font-weight: $gl-font-weight-bold; }
 .gt { color: $highlighted-gt; }
-.kc { font-weight: bold; }
-.kd { font-weight: bold; }
-.kn { font-weight: bold; }
-.kp { font-weight: bold; }
-.kr { font-weight: bold; }
-.kt { color: $highlighted-kt; font-weight: bold; }
+.kc { font-weight: $gl-font-weight-bold; }
+.kd { font-weight: $gl-font-weight-bold; }
+.kn { font-weight: $gl-font-weight-bold; }
+.kp { font-weight: $gl-font-weight-bold; }
+.kr { font-weight: $gl-font-weight-bold; }
+.kt { color: $highlighted-kt; font-weight: $gl-font-weight-bold; }
 .m { color: $highlighted-m; }
 .s { color: $highlighted-s; }
 .n { color: $highlighted-n; }
 .na { color: $highlighted-na; }
 .nb { color: $highlighted-nb; }
-.nc { color: $highlighted-nc; font-weight: bold; }
+.nc { color: $highlighted-nc; font-weight: $gl-font-weight-bold; }
 .no { color: $highlighted-no; }
 .ni { color: $highlighted-ni; }
-.ne { color: $highlighted-ne; font-weight: bold; }
-.nf { color: $highlighted-nf; font-weight: bold; }
+.ne { color: $highlighted-ne; font-weight: $gl-font-weight-bold; }
+.nf { color: $highlighted-nf; font-weight: $gl-font-weight-bold; }
 .nn { color: $highlighted-nn; }
 .nt { color: $highlighted-nt; }
 .nv { color: $highlighted-nv; }
-.ow { font-weight: bold; }
+.ow { font-weight: $gl-font-weight-bold; }
 .w { color: $highlighted-w; }
 .mf { color: $highlighted-mf; }
 .mh { color: $highlighted-mh; }

app/assets/stylesheets/new_nav.scss

@@ -134,7 +134,7 @@ header.navbar-gitlab-new {
       li {
         .badge {
           box-shadow: none;
-          font-weight: 600;
+          font-weight: $gl-font-weight-bold;
         }
       }
     }
@@ -193,7 +193,7 @@ header.navbar-gitlab-new {
     &.active > a {
       box-shadow: inset 0 -3px 0 $indigo-500;
       color: $white-light;
-      font-weight: 700;
+      font-weight: $gl-font-weight-bold;
     }
 
     > a {
@@ -371,7 +371,7 @@ header.navbar-gitlab-new {
 
     > a {
       &:last-of-type:not(:first-child) {
-        font-weight: 600;
+        font-weight: $gl-font-weight-bold;
       }
     }
   }
@@ -411,7 +411,7 @@ header.navbar-gitlab-new {
 .breadcrumbs-sub-title {
   margin: 2px 0;
   font-size: 16px;
-  font-weight: normal;
+  font-weight: $gl-font-weight-normal;
   line-height: 1;
 
   ul {
@@ -430,7 +430,7 @@ header.navbar-gitlab-new {
     }
 
     &:last-child a {
-      font-weight: 600;
+      font-weight: $gl-font-weight-bold;
     }
   }
 

app/assets/stylesheets/new_sidebar.scss

@@ -46,7 +46,7 @@ $new-sidebar-collapsed-width: 50px;
 
   a {
     border-bottom: 1px solid $border-color;
-    font-weight: 600;
+    font-weight: $gl-font-weight-bold;
     display: flex;
     align-items: center;
     padding: 10px 16px 10px 10px;
@@ -70,8 +70,7 @@ $new-sidebar-collapsed-width: 50px;
     background-color: $white-light;
   }
 
-  .project-title,
-  .group-title {
+  .sidebar-context-title {
     overflow: hidden;
     text-overflow: ellipsis;
   }
@@ -109,7 +108,7 @@ $new-sidebar-collapsed-width: 50px;
     }
 
     .badge,
-    .project-title {
+    .sidebar-context-title {
       display: none;
     }
 
@@ -160,7 +159,7 @@ $new-sidebar-collapsed-width: 50px;
 
     > a {
       color: $active-color;
-      font-weight: 700;
+      font-weight: $gl-font-weight-bold;
     }
 
     svg {
@@ -308,7 +307,7 @@ $new-sidebar-collapsed-width: 50px;
 
       .badge {
         color: $active-color;
-        font-weight: 600;
+        font-weight: $gl-font-weight-bold;
       }
 
       .sidebar-sub-level-items {
@@ -474,6 +473,6 @@ $new-sidebar-collapsed-width: 50px;
   border-bottom-color: $active-border;
 
   .badge {
-    font-weight: 600;
+    font-weight: $gl-font-weight-bold;
   }
 }

app/assets/stylesheets/pages/boards.scss

@@ -471,7 +471,7 @@
     padding-right: 35px;
 
     > strong {
-      font-weight: 600;
+      font-weight: $gl-font-weight-bold;
     }
   }
 }

app/assets/stylesheets/pages/builds.scss

@@ -277,7 +277,7 @@
   }
 
   .trigger-build-variable {
-    font-weight: normal;
+    font-weight: $gl-font-weight-normal;
     color: $code-color;
   }
 
@@ -378,7 +378,7 @@
       }
 
       &.active {
-        font-weight: bold;
+        font-weight: $gl-font-weight-bold;
 
         .fa-arrow-right {
           display: block;

app/assets/stylesheets/pages/ci_projects.scss

@@ -22,7 +22,7 @@
       vertical-align: middle !important;
 
       a {
-        font-weight: normal;
+        font-weight: $gl-font-weight-normal;
         text-decoration: none;
       }
     }

app/assets/stylesheets/pages/commits.scss

@@ -213,7 +213,7 @@
 
   .commit-sha {
     font-size: 14px;
-    font-weight: 600;
+    font-weight: $gl-font-weight-bold;
   }
 }
 
@@ -286,6 +286,9 @@
 
 
 .gpg-status-box {
+  padding: 2px 10px;
+  margin-right: $gl-padding;
+
   &:empty {
     display: none;
   }
@@ -303,7 +306,7 @@
 .gpg-popover-status {
   display: flex;
   align-items: center;
-  font-weight: normal;
+  font-weight: $gl-font-weight-normal;
   line-height: 1.5;
 }
 
@@ -314,7 +317,6 @@
   &.valid {
     svg {
       border: 1px solid $brand-success;
-
       fill: $brand-success;
     }
   }
@@ -322,7 +324,6 @@
   &.invalid {
     svg {
       border: 1px solid $common-gray-light;
-
       fill: $common-gray-light;
     }
   }

app/assets/stylesheets/pages/convdev_index.scss

@@ -23,7 +23,7 @@ $space-between-cards: 8px;
     line-height: 1;
     color: $gl-text-color-secondary;
     margin-left: 8px;
-    font-weight: 500;
+    font-weight: $gl-font-weight-normal;
 
     a {
       font-size: 18px;
@@ -139,7 +139,7 @@ $space-between-cards: 8px;
 .card-score-value {
   font-size: 16px;
   color: $gl-text-color;
-  font-weight: 500;
+  font-weight: $gl-font-weight-normal;
 }
 
 .card-score-big {
@@ -147,7 +147,7 @@ $space-between-cards: 8px;
   border-bottom: 1px solid $border-color;
   font-size: 22px;
   padding: 10px 0;
-  font-weight: 500;
+  font-weight: $gl-font-weight-normal;
 }
 
 .card-buttons {

app/assets/stylesheets/pages/cycle_analytics.scss

@@ -68,7 +68,7 @@
     }
 
     .stage-name {
-      font-weight: 600;
+      font-weight: $gl-font-weight-bold;
     }
   }
 
@@ -93,7 +93,7 @@
       .header {
         font-size: 30px;
         line-height: 38px;
-        font-weight: normal;
+        font-weight: $gl-font-weight-normal;
         margin: 0;
       }
 
@@ -130,7 +130,7 @@
         &.title {
           line-height: 19px;
           font-size: 14px;
-          font-weight: 600;
+          font-weight: $gl-font-weight-bold;
           color: $gl-text-color;
         }
 
@@ -211,7 +211,7 @@
         box-shadow: inset 2px 0 0 0 $active-item-blue;
 
         .stage-name {
-          font-weight: 600;
+          font-weight: $gl-font-weight-bold;
         }
       }
 
@@ -404,7 +404,7 @@
         color: $gl-link-color;
         line-height: 1.3;
         vertical-align: top;
-        font-weight: normal;
+        font-weight: $gl-font-weight-normal;
       }
 
       .fa {

app/assets/stylesheets/pages/diff.scss

@@ -40,7 +40,7 @@
       // "Changes suppressed. Click to show." link
       .show-suppressed-diff {
         font-size: 110%;
-        font-weight: bold;
+        font-weight: $gl-font-weight-bold;
       }
     }
 
@@ -104,7 +104,7 @@
       a {
         float: left;
         width: 35px;
-        font-weight: normal;
+        font-weight: $gl-font-weight-normal;
 
         &[disabled] {
           cursor: default;
@@ -395,7 +395,7 @@
   background-color: transparent;
   border: 0;
   color: $gl-link-color;
-  font-weight: 600;
+  font-weight: $gl-font-weight-bold;
 
   &:hover,
   &:focus {

app/assets/stylesheets/pages/editor.scss

@@ -204,6 +204,8 @@
   .gitlab-ci-yml-selector,
   .dockerfile-selector,
   .template-type-selector {
+    @include new-style-dropdown;
+
     display: inline-block;
     vertical-align: top;
     font-family: $regular_font;

app/assets/stylesheets/pages/environments.scss

@@ -6,7 +6,7 @@
 }
 
 .environments-folder-name {
-  font-weight: normal;
+  font-weight: $gl-font-weight-normal;
   padding-top: 20px;
 }
 
@@ -246,13 +246,13 @@
   }
 
   .text-metric-bold {
-    font-weight: 600;
+    font-weight: $gl-font-weight-bold;
   }
 
   .label-axis-text,
   .text-metric-usage {
     fill: $black;
-    font-weight: 500;
+    font-weight: $gl-font-weight-normal;
     font-size: 12px;
   }
 

app/assets/stylesheets/pages/events.scss

@@ -57,7 +57,7 @@
 
   .event-title {
     @include str-truncated(calc(100% - 174px));
-    font-weight: 600;
+    font-weight: $gl-font-weight-bold;
     color: $list-text-color;
   }
 

app/assets/stylesheets/pages/issuable.scss

@@ -271,7 +271,7 @@
     }
 
     .light {
-      font-weight: normal;
+      font-weight: $gl-font-weight-normal;
     }
 
     .no-value {
@@ -306,7 +306,7 @@
       display: block;
       margin-top: 4px;
       font-size: 13px;
-      font-weight: normal;
+      font-weight: $gl-font-weight-normal;
     }
 
     .hide-expanded {
@@ -689,7 +689,7 @@
     .issuable-info,
     .task-status,
     .issuable-updated-at {
-      font-weight: normal;
+      font-weight: $gl-font-weight-normal;
       color: $gl-text-color-secondary;
 
       a {

app/assets/stylesheets/pages/issues.scss

@@ -75,7 +75,7 @@ ul.related-merge-requests > li {
 .merge-requests-title,
 .related-branches-title {
   font-size: 16px;
-  font-weight: 600;
+  font-weight: $gl-font-weight-bold;
 }
 
 .merge-request-id {
@@ -244,7 +244,7 @@ ul.related-merge-requests > li {
 
       strong {
         display: block;
-        font-weight: 600;
+        font-weight: $gl-font-weight-bold;
       }
     }
   }

app/assets/stylesheets/pages/login.scss

@@ -22,7 +22,7 @@
     }
 
     h1:first-child {
-      font-weight: normal;
+      font-weight: $gl-font-weight-normal;
       margin-bottom: 0.68em;
       margin-top: 0;
       font-size: 34px;
@@ -38,7 +38,7 @@
     }
 
     a {
-      font-weight: bold;
+      font-weight: $gl-font-weight-bold;
     }
   }
 
@@ -54,7 +54,7 @@
     padding: 15px;
 
     .login-heading h3 {
-      font-weight: 300;
+      font-weight: $gl-font-weight-normal;
       line-height: 1.5;
       margin: 0 0 10px;
     }
@@ -186,7 +186,7 @@
   }
 
   label {
-    font-weight: normal;
+    font-weight: $gl-font-weight-normal;
   }
 
   .submit-container {

app/assets/stylesheets/pages/members.scss

@@ -46,7 +46,7 @@
     }
 
     strong {
-      font-weight: 600;
+      font-weight: $gl-font-weight-bold;
     }
   }
 
@@ -96,6 +96,8 @@
 }
 
 .member-search-form {
+  @include new-style-dropdown;
+
   position: relative;
 
   @media (min-width: $screen-sm-min) {
@@ -221,7 +223,7 @@
   }
 
   .member {
-    font-weight: bold;
+    font-weight: $gl-font-weight-bold;
     overflow-wrap: break-word;
     word-break: break-all;
   }

app/assets/stylesheets/pages/merge_requests.scss

@@ -197,7 +197,7 @@
     @extend .ref-name;
 
     color: $gl-text-color;
-    font-weight: 600;
+    font-weight: $gl-font-weight-bold;
     overflow: hidden;
     word-break: break-all;
 
@@ -228,7 +228,7 @@
   .mr-widget-body {
     h4 {
       float: left;
-      font-weight: 600;
+      font-weight: $gl-font-weight-bold;
       font-size: 14px;
       line-height: inherit;
       margin-top: 0;
@@ -239,7 +239,7 @@
       }
 
       time {
-        font-weight: normal;
+        font-weight: $gl-font-weight-normal;
       }
     }
 
@@ -249,7 +249,7 @@
     }
 
     label {
-      font-weight: normal;
+      font-weight: $gl-font-weight-normal;
     }
 
     .spacing {
@@ -257,12 +257,12 @@
     }
 
     .bold {
-      font-weight: 600;
+      font-weight: $gl-font-weight-bold;
       color: $gl-gray-light;
     }
 
     .state-label {
-      font-weight: 600;
+      font-weight: $gl-font-weight-bold;
       padding-right: 10px;
     }
 
@@ -336,7 +336,7 @@
 
       .text {
         span {
-          font-weight: 600;
+          font-weight: $gl-font-weight-bold;
         }
 
         p {
@@ -489,6 +489,8 @@
 }
 
 .mr-source-target {
+  @include new-style-dropdown;
+
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
@@ -505,7 +507,7 @@
 .panel-new-merge-request {
   .panel-heading {
     padding: 5px 10px;
-    font-weight: 600;
+    font-weight: $gl-font-weight-bold;
     line-height: 25px;
   }
 

app/assets/stylesheets/pages/milestone.scss

@@ -7,7 +7,7 @@
     padding: 10px 16px;
 
     h4 {
-      font-weight: bold;
+      font-weight: $gl-font-weight-bold;
     }
 
     .progress {
@@ -81,7 +81,7 @@
   }
 
   .remaining-days strong {
-    font-weight: normal;
+    font-weight: $gl-font-weight-normal;
   }
 
   .milestone-stat {

app/assets/stylesheets/pages/note_form.scss

@@ -188,7 +188,7 @@
     .close {
       color: $white-light;
       opacity: 0.85;
-      font-weight: normal;
+      font-weight: $gl-font-weight-normal;
 
       &:hover {
         opacity: 1;

app/assets/stylesheets/pages/notes.scss

@@ -766,17 +766,25 @@ ul.notes {
   background-color: transparent;
   border: none;
   outline: 0;
+  transition: color $general-hover-transition-duration $general-hover-transition-curve;
 
   &.is-disabled {
     cursor: default;
   }
 
-  &:not(.is-disabled):hover,
+  &:not(.is-disabled) {
+    &:hover,
+    &:focus {
+      color: $gl-text-green;
+    }
+  }
+
   &.is-active {
     color: $gl-text-green;
 
-    svg {
-      fill: $gl-text-green;
+    &:hover,
+    &:focus {
+      color: $gl-text-green-hover;
     }
   }
 

app/assets/stylesheets/pages/notifications.scss

@@ -14,3 +14,7 @@
     font-size: 18px;
   }
 }
+
+.notification-form {
+  @include new-style-dropdown;
+}

app/assets/stylesheets/pages/pipeline_schedules.scss

@@ -12,7 +12,7 @@
 .interval-pattern-form-group {
   label {
     margin-right: 10px;
-    font-weight: normal;
+    font-weight: $gl-font-weight-normal;
 
     &[for='custom'] {
       margin-right: 0;

app/assets/stylesheets/pages/pipelines.scss

@@ -128,7 +128,7 @@
   .branch-commit {
 
     .ref-name {
-      font-weight: bold;
+      font-weight: $gl-font-weight-bold;
       max-width: 120px;
       overflow: hidden;
       display: inline-block;
@@ -272,7 +272,7 @@
 
     .build-name {
       float: right;
-      font-weight: 500;
+      font-weight: $gl-font-weight-normal;
     }
 
     .ci-status-icon-failed svg {
@@ -281,7 +281,7 @@
 
     .stage {
       color: $gl-text-color-secondary;
-      font-weight: 500;
+      font-weight: $gl-font-weight-normal;
       vertical-align: middle;
     }
   }
@@ -420,7 +420,7 @@
 
   .stage-name {
     margin: 0 0 15px 10px;
-    font-weight: bold;
+    font-weight: $gl-font-weight-bold;
     width: 176px;
     white-space: nowrap;
     overflow: hidden;
@@ -580,7 +580,7 @@
   vertical-align: bottom;
   display: inline-block;
   position: relative;
-  font-weight: normal;
+  font-weight: $gl-font-weight-normal;
 }
 
 @mixin mini-pipeline-graph-color($color-light, $color-main, $color-dark) {
@@ -724,7 +724,7 @@ button.mini-pipeline-graph-dropdown-toggle {
   .mini-pipeline-graph-dropdown-item {
     padding: 3px 7px 4px;
     clear: both;
-    font-weight: normal;
+    font-weight: $gl-font-weight-normal;
     line-height: 1.428571429;
     white-space: nowrap;
     margin: 0 5px;
@@ -927,3 +927,7 @@ button.mini-pipeline-graph-dropdown-toggle {
     }
   }
 }
+
+.pipelines-container .top-area .nav-controls > .btn:last-child {
+  float: none;
+}

app/assets/stylesheets/pages/profile.scss

@@ -83,7 +83,7 @@
   &::after {
     content: "\00B7"; // Middle Dot
     padding: 0 6px;
-    font-weight: bold;
+    font-weight: $gl-font-weight-bold;
   }
 
   &:last-child {
@@ -277,7 +277,7 @@ table.u2f-registrations {
 
 .oauth-application-show {
   .scope-name {
-    font-weight: 600;
+    font-weight: $gl-font-weight-bold;
   }
 
   .scopes-list {

app/assets/stylesheets/pages/projects.scss

@@ -2,7 +2,7 @@
   margin: -16px;
 
   .alert-link {
-    font-weight: normal;
+    font-weight: $gl-font-weight-normal;
   }
 }
 
@@ -114,7 +114,7 @@
     margin-top: 10px;
     margin-bottom: 10px;
     font-size: 24px;
-    font-weight: 400;
+    font-weight: $gl-font-weight-normal;
     line-height: 1;
     word-wrap: break-word;
 
@@ -259,7 +259,7 @@
       border-width: 1px;
       border-style: solid;
       font-size: 13px;
-      font-weight: 600;
+      font-weight: $gl-font-weight-bold;
       line-height: 13px;
       letter-spacing: .4px;
       padding: 6px 14px;
@@ -309,7 +309,7 @@
     }
 
     .option-title {
-      font-weight: normal;
+      font-weight: $gl-font-weight-normal;
       display: inline-block;
       color: $gl-text-color;
     }
@@ -575,7 +575,7 @@ a.deploy-project-label {
       color: $gl-text-color-tertiary;
       transform: translateY(-50%);
       font-size: 12px;
-      font-weight: bold;
+      font-weight: $gl-font-weight-bold;
       line-height: 20px;
 
       // Mobile
@@ -826,7 +826,7 @@ pre.light-well {
 .new-protected-tag {
   label {
     margin-top: 6px;
-    font-weight: normal;
+    font-weight: $gl-font-weight-normal;
   }
 }
 
@@ -853,7 +853,7 @@ pre.light-well {
     }
 
     &.is-active {
-      font-weight: 600;
+      font-weight: $gl-font-weight-bold;
     }
   }
 
@@ -952,7 +952,7 @@ pre.light-well {
 
     &::before {
       font-family: FontAwesome;
-      font-weight: normal;
+      font-weight: $gl-font-weight-normal;
       font-style: normal;
     }
   }

app/assets/stylesheets/pages/repo.scss

@@ -99,6 +99,30 @@
     .blob-viewer-container {
       flex: 1;
       overflow: auto;
+
+      > div,
+      .file-content {
+        display: flex;
+      }
+
+      > div,
+      .file-content,
+      .blob-viewer,
+      .line-number,
+      .blob-content,
+      .code {
+        min-height: 100%;
+        width: 100%;
+      }
+
+      .line-numbers {
+        min-width: 44px;
+      }
+
+      .blob-content {
+        flex: 1;
+        overflow-x: auto;
+      }
     }
 
     #tabs {
@@ -182,7 +206,6 @@
       padding: 5px 10px;
       position: relative;
       border-top: 1px solid $white-normal;
-      margin-top: -5px;
     }
 
     #binary-viewer {
@@ -267,7 +290,7 @@
           display: inline-block;
           font-size: 10px;
           text-transform: uppercase;
-          font-weight: bold;
+          font-weight: $gl-font-weight-bold;
           color: $gray-darkest;
           white-space: nowrap;
           overflow: hidden;

app/assets/stylesheets/pages/runners.scss

@@ -30,7 +30,7 @@
   }
 
   h4 {
-    font-weight: normal;
+    font-weight: $gl-font-weight-normal;
   }
 }
 

app/assets/stylesheets/pages/search.scss

@@ -94,7 +94,7 @@ input[type="checkbox"]:hover {
 
       &::before {
         font-family: FontAwesome;
-        font-weight: normal;
+        font-weight: $gl-font-weight-normal;
         font-style: normal;
       }
     }

app/assets/stylesheets/pages/sherlock.scss

@@ -29,5 +29,5 @@ table .sherlock-code {
 
 .sherlock-line-samples-table .slow {
   color: $red-500;
-  font-weight: bold;
+  font-weight: $gl-font-weight-bold;
 }

app/assets/stylesheets/pages/todos.scss

@@ -108,14 +108,14 @@
     margin: 0;
     float: none;
     display: inline-block;
-    font-weight: normal;
+    font-weight: $gl-font-weight-normal;
     padding: 0 5px;
     line-height: inherit;
     font-size: 14px;
   }
 
   .action-name {
-    font-weight: normal;
+    font-weight: $gl-font-weight-normal;
   }
 
   .todo-body {
@@ -262,6 +262,10 @@
   }
 
   a {
-    font-weight: 600;
+    font-weight: $gl-font-weight-bold;
   }
 }
+
+.todos-filters {
+  @include new-style-dropdown;
+}

app/assets/stylesheets/pages/tree.scss

@@ -231,7 +231,7 @@
 }
 
 .upload-link {
-  font-weight: normal;
+  font-weight: $gl-font-weight-normal;
   color: $md-link-color;
 }
 

app/assets/stylesheets/pages/ui_dev_kit.scss

 .gitlab-ui-dev-kit {
   > h2 {
     margin: 35px 0 20px;
-    font-weight: bold;
+    font-weight: $gl-font-weight-bold;
   }
 
   .example {

app/assets/stylesheets/pages/wiki.scss

@@ -37,7 +37,7 @@
   }
 
   .light {
-    font-weight: normal;
+    font-weight: $gl-font-weight-normal;
     color: $gl-text-color-secondary;
   }
 
@@ -89,7 +89,7 @@
 
   h3 {
     font-size: 19px;
-    font-weight: normal;
+    font-weight: $gl-font-weight-normal;
     margin: $gl-padding 0;
   }
 }

app/assets/stylesheets/pages/xterm.scss

@@ -281,7 +281,7 @@
   $xterm-fg-255: #eee;
 
   .term-bold {
-    font-weight: bold;
+    font-weight: $gl-font-weight-bold;
   }
 
   .term-italic {

app/assets/stylesheets/print.scss

@@ -17,7 +17,7 @@
 
 .wiki h3 {
   font-size: 18px;
-  font-weight: bold;
+  font-weight: 600;
 }
 
 header,

app/controllers/admin/projects_controller.rb

@@ -3,9 +3,9 @@ class Admin::ProjectsController < Admin::ApplicationController
   before_action :group, only: [:show, :transfer]
 
   def index
-    finder    = Admin::ProjectsFinder.new(params: params, current_user: current_user)
-    @projects = finder.execute
-    @sort     = finder.sort
+    params[:sort] ||= 'latest_activity_desc'
+    @sort = params[:sort]
+    @projects = Admin::ProjectsFinder.new(params: params, current_user: current_user).execute
 
     respond_to do |format|
       format.html

app/controllers/autocomplete_controller.rb

 class AutocompleteController < ApplicationController
-  skip_before_action :authenticate_user!, only: [:users]
+  AWARD_EMOJI_MAX = 100
+
+  skip_before_action :authenticate_user!, only: [:users, :award_emojis]
   before_action :load_project, only: [:users]
   before_action :find_users, only: [:users]
 
@@ -48,6 +50,20 @@ class AutocompleteController < ApplicationController
     render json: projects.to_json(only: [:id, :name_with_namespace], methods: :name_with_namespace)
   end
 
+  def award_emojis
+    emoji_with_count = AwardEmoji
+      .limit(AWARD_EMOJI_MAX)
+      .where(user: current_user)
+      .group(:name)
+      .order(count: :desc, name: :asc)
+      .count
+
+    # Transform from hash to array to guarantee json order
+    # e.g. { 'thumbsup' => 2, 'thumbsdown' = 1 }
+    #   => [{ name: 'thumbsup' }, { name: 'thumbsdown' }]
+    render json: emoji_with_count.map { |k, v| { name: k } }
+  end
+
   private
 
   def find_users

app/controllers/concerns/issuable_collections.rb

@@ -15,7 +15,17 @@ module IssuableCollections
   end
 
   def merge_requests_collection
-    merge_requests_finder.execute.preload(:source_project, :target_project, :author, :assignee, :labels, :milestone, :head_pipeline, target_project: :namespace, merge_request_diff: :merge_request_diff_commits)
+    merge_requests_finder.execute.preload(
+      :source_project,
+      :target_project,
+      :author,
+      :assignee,
+      :labels,
+      :milestone,
+      head_pipeline: :project,
+      target_project: :namespace,
+      merge_request_diff: :merge_request_diff_commits
+    )
   end
 
   def issues_finder